September 2007 Archives

Parancoe AJAX Tutorial

The Parancoe Web module provides AJAX features through an integration of the DWR library.

This tutorial will show you how to use this integration for write the AJAX functionalities of your application.

Even if you can use the following features in your own, started from the ground, application, the tutorial base environment is and application created through the Parancoe Web Archetype. See Starting a Web Project with Parancoe.

Index

Add a method you can ajax-call

The DWR configuration isn’t in a separate file. You configure it in your applcation Spring configuration file: parancoe-servlet.xml.

For example, You need to populate your database, clicking on a link in a page. You don’t want to have a page reloading, so you need an AJAX call.

Put the code that populates the DB in a Java class:


public class PersonBo {

    public void populateArchive() {
      // doing DB population
    }

    // ...
}

Now You need to declare that method is callable through DWR. In your parancoe-servlet.xml:


<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" 
       xmlns:parancoe="http://www.parancoe.org/schema/parancoe" 
       xmlns:dwr="http://www.directwebremoting.org/schema/spring-dwr" 
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans-2.0.xsd
       http://www.parancoe.org/schema/parancoe
       http://www.parancoe.org/schema/parancoe.xsd
       http://www.directwebremoting.org/schema/spring-dwr
       http://www.directwebremoting.org/schema/spring-dwr-2.0.xsd" 
       default-lazy-init="false" >

    <!-- ... -->

    <bean id="personBO" class="com.mycompany.prova2.blo.PersonBo">
        <!-- anything you need in your object -->

        <dwr:remote javascript="personBO">
            <dwr:include method="populateArchive"/>
            <!-- more dwr:include -->
        </dwr:remote>
    </bean>

    <!-- ... -->
</beans>

This configuration automatically generate a JavaScript proxy containing that method, You can use in your pages:


<html>
    <head>
        <!-- inclusion from the parancoe web archetype --> 
        <%@ include file="head.jspf" %>
        <!-- inclusion of the personPO javascript proxy -->
        <script src="${cp}/dwr/interface/personBO.js" 
                type="text/javascript"></script>
    </head>
    <!-- DWR initialization on page loading -->
    <body onload="parancoe.util.initDWR()">

        <!-- ... -->

         <!-- note: this is an AJAX call to Java code on the server -->
        <a href="#" onclick="personBO.populateArchive()"; return false;">Populate</a>

        <!-- ... -->

    </body>
</html>

Write a method that returns simple data

If you need to return data to your page after an ajax call, simply define a method returning a value. DWR can generate proxies for all basic Java data types.


public class PersonBo {

    public String getFullName(Long personId) {
      // retrive the person with that id
      return p.getFirstName()+" "+p.getLastName();
    }

    // ...
}

Declare it in your DRW configuration in the parancoe-servlet.xml:


<bean id="personBO" class="com.mycompany.prova2.blo.PersonBo">
    <!-- anything you need in your object -->

    <dwr:remote javascript="personBO">
        <dwr:include method="getFullName"/>
        <!-- more dwr:include -->
    </dwr:remote>
</bean>

Now You can you it in you Javascript code in your pages:


<html>
    <head>
        <!-- inclusion from the parancoe web archetype --> 
        <%@ include file="head.jspf" %>
        <!-- inclusion of the personPO javascript proxy -->
        <script src="${cp}/dwr/interface/personBO.js" 
                type="text/javascript"></script>
    </head>
    <!-- DWR initialization on page loading -->
    <body onload="parancoe.util.initDWR()">

        <div>
            Person Id: <input type="text" id="personId"/>
            <input type="button" value="Search" 
                   onclick="updateFullNameDiv($('personId').value)"/>
        </div>

        <div id="fullNameDiv"></div>

        <script type="text/javascript"/>
           function updateFullNameDiv(personId) {
             // note: this is an AJAX call to Java code on the server
             personBO.getFullName(personId, function (data) {
                $('fullNameDiv').innerHTML = data;
             });
           }
         </script>

    </body>
</html>

Write a method that returns complex data

If You want to return a complex object to your page (or pass a complex object to a method), you need to declare the object type in your DWR configuration in your parancoe-servlet.xml:


<bean id="personBO" class="com.mycompany.prova2.blo.PersonBo">
    <!-- anything you need in your object -->

    <dwr:remote javascript="personBO">
        <dwr:include method="retrievePerson"/>
        <!-- more dwr:include -->
    </dwr:remote>
</bean>

<dwr:configuration>
    <dwr:convert type="bean" class="com.mycompany.prova2.po.Person" />
</dwr:configuration>

The method is something like:


public class PersonBo {

    public Person retrievePerson(Long personId) {
      // retrieve the person with that id
      return p;
    }

    // ...
}

Now in your page:


