Indice del forum Olimpo Informatico
I Forum di Zeus News
Leggi la newsletter gratuita - Attiva il Menu compatto
 
 FAQFAQ   CercaCerca   Lista utentiLista utenti   GruppiGruppi   RegistratiRegistrati 
 ProfiloProfilo   Messaggi privatiMessaggi privati   Log inLog in 

    Newsletter RSS Facebook Twitter Contatti Ricerca
Extjs e la potenza di Ajax: Lez 0
Nuovo argomento   Rispondi    Indice del forum -> Linguaggi per Internet
Precedente :: Successivo  
Autore Messaggio
freemind
Supervisor sezione Programmazione
Supervisor sezione Programmazione


Registrato: 04/04/07 20:28
Messaggi: 4643
Residenza: Internet

MessaggioInviato: 19 Mar 2009 23:46    Oggetto: Extjs e la potenza di Ajax: Lez 0 Rispondi citando

Salve a tutti.
Con questo post vorrei iniziare una serie di mini howto sull'uso di extjs, un potentissimo framework ajax.
A differenza che con il corso di php (che non è interroto) vorrei impostare i 3d riguardanti questo argomento come vere e proprie guide ognuna focalizzata su una singola cosa.
A parte questo post iniziale che introdurrà un po' il framework, tutti gli altri saranno cose del tipo: "Come usare le form", "Come usare le griglie" etc...
Sperando di farvi cosa gradita, comincio subito.

Due parole sul framework
Ormai il web 2.0 è tra noi, ajax è sempre più presente nel web, tutti i giorni nascono servizi su internet basati su questa tecnologia quindi sviluppare ajax alla vecchia maniera è diventato troppo pesante. Per questo motivo sono nati vari framework, jquery, dojo, extjs e altri.

Extjs viene rilasciato con due tipi di licenze, una a pagamento che permette a chi l'acquista di fare ciò che vuole del framework, l'altra è completamente gratuita a patto di rilasciare il proprio software sotto licenze che prevedono l'obbligo di fornire i sorgenti, come la gpl.

Il sito di riferimento è questo da cui si può scaricare il framework, la documentazione e visionare dei bellissimi esempi che chiariscono le potenzialità del pacchetto.

Extjs ha un potente motore per il dom traversing ma sopratutto possiede una stupenda libreria di widgets che ci permetteranno di creare delle vere e proprie RIA, bellissime, potenti e versatili, con una semplicità mai vista prima.
Come gli altri framework del genere prevede dei pattern per la programmazione ad oggetti che si integrano con quelli standard di javascript; grazie a questi è possibile anche se in maniera ancora un po' brutale di ragionare in termini di vera e propria OOP.

Iniziamo
Per prima cosa occorre scaricare l'sdk di extjs. Potete farlo da qui
All'interno dello zip troverete molte cose, esempi, sorgenti e ovviamente le librerie.
A noi interessano le seguenti directory:
Codice:

   - adapter
   - resources

e i files seguenti:
Codice:

   - ext-all-debug.js
   - ext-all.js
   - ext-core.js
   - ext-core-debug.js

