Sviluppare un’applicazione web Ajax con Java ed Ext JS

In questo post vedremo come sviluppare un’applicazione web Ajax, acronimo di Asynchronous JavaScript and XML, utilizzando Java come tecnologia server side ed il framework JavaScript Ext JS per la parte Client side. Lo sviluppo di applicazioni web con Ajax si basa su uno scambio di dati in background fra web browser e server, che consente l’aggiornamento dinamico di una pagina web senza esplicito ricaricamento da parte dell’utente. Ajax è asincrono nel senso che i dati extra sono richiesti al server e caricati in background senza interferire con il comportamento della pagina esistente.

Come formato di scambio dei dati utilizzeremo il protocollo JSON che è supportato nativamente da Ext JS, mentre per Java utilizzeremo la libreria Json-lib che consente di convertire i tipi di dati Java in tipi di dati JavaScript.

La prima cosa da fare è scaricare la libreria .jar e relative dipendenze (si veda questo articolo) di Json-lib a questo indirizzo:

http://sourceforge.net/projects/json-lib/files/json-lib/

Se abbiamo già seguito l’articolo su Ext JS, possiamo saltare la fase seguente di download di Ext JS e configurazione del progetto Eclipse e cominciare da qui.

Altrimenti bisogna ottenere il framework Ext JS (giunta alla versione 4) da questo indirizzo:

http://www.sencha.com/products/extjs/download/ext-js-4/173

Per i nostri esempio utilizzeremo come di consueto l’IDE Eclipse, di conseguenza la prima cosa dare è creare un progetto di tipo Web Dinamico.

Dalla barra dei menu di Eclipse clicchiamo su File -> New -> Project…, nel wizard per il New Project, selezioniamo Web -> Dynamic Web Project:

Clicchiamo su Next si aprirà questo pannello:

Inseriamo in nome del nostro progetto e lasciamo il resto da Default

Diamo un nome al nostro progetto, scegliamo in Configuration lasciamo Default e clicchiamo su Next fino ad arrivare al tasto Finish (non dobbiamo includere alcuna libreria jar o Runtime particolare).

Creiamo una cartella js all’interno di WebContent e vi copiamo i file ext-all.js, ext-all-debug.js e bootstrap.js che sono presenti nel pacchetto ext-4.0.0-gpl.zip che abbiamo scaricato in precedenza.

Copiamo poi la cartella resources all’interno di WebContent, possiamo copiarci anche la cartella locale (che contiene le stringhe per la localizzazione) anche se al momento non la usiamo.

Otteniamo queste cartelle nel notro progetto:

La struttura del nostro progetto

Includiamo ora nel Build Path le librerie che abbiamo scaricato precedentemente. Per farlo possiamo copiare la libreria direttamente nel folder /WebContent/WEB-INF/lib tramite drag and drop dalla cartella in cui l’abbiamo scaricata, così facendo ritroveremo la libreria sotto Web App Libraries:

Le librerie compariranno sotto il folder Web App Libraries

Creiamo ora una pagina HTML5 nel nostro progetto, cliccando col tasto destro sulla cartella WebContent dello stesso e scegliendo poi New -> Other…, nella categoria Web selezioniamo HTML File e clicchiamo Next. Digitiamo ora il nome della pagina e continuiamo con Next, nella prossima schermata, tra i vari template, scegliamo New HTML5 Page.

La pagina viene ora aperta all’interno del nostro editor e mostra il seguente codice:


<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
</body>
</html>

