selectOneMenu>

<a:selectOneMenu>

Simplifica el selectOneMenu.

Hay dos fomas de usarlo desde un :

  • new.xhtml(crear)

  • desde un viex.xhtml(editar)

Parámetros:

  • value = Entity donde se almacena el objeto seleccionado.

  • id = identificador

  • requiredMessage = mensaje cuando es requerido

  • required" default="true"/>

  • selectItemLabel = el entity que se habia seleccionado previamente lo muestra como el seleccionado

  • selectItemsValue =es un List<Entity> con los entitys a mostrar

  • selectDisable default ="true" >Se usa cuando usamos mensajes de seleccione uno.

  • selectItemsLabel =es el atributo del entity que deseamos mostrar en el selectOneMenu

  • onchange" default =""

  • update" default =""

<f:selectItem itemLabel="#{app['selectonemenu.select']}" itemValue="#{null}"
/>

Salida

A).Sin entity seleccionado (new.xhtml)

Sin itemseleccionado, generalmente cuando es un nuevo

Podemos omitir el selectLabel o colocamos un mensaje que debe seleccionar uno.

  • No indicando selectLabel ni selectValue

  <a:selectOneMenu
                            id="rol"
                            value="#{usuarioController.usuario.rol}" 
                            requiredMessage="#{msg['field.idrol']}"
                            selectItemsValue="#{usuarioController.rolServices.rolList}"
                            selectItemsLabel="rol"

                            />

B). Con mensaje indicando que seleccione un entity

selectLabel="#{app['selectonemenu.select']}"
selectValue="#{null}"
selectDisable="false"

Codigo

 <p:outputLabel  value="#{msg['field.tienda']}" />
                           <a:selectOneMenu
                            id="tienda"
                            value="#{usuarioController.usuario.tienda}" 
                            requiredMessage="#{msg['field.idtienda']}"
                            selectLabel="#{app['selectonemenu.select']}"
                            selectValue="#{null}"
                            selectDisable="false"
                            selectItemsValue="#{usuarioController.tiendaServices.tiendaList}"
                            selectItemsLabel="tienda"                            
                            />

C)Mostrando con un entity seleccionado. (view.xhtml)

cuando es para editar usamos el selectItemsValue

          <a:selectOneMenu
                            id="rol"
                            value="#{usuarioController.usuario.rol}" 
                            requiredMessage="#{msg['field.idrol']}"
                            selectLabel="#{usuarioController.usuario.rol}"
                            selectValue="#{usuarioController.usuario.rol}"
                            selectItemsValue="#{usuarioController.rolServices.rolList}"
                            selectItemsLabel="rol"

                            />

Si no usamos el componente teníamos que escribir el código

 <b:selectOneMenu id="tienda" value="#{rolController.usuario.rol}"  

                                         required="true"   requiredMessage="#{msg['field.idrol']} #{app['info.required']}"
                                         >
                            <!-- TODO: update below reference to list of available items-->
                            <f:selectItem 
                                          itemValue="#{usuarioController.usuario.rol}"
                                          itemLabel="#{usuarioController.usuario.rol}"
                                          itemDisabled="true"
                                          />


                            <f:selectItems value="#{usuarioController.rolServices.rolList}"
                                           var="item"
                                           itemValue="#{item}"
                                           itemLabel="#{item.rol}"
                                           />

                        </b:selectOneMenu>

D). Con eventos Ajax

Lo usamos para controlar eventos cuando selecciona un entity. Por ejemplo podemos relacionar un componente con otro al seleccionarlo.

Usar:

  • onchange --> ajax:controller.metodo()

  • update

onchange="ajax:usuarioController.onComboboxChange()"
update=":form:elemento_a_actualizar">

Código

 <a:selectOneMenu
                            id="rol"
                            value="#{usuarioController.usuario.rol}" 
                            requiredMessage="#{msg['field.idrol']}"
                            selectItemsValue="#{usuarioController.rolServices.rolList}"
                            selectItemsLabel="rol"

                            onchange="ajax:generador.onComboboxChange()"
                            update=":form:elemento_a_actualizar"

                            />

COMPONENTE

Usamos contatenacion de String

A veces no deseamos que el usuario indique todo la cadena por ejemplo #{item.rol}

si no que simplemente use rol en el llamado quitando el item.

usamos concatenación de componentes.

 <composite:interface >


        <composite:attribute name="value" />
        <composite:attribute name="id" />
        <composite:attribute name="requiredMessage" />
        <composite:attribute name="required" default="true"/>                 
        <composite:attribute name="selectLabel" />
        <composite:attribute name="selectItemsValue" />
        <composite:attribute name="selectItemsLabel" />
        <composite:attribute name="onchange" default ="" />
        <composite:attribute name="update" default ="" />

    </composite:interface>

Definir variables para concatenar.

        <composite:implementation>
        <c:set var="appreciated" value="item.#{cc.attrs.selectItemsLabel}" />
        <c:set var="a" value="#{$appreciated  }" />

Genera

 itemLabel="#{item.tienda}"

Código Completo del componente

<?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:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:composite="http://java.sun.com/jsf/composite"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <composite:interface >


        <composite:attribute name="value" />
        <composite:attribute name="id" />
        <composite:attribute name="requiredMessage" />
        <composite:attribute name="required" default="true"/>                 
        <composite:attribute name="selectLabel" />
        <composite:attribute name="selectItemsValue" default="" />
        <composite:attribute name="selectItemsLabel" />
        <composite:attribute name="onchange" default ="" />
        <composite:attribute name="update" default ="" />

    </composite:interface>
    <composite:implementation>

        <c:set var="appreciated" value="item.#{cc.attrs.selectItemsLabel}" />
        <c:set var="a" value="#{$appreciated  }" />

        <b:selectOneMenu id="#{cc.attrs.id}" 
                         value="#{cc.attrs.value}"  
                         required="#{cc.attrs.required}"  
                         requiredMessage="#{cc.attrs.requiredMessage} #{app['info.required']}"
                         update="#{cc.attrs.update}"
                         onchange="#{cc.attrs.onchange}"
                         >
            <!-- TODO: update below reference to list of available items-->
            <f:selectItem itemLabel="#{cc.attrs.selectLabel}" 
                          itemValue="#{cc.attrs.selectLabel}"
                          itemDisabled="true"/>
            <f:selectItems value="#{cc.attrs.selectItemsValue}"
                           var="item"
                           itemValue="#{item}"
                           itemLabel="#{a}"

                           />

        </b:selectOneMenu>

    </composite:implementation>

</html>

Last updated

Was this helpful?