Está en la página 1de 18

INSTITUTO POLITCNICO NACIONAL

ESCUELA SUPERIOR DE CMPUTO

NOMBRE:
GRUPO:

LORA ROSAS YONATHAN


3CM3

MANUAL SOBRE JSF


ASIGNATURA: WEB APPLICATION
DEVELOPMENT
PROFESOR: ALEJANDRO SIGFRIDO
CIFUENTES ALVAREZ

INICIO
Crear un nuevo proyecto con JSF 2.0 Soporte
Utilice el asistente del IDE Proyecto para crear una nueva aplicacin web en
Java. Al llegar a Paso 4: Marcos, seleccione JavaServer Faces.

Despus de seleccionar JavaServer Faces, varias opciones de configuracin


disponibles para usted, como se muestra en la imagen de arriba. Puede
determinar la forma en que el proyecto tiene acceso a bibliotecas JSF
2.0. Haga clic en la pestaa de Configuracin para especificar cmo el
servlet Faces estar registrado en el descriptor de despliegue del proyecto.

facelets Editor
Editor del IDE Facelets proporciona numerosas funciones que facilitan el
desarrollo JSF, incluyendo resaltado de sintaxis y de comprobacin de
errores para las etiquetas JSF, documentacin de apoyo, y la terminacin de
cdigo para expresiones EL, bibliotecas Facelets central y espacios de
nombres.
Puede pulsar Ctrl-Space para invocar la finalizacin de cdigo y
documentacin de apoyo, en su caso.
Cuando el cursor no est colocado en una etiqueta, al pulsar Ctrl-Space se
invoca una lista emergente de elementos. Estos elementos tambin se
puede acceder desde el IDE de Paleta
Tambin puedes escribir un prefijo antes de pulsar Ctrl-Space, por
ejemplo, jsf , para filtrar los elementos.

Puede pulsar Ctrl-Space para invocar la finalizacin de cdigo para espacios


de nombres Facelets.
Del mismo modo, si escribe en una etiqueta JSF, cuyo espacio de nombres
no han sido declarados en la pgina, el IDE agrega automticamente a la
pgina<html> etiqueta.
El editor ofrece apoyo para la terminacin Expression Language (EL)
sintaxis. Presione Ctrl-Espacio de EL cdigo que llame a las sugerencias de
los objetos implcitos, JSF administrados frijoles, y sus propiedades.

Tambin puede resaltar fragmentos de cdigo en el editor, y elija Convertir


al componente compuesto con el fin de crear componentes JSF compuesto.
El editor ofrece capacidades bsicas de comprobacin de errores. Se
muestra un error con un subrayado rojo y la insignia correspondiente en el
margen izquierdo. Las advertencias estn subrayados en amarillo y se
indican con un distintivo amarillo en el lado izquierdo. Usted puede colocar
el ratn sobre la insignia o el texto subrayado para ver una descripcin del
error.
Al entrar en las etiquetas JSF, los diferentes controles se llevan a cabo. Estos
incluyen si:
la biblioteca declarada existe
la biblioteca acompaado por el prefijo de etiqueta contiene un
componente o una etiqueta
La etiqueta contiene todos los atributos necesarios
todos los atributos de entrada se definen en la interfaz del
componente
El editor tambin busca:
la existencia de componentes no declarados
la presencia de las declaraciones taglib sin usos

Caras Editor de configuracin XML


Si se incluye un faces-config.xml archivo en el proyecto JSF, puede pulsar
Ctrl-Space al definir las reglas de navegacin o declarar beans gestionados
con el fin de educar a la finalizacin de cdigo y documentacin de apoyo.

Para esto le damos en nuevo archivo-> java Server Faces y despus en JSF
Faces Configuation y damos clic en netx y en finish

Si prefiere entrar en las reglas de navegacin y beans gestionados


utilizando los cuadros de dilogo en lugar de la codificacin manual de ellos,
el IDE proporciona varias JSF especficos de cuadros de dilogo para este
propsito. Estos son accesibles desde el men contextual del editor.

El IDE proporciona dos diferentes puntos de vista para el facesconfig.xml archivo: la vista de XML, lo que muestra el cdigo fuente XML, y
la vista PageFlow, que es una interfaz grfica que muestra las normas de
navegacin JSF se define en el archivo faces-config.xml
Por ejemplo, si su archivo contiene la regla de navegacin siguientes:
<navigation-rule>

