Crear composite 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

Se crea el archivo .jar y se registra en maven

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

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 configuración, 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.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>