• Il server è notificato da un'azione del client da un messaggio XML usando l'oggetto XMLHttpRequest.
• Il server processa l'input ricevuto, modificando lo stato dell'applicazione lato server per riflettere le azioni dell'utente.
• Il server risponde al client con un messaggio XML che contiene le direttive per l'update dello stato del client.
• Il client riceve il messaggio di risposta e lo processerà in modo da effettuare gli update necessari al DOM pella pagina.

Per questa applicazione ho usato Apache Tomcat 5.5.17, ma qualsiasi servlet container andrà bene.

Scarichiamo Echo2 versione 2.0.0 al link http://www.nextapp.com/platform/echo2/echo/download/ e scompattiamolo sul filesystem.

Nella directory “SourceCode/src/exampleapp” ci sono delle applicazioni di esempio che possiamo usare come scheletro per scrivere la nostra, io ad esempio ho usato questa struttura:



Fig 1- struttura del progetto

Nella root abbiamo il build.xml e ant.properties
Nella directory src/deploy abbiamo il web.xml
In src/htdocs abbiamo una semplice pagina di benvenuto index.html
In src/java avremo la nostra applicazione nel package web20.echo2.news
In lib naturalmente ci sono le librerie usate dall'applicazione

Per creare una web application con Echo bisogna creare due classi:
un ApplicationInstance e un WebContainerServlet.

ApplicationInstance è una classe astratta con un metodo init() che deve essere definito dallo sviluppatore. Il metodo init() è invocato per inizializzare lo stato dell'interfaccia utente. Esso deve ritornare un oggetto Window di Echo.

Analizziamo il seguente codice:

public class HelloWorldApp extends ApplicationInstance {
    public Window init() {
        Window window = new Window();
        ContentPane contentPane = new ContentPane();
        window.setContent(contentPane);
        Label label = new Label("Hello, world!");
        contentPane.add(label);
        return window;
    }
}

Questa classe rappresenta un'applicazione Echo che scrive sul browser la famigerata scritta “Hello, world!”.

Come notiamo la classe HelloWorldApp estende ApplicationInstance e quindi deve implementare il metodo init().

Oltre l'oggetto Window troviamo anche altri oggetti Echo, come ContentPane e Label del tutto paragonabili ai Container SWING.

L'oggetto ContentPane rappresenta un generico container in cui troviamo l'oggetto Label che scrive sulla finestra del browser “Hello, world!”.

WebContainerServlet invece è una classe Echo che deriva da HttpServlet.
La sua funzione, dal punto di vista implementativo, è quello di creare nuove ApplicationInstance.

public class HelloWorldServlet extends WebContainerServlet {
    public ApplicationInstance newInstance() {
        return new HelloWorldApp();
    }
}

Seguendo questi due “must” iniziamo a scrivere la nostra applicazione:

la “servlet”:

public class NewsServlet extends WebContainerServlet {

    private static final long serialVersionUID = 1L;

    public ApplicationInstance newApplicationInstance() {
        return new NewsApp();
    }
}

e la nostra applicazione:

public class NewsApp extends ApplicationInstance {

    private static final long serialVersionUID = 1L;
    private Window window;
  
    /**
     * questo metodo viene richiamato dal container
     * quando viene invocata la servlet
     */
    public Window init() {
        window = new Window();
        window.setTitle("Echo2 Example");
        return window;
    }
    ...
    ...

Abbiamo così creato le basi per scivere la nostra applicazione.

I componenti possono registrare un ActionListener che riceverà un ActionEvent (così come avviene nelle SWING) per poter effettuare delle operazioni applicative.

Ad esempio:
        Button button = new Button("Login Admin");
        button.addActionListener(new ActionListener() {
            private static final long serialVersionUID = 1L;
            public void actionPerformed(ActionEvent e) {
                processLoginAdmin();
            }
        });

Al Button “Login Admin” aggiungo un ActionListener che provvederà ad effettuare alcune operazioni eseguendo il metodo actionPerformed.
n questo esempio, quando premo il pulsante “Login Admin”, viene richiamato un metodo privato  processLoginAdmin che effettuerà i controlli necessari per effettuare la login.