<from-view-id> / greeting.xhtml </ a-view-id>


<navigation-case>
<from-outcome> respuesta </ a partir de los resultados->
<to-view-id> / success.xhtml </ a-view-id>
</ Navegacin de los casos>
</ Navegacin regla>
El punto de vista PageFlow muestra la siguiente relacin, lo que indica que
un sistema de navegacin de greeting.xhtml a success.xhtml se produce
cuando " la respuesta "se pasa a JSF NavigationHandler .

JSF Wizards
El IDE NetBeans proporciona numerosos asistentes que facilitan el desarrollo
con JSF 2.0. Puede crear pginas Facelets nuevo, plantillas de Facelets, JSF
administrados frijoles, componentes compuestos, Caras archivos de
configuracin, y mucho ms.
Todos los asistentes son accesibles a travs del asistente de archivos
genricos del IDE. Para acceder al asistente de archivos, pulse el botn
Nuevo archivo , o seleccione Archivo> Nuevo archivo del men principal JSF
especficos de los asistentes se enumeran dentro de la categora JavaServer
Faces.

Los siguientes asistentes estn disponibles para usted cuando se trabaja en


un proyecto web en Java con el apoyo de JSF.

JSF Page Wizard


Use la pgina del asistente para crear JSF Facelets y las pginas JSP para su
proyecto. En el asistente de archivos del IDE, seleccione la categora
JavaServer Faces, a continuacin, seleccione la pgina JSF. En JSF 2.0,
Facelets es la mejor forma de declarar las pginas JSF. La opcin de Facelets
en el asistente se selecciona por defecto. Seleccione la opcin Archivo JSP si
usted desea crear nuevas pginas JSP, o fragmentos de JSP ( . jspf archivos).

Bean gestionado Asistente

Puede crear frijoles JSF administrados para su aplicacin utilizando el IDE es


administrado asistente Bean. De la categora JavaServer Faces en el IDE
deasistente de archivo , seleccione JSF administrados Bean.
Por defecto, todos los metadatos que se especifique en el asistente se
traduce en las anotaciones que se aplican a la semilla logr una vez que se
genera.Por ejemplo, en la siguiente imagen, se puede crear un nuevo
mbito de sesin de clase denominado NewJSFManagedBean y el nombre
de myManagedBean .

Cuando el bean gestionado se genera, parece que sigue con anotaciones


apropiadas.
paquete my.org;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ ManagedBean (name = "myManagedBean")
@ SessionScoped
public class {NewJSFManagedBean
/ ** Crea una nueva instancia de NewJSFManagedBean * /
pblic NewJSFManagedBean () {
}
}
Adems, si el proyecto ya contiene una faces-config.xml archivo, "los datos
Aadir al archivo de configuracin" del asistente opcin se activa, lo que le
permite declarar el bean gestionado en el archivo de configuracin de
Faces, o tiene alguna metadatos especificados a travs de anotaciones en el
bean gestionado.

Asistente de configuracin de las


caras
JSF 2.0 introduce anotaciones como alternativa a la norma Caras archivo de
configuracin ( faces-config.xml ) para la configuracin de su aplicacin. Por
lo tanto, al agregar JSF 2.0 a un proyecto, el IDE no generar un
defecto faces-config.xml archivo (como fue el caso de JSF
1.2). Naturalmente, es posible que desee agregar un facesconfig.xml archivo a su proyecto con el fin de definir ciertas opciones de
configuracin. Para ello, utilice el asistente de configuracin del IDE caras.
De la categora JavaServer Faces en el IDE de asistente de archivo ,
seleccione Configuracin de JSF caras. Esto le permite crear un nuevo facesconfig.xml archivo, que se coloca en su proyecto WEB-INF carpeta por
defecto.
Ver las caras editor de configuracin XML para la descripcin de apoyo
editor del IDE de faces-config.xml .

Asistente para componentes de


