Sviluppo di una Web Application JSF con JBoss Application Server

Prima di iniziare bisogna scaricare l’Application Server dal sito:

http://www.jboss.org/jbossas/downloads/

A questo punto è possibile scegliere tra le varie versioni disponibili, tra queste si consiglia la 5.1 che è l’ultima versione stabile mentre la versione 6 è arrivata alla milestone 5.

Per facilitare lo sviluppo su JBoss, RedHat (di cui JBoss è uno dei prodotti) propone diversi tool integrabili in Eclipse, tra questi è senza dubbio di grande utilità il JBoss Tools.

JBoss Tools è un insieme di moduli integrabili come plugin sotto Eclipse:

• JBoss AS Tools
• Seam Tools
• Hibernate Tools
• Visual Page Editor
• JST Tools
• JBPM Tools

Per poterlo scaricare andare al sito :

http://www.jboss.org/tools/download

dove è possibile scegliere di scegliere di effettuare il download completo del plugin come zip file oppure di utilizzare i link per l’update tramite Eclipse.

Iniziamo col creare un nuovo progetto JSF.

Per farlo bisogna cliccare su File -> New -> Project ,  a questo punto si apre il wizard, si selezioni JBoss Tools Web -> JSF -> JSF Project.

Chiamiamo il progetto TestJSF,  ad esempio, e premiamo Finish.

Se andiamo nella view Package Explorer avremo la seguente gerarchia di file:

Gerarchia dei file dell'applicazione di esempio

La semplice applicazione che verrà creata avrà due viste collegate l’una all’altra tramite una regola di navigazione. Facciamo doppio click sul file faces-config.xml e poniamoci nel tab Diagram.  Clicchiamo col tasto destro e scegliamo Rule… e nel dialog box inseriamo ad esempio, il nome pages/inputname come valore del From-view-id, lasciamo il resto come default e clicchiamo su finish, ripetiamo il tutto nuovamente per creare un’altra view e chiamiamola input/greeting. E’ possibile ottenere lo stesso effetto facendo click sulla barra laterale sinistra sulla icona a forma di pagina e poi cliccando sul diagramma. Per creare una regola di navigazione (transition) clicchiamo sulla barra laterale sull’icona a forma di freccia e colleghiamo le due pagine cliccando sulla prima (inputname):

Diagramma dell'appicazione JSF

Conclusa questa operazione possiamo salvare e otterremo il seguente file XML (faces-config.xml):

<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xi="http://www.w3.org/2001/XInclude"
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_1_2.xsd">
<managed-bean>
<managed-bean-name>personBean</managed-bean-name>
<managed-bean-class>testJSF.PersonBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<managed-property>
<property-name>name</property-name>
<value/>
</managed-property>
</managed-bean>
<navigation-rule>
<from-view-id>/pages/inputname.jsp</from-view-id>
<navigation-case>
<from-outcome>greeting</from-outcome>
<to-view-id>/pages/greeting.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>

Per conservare i dati tra le due pagine utilizziamo un Managed Bean; per definirne uno nuovo clicchiamo sul tab Tree , poi sull’icona Managed Bean ed infine su Add… .

Scriviamo testJSF.PersonBean come classe e personBean come oggetto e clicchiamo su Finish.

Definizione del Bean

Definito il Bean avremo associate ad esso tre informazioni principali organizzate in sezioni:

• Managed Bean
• Properties
• Advanced

Tramite la sezione Properties possiamo definire le proprietà (campi) del Bean andando a cliccare sul pulsante Add… . Inseriamo nel campo Property Name il valore name e clicchiamo Finish:

Definizione di una proprietà

Editiamo ora le pagine generate; possiamo farlo andando a cercare le pagine tramite il Package Explorer o utilizzando il Diagram facendo doppio click sulla pagina da editare. La pagina selezionata si aprirà nel Visual Page Editor che mostra uno Split Panel con la vista del codice e la vista grafica che il codice genererà.

Visual Page Editor

Sulla parte destra verrà invece mostrata la JBoss Tools Palette che mostra i diversi componenti che possono essere inseriti nella pagina in modalità grafica:

JSF Tools Palette

Apriamo il panel JSF HTML e selezioniamo il componente <h:form> e trasciniamolo all’interno del tag <f:view> presente nell’editor. Una volta rilasciato il componente si aprirà una schermata con vari campi da valorizzare, inseriremo nel campo id il valore greeting.

ora inseriamo un inputText prelevando sempre dalla palette laterale ed innseriamolo all’interno dellaa form. Nel pannello di Dialogo cerchiamo la voce Value e clicchiamo sul pulsante … . Clicchiamo sulla voce Managed Beans > personBean > name infine clicchiamo su Ok. Nella voce id inseriamo il valore name. Possiamo sempre modificare questi attributi facendo doppio click sul componente da modificare.

Inseriamo infine un commandButton sempre nella form accanto alla inputText e nel pannello di Dialogo clicchiamo su … nel campo action. Clicchiamo sulla viewaction di nome greeting. Otteniamo alla fine il seguente codice:

<html>
<head>
<title></title>
</head>
<body>
<f:view>
<h:form id="greeting">
Please enter name:
<h:inputText id="name" value="#{personBean.name}"/>
<h:commandButton value=" Say Hello " action="greeting"/>
</h:form>
</f:view>
</body>

Apriamo ora la pagina greeting.jsp e posizioniamo all’interno un outputText, accanto all’attributo value clicchiamo sul tasto … e selezioniamo Managed Beans -> personBean -> name poi clicchiamo sul tasto Ok. Possiamo scrivere vicino al componente un testo come ‘Hello‘.

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
<head>
<title></title>
</head>
<body>
<f:view>
Hello <h:outputText value="#{personBean.name}"/>!
</f:view>
</body>
</html>

Abbiamo ora bisogno di un’altra pagina che funga da pagina iniziale e che sia l’entry point della nostra applicazione. Tramite il Package Explorer creiamo una nuova pagina web col nome index, nel package Webcontent, come template selezioniamo JSPRedirect.
Inseriamo all’interno dell’attributo page del tag jsp:forward il valore /pages/inputname.jsf:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head></head>
<body>
<jsp:forward page="/pages/inputname.jsf" />
</body>
</html>

Abbiamo aggiunto l’estensione .jsf dato che nel file web.xml è specificato il mapping con la Servlet Faces Servlet che sarà invocata nel momento in cui avvieremo l’applicazione.

Riferimenti:

http://docs.jboss.org/tools/3.1.0.GA/en/jsf_tools_tutorial/html/index.html