Skip to main content

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

 Hace unos años Google presento Material Design  como un sistema de diseño para construir aplicaciones de alta calidad para Moviles , Web.

Aqui puedes encontar la información https://material.io/design/introduction que sera muy util. Un proyecto muy interesante es https://materializecss.com/about.html . alli puedes ver los principios que ellos definen



En lo personal desde hacer muchos años considero a Java Server Faces/ Jakarta Faces como una excelente opción para la creación de aplicaciones Web en Java.
Y es Primefaces la implementación de referencia, con más de 100 componentes listos para usarse y con cero configuración.
En una evaluación de algunos templates, Materialized me parece muy interesante


puedes ver un poco de AdminBSB-Material Design 

Hace tiempo llevo desarrollando un framework para optimizar componentes Java Server Faces basados en dos grandes proyectos PrimeFaces y Bootfaces, con la idea de simplificar su uso con Jmoordb otro proyecto que utilizó para el manejo de bases datos NoSQL , especialmente MongoDB.

 

Lo interesante de crear un Framework es que dedicas muchas horas en su creación e inviertes gran cantidad de tiempo, que solo es apreciado por quienes tienen una experiencia similar. Para los usuarios finales solo ven la funcionalidad  sin adentrarse en mirar un poco en retrospectiva. En este sentido una gran amiga y compañera de trabajo que hace pocos meses falleció fue de esas personas que siempre creyó en estos proyectos. Fue la persona que siempre decía me gustaría ver como queda, y su fe en que esos frameworks podrían funcionar siempre se convirtio en una motivación. (Muchas gracias Elsa)

Asi que luego de muchos analisis de proyectos y de estandares me decidí a integrar Material Design con Java Server Faces. Primefaces ofrece muchos templates de alta calidad, este proyecto no trata de ser un reemplazo si no algo de tipo personal que puedes usar en tus aplicaciones de una manera simple.



Asumimos que contamos con un proyecto Web maven

Contamos con una pagina index.xhtml con dos botones de primefaces


al ejecutarla en el navegador genera dfos botones







Su uso es muy simple agrega las dependencias  a tu proyecto
 <dependency>
            <groupId>com.github.avbravo</groupId>
            <artifactId>jmoordbjsf</artifactId>
            <version>0.63</version>
        </dependency>

y el repository
   <repositories>
        <repository>
            <id>jitpack.io</id>
            <url>https://jitpack.io</url>
        </repository>
    </repositories>

Ahora en nuestra pagina index.xhtml podemos utilizar iconos mediante    <i class="material-icons">verified_user</i> y los demas componentes de materializecss 
  <div class="card-panel blue darken-2">
                
                         <div class="row">
                             <div class="col s12">
                                            <i class="material-icons">verified_user</i>
                             </div>
                             <div class="col s12">
                                    <p:commandButton value="Codec Native" action="codecnative" />
                             </div>
                             <div class="col s12">
                                   <p:commandButton value="MongoDB Driver" action="mongodbdriver" />
                             </div>
                         </div>
              
          
 
            </div>
           quedaria de la siguiente manera




si ejecutamos el proyecto, puede observar que cambia la vista


En los siguientres blogs mostrare como crear el template y como consumir microservicios en la interface Web.










Comments

Popular posts from this blog

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

Tutorial básico de aplicaciones Web con NetBeans parte 1

NetBeans ofrece un excelente soporte para el desarrollo de aplicaciones Web, en esta ocasión lo haremos utilizando el Framework Java Server Faces 2.0. En el Menu Seleccionamos Nuevo->Proyecto y luego en Categorias Java Web y en tipo de Proyectos Web  Application indicamos el nombre del proyecto Seleccinamos el servidor Web, usamos GlassFish ya que este soporta EJB3.0 y JSF 2.0 Framework Java Server Faces El IDE genera el esquelto del proyecto Web Pages   almacenamos las paginas .html, xhtml, jsf, los archivos de recursos, los scripts .js, imagenes Source Packages    Son las clases Java  Test Packages    Son las clases que usamos para los Test Libraries     Tenemos las bibliotecas de Java y GlassFish necesarias para ejecutar la aplicación Web. Test Libraries     Están las bibliotecas usadas para los test  Configuration Files    Archivos de configuración de la aplicación. Ejecutamos la aplicación  Esperamos que se inicie GlassFish y se cargue la aplicación Este se

Usando LazyDataModel con Jmoordb y Microprofile

 Usando LazyDataModel con Jmoordb y Microprofile Lazy es una característica muy interesante que nos permite mostrar solo unos registros en lugar de todos por ejemplo en un DataTable. Esto reduce el tiempo de espera y disminuye el consumo de recursos para desplegar los.  Un escenario puede ser donde tenemos 20000 registros y queremos mostrarlos en un datatable en la cual solo mostraremos 25 por pagina, no seria adecuado cargar los 20000 registros al mismo tiempo. Para ello podemos utilizar LazyDataModel. Para usarlo agregar un objeto LazyDataModel con los métodos set/get: private LazyDataModel<Colegio> lazyDataModelColegio; //set/get En el método init Instanciar el objeto lazyDataModelColegio y en el método load() haremos las implementaciones. El offset es el desplazamiento entre las paginas, sortBy tiene información sobre la ordenación y filterBy información sobre el filtro entre las columnas.  En nuestro caso usaremos la clase paginator de jmoordb para gestionar varias accion