creiamo al suo interno un pannello di tipo form utilizzando Ext JS, lo popoliamo con due campi ti testo semplici e due pulsanti, uno  di invio del form ed uno che azzeri i campi:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>AppuntiSoftware.it - Esempio Ajax</title>
<script type="text/javascript" src="./js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css" />
<script type="text/javascript">
Ext.onReady(function(){
 Ext.create('Ext.form.Panel', {
  title: 'Test Form',
  renderTo: Ext.getBody(),
  bodyPadding: 5,
  width: 350,
  height: 200,
  // Il form invia una richiesta AJAX a questa URL
  url: 'testAjax.jsp',
  layout: {
   type: 'vbox',       // Posiziona i campi verticalmente
   align: 'stretch',    // Ognuno occupa tutta la larghezza
   padding: 20
  },
  items: [{
   fieldLabel: 'Nome',
   name: 'nome',
   minLength : 5,
   allowBlank: false,
   xtype: 'textfield'
   },{
   fieldLabel: 'Cognome',
   name: 'cognome',
   minLength : 5,
   allowBlank: false,
   xtype: 'textfield'
   }],
  buttons: [{
   text: 'Reset',
   handler: function() {
   this.up('form').getForm().reset();
   }
   }, {
   text: 'Invia',
   handler: function() {
    // Il metodo getForm()ritorna una istanza di Ext.form.Basic
    var form = this.up('form').getForm();
    if (form.isValid()) {
      // Invia la richiesta Ajax e gestisci la risposta
      form.submit({
       success: function(form, action) {
        Ext.Msg.alert('Successo', action.result.msg);
        },
      failure: function(form, action) {
       switch (action.failureType) {
        case Ext.form.action.Action.CLIENT_INVALID:
          Ext.Msg.alert('Errore', 'I campi del Form non possono essere inviati con valori errati');
        break;
        case Ext.form.action.Action.CONNECT_FAILURE:
          Ext.Msg.alert('Errore', 'Errore nella comunicazione Ajax');
        break;
         case Ext.form.action.Action.SERVER_INVALID:
          Ext.Msg.alert('Errore', 'Richiesta non valida');
     }
    },
    waitMsg: 'Waiting...',
    waitTitle: 'Attendere prego'
    });
  }
  else
    Ext.Msg.alert('Errore', "Campi del Form non validi!");
  }
  }]
 });
});
</script>
</head>
<body>
</body>
</html>

Dettagliamo meglio il codice scritto: come si vede esso è posizionato tutto all’interno della funzione onReady per essere sicuri che tutti gli elementi DOM siano caricati; dopo creiamo un form di tipo Ext.form.panel assegnandogli un titolo con l’attributo title, come posizione il tag html body, utilizzando Ext.getBody(), il padding e le dimensioni.
L’attributo url specifica l’indirizzo a cui verrà inoltrata la richiesta Ajax, nel nostro caso essa sarà diretta alla pagina jsp testAjax.jsp, supponendo che stiamo lavorando su localhost, l’indirizzo completo è il seguente:

http://localhost:8080/nomeprogetto/testAjax.jsp

Posizioniamo all’interno del pannello un layout di tipo vbox, così facendo i campi che aggiungiamo verranno disposti verticalmente occupando tutta la larghezza (attributo stretch).

Inseriamo i due field che saranno di tipo textfield (settando xtype: ‘textfield’) aggiungiamo anche un controllo sulla lunghezza (i dati inseriti devono essere lunghi almeno 5 caratteri e senza caratteri blank).

Infine vi sono i due pulsanti di invio e di reset. Quest’ultimo ha come handler una funzione che resetta tutti i campi nel momento in cui si clicca sul pulsante.

Il pulsante Invia ha invece una funzione handler la quale recupera il form e se è valido (i campi sono corretti) lo invia all’url che abbiamo specificato sopra.

In caso di successo viene recuperata la variabile msg dal risultato ottenuto e stampata a video, altrimenti viene richiamato l’handler failure e viene stampato a video la condizione di errore in base al codice ritornato.

Durante le operazioni di scambio messaggi, viene visualizzato un pannellino di attesa.

La risposta attesa dal form in formato JSON è di questo tipo:

{
 "success":true, // di tipo Booleano e non String
"msg":"Inviato con successo"
}

se la richiesta non è stata accettata, altrimenti:

{
 "success":false, // di tipo Booleano e non String
 "msg":"Richiesta rifiutata"
}

Creiamo ora una pagina jsp che con l’ausilio della libreria Json-lib, possa fornire una risposta JSON in quel formato:


<%@page import="net.sf.json.JSONObject"%>

<%
String nome=request.getParameter("nome");
String cognome=request.getParameter("cognome");
String message = "Ciao "+nome+" "+cognome;
JSONObject risposta=new JSONObject();
risposta.put("success", true);
risposta.put("msg",message);
%>

<%=risposta%>

Recuperiamo i parametri nome e cognome dalla request (inviateci dal form) e costruiamo una risposta di tipo JSON utilizzando la classe JSONObject fornita dalla libreria.

Proviamo ora la nostra applicazione dovremmo ottenere il seguente risultato a video:

Clicchiamo sul tasto Invia del form ed il server dovrebbe ritornarci la risposta corretta

Se sostituiamo il valore true con il valore false, nella variabile JSON success (risposta.put(“success”, false);), verrà richiamata la funzione failure dopo il submit e verrà ritornato un codice SERVER_INVALID di conseguenza otterremo questo risultato:

Con la variabile success settata a false, viene ritornato un errore SERVER_INVALID

1 Stella2 Stelle3 Stelle4 Stelle5 Stelle (1 voti, media: 5,00 di 5)
Loading...
You can leave a response, or trackback from your own site.

Leave a Reply

*