<html>
    <head>
        <!-- inclusion from the parancoe web archetype --> 
        <%@ include file="head.jspf" %>
        <!-- inclusion of the personPO javascript proxy -->
        <script src="${cp}/dwr/interface/personBO.js" 
                type="text/javascript"></script>
    </head>
    <!-- DWR initialization on page loading -->
    <body onload="parancoe.util.initDWR()">

        <div>
            Person Id: <input type="text" id="personId"/>
            <input type="button" value="Search" 
                   onclick="updateFullNameDiv($('personId').value)"/>
        </div>

        <div id="fullNameDiv"></div>

        <script type="text/javascript"/>
           function updateFullNameDiv(personId) {
             // note: this is an AJAX call to Java code on the server
             personBO.retrievePerson(personId, function (data) {
                $('fullNameDiv').innerHTML = data.firstName+' '+data.lastName;
             });
           }
         </script>

    </body>
</html>

Manipulate the page from the Java code

With DWR’s reverse AJAX features you can remove most of the JavaScript code from your page, manipulating the page content directly from the server-side Java code.

As always, declare your method in your parancoe-servlet.xml:


<bean id="personBO" class="com.mycompany.prova2.blo.PersonBo">
    <!-- anything you need in your object -->

    <dwr:remote javascript="personBO">
        <dwr:include method="updateFullName"/>
        <!-- more dwr:include -->
    </dwr:remote>
</bean>

In the method You can use the org.directwebremoting.proxy.dwr.Util class:


public class PersonBo {

    public void updateFullName(Long id) {
        WebContext wctx = WebContextFactory.get();        
        ScriptSession session = wctx.getScriptSession();
        Util util = new Util(session);
        // retrieve the person with that id
        util.setValue("fullNameDiv", p.getFirstName()+" "+p.getLastName());

        // You can also use scriptaculous effects
        Effect effect = new Effect(session);
        effect.highlight("fullNameDiv");
    }

    // ...
}

Note, You are writing Java code, not JavaScript code. If you need, you can even display scriptaculous effects.

Now in your page:


<html>
    <head>
        <!-- inclusion from the parancoe web archetype --> 
        <%@ include file="head.jspf" %>
        <!-- inclusion of the personPO javascript proxy -->
        <script src="${cp}/dwr/interface/personBO.js" 
                type="text/javascript"></script>
    </head>
    <!-- DWR initialization on page loading -->
    <body onload="parancoe.util.initDWR()">

        <div>
            Person Id: <input type="text" id="personId"/>
            <input type="button" value="Search" 
                   onclick="personBO.updateFullName($('personId').value)"/>
        </div>

        <div id="fullNameDiv"></div>

    </body>
</html>

Note again: mostly no JavaScript code, except the call to your method.

...to be continued.

Continue Reading…

Posted by Lucio Benfante on Sep 26, 2007

Parancoe for dummies (like me) - Prima parte

Questa serie di articoli insegna ad usare Parancoe conoscendo solo quello che serve a personalizzare un modello base (archetipo).

Non dà istruzioni alternative ad uno scenario fisso (chiaramente chi sa, può fare tutte le variazioni che vuole);

Lo scenario fisso è:

  1. Sistema operativo Windows XP;
  2. JDK 1.5.0_12;
  3. Uso dell’IDE NetBeans 6.0 M10;
  4. Uso di Maven2;
  5. Uso del database HSQLDB 1.8.0.4;
  6. Uso del server Tomcat 6.0.13;
  7. Uso di Microsoft Internet Explorer;

Questo primo articolo porta step by step alla creazione dell’ambiente e dell’archetipo web di Parancoe su cui fare le proprie personalizzazioni.

Aprire una cartella in cui scaricare da Internet quanto serve (es: DRIVER).

Gli steps sono:

  1. Download e installazione di Java
  2. Download e installazione di NetBeans
  3. Verifica della corretta installazione di Tomcat
  4. Download e installazione di Hsqldb
  5. Plugin di Maven in NetBeans
  6. Scarico dell’archetipo Web di Parancoe
  7. Lancio del progetto creato con l’archetipo Web di Parancoe

Download e installazione di Java

Collegarsi al sito sun con www.sun.com/download

cliccare su SDKs (Software Developement Kits)

quindi cliccare su Java 2 Platform Standard Edition 5.0

cliccare su JDK 5.0 Update 12

scegliere Accept e senza altra scelta compare la videata successiva

scegliere Windows offline e cliccare sulla descrizione stessa

scegliere Salva facendo affluire l’exe nella cartella DRIVER creata appositamente;

Alla fine lanciare l’exe scaricato; Viene richiesto l’assenso di accettazione licenza cui si deve rispondere scegliendo I accept e cliccando su next.

Seguono due schermate:

con cui si permette un settaggio personalizzato. Non modificare nulla e cliccare su next.

Con la schermata successiva :

si può scegliere come browser associato a Java, Microsoft Internet Explorer; sceglierlo e cliccare su next.

La prossima schermata comunica il completamento dell’installazione.

cliccare su finish.

Ora bisogna registrare il path di Java. Andare sul Pannello di controllo e scegliere Prestazioni e manutenzione.

quindi dalla schermata successiva scegliere Sistema

dalla videata che si apre scegliere Avanzate / Variabili d’ambiente

e creare una nuova variabile di sistema

Nome variabile = JAVA_HOME ; Valore variabile = c:\Programmi\Java\jdk1.5.0_12

Quindi modificare il path

mettendo alla fine del percorso già esistente

;%JAVA_HOME%

Chiudere tutte le finestre aperte e fare la

Verifica dell’installazione e registrazione:

Aprire il prompt dei comandi

e digitare

java –version

se viene risposto in modo adeguato (vedi schermata) è tutto OK altrimenti verificare i passi precedenti soprattutto la fase di registrazione.

Download e installazione di NetBeans.

Collegarsi al sito www.netbeans.org.

cliccare sulla figura 6.0 (anche se ancora in lavoro funziona bene);

nella videata che si apre cliccare su Download Preview;

e qui cliccare su download dello standard; Scaricare (non eseguire) in DRIVER netbeans-6.0m10-standard-windows.exe; Eseguire quindi l’exe scaricato;

cliccare su Customize

e marcare Apache Tomcat 6.0.13 e cliccare su OK

come si può notare ora i runtimes sono due : Glassfish e appunto Tomcat; cliccare su Next;

viene proposta l’accettazione della licenza a cui si risponde cliccando su I accept e quindi next

accettare le scelte proposte cliccando su next

ancora accettare le scelte proposte e cliccare su next

ora viene proposta la location per l’installazione di Tomcat; in questo caso consiglio di modificarlo in modo di rendere il percorso più corto e maneggevole; quindi da quello proposto suggerisco :

c:\Programmi\Apache\Tomcat 6.0

quindi next; Viene quindi proposto un riepilogo delle scelte fatte

cliccando su Install inizia l’installazione vera e propria alla fine della quale ne viene segnalato il completamento positivo;

cliccare su Finish;

Verifica della corretta installazione di Tomcat

Durante l’installazione di NetBeans è stata eseguita anche l’installazione di Tomcat; Con Risorse del computer posizionarsi in

C:\Programmi\Apache\Tomcat 6.0\bin

E da qui cliccando col tasto destro su startup.bat eseguire “Invia a Desktop”; cioè crea un icona sul Desktop con cui lanciare lo startup di Tomcat;

Modificare la descrizione dell’icona appena creata rendendola più riconoscibile (es. startup di Tomcat 6.0) Quindi cliccare due volte su detta icona per lanciare lo startup di Tomcat Si apre una finestra con il contenuto sottostante:

Nella riga INFO di Initializing Coyote viene segnalata la porta che è stata assegnata; di solito 8080; controllare e in caso di diversità prenderne nota. Avviare il browser di Internet Explorer e digitare nella casella dell’indirizzo:

http://localhost:8080

(8080 è la porta inizializzata a Coyote quindi deve essere sostituito con l’eventuale valore diversamente assegnato)

Deve aprirsi questa schermata:

se non si apre, accedere a c:\Programmi\Apache\Tomcat 6.0\Running.txt

Consultare la parte finale del testo

“Troubleshooting”

dove vengono esaminate le cause più frequenti di malfunzionamento; secondo me la più frequente è la terza.

Non continuare se non si è risolto il problema!!!

Download e installazione di Hsqldb;

Collegarsi al sito hsqldb.sourceforge.net

cliccare su:

downloads latest stable version 1.8.0.7

cliccare su download della riga hsqldb

cliccare su hsqld_1_8_0_7.zip dovrebbe aprirsi questa schermata con la richiesta “Salvare o aprire il file”; se non si apre controllare che non ci sia un blocco di sicurezza contro il download e levarlo;

cliccare su Salva mandandolo nella solita cartella (DRIVER) Terminato il download cliccare sullo zip scaricato mandando il risultato in una cartella (creata appositamente) HSQLDB;

andare in c:\HSQLDB\hsqldb\lib e copiare hsqldb.jar in c:\Programmi\Apache\Tomcat 6.0\lib

Plugin di Maven in NetBeans

NB. Questa operazione, pur sembrando locale, va fatta essendo collegati in Internet.

Lanciare NetBeans

e quindi

Tools/Plugins

Dopo un certo periodo durante il quale compare la scritta “Inizializing the list of plugins..” viene proposta una schermata come quella sottostante sulla quale bisogna scegliere il tab “New Plugins” e settare la riga “Maven”

