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 15 de Noviembre de 2018

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:

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>
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…

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%%
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>
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%%
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>


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