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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://avbravo-2.gitbook.io/stack-jmoordb/distribuir-componentes-en-jar/distribuir-componentes-desde-java-class/crear-composite-maven.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.