material compuesto
JSF 2.0 ha simplificado el proceso de creacin de la interfaz de usuario
compuesta (IU) de los componentes, que pueden ser reutilizados en las
pginas web.Usted puede utilizar el asistente de la IDE de Componente
Compuesto para generar una plantilla de Facelets para un componente JSF
compuesto.
Al igual que todos los asistentes relacionados con JSF, puede acceder al
asistente de Componente Compuesto de la categora JavaServer Faces en el
IDE deasistente de archivo . Sin embargo, una forma ms intuitiva para
pedir al asistente al destacar el fragmento de cdigo desde una pgina
Facelets en el editor, a continuacin, elegir Refactorizar> Convertir
Componente Compuesto en el men emergente.
El siguiente ejemplo describe las acciones que ocurren, y las instalaciones a
su disposicin, al invocar el Asistente para componentes de compuesto en
el fragmento, " <p> Este es el componente compuesto. </ p> ".

El asistente de componentes compuestos se abre, que contiene el


fragmento seleccionado en el panel Seccin de Ejecucin.

De manera predeterminada, el asistente crea una carpeta ezcomp que


contenga los componentes compuestos. Por ejemplo, si est creando un
nuevo componente llamado myComponent , el asistente genera
un myComponent.xhtml pgina Facelets, que residan en la de recursos /
ezcomp carpeta de raz del sitio Web de la aplicacin.
Cuando haya finalizado el asistente, el archivo de origen de componente
compuesto se genera para el fragmento de cdigo dado. La plantilla incluye
una referencia a JSF 2.0 's compuesto de biblioteca de etiquetas.
<? 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: cc = "http://java.sun.com/jsf/composite" >
<- INTERFACE ->
<cc:interface>
</ Cc: Interfaz>
<- APLICACIN ->
<cc:implementation>
<p> Este es el componente compuesto. </ p>
</ Cc: aplicacin>
</ Html>
Adems, una etiqueta de componente nuevo se inserta en la ubicacin en el
editor en el que destaca el fragmento. En este caso, la etiqueta se
genera:<ez:myComponent/> . Tenga en cuenta que el IDE agrega
automticamente el espacio de nombres donde reside el componente
compuesto a la pgina de<html> etiqueta.

El IDE tambin es compatible con hipervnculos a los archivos de origen de


componente compuesto.

Facelets Asistente de plantilla


Utilice el asistente de plantilla de Facelets para generar una plantilla de
Facelets. De la categora JavaServer Faces en el IDE de asistente de archivo ,
seleccione Plantilla de Facelets. Puede elegir entre ocho estilos de diseo
nico, y especificar si el diseo se implementa el uso de CSS o HTML
una <table>etiqueta.

El asistente crea un archivo de plantilla utilizando


XHTML <h:head> y <h:body> etiquetas, hojas de estilo y los lugares
relacionados en el de recursos / css carpeta de raz del sitio Web de la
aplicacin. El asistente genera una default.css archivo, y
una cssLayout.css o tableLayout.css archivo, dependiendo de su seleccin
de diseo.

Facelets Plantilla de Cliente Asistente


Utilice la plantilla de Facelets asistente del cliente para generar una pgina
que hace referencia a una plantilla de Facelets en su proyecto. De la
categora JavaServer Faces en el IDE de asistente de archivo , seleccione
Cliente Facelets de plantilla. Usted puede especificar la ubicacin de la
plantilla de Facelets que es utilizado por el cliente. Puede especificar si la
etiqueta raz es <html> o <ui:composition>

Apoyo a las clases de entidad


Si est utilizando la persistencia de Java en su solicitud y tener las clases de
entidad basado en el esquema de base de datos, el IDE proporciona una
funcionalidad que le permite trabajar de forma eficaz con los datos de clase
de entidad.
Creacin de pginas JSF de clases de entidad

Una vez que haya clases de entidad en su aplicacin, puede utilizar las
pginas de la IDE de JSF de clases de entidad asistente para crear una
interfaz web para la visualizacin y modificacin de datos de la entidad de
clase. El cdigo generado por el asistente se basa en las anotaciones
contenidas en la persistencia de las clases de entidad.
Para cada clase de entidad, el asistente genera las siguientes:
un bean de sesin sin estado para la creacin, recuperacin,
modificacin y eliminacin de instancias de la entidad
JSF un mbito de sesin, bean gestionado

un directorio que contiene cuatro archivos de Facelets para las


capacidades de CRUD ( Create.xhtml , Edit.xhtml , List.xhtml y View.xhtml )