Consiglio nei vostri origetti di creare una subdir "lib" con dentro una "subdir" ext-2.2.1 (è l'ultima versione anche se io per ora ho la 2.2) e in questa metterci le precedenti.

Ora vediamo un po' di codice; la struttura che propongo qui verrà portata avanti anche negli esempi futuri a meno di particolari esigenze.

Prepariamo una pagine di test per verificare che l'sdk sia correttamente installata; non preoccupatevi per ora di capire il codice, cercate di arrivare ad avere nel browser una piaccola finestra come mostra questa immagine:


test.html
Codice:

<?xml version="1.0" encoding="UTF-8" ?>
<!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">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Test!</title>
      
   <!-- core di extjs e js specifici -->
       <script type="text/javascript" src="/lib/ext-2.2/adapter/ext/ext-base.js"></script>
       <script type="text/javascript" src="/lib/ext-2.2/ext-all-debug.js"></script>
       
       <script type="text/javascript">
          Ext.onReady
          (
             function()
             {
                var win=new Ext.Window
                (
                   {
                      title: 'Test!',
                      border: true,
                      resizable: true,
                      closable: true,
                      shadow: false,
                      items:
                      [
                         {
                            'html': 'Questa &egrave; una finestra di prova!'
                         }
                      ]
                   }
                );
                
                win.show();
             },
             window
          );
       </script>
   
   <!-- css di extjs e css specifici -->
       <link rel="stylesheet" type="text/css" href="/lib/ext-2.2/resources/css/ext-all.css" />   
   </head>
   <body>
      
   </body>
</html>

Se visualizzate qualche cosa di simile alla figura allora extjs è installato bene nel vostro progetto!

Prima di proseguire voglio soffermarmi un attimo sulla chiamata a Ext.onReady.
Il metodo Ext.onReady viene chiamato in automatico quando il documento html ha finito di caricarsi, è importante scrivere il codice del proprio script lì dentro per essere sicuri che parta solo e soltanto quando tutti i componenti della pagina sono pronti. Nell'esempio di test non ci sono problemi ma quando inizierete a manipolare il dom allora è fondamentale che il nodo che cercate esista!
La sintassi base prevede che al metodo venga passata una funzione da chiamare quando il caricamento è completo: io ho scritto una funzione anonima direttamente inline.
L'eventuale secondo parametro rappresenta lo scope in cui viene eseguita, nel nostro caso l'oggetto di riferimento è window ossia l'attuale finestra del browser.

Ext
Javascript prevede vari metodi per raggiungere i nodi del dom che compongono la pagina e quello più conosciuto è: "document.getElementById()" usato per esempio con:
Codice:

   ...
      var myObj=document.getElementById('obj');
   ...

La riga precedente crea una var myObj che rapprenta il nodo con id "obj".
Questo ci permette di fare alcune cose sull'oggetto puntato: se fosse una casella di testo potremmo tramite:
Codice:

   ...
   var myObj=document.getElementById('obj');
   myObj.value="ciao!";
   ...

impostare il valore "ciao" alla stessa.
I problemi sorgono quando dobbiamo ottenere, ad esempio, un gruppo di oggetti con un certo nome, con una certa classe e su questi fare delle operazioni; saremmo costretti ad usare cose come document.getElementsByTagName che ritornerà un vettore di nodi e poi ciclarci all'interno per eseguire delle operazioni.

Nel framework abbiamo a disposizione l'oggetto Ext.Element che rappresenta un nodo generico. Esso fornisce dei metodi per accedere alle proprietà più comuni per quel tipo di nodo ed eventualmente l'accesso diretto alle altre.
Il precedente script potrebbe essere riscritto usando extjs tramite:
Codice:

   ...
   var myObj=Ext.get('obj');
   obj.setValue('ciao!');
   ...

Tra i due c'è poca differenza ma presto vedrete la potenza di Ext!
Il metodo Ext.get inoltre contiene un sistema di caching che permette di recuperare con una riga più nodi e operare su questi direttamente senza espicitare nessun ciclo all'interno della lista.
In più offre un'interfaccia normalizzata per i var browser, saranno pochi i casi in cui dovremmo capire il tipo di browser su cui sta girando lo script, il codice sarà quasi sempre uno e uno solo!

L'esempio che segue mostra una pagina con un div e lo script contiene delle righe commentate.
Vi invito a mettere il commento alla chiamata che ne è priva e a toglierlo ad un'altra.

alcune-chiamate.html
Codice:

   <?xml version="1.0" encoding="UTF-8" ?>
<!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">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Alcune chiamate!</title>
      
   <!-- core di extjs e js specifici -->
       <script type="text/javascript" src="/lib/ext-2.2/adapter/ext/ext-base.js"></script>
       <script type="text/javascript" src="/lib/ext-2.2/ext-all-debug.js"></script>
       
       <script type="text/javascript">
          Ext.onReady
          (
             function()
             {
                var myDiv=Ext.get('myDiv');
                
                myDiv.highlight();        // evidenzia il div
               //myDiv.center();         // centra il div
               //myDiv.setOpacity(.25);  // opacizza il div
             },
             window
          );
       </script>
   
   <!-- css di extjs e css specifici -->
       <link rel="stylesheet" type="text/css" href="/lib/ext-2.2/resources/css/ext-all.css" />   
   </head>
   <body>
      <div id="myDiv">
         Esempio di div
      </div>
   </body>
</html>


Selezionare i nodi
Non sempre possiamo selezionare un nodo tramite il suo id perchè non è detto che lo conosciamo. Oppure può capiatre di dover selezionare tutti i nodi aventi una certa classa o quelli di un certo tipo e di operarci sopra.
Come già detto dovremmo usare i metodi che javascript mette a disposione ma al più questi ritorneranno un vettore di nodi nel quale dovremmo ciclare.
Tramite il metodo Ext.select abbiamo la possibilità di eseguire delle query sul dom, estrarre gruppi di nodi e in una riga operare su essi! Il metodo funge diciamo da interfaccia verso la classe Ext.DomQuery che potrebbe essere usata direttamente. Nella maggior parte dei casi non sarà necessario perchè il metodo select ci aiuterà.
Codice:

<?xml version="1.0" encoding="UTF-8" ?>
<!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">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Paragrafi!</title>
      
   <!-- core di extjs e js specifici -->
       <script type="text/javascript" src="/lib/ext-2.2/adapter/ext/ext-base.js"></script>
       <script type="text/javascript" src="/lib/ext-2.2/ext-all-debug.js"></script>
       
       <script type="text/javascript">
          Ext.onReady
          (
             function()
             {
                var paragraphs=Ext.select('p').highlight();
             },
             window
          );
       </script>
   
   <!-- css di extjs e css specifici -->
       <link rel="stylesheet" type="text/css" href="/lib/ext-2.2/resources/css/ext-all.css" />   
   </head>
   <body>
      <p>Paragrafo 1</p>
      <br/>
      <p>Paragrafo 2</p>
      <br/>
      <p>Paragrafo 3</p>
      <br/>
      <p>Paragrafo 4</p>
      <br/>
      <p>Paragrafo 5</p>
   </body>
</html>

L'esempio precedente seleziona con una riga tutti gli elementi "p" della pagina e li evidenzia.
Provate un po' senza alcuna libreria ad implementare a mano l'effetto!

Bene bene...
Con questo termino qui; questo post è stato un po' lungo perchè ho dovuto prima di tutto introdurre un po' di cose.
Consiglio nella sezione download del sito di riferimento di scaricare anche la documentazione delle api: è un'applicazione air (quindi dovrete scaricare pure quello) che contiene tutte le api del framework e in alcuni casi anche esempi illuminanti.
Inoltre il sito della comunità è molto attivo, spesso e volentiere si trovano sempre le soluzioni che si cercano.
Buona lettura!

freemind


L'ultima modifica di freemind il 27 Giu 2009 00:42, modificato 1 volta
Top
Profilo Invia messaggio privato
mdweb
Dio maturo
Dio maturo


Registrato: 18/12/07 15:59
Messaggi: 4412

MessaggioInviato: 20 Mar 2009 15:29    Oggetto: Rispondi citando

Citazione:
(che non è interroto)


E a quando la prossima lezione?

Per quanto riguarda il tutorial è veramente interessante anche io stavo preparando qualcosa,magari basi di Ajax,vedremo! Wink
Top
Profilo Invia messaggio privato
freemind
Supervisor sezione Programmazione
Supervisor sezione Programmazione


Registrato: 04/04/07 20:28
Messaggi: 4643
Residenza: Internet

MessaggioInviato: 23 Mar 2009 23:06    Oggetto: Rispondi

Riprendo in questo 3d il discorso sulle query CSS/XPath perchè il post precedente è stato chiuso, diciamo in modo un po' drastico.
Qui propongo alcuni esempi di come selezionare dei nodi e farci sopra qualche cosa.
Negli esempi precedenti avevo scritto il codice javascript direttamente dentro la pagina html, da qui in poi ho deciso (per comodità mia e solo per quello) di avere uno o più script .js separati; questo è per spiegare la differenza tra i "modelli" precedenti e i successivi a partire da questo.
Per iniziare prendiamo il seguente codice:
query.html
Codice:

   <?xml version="1.0" encoding="UTF-8" ?>
<!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">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Query!</title>
      
   <!-- core di extjs e js specifici -->
       <script type="text/javascript" src="/lib/ext-2.2/adapter/ext/ext-base.js"></script>
       <script type="text/javascript" src="/lib/ext-2.2/ext-all-debug.js"></script>
       <script type="text/javascript" src="query.js"></script>
       
   <!-- css di extjs e css specifici -->
       <link rel="stylesheet" type="text/css" href="/lib/ext-2.2/resources/css/ext-all.css" />   
   </head>
   <body>
      <div id="bau" class="miao">
         Sono un div con id "bau" di classe "miao"<br/>
         <span class="bau">
            Sono uno span di classe "bau" dentro ad un div con id "bau" e di classe "miao"
         </span>
      </div>
      <br/>
      <div id="miao" class="bau">
         Io invece sono un div con id "miao" e di classe "bau"<br/>
         <p>Sono un p dentro ad un div</p>
         <span class="bau">
            Sono uno span di classe "bau" dentro ad un div con id "miao" e classe "bau"
         </span>
      </div>
   </body>
</html>

Come potete vedere è una paginetta con due div, #bau e #miao di classi rispettivamente .miao e .bau con dentro qualche cosa.
Useremo il metodo Ext.query() che è una scorciatoia per Ext.DomQuery.select().
Ext.query ritorna un vettore di nodi dom mentre Ext.select ritorna un vettore di oggetti Ext.Element che sono il cuore di Ext. Qui useremo Ext.query() perchè vogliamo operare direttamente sul dom.

Il metodo riceve 1 o 2 parametri: l'XPath query ed eventualmente il nodo root in cui eseguirla. Se l'ultimo parametro non è specificato la query viene fatta sull'intera pagina.

Consiglio qui di usare dei debugger per javascript per poter prendere confidenza sugli oggetti che vengono generati e poterli visualizzare senza dover scrivere del codice di supporto.
Io uso su firefox 3.x firebug 1.3.3 (e mi trovo bene!). Gli altri browser hanno le loro alternative, di fatto cambia poco.
Qui un piccolo script contenente una query. negli esempi che seguono mi appoggierò sempre a questo, voi eventualmente salvatevi le varie versioni.
query.js
Codice:

   Ext.onReady
   (
      function()
      {
      /*
       * Recupera tutti gli elementi span.
       * In questo caso avremo indietro un vettore di due elementi
       */
         var arr=Ext.select('span');
         console.debug(arr);   // solo con firebug!
      },
      window
   );

Per visualizzare in firebug l'output, attivate il debugger e spostatevi sul tab "console".
Dovreste vedere una cosa tipo: .
I conti tornano: Nella nella nostra pagina abbiamo due elementi span ed entrambi sono di classe .bau.
Il codice che segue imposta l'innerHTML (anche se non è un buon modo di operare) a "miao" per entrambi gli span.
query.js
Codice:

   Ext.onReady
   (
      function()
      {
      /*
       * Recupera tutti gli elementi span.
       * In questo caso avremo indietro un vettore di due elementi
       */
         var arr=Ext.query('span');
         console.debug(arr);
               
      // Ora cambiamo il testo dentro ai due span
         Ext.each
         (
            arr,
            function()
            {
               this.innerHTML='miao!';
            }
         );
         
      },
      window
   );

E' chiaro che senza framework il dom traversing sarebbe molto pi difficile. Non riusciremmo in così poche righe a selezionare i nodi e ad operarci sopra; il caso più fortunato sarebbe quello di avere i nodi che ci interessano per la selezione con l'attributo name settato ad un certo valore, poi tramite document.getElementsByTagName ci faremmo ritornare il vettore degli stessi e alla fine ci cicleremmo all'interno per settare a tutti l'innerHTML.
Con Extjs è più facile!
Di seguito una query per ritornare lo span dentro a #miao:
query.js
Codice:

   Ext.onReady
   (
      function()
      {
         Ext.each
         (
            Ext.query('span','miao'),   // il secondo parametro è l'id del nodo in cui far agire la query
            function()
            {
               this.innerHTML='miao!';
            }
         );
         
      },
      window
   );

Ho compattato un po' il codice, le righe sono proprio poche!
La query ritornerà in questo caso solo il secondo span.
Di seguito altre query:
Codice:

   Ext.query('#bau');   // ritorna il nodo con id 'bau'. Notate il #
   Ext.query('.bau');   // ritorna i nodi di classe 'bau'. Notate il .
   Ext.query('*');      // ritorna tutto!

Per recuperare un nodo con un certo tag che è figlio di un altro dovremo separare con uno spazio il nodo padre dal figlio. Ad esempio:
Codice:

   Ext.query('div p');  // Ritorna tutti i tag p all'interno dei tag div; nel caso della nostra pagina avremo un solo elemento.
   Ext.query('div span');   // come prima e in questo caso avremo due elementi nel vettore.

Possiamo anche prelevare tutti i nodi in cui un certo attributo possegga o no un certo valore:
Codice:

   Ext.query('*[class]');   // tutti gli elementi che hanno l'attributo class
   Ext.query('*[class=bau]');  // tutti gli elementi che hanno l'attributo class uguale a bau
   Ext.query('*[class!=bau]');   // tutti gli elementi che hanno l'attributo class diverso da bau

Possiamo anche agire tramire piccole regex:
Codice:

   Ext.query('*[class^=b]');     // tutti gli elementi che hanno l'attributo class che inizia per b
   Ext.query('*[class$=o]');   // tutti gli elementi che hanno l'attributo class che finisce per o
   Ext.query('*[class*=a]');   // tutti gli elementi che hanno l'attributo class che contiene a come substring

Le query XPath possono essere molto più complesse, rimando al sito di extjs per la lettura di due tutorials che trattano questo argomento. Questi esempio li ho tratti proprio da uno di questi.
Le pagine sono qui e qui.
Qui riporto la sintassi di alcune query, la lista completa è reperibile nell'api doc del framework.
I modelli proposti vanno scritti all'interno del primo parametro del metodo Ext.query().
Selezionare gli elementi
Codice:

   * ogni elemento
   E ogni elemento con tag E
   E F ogni discendente di E con tag F
   E > F o E/F ogni diretto discendente di E con tag F

Selezionare gli attributi
Codice:

   E[foo] ogni elemento E con l'attributo foo
   E[foo=bar] ogni elemento E con l'attributo foo che vale bar
   E[foo^=bar] ogni elemento E con l'attributo foo che inizia per bar
   E[foo$=bar] ogni elemento E con l'attributo foo che finisce per bar
   E[foo*=bar] ogni elemento E con l'attributo foo con bar come sottostring
   E[foo%=2] ogni elemento E con l'attributo foo divisibile per 2
   E[foo!=bar] ogno elemento E con l'attributo foo diverso da bar

E da qui vi rimando alla documentazione.

Ciao Ciao
freemind
Top
Profilo Invia messaggio privato
Mostra prima i messaggi di:   
Nuovo argomento   Rispondi    Indice del forum -> Linguaggi per Internet Tutti i fusi orari sono GMT + 1 ora
Pagina 1 di 1

 
Vai a:  
Non puoi inserire nuovi argomenti
Non puoi rispondere a nessun argomento
Non puoi modificare i tuoi messaggi
Non puoi cancellare i tuoi messaggi
Non puoi votare nei sondaggi