AJAX con SPRY A cura di: Marco Casario CTO – Comtaste www.comtaste.com http://casario.blogs.com
<ul><li>Comtaste, Consulenza e Formazione sullo sviluppo di RIA con Flex/Flash/AIR e AJAX </li></ul><ul><ul><li>www.comtas...
<ul><li>Usare la Spry Toolbar di Dreamweaver CS3 </li></ul><ul><li>Creare un XML Data Set </li></ul><ul><li>Lavorare con l...
Perchè AJAX
<ul><li>Spry è una libreria di componenti e di behaviors  </li></ul><ul><li>Spry è rivolto ai web desginer ed ai developer...
Architettura di Spry
<ul><li>Per poter manipolare XML Data bisogna creare uno Spry Data Set </li></ul><ul><ul><ul><li>Un Data Set rappresenta i...
Spry Data Sets <ul><li>Caricamento dei dati </li></ul><ul><ul><ul><li>Un Data Set rappresenta il contenuto del documento X...
<ul><li>Dreamweaver CS3 implementa Spry 1.4 </li></ul><ul><li>Spry 1.4 ignora nodi XML con informazioni annidate nei child...
<ul><li>Per poter manipolare XML Data bisogna creare uno Spry Data Set </li></ul><ul><ul><ul><li>Un Data Set rappresenta i...
<ul><li>Si usa la Spry Toolbar cliccando il bottone Spry XML Data Set </li></ul><ul><li>Si apre la finestra di wizard Spry...
<ul><li>Distinct on load  : elimina i records duplicati nel data set </li></ul><ul><li>Turn XML Data Caching Off : impedis...
<ul><li>Usare Insert Spry Table </li></ul><ul><ul><ul><li>Odd row class: setta gli stili per le righe pari </li></ul></ul>...
<ul><li>Usare Insert Spry Table </li></ul><ul><ul><ul><li>Odd row class: setta gli stili per le righe pari </li></ul></ul>...
<ul><li>Pensare a tavolino la funzionalità della tabella </li></ul><ul><li>Non usano il tag <a> quindi bisogna cambiare il...
<ul><li>Esistono due tipi di Spry Region: </li></ul><ul><ul><ul><li>Region : usata per mostrare elementi multipli da un da...
<ul><li>La validazione del W3C ritorna degli errori sulla pagina creata con Spry. </li></ul><ul><li>Gli errori sono dovuti...
<ul><li>Bisogna indicare dove trovare il DTD per Spry  </li></ul><ul><li>Si estende il DOCTYPE aggiungendo l’ENTITY : </li...
<ul><li>A parte Opera 9, gli altri borwser interpretano male i custom document type. </li></ul><ul><li>Una stringa %SPRY v...
<ul><li>Si usa lo Spry Repeat List </li></ul><ul><li>Si specifica uno di questi Container </li></ul><ul><ul><ul><li>UL (un...
<ul><li>spry:repeat  è usato dalla repeat region in una tabella (per esempio) </li></ul><ul><ul><ul><li>Ripete un elemento...
<ul><li>Il framework Spry implementa una serie di componenti scritti in standard HTML, CSS, e  JavaScript.  </li></ul><ul>...
AIR, ovvero ? Air (Adobe Integrated Runtime) è il nome in codice per un sistema di runtime multi piattaforma che Adobe sta...
<ul><li>A quali tipi di sviluppatori si rivolge Air ? </li></ul><ul><li>Flash e  Flex  </li></ul><ul><li>HTML, CSS, Javasc...
<ul><li>Sul Labs di Adobe trovate  </li></ul><ul><li>Un widget spry è un elemento di pagina che implementa funzionalità e ...
<ul><li>A cosa serve la firma digitale ?  </li></ul><ul><li>La digital signature garantisce che il codice di un’applicazio...
<ul><li>AIR Camp: Formazione gratuita su AIR </li></ul><ul><li>30 Ottobre 2007 - Agrate Brianza (MI) Adobe Systems Italia ...
<ul><li>Comtaste, Consulenza e Formazione sullo sviluppo di RIA con Flex/Flash/AIR e AJAX </li></ul><ul><ul><li>www.comtas...
Upcoming SlideShare
Loading in …5
×

Developing AJAX pages using the Adobe Spry framework in Dreamweaver CS3

3,376 views

Published on

My speech about AJAx with Adobe SPRY in Dreamweaver CS3 at the FromAToWeb Conference

Published in: Technology, Business
1 Comment
1 Like
Statistics
Notes
  • scusa ma dovresti usare un altro font...più leggibile.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,376
On SlideShare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
0
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Developing AJAX pages using the Adobe Spry framework in Dreamweaver CS3

  1. 1. AJAX con SPRY A cura di: Marco Casario CTO – Comtaste www.comtaste.com http://casario.blogs.com
  2. 2. <ul><li>Comtaste, Consulenza e Formazione sullo sviluppo di RIA con Flex/Flash/AIR e AJAX </li></ul><ul><ul><li>www.comtaste.com </li></ul></ul><ul><li>Autore </li></ul><ul><ul><ul><li>Flex Solutions: Essential Techniques for Flex 2 </li></ul></ul></ul><ul><ul><ul><li>Flex 3 Developers FriendsofED (930 pages) </li></ul></ul></ul><ul><li>Blog </li></ul><ul><ul><ul><li>http://casario.blogs.com </li></ul></ul></ul><ul><ul><ul><li>http://blog.comtaste.com </li></ul></ul></ul>Chi sono
  3. 3. <ul><li>Usare la Spry Toolbar di Dreamweaver CS3 </li></ul><ul><li>Creare un XML Data Set </li></ul><ul><li>Lavorare con le Spry Table </li></ul><ul><li>Usare le Spry List </li></ul><ul><li>Creare uno Spry Widget </li></ul><ul><li>Usare l’estensione AIR per Dreamweaver CS3 </li></ul>Cosa vedremo
  4. 4. Perchè AJAX
  5. 5. <ul><li>Spry è una libreria di componenti e di behaviors </li></ul><ul><li>Spry è rivolto ai web desginer ed ai developer </li></ul><ul><li>Spry può essere esteso e implementato di nuove features </li></ul>SPRY per fare AJAX ?
  6. 6. Architettura di Spry
  7. 7. <ul><li>Per poter manipolare XML Data bisogna creare uno Spry Data Set </li></ul><ul><ul><ul><li>Un Data Set rappresenta il contenuto del documento XML da analizzare </li></ul></ul></ul><ul><li>In Dreamweaver CS3 si crea dal Pannello Bindings </li></ul><ul><li>SandBox security del browser : non si possono caricare XML al di fuori del dominio della web page (bisogna usare un proxy script) </li></ul>Gestione dei dati in Spry
  8. 8. Spry Data Sets <ul><li>Caricamento dei dati </li></ul><ul><ul><ul><li>Un Data Set rappresenta il contenuto del documento XML da analizzare </li></ul></ul></ul><ul><li>Gestione dei dati </li></ul><ul><ul><ul><li>Data types </li></ul></ul></ul><ul><ul><ul><li>Load and reload </li></ul></ul></ul><ul><ul><ul><li>Sorting / Filtering </li></ul></ul></ul><ul><ul><ul><li>Cursor </li></ul></ul></ul><ul><ul><ul><li>Paging </li></ul></ul></ul>
  9. 9. <ul><li>Dreamweaver CS3 implementa Spry 1.4 </li></ul><ul><li>Spry 1.4 ignora nodi XML con informazioni annidate nei child nodes (restituisce undefined ) </li></ul><ul><li>Dal sito Labs di Adobe potete scaricare Spry 1.5 che non ha questa limitazione </li></ul>Limitazione Spry 1.4
  10. 10. <ul><li>Per poter manipolare XML Data bisogna creare uno Spry Data Set </li></ul><ul><ul><ul><li>Un Data Set rappresenta il contenuto del documento XML da analizzare </li></ul></ul></ul><ul><li>In Dreamweaver CS3 si crea dal Pannello Bindings </li></ul><ul><li>SandBox security del browser : non si possono caricare XML al di fuori del dominio della web page (bisogna usare un proxy script) </li></ul>Gestione dei dati in Spry
  11. 11. <ul><li>Si usa la Spry Toolbar cliccando il bottone Spry XML Data Set </li></ul><ul><li>Si apre la finestra di wizard Spry XML Data Set </li></ul><ul><li>Per usare un data set in una pagina web, bisogna creare una Spry Region </li></ul><ul><li>Demo con Dreamweaver CS3 </li></ul>Creare Uno Spry Data Set
  12. 12. <ul><li>Distinct on load : elimina i records duplicati nel data set </li></ul><ul><li>Turn XML Data Caching Off : impedisce il caching dei dati (default). Utile se i il data source cambia spesso </li></ul><ul><li>Auto refresh data : indica l’intervallo di tempo entro il quale il browser controlla se esistono nuovi dati. </li></ul>Spry Data Set: opzioni avanzate
  13. 13. <ul><li>Usare Insert Spry Table </li></ul><ul><ul><ul><li>Odd row class: setta gli stili per le righe pari </li></ul></ul></ul><ul><ul><ul><li>Even row class : setta gli stili per le righe dispari </li></ul></ul></ul><ul><ul><ul><li>Select class: setta gli stili per la riga selezionata </li></ul></ul></ul><ul><li>Dreamweaver CS3 non permette di editare in Design mode la Spry Table (solo via codice) </li></ul><ul><li>Demo con Dreamweaver CS3 </li></ul>Visualizzare gli Spry Data Set
  14. 14. <ul><li>Usare Insert Spry Table </li></ul><ul><ul><ul><li>Odd row class: setta gli stili per le righe pari </li></ul></ul></ul><ul><ul><ul><li>Even row class : setta gli stili per le righe dispari </li></ul></ul></ul><ul><ul><ul><li>Select class: setta gli stili per la riga selezionata </li></ul></ul></ul><ul><li>Dreamweaver CS3 non permette di editare in Design mode la Spry Table (solo via codice) </li></ul><ul><li>Demo con Dreamweaver CS3 </li></ul>Visualizzare gli Spry Data Set
  15. 15. <ul><li>Pensare a tavolino la funzionalità della tabella </li></ul><ul><li>Non usano il tag <a> quindi bisogna cambiare il cursore del con i css : </li></ul><ul><ul><ul><li>cursor: pointer </li></ul></ul></ul><ul><li>Definire subito gli stili CSS </li></ul>Spry Tables: consigli
  16. 16. <ul><li>Esistono due tipi di Spry Region: </li></ul><ul><ul><ul><li>Region : usata per mostrare elementi multipli da un data set </li></ul></ul></ul><ul><ul><ul><li>Detail: permette di accedere all’elemento selezionato nel data set </li></ul></ul></ul><ul><li>La Detail Region viene associata al valore da mostrare nel Data Set </li></ul><ul><li>Demo con Dreamweaver CS3: mostrare i dettagli </li></ul>Spry Tables: Detail Regions
  17. 17. <ul><li>La validazione del W3C ritorna degli errori sulla pagina creata con Spry. </li></ul><ul><li>Gli errori sono dovuti ai tag spry:region, spry:repeatchildren e così via… </li></ul><ul><li>Il namespace nel tag HTML non è sufficiente alla validazione del W3C </li></ul>Spry e la validazione del W3C
  18. 18. <ul><li>Bisogna indicare dove trovare il DTD per Spry </li></ul><ul><li>Si estende il DOCTYPE aggiungendo l’ENTITY : </li></ul><ul><ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot; </li></ul></ul></ul><ul><ul><ul><li>[ </li></ul></ul></ul><ul><ul><ul><li><!ENTITY % SPRY SYSTEM &quot;http://www.adobe.com/dtd/spry.dtd&quot;> </li></ul></ul></ul><ul><ul><ul><li>%SPRY; </li></ul></ul></ul><ul><ul><ul><li>]> </li></ul></ul></ul><ul><li>Demo con Dreamweaver CS3: validare con l’ENTITY </li></ul>Spry e la validazione del W3C
  19. 19. <ul><li>A parte Opera 9, gli altri borwser interpretano male i custom document type. </li></ul><ul><li>Una stringa %SPRY verrà mostrata a schermo </li></ul><ul><li>Usate l’Entity per la validazione ma quando andate online rimuovetela ! </li></ul>The dark side of ENTITY
  20. 20. <ul><li>Si usa lo Spry Repeat List </li></ul><ul><li>Si specifica uno di questi Container </li></ul><ul><ul><ul><li>UL (unordered list) </li></ul></ul></ul><ul><ul><ul><li>OL (ordered list) </li></ul></ul></ul><ul><ul><ul><li>DL (definition list) </li></ul></ul></ul><ul><ul><ul><li>SELECT (drop down menu) </li></ul></ul></ul><ul><li>Demo con Dreamweaver CS3 </li></ul>Spry e le List
  21. 21. <ul><li>spry:repeat è usato dalla repeat region in una tabella (per esempio) </li></ul><ul><ul><ul><li>Ripete un elemento e tutto il suo contenuto per ogni riga del data set </li></ul></ul></ul><ul><li>spry:repeatchildren è usato dalla definition list </li></ul><ul><ul><ul><li>Ripete tutti i children perogni riga del data set </li></ul></ul></ul>Differenze tra spry:repeat e spry:repeatchildren
  22. 22. <ul><li>Il framework Spry implementa una serie di componenti scritti in standard HTML, CSS, e JavaScript. </li></ul><ul><li>Un widget spry è un elemento di pagina che implementa funzionalità e grafica al suo interno. </li></ul><ul><li>Demo con Dreamweaver CS3 </li></ul>Spry Widgets
  23. 23. AIR, ovvero ? Air (Adobe Integrated Runtime) è il nome in codice per un sistema di runtime multi piattaforma che Adobe sta sviluppando e che permette agli sviluppatori di utilizzare i loro skill per lo sviluppo sul web (Flash, Flex, HTML, JavaScript, Ajax) per creare e distribuire Rich Internet Application (RIAs)sul desktop.
  24. 24. <ul><li>A quali tipi di sviluppatori si rivolge Air ? </li></ul><ul><li>Flash e Flex </li></ul><ul><li>HTML, CSS, Javascript </li></ul><ul><li>AJAX </li></ul><ul><li>A tutti coloro che vogliono creare e distribuire Rich Internet application (RIA) sul desktop. </li></ul>AIR, un pò di F.A.Q. HTML SWF Renderer Scripting DOM PDF SWF HTML Renderer Overlays Scripting DOM PDF Native Application Display Apollo APIs
  25. 25. <ul><li>Sul Labs di Adobe trovate </li></ul><ul><li>Un widget spry è un elemento di pagina che implementa funzionalità e grafica al suo interno. </li></ul><ul><li>Demo con Dreamweaver CS3 </li></ul>AIR in Dreamweaver CS3
  26. 26. <ul><li>A cosa serve la firma digitale ? </li></ul><ul><li>La digital signature garantisce che il codice di un’applicazione non sia stato alterato o corrotto dopo la sua creazione orginale. </li></ul><ul><li>Tutte le applicazioni AIR richiedono la digital signature che può essere assegnata in questi modi : </li></ul><ul><ul><ul><li>purchased digital certificate </li></ul></ul></ul><ul><ul><ul><li>create your own certificate </li></ul></ul></ul><ul><ul><ul><li>prepare an Adobe AIRI file (unsigned application) that you'll sign at a later time. </li></ul></ul></ul><ul><li>Demo con Dreamweaver CS3 </li></ul>AIR Digital Signature
  27. 27. <ul><li>AIR Camp: Formazione gratuita su AIR </li></ul><ul><li>30 Ottobre 2007 - Agrate Brianza (MI) Adobe Systems Italia Centro Direzionale Colleoni, Pal. Taurus A3 Viale Colleoni, 5 </li></ul>Voglio saperne di più .. Organizzato da FlexGala www.augitaly.com/flexgala
  28. 28. <ul><li>Comtaste, Consulenza e Formazione sullo sviluppo di RIA con Flex/Flash/AIR e AJAX </li></ul><ul><ul><li>www.comtaste.com </li></ul></ul><ul><li>Autore </li></ul><ul><ul><ul><li>Flex Solutions: Essential Techniques for Flex 2 and Flex 3 Developers FriendsofED (930 pages) </li></ul></ul></ul><ul><li>Blog </li></ul><ul><ul><ul><li>http://casario.blogs.com </li></ul></ul></ul><ul><ul><ul><li>http://blog.comtaste.com </li></ul></ul></ul>Q&A + Contatti

×