clases de utilidad utilizado por los granos de JSF administrados


( JsfUtil , PaginationHelper )

un paquete de propiedades para los mensajes localizados, y una


entrada correspondiente en el archivo del proyecto de configuracin de las
caras (Afaces-config.xml archivo se crea si no existe).

auxiliar archivos web, incluyendo una hoja de estilo por defecto para
los componentes prestados, y un archivo de plantilla Facelets

Para utilizar las pginas JSF de la Entidad asistente de clases, el acceso


asistente del IDE archivo . Seleccione la categora JavaServer Faces, a
continuacin, seleccione las pginas JSF de clases de entidad.
Al llegar a Paso 3: Generar pginas JSF y clases, se puede especificar la
ubicacin de los archivos que se generarn.
Por ejemplo, si usted est solicitando el asistente a un cliente de clase de
entidad, los valores que se muestran en la imagen anterior se generan los
siguientes archivos:
A faces-config.xml archivo de registro de la ubicacin del paquete
de propiedades que contiene mensajes localizados en los puntos de vista
JSF. Por ejemplo, si especifica / mi / org / paquete para el nombre de
paquete de localizacin en el asistente genera la siguiente entrada:
<application>
<resource-bundle>
<base-name> / mi / org / paquete </ base-name>
<var> paquete </ var>
</ Resource-bundle>
</ Application>
Un cliente de carpetas en la raz de su web, que contiene cuatro
archivos Facelets de capacidades CRUD:
Create.xhtml : Una forma de JSF para la creacin de un
nuevo cliente.
Edit.xhtml : Una forma de JSF para la edicin de un cliente.
List.xhtml : Una tabla de datos de JSF para desplazarse por
los clientes.
View.xhtml : Una forma de JSF para ver los detalles del
cliente.
jsfcrud.css : Una hoja de estilo que sirve para hacer los formularios
JSF y tabla de datos.
template.xhtml : Una pgina de Facelets opcional plantilla, que
incluye una referencia a la generada jsfcrud.css hoja de estilos.
Una sesin sin estado (la empresa) de frijol
llamado CustomerFacade , que reside en elmy.org.data paquete. Esta
clase tambin se puede acceder desde la empresa el nodo del proyecto
Beans.
Bundle.properties : Un paquete de propiedades que contiene los
mensajes por defecto localizado en el punto de vista JSF.
A JSF mbito de sesin, llamado bean
gestionado CustomerController , que reside en elmy.org.ui paquete.
Dos clases de utilidad ( JsfUtil y PaginationHelper ) que residan en
lamy.org.ui.util paquete. Estos son utilizados por
el CustomerController bean gestionado.
Crear un formulario de JSF para Entity Data

Puede utilizar el formulario desde la ventana de la entidad para generar un


formulario JSF que contiene campos para todas las propiedades que figuran
en una clase de entidad. Usted ya debe tener un grano de JSF administrados
creado para manejar los datos de usuario asociado con la forma.
Puede acceder al formulario desde la ventana de la entidad, ya sea por las
teclas Ctrl-Espacio en el editor de una pgina Facelets a continuacin, elija
formulario JSF de la Entidad, o haciendo doble clic en el formulario de
elemento de la entidad que figuran en el IDE de Paleta
Por ejemplo, en la siguiente imagen, un cliente de clase de entidad que ya
existe en el my.org paquete del proyecto. A customerController bean
gestionado tambin ya existe en el proyecto, y el bean gestionado contiene
una propiedad denominada seleccionados que devuelve
un cliente objetivo.
Nota: Seleccione la opcin 'Crear punto de vista de slo lectura "para crear
un formulario que contiene campos de slo lectura. Cuando se selecciona
esta opcin, el IDE se aplica <h:outputText> etiquetas para los campos del
formulario, mientras que <h:inputText> etiquetas se aplican cuando la
opcin no est seleccionada.
Cuando se completa el cuadro de dilogo, el IDE genera el cdigo de su
pgina de Facelets. Por ejemplo, un cliente de clase de entidad que contiene
unacustomerId propiedad se muestra en el siguiente formato:
<f:view>
<h:form>
<h1> <h:outputText value="Create/Edit"/> </ h1>
<h:panelGrid columns="2">
<h:outputLabel value="CustomerId:" for="customerId" />
<h:inputText id="customerId"
value="#{customerController.selected.customerId}" title="CustomerId"
required="true" requiredMessage="The campo IdCliente es required."/>
...
Campos [Otros aadido aqu. ]
...
</ H: panelGrid>
</ H: form>
</ F: view>
Para modificar la plantilla que se utiliza para el cdigo generado, haga clic
en el enlace de plantilla Personalizar en el formulario desde la ventana de la
entidad.

