RichFaces, JBoss Tools & JBoss

In questo articolo voglio utilizzare le RichFaces con JBoss Tools e JBoss Server quindi mi serve:

  • RichFaces si trovano su http://richfaces.jboss.org/download/stable
  • JBoss Tools si trovano su http://tools.jboss.org/ -> Download -> Download su JBoss Tools e non su JBoss Developer Studio -> e segui le istruzioni
  • JBoss Server si trova su http://jbossas.jboss.org/ (scaricate l’ultima versione stabile in formato zip)

La RichFaces è una libreria di widget UI, visto che è stata sviluppata da JBoss utilizzeremo il loro Web Server, e visto che c’è installeremo in Eclipse JBoss Tools, che sono un insieme di interfacce e template per aiutarci a utilizzare il tutto.

Si comincia:

  1. Apriamo Eclipse
    1. Scarichiamo, scompattiamo e lanciamo l’ultima versione stabile di Eclipse.
  2. Installiamo JBoss Tools in Eclipse
    1. Andate in http://tools.jboss.org/downloads/
    2. Download su JBoss Tools ??.??.?? Final
    3. Ci sono 2 modi:
      1. Spostate l’icona dal browser dentro Eclipse si aprirà Eclipse Marker e confermate pure
      2. Oppure Dopo aver selezionato il tab “Update Site” copiate il link per incollarlo in
        1. Menu – Help – Install New Software
        2. In nome Scrivete JBoss Tools e in url incollate il link
    4. Dopo qualche minuto, e un po di OK, Finish, e di riavvii di Eclipse il tool sarà installato dentro Eclipse
  3. Installiamo JBoss Server in Eclipse
    1. Scompattare lo zip
    2. In Eclipse – Menu – Windows – Preference – Server – Runtime Environment – Add
    3. Selezionare la versione che corrisponde a quella scaricata e indicare la directory
  4. OPPURE
    1. Selezionare il tab Server (in basso)
    2. No servers are available. Click this link to create a new server
    3. Selezionare la versione che corrisponde a quella scaricata e indicare la directory

 

Le operazioni eseguite fino ad ora, resteranno nella configurazione di Eclipse, quindi adesso non ci resta che

Scaricare il primo progetto con RichFaces (un esempio per capire di che si tratta):

  1. Eclipse – menù – File – New – Other
  2. JBoss Central  – RichFaces Project
  3. Cambiamo solo il nome del progetto in test01 (solo per comodità)
  4. Il progetto viene scaricato utilizzando maven quindi la prima volta impiegherà qualche minuto, scaricando un progetto completo
  5. Tasto destro sul server che abbiamo configurato (tab in basso) – Add and Remove
  6. Spostate il progetto da sinistra (Available) a destra (Configured). A destra ci sono tutti i progetti del nostro workspace, a destra quelli che gireranno nel Server Web. Quindi Finish
  7. Tasto destro sul server che abbiamo configurato – Start o Debug. Facendo Debug è possibile debuggare il codice (mettere dei breakpoit e visalizzare il valore delle variabili) adesso potete fare anche Start, ma poi si farà solo debug per individuare errori.
  8. Partirà il Server Web, ci vorrà qualche secondo, le operazioni ed eventuali errori si vedono nel tab Console, nell’ultima riga ci sarà scritto started, questo ci indica che il Server Web è partito.
  9. Aprite un browser, e nell’URL mettete http:\\localhost:8080\NOMEDELPROGETTO, nel nostro caso http:\\localhost:8080\test01 (se avete cambiato durante la creazione del progetto). Naturalmente al posto di localhost potete inserire l’indirizzo IP nel PC
  10. Ed ecco il progetto !!!!!
  11. Quando avete finito potete fermare il Server Web: da Eclipse tasto destro del mouse sul server – Stop

