Saltar al contenido principal
Version: 4.5.0

Navigation Bar

The navigation bar is used to add visual elements with logic functions in the top zone of application. This part is displayed in all application screens.

You can add info elements to show more info and info-button elements as buttons with actions. Also, you can put info-criteria elements inside info elements as criteria for show more info.

NavBar

Estructura Xml

The xml structure of navigation bar component is the following:

<tag type="div" id="main-navbar-collapse" style="collapse navbar-collapse main-navbar-collapse">
<tag type="div" style="right clearfix">
<tag type="ul" style="nav navbar-nav pull-right right-navbar-nav">
<info id="[id]" icon="[icon]" title="[info-title]">
... more info elements
<info id="[id]" icon="[icon]" title="[info-title]">
<info-criteria id="[id]" icon="[icon]" title="[info-criteria-title]" component="[component]" initial-load="[initial-load]"
target-action="[target-action]" session="module" style="[style]" info-style="[info-style]">
<dependency/>
</info-criteria>
... more info criteria elements
</info>
<info-button id="[id]" icon="[icon]" title="[button-title]">
<button-action type="[action-type]" />
... more button.action
</info-button>
... more info-button
</tag>
</tag>
</tag>

Nabvar structure

ElementoUsoVarias instanciasDescripción
infoOpcionalSiGraphical element to show information
info-buttonOpcionalSiNavbar button for execute task. Same as button element in Awe
info-criteriaOpcionalSiNavbar criteria to get input from the user and send it to the application server (business logic) . Same as criteria element in Awe

info attributes

AtributoUsoTipoDescripciónValores
idObligatorioStringInfo element identifier. Con fines de referencia
fieldOpcionalStringName of model attribute to get value of target-actionEx.: field="label" Get label attribute of target-action data result
títuloOpcionalStringInfo static text show when overNota: Puedes usar i18n archivos (locales)
labelOpcionalStringInfo text (outside the criterion)Nota: Puedes usar i18n archivos (locales)
styleOpcionalStringInfo CSS classes
dropdown-styleOpcionalStringInfo dropdown box CSS classes
iconoOpcionalStringIdentificador de iconoNota: Puede comprobar todos los iconos en FontAwesome
unidadOpcionalStringInfo unit. Use it with info icon to show a number as stacked style
sessionOpcionalStringSession variable to load the criterionSession variable identifier
valorOpcionalStringInfo default value
propertyOpcionalStringProperty variable to load the criterionProperty variable identifier
server-acciónOpcionalStringLlamada de acción del servidorVer lista de acciones del servidor
acción-objetivoOpcionalStringDestino para llamar al servidor

info-button attributes

AtributoUsoTipoDescripciónValores
títuloOpcionalStringStatic text show when over buttonNota: Puedes usar i18n archivos (locales)
info-styleOpcionalStringCss style of info-button container

Note: info-button element has other attributes as button element. You can see more info here.

info-criteria attributes

AtributoUsoTipoDescripciónValores
títuloOpcionalStringStatic text show when over criteriaNota: Puedes usar i18n archivos (locales)
info-styleOpcionalStringCss style of info-criteria containerEx.: info-style="form-group"

Note: info-criteria element has the same attributes as criteria element. You can see more info here.

Ejemplos

  • Navigation bar with some info elements and info button
Info-button
<tag type="div" id="main-navbar-collapse" style="collapse navbar-collapse main-navbar-collapse">
<tag type="div" style="right clearfix">
<tag type="ul" style="nav navbar-nav pull-right right-navbar-nav">
<info id="ButUsrAct" icon="user" field="Val" server-action="data" target-action="ConUsr"/>
<info-button id="ButLogOut" icon="sign-out" title="BUTTON_LOGOUT">
<button-action type="logout" />
</info-button>
</tag>
</tag>
</tag>
  • Navigation bar with one info with info-criteria elements
Info-criteria
<tag type="div" id="main-navbar-collapse" style="collapse navbar-collapse main-navbar-collapse">
<tag type="div" style="right clearfix">
<tag type="ul" style="nav navbar-nav pull-right right-navbar-nav">
<info id="ButUsrAct" icon="user" field="Val" server-action="data" target-action="ConUsr">
<info-criteria icon="image" title="PARAMETER_THEME" component="select" id="theme" initial-load="query"
target-action="ThmSelVal" session="theme" style="col-xs-12 no-label" info-style="form-group">
<dependency>
<dependency-element id="theme" />
<dependency-action type="server" server-action="maintain-silent" target-action="SesVarThm" silent="true" />
<dependency-action type="change-theme" target="theme" />
</dependency>
</info-criteria>
<info-criteria icon="language" title="PARAMETER_LANGUAGE" component="select" id="language" initial-load="enum"
target-action="Lan" session="language" style="col-xs-12 no-label" info-style="form-group">
<dependency>
<dependency-element id="language" />
<dependency-action type="server" server-action="maintain-silent" target-action="SesVarLan" silent="true" />
<dependency-action type="change-language" target="language" />
</dependency>
</info-criteria>
</info>
</tag>
</tag>
</tag>
  • Info with unit and dependencies
Info_unit
<info id="Dab" icon="database" unit="3" style="nav-icon-btn-success">
<dependency source-type="criteria-text" target-type="label" target-action="database" initial="true">
<dependency-element id="database"/>
</dependency>
</info>