Crear composite distribuible con Maven

Crear composite distribuible con Maven

Crear el proyecto Maven

Indicamos el nombre del proyecto

al darle finalizar se crea el proyecto jmoordbjsf

Revisamos las propiedades del proyecto

Editar el archivo pom.xml

Agregar dependencias

• primefaces

• bootfaces

dependencies>
        <dependency>
            <groupId>org.primefaces</groupId>
            <artifactId>primefaces</artifactId>
            <version>6.2</version>
        </dependency>
          <dependency>
            <groupId>net.bootsfaces</groupId>
            <artifactId>bootsfaces</artifactId>
            <version>1.4.0</version>
        </dependency>
    </dependencies>

• Agregar la seccion build

<build>
    <finalName>${project.artifactId}</finalName> 
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.0</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <compilerArguments>
                        <endorseddirs>${endorsed.dir}</endorseddirs>
                    </compilerArguments>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-ejb-plugin</artifactId>
                <version>3.0.1</version>
                <configuration>
                    <ejbVersion>3.1</ejbVersion>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-dependency-plugin</artifactId>
                <version>3.1.1</version>
                <executions>
                    <execution>
                        <phase>validate</phase>
                        <goals>
                            <goal>copy</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${endorsed.dir}</outputDirectory>
                            <silent>true</silent>
                            <artifactItems>
                                <artifactItem>
                                    <groupId>javax</groupId>
                                    <artifactId>javaee-endorsed-api</artifactId>
                                    <version>7.0</version>
                                    <type>jar</type>
                                </artifactItem>
                            </artifactItems>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

Dependencias

En la pestaña Files de NetBeans

Dar clic derecho New--> Folder...

indicar resources/META-INF

Creamos los archivos xml:

• faces-config.xml

• jmoordbjsf.tablib.xml

faces-config.xml

<?xml version="1.0"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
            http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
        version="2.0">

    <!-- Empty config file to enable JSF annotation scanning -->

</faces-config>

jmoordbjsf.tablib.xml

• Indicamos el namespace

• library-name

<?xml version="1.0"?>
<facelet-taglib version="2.0"
        xmlns="http://java.sun.com/xml/ns/javaee"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facelettaglibrary_2_0.xsd">

    <namespace>http://jmoordbjsf.com/taglib</namespace>
    <composite-library-name>jmoordbjsf</composite-library-name>
</facelet-taglib>

Dentro de la carpeta META-INF

• creamos la carpeta resources/jmoordbjsf

indicamos los nombres de carpeta

En este directorio agregamos:

• composite

• imagenes

• css

• js

Creando el primer componente

• Creamos un componente selectOneMenu de bootfaces simplificando las opciones si/no.

• Ubicarse en la carpeta jmoordbjsf

• Clic derecho --> New -->Other

Categories: Java Server Faces

File Types: JSF Page

Nota: Si seleccionamos JSF Composite Component, no permitirá finalizar porque no es un proyecto web, por esta razon seleccionamos JSF Page.

File Name: yesno

se crea el archivo yesno.xhtml, sobre el que vamos a editar para agregar el composite.

Reemplazamos por el código

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:composite="http://java.sun.com/jsf/composite"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <composite:interface >

        <composite:attribute name="value" />

        <composite:attribute name="required"/>
        <composite:attribute name="rendered"/>
        <composite:attribute name="disabled" default="false"/>
        <composite:attribute name="id"/>
        <composite:attribute name="colMd" default="2"/>
        <composite:attribute name="labelColMd" default="2"/>

    </composite:interface>
    <composite:implementation>


        <b:selectOneMenu value="#{cc.attrs.value}"
                         disabled="#{cc.attrs.disabled}"
                         colMd="#{cc.attrs.colMd}" 
                         required="#{cc.attrs.required}" 
                         requiredMessage="#{app['title.sexo']} #{app['info.notnull']}"
                         labelColMd="#{cc.attrs.labelColMd}" >
            <f:selectItem itemLabel="#{app['button.yes']}" itemValue="si" />
            <f:selectItem itemLabel="#{app['button.no']}" itemValue="no" />

        </b:selectOneMenu>
        <h:graphicImage library="jsflive" name="add.png"/>

    </composite:implementation>

</html>

Nota: El componente tiene asociados etiquetas definidas en avbravoutils y esta orientado a ejbjmoordb.

Construir el proyecto

Clic derecho--> Clearn & Build

CSS

• Creamos un archivo css dentro de resources/jmoordbjsf

Ejemplo de css

Agregarlo al composite

• usar el <h:outputStylesheet library="jmoordbjsf" name="jmoordbjsf.css"/>

• Mediante el styleClass de cada componente usamos la propiedad deseada. <p:datatable styleClass="ui-datatable">

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:composite="http://java.sun.com/jsf/composite"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <composite:interface >

    <cc:interface >
        <cc:attribute name="id"/>

    </cc:interface>

    <cc:implementation>
       <p:dataTable styleClass="ui-datatable"/>
        <h:outputStylesheet library="jmoordbjsf" name="jmoordb.css"/>
    </cc:implementation>