Creare il primo progetto con RichFaces:

  1. Eclipse – menù – File – New – Other… – JBoss Tools Web – JSF – JSF Project
  2. Nel primo campo di testo (Project Name) inseriamo il nome del progetto (diciamo test02)
  3. In JSF Environment:JSF 2.1 (se scegliamo 2.2 ad oggi restituisce un errore)
  4. Project Template: JSFKickStartWithoutLibs
  5. Next
  6. Runtime selezioanre il JBoss configurato in Eclipse
  7. Finish – Eclipse crea il progetto nel giusto modo
  8. Eclipse
  9. Anche in Configuration selezioniamo il server web (JBoss) configurato in Eclipse
  10. Click su Finish e si crea il progetto nel workspace con due pagine per generare un esempio
  11. Avviamo il server
    1. Se espandiamo il server troveremo il nome del progetto, oppure tasto Dx del mouse sul nome del Server “Add and Remove…” ci sarà una visione più completa
    2. Clic sul tasto a forma di insetto
    3. Avviamo un browser e inseriamo nell’url http:\\localhost:8080\NOMEDELPROGETTO
  12. Cosa fa l’esempio:
    1. il file web.xml con

<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>

dice al server che deve cominciare col file index.html, che a sua volta salta in pages/inputname.jsf che in realtà è inputname.xhtml

Nel file inputname c’è il tag ez:input che contiene label=”#{msgs.prompt}” mentre se guardiamo il sorgete dal browser la label è “Your Name:”, in proatica il file xhtml viene convertiro in html prima di darlo al browser, sostituendo tutto quello dentro #{…..} con quello che c’è da sostituire:

  1. Nel nostro caso #{msgs.prompt}, è valorizzato nel file resousces .properties dentro JavaSource
  2. #{user.name} prende il file User.java e chiama il metodo getName che restituisce il valore di name (al momento stringa vuota)
  3. dopo aver scritto il nome nell’input e premuto il pulsante di submit, prima vengono caricare le variabili, nel nostro caso si valorizza la variabile “name” della classe, poi si scatena l’action il quale contiene #{user.sayHello}, quindi dalla classe User si chiama sayHello() che restituisce la stringa “greeting”
  4. nel file faces-config.xml (anche guardando il diagramma) partendo dalla pagina inputname.xhtml se questa mi dice greeting il server va alla pagina greeting.xhtml
  5. La pagina greeting.xhtml, oltre al messaggio #{msgs.greeting} valorizzato in resource .properties, contiene #{user.name} che no fa altro che chiamare il metodo getName della Classe User.java, restituendo il valore inserito precedentemente

Se al posto di creare un progetto JSF creiamo un progetto “Dynamic Web Project”, dobbiamo:

  1. Aggiungiamo JSF al progetto:
    1. Tasto SX sul progetto – Properties – check JavaServer Faces
      1. In particolare saranno creati i file
        1. faces-config.xml: il file di configurazione di JSF
        2. web.xml: il deployment descriptor dei moduli web

Adesso aggiungiamo un componente Richfaces:

  1. Per rendere il più indipendente il progetto, copiamo le librerie all’interno del progetto stesso. Nella cartella WEB-INF\lib
    1. da richfaces-distribution-?.?.?.Final.zip
      1. richfaces-core-?.?.?.Final.jar
      2. richfaces-rich-?.?.?.Final.jar
      3. richfaces-a4j-?.?.?.Final.jar
    2. dobbiamo inserire librerie di terze parti, si trovano nella cartella lib di richfaces-distribution-?.?.?.Final.zip
      1. Google Guava
        1. guava-???.jar – Librerie Google
      2. CSS Parser
        1. cssparser-???.jar – CSS Parser
      3. Simple API for CSS
        1. sac-???.jar – interfaccia per i parser CSS
    3. dobbiamo inserire le JavaServer Faces:
      1. javax.faces-???.jar
      2. oppure myfaces-impl.jar
  2. Creiamo il file WebContent\pages\test.xhtml col seguente codice