    private void processLoginAdmin() {
        if(!(NewsApp.getApp().loginAdmin(userNameField.getText(), passwordField.getText())))
            getApplicationInstance().getDefaultWindow().getContent().add(new ErrorLogin());
    }

Da notare che la logica di login è spostata nell'applicazione, infatti è buona norma lasciare la logica dell'applicazione al di fuori dei Component.

Tramite il metodo statico getApp(), posso lavorare con l'istanza della mia applicazione e richiamarne i metodi di business come in questo caso la login.

public class NewsApp extends ApplicationInstance {
...
...
    public boolean loginAdmin(String username, String password){
        boolean userExist = false;

    ...
    ...        
        return userExist;
    }
...
...

Nel caso in cui non si hanno i privilegi per la login, viene aggiunto un componente (ErrorLogin) che rappresenta una piccola finestra con un messaggio di errore alla pagina.

ll database utilizzato per l'applicazione è HSQL, scritto completamente in java ed utilissimo da usare durante lo sviluppo di applicazioni come database di test.

Per questa applicazione ho utilizzato la modalità database su file, le tabelle usate sono 2:

1. USERS, dove ci sono tutti gli utenti che hanno il ruolo di admin
2. NEWS, dove ovviamente vengono memorizzate le news

Adesso creiamo il nostro war e poi deployamo su tomcat.

Nella root del progetto abbiamo 2 file: build.xml e ant.properties in cui bisogna configurare alcune variabili per un corretto build dell'applicazione.

project.name	Echo2 news
debug	yes
servlet.lib.jar	D:/apache_projects/apache-tomcat-5.5.17/common/lib/servlet-api.jar
echo2.home	D:/java/NextApp_Echo2
echo2.app.lib.jar	${echo2.home}/BinaryLibraries/Echo2_App.jar
echo2.webcontainer.lib.jar	${echo2.home}/BinaryLibraries/Echo2_WebContainer.jar
echo2.webrender.lib.jar	${echo2.home}/BinaryLibraries/Echo2_WebRender.jar
warfile	Echo2.war
dir.src	src
dir.src.app	${dir.src}/java
dir.src.htdocs	${dir.src}/htdocs
dir.src.deploy	${dir.src}/deploy
dir.build	build
dir.war	war

Naturalmente i path usati nel file di configurazione sono personalizzabili.

Lanciamo ant per create la nostra applicazione:

e copiamo il file Echo2.war, creato nella directory war, all'interno della directory di deploy di tomcat, ossia in TOMCAT_HOME/webapps.

Finalmente ora possiamo vedere in azione Echo2.

Lanciamo il server e scriviamo sul browser:

http://localhost:8080/echo2, ci apparirà questa pagina:

Fig 4 - Pagina di start

Nella pagina troveremo un link che punterà alla servlet e che ci istanzierà la nostra applicazione. Entriamo:

Fig 5 - il WindowPane

ci appare una finestra (il famoso WindowPane) in cui è possibile effettuare la login.

Da notare che possiamo muovere questa finestra per tutta l'area del browser.

Se vogliamo modificare le news ci autentichiamo come amministratori (admin/admin), altrimenti selezioniamo GUEST.

Entriamo come guest ed inseriamo una news cliccando sul tasto corrispondente:

Fig 6 - Inserisci una nuova news

Inseriamo una news e salviamola (icona verde ).

Fig 7 - finestra inserimento testo e salvataggio news

Notiamo che tutte queste operazioni vengono effettuate senza il refresh della pagina.

Si può provare ad inserire altre notizie e ad aprirle tutte nella stessa pagina.

Fig 8 - vista dell' elenco dell news nella singola finestra

naturalmente il tutto ancora senza il refresh della pagina!




Fig 9 - vista dell' elenco delle news iin modalità estesa in tutta la pagina