Creacin de una tabla de datos para


JSF Entity Data
Usted puede utilizar el cuadro de dilogo Datos de la entidad para generar
una tabla JSF de datos que contiene las columnas de todas las propiedades
que figuran en una clase de entidad. Con el fin de hacer uso de este

servicio, usted debe tener ya un bean gestionado JSF creado para manejar
los datos de back-end asociados con la clase de entidad.
Nota: Si utiliza este cuadro de dilogo sin tener un bean asociado
administrado, puede introducir un nombre para el bean gestionado en el
dilogo, y ese nombre se utilizar en la pgina, independientemente de si
es vlido o no. A continuacin, puede crear un bean gestionado utilizando el
IDE de bean gestionado asistente , o si se utiliza la pginas JSF de la Entidad
asistente de clases , beans gestionados se generan para todas las clases de
entidad seleccionada.
Por ejemplo, en la siguiente imagen, un producto de clase de entidad que ya
existe en el my.org.entity paquete del proyecto. A ProductControllerbean
gestionado tambin existe en el proyecto, y el bean gestionado contiene un
mtodo denominado getProductItems () que devuelve una lista de
productos objetos.

Cuando se completa el cuadro de dilogo, el IDE genera el cdigo de su


pgina de Facelets. Por ejemplo, un producto que contiene una clase de
entidadproductId propiedad se muestra en el siguiente formato:
<f:view>
<h:form>
<h1> <h:outputText value="List"/> </ h1>
<h:dataTable value="#{productController.productItems}" var="item">
<h:column>
<f:facet name="header">
<h:outputText value="ProductId"/>
</ F: faceta>
<h:outputText value="#{item.productId}"/>
</ H: column>
...
Columnas [Otros aadido aqu. ]
...
</ H: dataTable>
</ H: form>
</ F: view>
Para modificar la plantilla que se utiliza para el cdigo generado, haga clic
en el enlace de plantilla Personalizar en el formulario desde la ventana de la
tabla de datos.

Paleta de componentes JSF


Cuando se trabaja en las pginas de Facelets, usted puede tomar ventaja de
la paleta del IDE para arrastrar y soltar las etiquetas JSF a la pgina. Puede
acceder a la paleta o bien eligiendo Ventana> Paleta en el men principal, o
pulse Ctrl-Shift-8 (-Shift-8 en Mac).

Tambin puede elegir la Fuente> Cdigo Insertar desde el men principal


del IDE para invocar una lista desplegable que contiene JSF componentes
especficos contenidos en la paleta.

La paleta se ofrece con cinco JSF componentes relacionados con:


Metadatos: Invoca un cuadro de dilogo para aadir pares nombrevalor dentro de las etiquetas de metadatos JSF. Por ejemplo, si especifica
" miId 'y'myValue "como un par nombre-valor, el siguiente fragmento de
cdigo se produce:
<f:metadata>
<f:viewParam id='myId' value='myValue'/>

</ F: Metadatos>
Formulario de JSF: Aade el siguiente fragmento de cdigo a la
pgina.
<f:view>
<h:form>
</ H: form>
</ F: view>
Formulario de JSF de la Entidad: Invoca un cuadro de dilogo que le
permite asociar datos de una clase de entidad a los campos en un
formulario de JSF. Ver Creacin de un formulario JSF para los datos de la
entidad .

JSF Data Table: Aade el siguiente fragmento de cdigo a la pgina.

<f:view>
<h:form>
<h:dataTable value="#{}" var="item">
</ H: dataTable>
</ H: form>
</ F: view>
JSF tabla de datos de la Entidad: Invoca un cuadro de dilogo que le
permite asociar datos de una clase de entidad a los campos contenidos en
una tabla de datos JSF. Ver Creacin de una tabla de datos para JSF Entity
Data .

También podría gustarte