<!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://java.sun.com/jsf/html”
xmlns:f=”http://java.sun.com/jsf/core”
xmlns:ui=”http://java.sun.com/jsf/facelets”
xmlns:a4j=”http://richfaces.org/a4j”
xmlns:rich=”http://richfaces.org/rich”>

<h:head>
<title><ui:insert name=”title”>RichFaces Application</ui:insert></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
</h:head>

<h:body>

<rich:calendar></rich:calendar>

</h:body>

</html>

notate l’inserimento di http://richfaces.org/a4j e http://richfaces.org/rich nel tag html, con h: si utilizzano i tag http://java.sun.com/jsf/html, in particolare viene creato l’header e il body, poi con <rich:calendar> dalla libreria http://richfaces.org/rich, inseriamo un widget che visualizza un calendario per inserire una data, qui potete trovare cosa può fare questo widget.

Widget UI

La filosofia di una Web Application è quella di assomigliare il più possibile ad un’applicazione installata in un PC, normalmente l’HTML non ha oggetti avanzati UI da utilizzare nelle pagine, per esempio un orologio, un calendario, la possibilità di fare drag & drop, ecc…; per questo motivo alcune software house hanno sviluppato dei framework, che permettono di inserire, per esempio un calendario, come se fosse un normale tag HTML.

Alcuni esempi:

Manager utenti [Tomcat]

