Tópicos:  Marcas

Marca Menú y Panel

Las marcas de menú y panel permiten crear Formularios de ingreso de datos con una estructura de paneles accedidos por tabs.

Publicado: Martes 2 de octubre de 2018 por David García
Última modificación: Jueves 20 de agosto de 2020
Código de FID con menú y paneles:
Menúes
Submenúes
Paneles
Macros Generales
Macros Reservadas
Macro para galería de imágenes

Los FID de Prontus está conformados por dos grandes áreas, el menú y los paneles. Ambas partes pueden ser fácilmente identificables tanto en la interfaz gráfica como en su codificación.

Ejemplo de interfaz de FID, creado desde marcas de menú y panel:

subir
Código de FID con menú y paneles:
<!DOCTYPE html>
<html lang="es">
  <head>
    %%macro(_head.html)%%
  </head>
    %%macro(_open_body.html)%%
  %%menu%%
    %%item(Cabecera, body1)%%%%/item%%
    %%item(Adjuntos, body2)%%%%/item%%
    %%item(Cuerpo, body3)%%%%/item%%
    %%item(Fotos, body4)%%%%/item%%
    %%item(Galería de fotos, body5)%%%%/item%%
    %%item(Multimedia)%%
      %%subitem(Video1, body6)%%%%/subitem%%
      %%subitem(Video2, body7)%%%%/subitem%%
      %%subitem(Audio, body8)%%%%/subitem%%
    %%/item%%
  %%/menu%%
  <div class="main-fid" id="fid">
    %%macro(_titulo_principal.html)%%
      <div class="content">
        %%macro(_publicacion_directa.html)%%
          <div class="panel-group">
            %%panel(Cabecera, body1, noticia_cabecera.html)%%
            %%panel(Adjuntos, body2, common_adjuntos.html)%%
            %%panel(Cuerpo, body3, _vtxt.html)%%
            %%panel(Fotos, body4, noticia_fotos.html)%%
            %%panel(Galería de Fotos, body5, _galeria_prontus.html, 1:fotofija_galeria@@_low:65x65|2:fotofija_galeria@@_high:800x600)%%
            %%panel(Video 1, body6, _video_xcode.html, 1)%%
            %%panel(Video 2, body7, _video_xcode.html, 2)%%
            %%panel(Audio, body8, _audio.html, 1)%%
          </div>
      </div>
    </div>
    %%macro(_close_body.html)%%
</html>
subir
Menúes

En los FID existe un marca de apertura y de cierre que define la creación de los menúes, de esta manera:

%%menu%%
%%/menu%%

Entre el inicio y el cierre de %%menu%% debes ubicar las marcas que definirán los botones del menú, definidas como bloques %%item%%.

Ejemplo:

%%menu%%
  %%item(parametro_1, parametro_2)%%%%/item%%
%%/menu%%

Las marcas %%item%% contienen dos parámetros:

1) El primero le da el nombre al botón y título a la marca y se verá reflejado en el front del formulario.

2) El segundo parámetro le da un identificador a la pestaña para poder asociarla al panel que mostrará el contenido de dicho botón. Es importante tener en consideración que este nombre es único e irrepetible dentro de las marcas %%item%% y que puede llevar cualquier nombre, en el caso del ejemplo se utiliza la palabra “body” más un número entero, ejemplo: body1, body3, body10…

subir
Submenúes

Una característica al momento de crear los elementos de menú de un FID es que se simplifica la creación de submenúes, ampliando las propiedades de la marca %%item%%.

Este ejemplo te muestra cómo construir menúes con submenúes.

%%menu%%
  %%item(Multimedia)%%
    %%subitem(Video1, body6)%%%%/subitem%%
    %%subitem(Video2, body7)%%%%/subitem%%
    %%subitem(Audio, body8)%%%%/subitem%%
  %%/item%%
%%/menu%%
subir
Paneles

Los paneles muestran el contenido de cada pestaña. Estos se relacionan por medio de un parámetro que los identifica.

Las marcas %%panel%% de los paneles deben estar contenidas bajo la siguiente estructura:

<div class="main-fid" id="fid">
  %%macro(_titulo_principal.html)%%
 <div class="content">
   %%macro(_publicacion_directa.html)%%
   <div class="panel-group">
     %%panel(Cabecera, body1, noticia_cabecera.html)%%
   </div>
 </div>
</div>
subir
Macros Generales

La macros generales utilizan la marca %%panel%% y por lo general tiene 3 parámetros:

  1. El primero contiene el nombre del panel, que se ve reflejado también en la interfaz del FID.
  2. El segundo es el “id” o identificador, que debe ser el mismo que tiene el botón al que está asociado ese panel.
  3. Y el tercero contiene el nombre de la macro que almacena el contenido del panel.

Ejemplo:

%%asocfile_1(Archivo asociado 1)%%
<div class="form-group mar-bot25">
 <label class="monreg">Bajada</label>
 <input type="text" value="%%tit_descarga%%" size="5" name="tit_descarga" class="form-control">
</div>
%%/asocfile_1%%
subir
Macros Reservadas

Las macros reservadas utilizan la marca %%panel%% y estas pueden llegar a utilizar hasta 4 parámetros:

  1. El primero contiene el nombre del panel, que se ve reflejado también en la interfaz del FID.
  2. El segundo es el “id” o identificador, que debe ser el mismo que tiene el botón al que está asociado ese panel.
  3. Y el tercero contiene el nombre de la macro que almacena el contenido del panel.
  4. El cuarto parámetro corresponde a un dato que será requerido por la macro según su configuración. En algunas ocasiones puede ser un número entero o un texto.

Ejemplo:

<div class="main-fid" id="fid">
    %%macro(_titulo_principal.html)
    %%<div class="content">    
      %%macro(_publicacion_directa.html)%%
      <div class="panel-group">
        %%panel(Audio, body8, _audio.html, 1)%%
        %%panel(Video 1, body6, _video_xcode.html, 1)%%
        %%panel(Video 2, body7, _video_xcode.html, 2)%%
      </div>
    </div>
</div>

subir
Macro para galería de imágenes

Este caso especial sirve para implementar la carga de galerías de imágenes en un FID. Puedes aprender más en el artículo Galería de imágenes.

<div class="main-fid" id="fid">
  %%macro(_titulo_principal.html)%%
  <div class="content">    
    %%macro(_publicacion_directa.html)%%    
      <div class="panel-group">      
        %%panel(Galería de Fotos, body5, _galeria_prontus.html, 1:fotofija_galeria@@_low:65x65|2:fotofija_galeria@@_high:800x600)%%    
      </div>  
  </div>
</div>

Los parámetros de esta macro, en orden, son:

  • Nombre del panel
  • Atributo ID del panel
  • Macro a cargar
  • Parámetros a pasar a la macro
Tópicos:  Marcas