cliccare quindi su Install.

cliccare su next e alla richiesta di accettazione licenza

marcare I accept e cliccare su Install

Alla fine del processo, che su linee a bassa velocità può durare anche mezzora, compare questa videata

cliccare su Finish.

e quindi su Close.

D’ora in poi fra le categorie di progetti di NetBeans compare anche la voce “Maven”

Scarico dell’archetipo Web di Parancoe;

NB. Questo step va eseguito collegati a Internet su una linea a banda larga; se si lancia con una linea lenta può durare oltre 10 ore.

Lanciare NetBeans e quindi File/New Project:

scegliere Maven nella colonna Categories e Maven Project nella colonna Projects Cliccare su next

cliccare su Add;

Inserire i dettagli richiesti per l’archetype: Group Id : org.parancoe Artifact Id : parancoe-webarchetype Version: 0.3.2 Repository: http://maven2.parancoe.org/repo

Cliccare su OK Nella lista degli archetypes compare ora “Custom archetype – parancoe-webarchetype”

selezionare detta riga e cliccare su next;

Vengono ora richiesti (e suggeriti) i parametri per la creazione di un progetto uguale all’archetype. Dovrebbe bastare inserire in Project Name il nome del progetto (in questo caso esemplificativo “person” ) e NetBeans completa il resto; Per annullare gli effetti di un disallineamento fra NetBeans e Parancoe (disallineamento che verrà eliminato dalla prossima versione di Parancoe), bisogna correggere il Group Id da “com.mycompany” in “com.mycompany.person”. Questa correzione va però a modificare anche il package che diventa “com.mycompany.person.person” e deve essere corretto manualmente in “com.mycompany.person”. Cliccare su Finish.

come si vede nella finestra dei progetti è stato aggiunto il progetto “person Web Application (war);

Durante una verifica della procedura si è verificato un errore a carico del ResourceManager, come si vede dalle due schermate precedenti e di conseguenza il progetto è risultato imperfetto segnalato da NetBeans con un punto esclamativo rosso e dalla presenza della riga “Show and resolve Problems.. “ nel menu a caduta ottenuto cliccando col tasto destro sul progetto stesso:

Cliccando sulla riga sopra descritta compare il riquadro seguente:

cliccare su “Download Libraries” e il progetto verrà completato regolarmente. Se ancora il progetto dovesse essere marcato con il punto esclamativo rosso, attivare Tools/Options/Miscellaneous/Maven

e cliccare su “Index Now”.

Un problema che si è presentato durante una verifica è la non stabile permanenza della riga “Custom archetype – Parancoe webarchetype” nel secondo step di New Project. Se si presenta detto problema, ogni volta che si vuole creare un nuovo progetto sulla base dell’archetipo Parancoe, bisogna ripetere i passi di “Add” nuovo archetipo imputando i parametri richiesti ( e citati sopra); questo comporta solo una ripetizione delle digitazioni senza però la ripetizione dello scarico delle librerie che si trovano già nel repository locale.

Lancio del progetto creato con l’archetipo Web di Parancoe

Da dentro NetBeans Run / Run Main Project

Sulla pagina Output di NetBeans si vedono delle informazioni sulla attività svolta che va dalla compilazione dei source al deploy dell’applicazione; Infine viene lanciato automaticamente Tomcat e quindi il browser con la richiesta di collegamento al localhost alla porta 8084 e all’applicazione person (http://localhost:8084/person) e quindi viene visualizzata la home page dell’archetipo.

cliccare su persone e viene richiesto il login all’applicazione

digitare admin sia in Utente che in Password e cliccare su Accedi. Viene quindi mostrato il contenuto del database (vuoto in questo caso) e i comandi per eseguire delle operazioni

cliccare su Popola l’archivio e il risultato è la creazione di tre persone e la relativa lista sullo schermo

cliccare su edit vicino ad una persona e i dati della persona vengono editati con la possibilità di variarli

premendo submit i dati vengono acquisiti dal database e la lista rispecchia i cambiamenti eventualmente apportati. Provate ad utilizzare le varie possibilità offerte dall’applicazione.

Tenete presente che il database è configurato in memoria e pertanto ad ogni apertura di sessione (cioè chiusura e rilancio di Tomcat) il database riparte da zero.

Prossimi articoli

Nei prossimi articoli spiegheremo con esempi come modificare l’applicazione per farne una come ne abbiamo bisogno.

Come anticipo :

  • Configurare il database in modo che sia persistente.
  • Aggiungere campi alla tabella presente attualmente
  • Aggiungere altre tabelle al database
Continue Reading…

Posted by Ugo Benfante on Sep 23, 2007