Una sessione importante del tomcat è il manager, per raggiungerlo basta concludere l’URL con manager (http://nomesito:8080/manager), se non installato basta scompattare il file zip dal sito e copiare …/webapps/manager, a questo punto vi sarà chiesto username e password, che non conoscete.

Per impostare Username e password bisogna editare il file \config\tomcat-users.xml e modificare la relativa sessione nel seguente modo:

aggiungere prima di </tomcat-users>

  • Prima della versione 7

<role rolename=”manager”/>
<role rolename=”admin”/>
<user username=”admin” password=”admin” roles=”admin,manager”/>

  • Dopo la versione 7 inclusa
    • <user username=”admin” password=”admin” roles=”manager-gui“/>
      • manager-gui — Access to the HTML interface.
      • manager-status — Access to the “Server Status” page only.
      • manager-script — Access to the tools-friendly plain text interface that is described in this document, and to the “Server Status” page.
      • manager-jmx — Access to JMX proxy interface and to the “Server Status” page.

context.xml [Tomcat]

Quando il tomcat si avvia (start.bat, start.sh o dalla GUI Tomcat6w), di default scompatta i file war che sono nella cartella webapps e copia il file context.xml nella cartella WEB-INF del progetto, in conf\Catalin\localhost rinominandolo come il progetto.

Se sostituiamo il file war, mentre il tomcat gira, cancella la cartella riscompatta il war ma sopratutto ricrea il file nel context.

Per evitare questo comportamente, si deve nel file server.xml

autoDeploy=”false” – per evitare la publicazione in automatico

deployXML=”false” – per evitare di sostituire il context

quindi in produzione conviene lasciare

autoDeploy=”true” deployXML=”false” in questo modo in automatico il progetto viene sostituito con la nuova versione e il file context, che contiene informazioni sull’ambiente (accesso al DB, o variabili particolari) non viene sovrascritto.

 

P.S.: Il deployXml=”false” si può mettere anche dentro il context stesso con:

<Host deployXml=”false” />

 

 

JSP

Dopo aver creato il primo progetto “statico” con “Cominciamo a capire come funziona“, proviamo a dare un pò di dinamicità:

  • Aggiungiamo nel body della pagina index.html un form:

<form name=”Login” action=”index.jsp”>
Nome: <input name=”nome” type=”text” /><br />
<input id=”submit” type=”submit” value=”Enter” />
</form>

  • Crea il file jsp che si chiama index.jsp che all’interno del suo body conterà:

Benvenuto <%=request.getParameter(“nome”)%>

  • Salviamo i file, riaviamo il Web Server e carichiamo il progetto dal browser
  • Quello che scriviamo nell’input text sarà riportato nella pagina index.jsp

N.B.: Per adesso nell’url potete vedere il nome della variabile e il suo valore

 

Cosa succede ?

Nell’index.html ho inserito un form che contiene un elemento input denominato “nome”, il form ha un action uguale a index.jsp, quindi qando facciamo click sul submit, viene conservato il valore di nome e caricata la pagina index.jsp. La pagina index.jsp contiene i caratteri <% che indica che si sta inserendo codice java nella pagina jsp, quindi col request.getParameter legge il valore di nome

Cominciamo a capire come funziona

La seguente guida è rivolta a chi no ha mai fatto una webapplication (se hai qualche problema scrivimi pure, il sito si basa sulla condivisione):

  1. Scarica l’ultima versione di  eclipse per il tuo S.O. da www.eclipse.org in particoalre la versione “Eclipse IDE for JavaEE developers”
    1. Eclipse NON si installa basta sconpattarlo e avviare l’eseguibileche si trova al primo livello dello zip (se qualcosa non funziona prova a scaricare una versione vecchia di eclipse)
    2. indica la cartella di workspace, che è la cartella dove andranno a mettersi tutti i progetti
  2. Come web Server usiamo Tomcat che si trova su: http://tomcat.apache.org/ scarica il .zip dell’ultima versione
  3. Diciamo a eclipse dove si trova il server web: menù – Window – Preferences – Server – Runtime Environments – Add – seleziona la versione di Apache – in “Tomcat installation directory” indica la directory dove hai scompattato il tomcat – Finish – OK
  4. Creare un nuovo progetto
    1. dal menù di ecplise – File – New Other…, Web – Dynamic Web Project – Next
    2. Project Name: chiaramente il nome del progetto
    3. Target runtime: indicare il webserver che abbiamo settato precedentemente
    4. Per il resto lascia tutto invariato
  5. Alla fine troverà a sinistra (nell’elenco dei progetti presenti nel tuo workspace) il nome del progetto appena creato con la struttura di default (ckicca sulla freccia a sinistra del nome per visualizzare i file e le directory create da eclipse per un progetto Dynamic Web Project
  6. Click col tasto destro su nome del progetto – New – Other – Web – “HTML File” – Next
  7. Indica come nome del file index.html (non cambiare il nome) – Finish
  8. Ecplise, in automatico edita il file appena creato tra <body> e </body> scrivi <h1>Ciao</h1> salviamo il file
  9. Settiamo il Web Server tra i server disponibili per la pubblicazione:
    1. In basso click sul tab Server
    2. Click su “No servers are available. Click this link to create a new server…”
    3. Seleziona il web server (il tomcat scompattato precedentemente)
    4. Next – Finish
    5. La scritta è sostituita dall’eventuale nome dato al punto 3 (di default Tomcat ………)
  10. Pubblichiamo il progetto
    1. Tasto destro sulla scritta “Tomcat ………..”
    2. Add and Remove
    3. Seleziona il progetto e portalo nella colonna Configured
    4. Qui sono elencati tutti i progetti che il tomcat pubblicherà, che comunque sono elencate sotto il nome del server “Tomcat ……”
  11. Avvia il Web Server
    1. Seleziona “Tomcat ….” e click sull’insetto (per avviare in modalità debug
    2. Oppure tasto destro sulla scritta “Tomcat…. -> Debug”
  12. Il tom scriverà informazioni nel tab Console, che si concluderà con “INFORMAZIONI: Server startup in 324 ms”
  13. Apri un browser e nell’input dell’url digita http://locahost:8080/nomeDelProgetto
  14. Dovresti vedere la scritta “Ciao”

Complimenti hai pubblicato il tuo primo progetto web

  1. Ferma il Web Server:
    1. Dal tab Servers click sullo stop a destra
    2. oppure tasto destro sulla scritta Tomcat… -> Stop
    3. Adesso l’url del browser ti dirà che non riesce a stabilire una connessione col server