> For the complete documentation index, see [llms.txt](https://avbravo-2.gitbook.io/stack-jmoordb/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://avbravo-2.gitbook.io/stack-jmoordb/distribuir-componentes-en-jar/distribuir-componentes-desde-java-class/crear-composite-maven.md).

# Crear composite Maven

## Crear composite Maven

Crear el proyecto Maven

![](/files/-Lc1Wu1Xl-PIxWLM5ms1)

Indicamos el nombre del proyecto

![](/files/-Lc1Wu1bQoOZW7gkd-z2)

al darle finalizar se crea el proyecto jmoordbjsf

![](/files/-Lc1Wu1eJiEr0uXJCIc8)

Revisamos las propiedades del proyecto

![](/files/-Lc1Wu1h8L3IBPxWOiEZ)

### Editar el archivo pom.xml

![](/files/-Lc1Wu1jzS2c5Fsjwwfw)

### Agregar dependencias

* primefaces
* bootfaces

```css
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**

```java
<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

![](/files/-Lc1Wu1oRS9bkqV0dVfT)

### En la pestaña Files de NetBeans

![](/files/-Lc1Wu1qSbb7YCrwEB1o)

Dar clic derecho New--> Folder...

![](/files/-Lc1Wu1sC86of9OGXxb6)

indicar resources/META-INF

![](/files/-Lc1Wu1uza6AdfV2X3bG)

### Creamos los archivos xml:

* faces-config.xml
* jmoordbjsf.tablib.xml

![](/files/-Lc1Wu1wPXTnAdn5JYJC)

#### faces-config.xml

```java
<?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

```java
<?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

![](/files/-Lc1Wu1yG9iUQft17ZD5)

indicamos los nombres de carpeta

![](/files/-Lc1Wu2-ehDP227vw3P9)

### En este directorio agregamos:

* composite
* imagenes
* css
* js

![](/files/-Lc1Wu21O33Sdnj2M39r)

### Creando el primer componente

* Creamos un componente selectOneMenu de bootfaces simplificando las opciones si/no.
* Ubicarse en la carpeta jmoordbjsf
* Clic derecho --> New -->Other

![](/files/-Lc1Wu23QzqtEyH84PBE)

**Categories**: Java Server Faces

**File Types:** JSF Page

![](/files/-Lc1Wu25MdMWnuvPVW7K)

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

### File Name: yesno

![](/files/-Lc1Wu27fZ90flat06yJ)

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

![](/files/-Lc1Wu29Qd8qgUaKlZzd)

Reemplazamos por el código

```java
<?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

![](/files/-Lc1Wu2BwI_cCvp37hXn)

Se crea el archivo .jar y se registra en maven

![](/files/-Lc1Wu2D7wIgnGzeFs9V)

### CSS

* Creamos un archivo css dentro de resources/jmoordbjsf

![](/files/-Lc1Wu2F4n6D390wVT3l)

Ejemplo de css

![](/files/-Lc1Wu2HUz539RHHZ4OQ)

### 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"**>

```java
<?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

![](/files/-Lc1Wu2J_aT2SmPJrOHj)

Usar la imágenes en el componente componente

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

Si ejecutamos un proyecto, se vería la imagen

![](/files/-Lc1Wu2LN7vxiuu6guEd)

## 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

![](/files/-Lc1Wu2NtfzOlH_HtLke)

Indicar el nombre del proyecto

![](/files/-Lc1Wu2PHEWfDu7Y48MX)

PayaraMicro en este ejemplo la versión 5.183 o superior

![](/files/-Lc1Wu2RU47tS73Rvvgy)

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

![](/files/-Lc1Wu2TUvP6qqvAilY1)

### Editamos el archivo pom.xml

* **Actualizar la version de primefaces**

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

* **Agregar avbravoutls**

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

* **Agregar jmoordbjsf (mediante jitpack)**

```java
      <dependency>
        <groupId>com.github.avbravo</groupId>
        <artifactId>jmoordbjsf</artifactId>
        <version>0.1</version>
    </dependency
```

* **Agregar el repository jitpack**

```java
  <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

```java
 <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

```java
<finalName>jmoordbjsfg</finalName>
```

### Crearemos un Controller para manejar los datos

* Ubicarse en el paquete com.avbravo.jmoordbjsftest
* Dar clic derecho&#x20;
* Seleccionar -->New -->JSF Managed Bean

![](/files/-Lc1Wu2VQumfmWSSi_NY)

Lo denominamos MyController en el scope: Request

Se crea la clase MyController.java

```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&#x20;
* Creamos un método para mostrar el mensaje
* Utilizar JsfUtil para enviar mensajes

### Código Final

```java
/*
 * 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

![](/files/-Lc1Wu2XudQ_-b6iSrSs)

Archivo inicial

```java
<?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.

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

* Agregar el \<f:view>

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

* Agregar un \<h:form>

```java
 </h:form>
```

* Agregamos un \<p:message>

```java
<p:messages id="msg"/>
```

* Agregar el componente

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

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

```java
 <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.

![](/files/-Lc1Wu2acyjQ57UApZeB)