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
Copy 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 >
Copy < 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
Copy <? 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
Copy <? 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:
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
Copy <? 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
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" >
Copy <? 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
Copy < h : graphicImage library = "jmoordbjsf" name = "add.png" />
Si ejecutamos un proyecto, se vería la imagen
Probar el Componente
Agregarmos la dependencia jmordbjsf
Agregar el componente a una pagina.
En este ejemplo usaremos el plugin de PayaraMicro para generar el 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
Copy < dependency >
< groupId > org . primefaces </ groupId >
< artifactId > primefaces </ artifactId >
< version > 6.2 </ version >
</ dependency >
Copy < dependency >
< groupId > com . github . avbravo </ groupId >
< artifactId > avbravoutils </ artifactId >
< version > 0.39 . 4 </ version >
</ dependency >
Agregar jmoordbjsf (mediante jitpack)
Copy < dependency >
< groupId > com . github . avbravo </ groupId >
< artifactId > jmoordbjsf </ artifactId >
< version > 0.4 . 1 </ version >
</ dependency
Agregar el repository jitpack
Copy < 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
Copy < 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 >
Copy < finalName > jmoordbjsfg </ finalName >
Crearemos un Controller para manejar los datos
Ubicarse en el paquete com.avbravo.jmoordbjsftest
Seleccionar -->New -->JSF Managed Bean
Lo denominamos MyController en el scope: Request
Se crea la clase MyController.java
Copy 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
Copy /*
* 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
Copy <? 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.
Copy xmlns : jm = "http://jmoordbjsf.com/taglib"
Copy < f : view contentType = "text/html" >
Copy < p : messages id = "msg" />
Copy < jm : yesno id = "a" value = "#{myController.seleccion}" />
<p:commandButton> para mostrar la opcion seleccionada por el usuario
Copy < p : commandButton value = "Mostrar" update = "msg" action = "#{myController.save()}" />
Cogido completo
Copy <?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
Al dar clic en el botón se despliega un mensaje con la selección.