</ui:composition>

IMAGENES

• Las imagenes las agregamos dentro de resources/jmoordbjsf

Usar la imágenes en el componente componente

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

Si ejecutamos un proyecto, se vería la imagen

Probar el Componente

• Creamos un proyecto Web

• Agregarmos la dependencia jmordbjsf

• Agregar el componente a una pagina.

• En este ejemplo usaremos el plugin de PayaraMicro para generar el proyecto

• Repositorio del proyecto

https://github.com/avbravo/jmoordbjsftest

Crear el proyecto: jmoordbjsftest

Indicar el nombre del proyecto

PayaraMicro en este ejemplo la versión 5.183 o superior

En las propiedades del proyecto activamos la configuracion, revisamos la versiòn del JDK, y seleccionamos primefaces como framework

Editamos el archivo pom.xml

• Actualizar la version de primefaces

<dependency>
            <groupId>org.primefaces</groupId>
            <artifactId>primefaces</artifactId>
            <version>6.2</version>
        </dependency>

• Agregar avbravoutls

    <dependency>
        <groupId>com.github.avbravo</groupId>
        <artifactId>avbravoutils</artifactId>
        <version>0.39.4</version>
    </dependency>

• Agregar jmoordbjsf (mediante jitpack)

      <dependency>
        <groupId>com.github.avbravo</groupId>
        <artifactId>jmoordbjsf</artifactId>
        <version>0.4.1</version>
    </dependency

• Agregar el repository jitpack

  <repository>
            <id>jitpack.io</id>
            <url>https://jitpack.io</url>
        </repository>

En el build

• Actualizar las versiones de los plugins de maven a las ultimas

 <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.0</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <compilerArguments>
                        <endorseddirs>${endorsed.dir}</endorseddirs>
                    </compilerArguments>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.2.2</version>
                <configuration>
                    <failOnMissingWebXml>false</failOnMissingWebXml>
                </configuration>
            </plugin>

• Agregar el final name

<finalName>jmoordbjsfg</finalName>

Crearemos un Controller para manejar los datos

• Ubicarse en el paquete com.avbravo.jmoordbjsftest

• Dar clic derecho

• Seleccionar -->New -->JSF Managed Bean

Lo denominamos MyController en el scope: Request

Se crea la clase MyController.java

package com.avbravo.jmoordbjsftest;

import javax.inject.Named;
import javax.enterprise.context.RequestScoped;

/**
 *
 * @author avbravo
 */
@Named(value = "myContoller")
@RequestScoped
public class MyContoller {

    /**
     * Creates a new instance of MyContoller
     */
    public MyContoller() {
    }

}

• Implemenamos Serializable

• Agregamos una propiedad para almacenar la opción seleccionada

• Creamos un método para mostrar el mensaje

• Utilizar JsfUtil para enviar mensajes

Código Final

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package com.avbravo.jmoordbjsftest;

import com.avbravo.avbravoutils.JsfUtil;
import java.io.Serializable;
import javax.inject.Named;
import javax.enterprise.context.RequestScoped;

/**
 *
 * @author avbravo
 */
@Named
@RequestScoped
public class MyController implements Serializable{
private String seleccion;

    public String getSeleccion() {
        return seleccion;
    }

    public void setSeleccion(String seleccion) {
        this.seleccion = seleccion;
    }




    /**
     * Creates a new instance of MyContoller
     */
    public MyController() {
    }

    public String mostrar(){
        JsfUtil.errorDialog("Seleccion:", seleccion); 
        return "";
    }
}

Ahora editamos el archivo index.xhtml

Archivo inicial

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        Hello from Facelets
        <br />
        <h:link outcome="welcomePrimefaces" value="Primefaces welcome page" />
    </h:body>
</html>

• Agregar el namespace jm: para usarlo con los componentes y el taglib.

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

• Agregar el <f:view>

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

• Agregar un <h:form>

 </h:form>

• Agregamos un <p:message>

<p:messages id="msg"/>

• Agregar el componente

 <jm:yesno id="a" value="#{myController.seleccion}"/>

• <p:commandButton> para mostrar la opcion seleccionada por el usuario

 <p:commandButton value="Mostrar" update="msg" action="#{myController.save()}"/>

Cogido completo

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:jm="http://jmoordbjsf.com/taglib" 
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <f:view contentType="text/html">
        <h:head>
            <title>Facelet Title</title>
        </h:head>
        <h:body>
            <h:form>
                <p:messages id="msg"/>
                <jm:yesno id="a" value="#{myController.seleccion}"/>


                <p:commandButton value="Mostrar" update="msg" action="#{myController.mostrar()}"/>
            </h:form>
        </h:body>
    </f:view>
</html>

Ejecutar el proyecto

• Se muestra el componente

• Al dar clic en el botón se despliega un mensaje con la selección.