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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.