Agregar Template Material Design en un Proyecto Java/Jakarta Server Faces con jmoordbjsf

Con la continuación del post anterior mostrare como crear un template que podemos usar en nuestras aplicaciones Java / Jarkarta Server Faces basado en Material Design.

En el proyecto creado previamente , debemos crear una carpeta layout dentro de WEB-INF, en esta carpeta creamos las paginas .xhtml que componen nuestro layout. (template.xhtml, top.xhtml, menu.xhtml, footer.xhtml)

Hay varios proyectos Web muy utilites que pueden ser de gran ayuda a implementar Material Desing,

Web Materialize (https://github.com/thomas-schuster/web-materialize )creado por Thomas Schuster.. Utiliza Primefaces con Materializze
Materialized (https://github.com/cleitonferreira/Materialized) creado por Cleiton Ferreira hace unos años, muestra un proyecto Java Server Faces muy estandarizado.

Nosotros utilizaremos jmoordbjsf como se explico en la publicación anterior Material Design en un Proyecto Java/Jakarta Server Faces con jmoordbjsf

En la primera sección mencionara la parte teorica para la creación de las plantillas Material Desgin y en la siguiente parte mostrare el codigo para las páginas:

SECCIÓN TEÓRICA:

Footer.xhtml

Vamos a crear la pagina que usaremos como footer la denominaremos con el nombre footer.xhtml, si consultamos el proyecto https://materializecss.com/footer.html, encontramos un ejemplo de uso

su uso es muy sencillo

Describire algunos componentes:

Para establecer el contenedor div como un footer usamos

Para estableceer el contenedor div como un footer copyright usamos

El div contenedor principal mediante

Tendriamos una pagina similiar a la siguiente (footer.xhtml)

Java/ Jakarta Server Faces ofrece un soporte para el uso de plantillas gracias a (Facelets)muy facil mediante <ui:composition> se define una pagina que puede ser usada como un componente de un templeate.

En la especificación de Jakarta Server Faces puedes encontar mayor información. https://jakarta.ee/specifications/faces/2.3/vdldoc/

Top.xhtml

Si observamos el ejemplo de Materialized (http://www.demo.geekslabs.com/materialize-v1.0/app-email.html#).

se creara la pagina top.xhtml utilizando NavBar https://materializecss.com/navbar.html

Agregaremos la clase Fixed navbar

Podemos observar varios proyectos como lo implementan por ejemplo:Material Design Admin Template, (https://codepen.io/sred9/pen/xLaXLv.html ), se usa la clase page-topbar

  <header id="header" class="page-topbar">

Esta plantilla y muchas similares ofrecen en el top.xhtml la opción para hacer cambios de idiomas para internaciolización.

En jmoordbjsf en conjunto con jmoordb, he implementado la clase JmoordbLanguages que facilita el soporte para multiples idiomas.

Como se observa en la siguiente figura usamos <p:menuButton en conjunto con jmoordbLanguages que contiene las imagenes y métodos para el soporte de idiomas.

Menu.xhtml

Si observamos el ejemplo de Materialized (http://www.demo.geekslabs.com/materialize-v1.0/app-email.html#). Se encuenta ubicado en la parte izquierda del template y adicional muestra el profile con un submenú.

al darle click despliega submenu para el profile del usuario logeado, similar a la siguiente imagen

Se debe crear ua página llamada menu.xhtml, que sera desplegado al lado izquierdo en el template revisamos el ejemplo en https://codepen.io/sred9/pen/xLaXLv.html, donde se observa

se utilizara <ul id="slide-out" class="side-nav fixed leftside-navigation"> entre otros css para definir las opciones de menu. Por lo que nosotros adaptamos el diseño para mostrar componentes Java/Jakarta Server Faces principalmente Primefaces y jmoordbjsf.

Usaremos <p;menuButton> para mostrar las opciones del profile del usuario logueado. Y las opciones de los menus. utilizamos <p:commandLink> asociado con una clase para manejar las navegaciones entre las paginas. No es requisito para tus proyectos.

Template.xhtml

Agregamos mediante <ui:include> las paginas top.xhtml, menu.xhtml, footer.xhtml.

Y agregamos de jmoordbsf los componentes:

<h:outputStylesheet library="css" name="personalized.css" />

los temas seleccione cualquiera de los disponibles en jmoordbjsf mediante

<jmoordbjsf:cssthemepinkdark4/>

y para agregar los javascript utilice el componente.

<jmoordbjsf:materialized-js />

Pagina Index.xhtml

Agregamos el template y los diferentes xmlns que usaremos en el proyecto.

<ui:composition template="/WEB-INF/layout/template.xhtml"

xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html"

xmlns:ui="http://xmlns.jcp.org/jsf/facelets"

xmlns:p="http://primefaces.org/ui"

xmlns:jmoordbjsf="http://jmoordbjsf.com/taglib">

luego agregas los demás componentes Java /Jakarta Server Faces para mostrar los elementos que consideres necesarios. En el proyecto creado por Cleiton Ferreira , hay una pagina de index muy interesante. Usted adaptela a sus requerimientos.

Cuando ejecutamos la aplicación desde NetBeans IDE o el IDE que utilices podemos ver el proyecto Java /Jakarta Server Faces con la implementación Material Design

Para cambiar el tema , dirigase a la pagina template.xhtml y coloque en comentarios

y decomente <jmoordbjsf:cssthemegreydarken1/> y el proyecto mostrara el nuevo tema

Todavia no se han implemantado todos los colores que define materializecss para los temas como puedes consultar en la pagina https://materializecss.com/color.html.

A modo de ejemplo asignamos un nombre usuario en la clase AccessController.java

SECCIÓN CÓDIGOS

En esta sección mostramos el proyecio y sus las paginas .xhtml

footer.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"

xmlns:ui="http://xmlns.jcp.org/jsf/facelets"

xmlns:p="http://primefaces.org/ui">

<span>

<p:outputLabel value="#{msg['application.footercopyright']}" styleClass="label-footer"/> <p:outputLabel value="#{msg['application.footertodosderechosreservados']}" styleClass="label-footer"/>

</span>

</div>

</footer>

</ui:composition>

menu.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html"

xmlns:f="http://xmlns.jcp.org/jsf/core"

xmlns:ui="http://xmlns.jcp.org/jsf/facelets"

xmlns:p="http://primefaces.org/ui"

xmlns:pe="http://primefaces.org/ui/extensions"

xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"

xmlns:jsf="http://xmlns.jcp.org/jsf"

xmlns:b="http://bootsfaces.net/ui">

<h:graphicImage library="jmoordbjsf" name="iconos/hombre48.png"

styleClass="circle responsive-img valign profile-image" alt="" />

</div>

<p:menuButton value="#{accessController.name}" class="dropdown-content" styleClass="pmenuButton">

<p:menuitem value="" action="#{accessController.logout()}" update="grwoltemplate" >

<i class="material-icons">face</i>#{app['menubutton.profile']}

</p:menuitem>

<p:menuitem value="" action="#{accessController.logout()}" update="grwoltemplate" >

<i class="material-icons">settings</i>#{app['menubutton.settings']}

</p:menuitem>

<p:menuitem value="" action="#{accessController.logout()}" ajax="false" >

<i class="material-icons">live_help</i> #{app['menubutton.help']}

</p:menuitem>

<p:separator />

<p:menuitem value="" action="#{accessController.logout()}" >

<i class="material-icons">lock</i>#{app['menubutton.exit']}

</p:menuitem>

</p:menuButton>

</div>

</li>

<li class="bold"><a href="index.xhtml"

class="waves-effect waves-cyan"> <i class="material-icons">dashboard</i>

Dashboard</a></li>

<h:panelGroup >

<li class="bold"><a

class="collapsible-header waves-effect waves-cyan">

<i class="material-icons">view_carousel</i> <p:outputLabel value="#{msg['menubar.nosql']}"/></a>

<p:commandLink value="#{msg['menu.jmoordbcloudnative']}" action="#{navigatorController.go('/pages/nosql/jmoordbcodecnative.xhtml')}">

</p:commandLink>

<p:commandLink value="#{msg['menu.mongodbdriver']}" action="#{navigatorController.go('/pages/nosql/mongodbdriver.xhtml')}" >

<i class="material-icons">assignment</i>

</p:commandLink>

<p:commandLink value="#{msg['menu.jmoordbcore']}" action="#{navigatorController.go('/pages/nosql/jmoordbcorexhtml')}">

<i class="material-icons">event_note</i>

</p:commandLink>

<p:commandLink value="#{msg['menu.jmoordb']}" action="#{navigatorController.go('/pages/nosql/jmoordb.xhtml')}">

<i class="material-icons">event_note</i>

</p:commandLink>

<p:commandLink value="#{msg['menu.jakartanossql']}" action="#{navigatorController.go('/pages/nosql/jakartanosql.xhtml')}">

<i class="material-icons">event_note</i>

</p:commandLink>

</div></li>

</ul>

</li>

</h:panelGroup>

</ul>

<a href="#" data-activates="slide-out"

class="sidebar-collapse btn-floating btn-medium waves-effect waves-light hide-on-large-only cyan"><i

class="mdi-navigation-menu"></i></a>

</aside>

</ui:composition>

template.xhtml

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html"

xmlns:f="http://xmlns.jcp.org/jsf/core"

xmlns:ui="http://xmlns.jcp.org/jsf/facelets"

xmlns:p="http://primefaces.org/ui"

xmlns:jmoordbjsf="http://jmoordbjsf.com/taglib">

<h:head>

<title><ui:insert name="titulo">JmoordbCoreWeb</ui:insert></title>

<jmoordbjsf:materialized-css />

<f:facet name="first">

<f:view locale="#{jmoordbLanguajes.locale !=null?jmoordbLanguajes.locale:'es'}"></f:view>

<f:loadBundle basename="com.properties.messages" var="msg" />

<f:loadBundle basename="com.jmoordbutils.properties.application" var="app" />

</f:facet>

<h:outputStylesheet library="css" name="personalized.css" />

</h:head>

<h:body id="bodytemplate" >

<f:view contentType="text/html">

-<jmoordbjsf:cssthemepinkdark4/>

<p:growl id="grwoltemplate"/>

<ui:include src="/WEB-INF/layout/top.xhtml" />

<h:form id="formtemplatemenu">

<ui:include src="/WEB-INF/layout/menu.xhtml" />

</h:form>

<ui:insert name="contenido" />

</div>

</div>

<ui:include src="/WEB-INF/layout/footer.xhtml" />

</footer>

<jmoordbjsf:materialized-js />

</f:view>

</h:body>

</html>

top.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html"

xmlns:ui="http://xmlns.jcp.org/jsf/facelets"

xmlns:p="http://primefaces.org/ui">

<h:graphicImage library="img" name="logo.png" alt="materialize logo" />

</a>

</h1>

</li>

</ul>

<i class="material-icons">search</i>

<h:form id="formtopsearch">

<p:inputText class="header-search-input z-depth-2" placeholder="#{app['top.search']}" />

</h:form>

</div>

<h:form id="formtop" >

<h:graphicImage library="jmoordbjsf" name="#{jmoordbLanguages.icono}" />

<p:menuButton value="" class="dropdown-content" styleClass="pmenuButton">

<p:menuitem value="#{app['languague.portugues']}" action="#{jmoordbLanguages.portugueseAction}"

update="grwoltemplate, bodytemplate" >

<h:graphicImage library="jmoordbjsf" name="banderas/brasil.png" />

<p:outputLabel value="#{app['languague.portugues']}"/>

</span>

</p:menuitem>

<p:menuitem value="" action="#{jmoordbLanguages.englishAction}" update="grwoltemplate, bodytemplate" >

<h:graphicImage library="jmoordbjsf" name="banderas/estadosunidos.png" />

<p:outputLabel value="#{app['languague.ingles']}" />

</span>

</p:menuitem>

<p:menuitem value="" action="#{jmoordbLanguages.spanishSpainAction}" update="grwoltemplate, bodytemplate" >

<h:graphicImage library="jmoordbjsf" name="banderas/espana.png" />

<p:outputLabel value="#{app['languague.spanishSpain']}" />

</span>

</p:menuitem>

<p:separator />

<p:menuitem action="#{jmoordbLanguages.spanishAction}" update="grwoltemplate, bodytemplate">

<h:graphicImage library="jmoordbjsf" name="banderas/panama.png" />

<p:outputLabel value="#{app['languague.spanish']}" />

</span>

</p:menuitem>

<p:menuitem action="#{jmoordbLanguages.francesAction}" update="grwoltemplate, bodytemplate">

<h:graphicImage library="jmoordbjsf" name="banderas/francia.png" />

<span class="language-select"><p:outputLabel

value="#{app['languague.frances']}" /></span>

</p:menuitem>

<p:menuitem action="#{jmoordbLanguages.alemaniaAction}" update="grwoltemplate, bodytemplate">

<h:graphicImage library="jmoordbjsf" name="banderas/alemania.png" />

</p:menuitem>

</p:menuButton>

</h:form>

</ul>

</div>

</nav>

</div>

</header>

</ui:composition>

index.xhtml

<!DOCTYPE html>

<ui:composition template="/WEB-INF/layout/template.xhtml"

xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html"

xmlns:ui="http://xmlns.jcp.org/jsf/facelets"

xmlns:p="http://primefaces.org/ui"

xmlns:jmoordbjsf="http://jmoordbjsf.com/taglib">

<ui:define name="titulo">Jmoordbcoreweb</ui:define>

<ui:define name="contenido">

<p:messages closable="true" >

<p:autoUpdate />

</p:messages>

<p:growl />

<p:outputLabel value="#{msg['application.welcome']}" styleClass="label-welcome"/>

</p>

<div >

<p:chart type="line" model="#{chartView.lineModel1}" />

</div>

<h:form id="form" prependId="false" >

class="btn-floating activator btn-move-up waves-effect waves-light darken-2 right">

</a>

<p:inputText value="#{accessController.name}" placeholder="Name"/>

<p:outputLabel value="Name"/>

</div>

</form>

</div>

</h:form>

</div>

</section>

<jmoordbjsf:materialized-js />

</ui:define>

</ui:composition>

En las siguientes publicaciones mostrare su uso con jmoordb, jmoordcore, MongoDb Driver, Jakarta NoSQL.

Cambiando el estado de un checkbox

Cambiando el Estado de un CheckBox Algunas veces deseamos controlar el estado de un checkbox o cambiarlo segùn determinadas condiciones. Pasos: 1. Creamos un proyecto Web. 2. En el diseñador agregamos un checkbox y dos botones. * Dar click derecho en el checkbox y luego seleccionar Add Binding Attribute, para agregar los atributos al checkbox, de manera que los podamos usar en nuestro código. Generando automáticamente private Checkbox checkbox1 = new Checkbox(); public Checkbox getCheckbox1() { return checkbox1; } public void setCheckbox1(Checkbox c) { this.checkbox1 = c; } 3.Damos click derecho en el botón Habilitar, y seleccionamos Edit Action Event Handler. A continuación, agregamos el código: this.checkbox1.setSelected(true);, el método setSelected con valor true, marca el checkbox como seleccionado, y un valor de false, quita la marca. public String button1_action() { // TODO: Process the action. Return value is a navigation // ...

AVBravo

Search This Blog