AJAX con SPRY A cura di: Marco Casario CTO – Comtaste www.comtaste.com http://casario.blogs.com

Comtaste, Consulenza e Formazione sullo sviluppo di RIA con Flex/Flash/AIR e AJAX www.comtaste.com Autore Flex Solutions: Essential Techniques for Flex 2 Flex 3 Developers FriendsofED (930 pages) Blog http://casario.blogs.com http://blog.comtaste.com Chi sono

Comtaste, Consulenza e Formazione sullo sviluppo di RIA con Flex/Flash/AIR e AJAX

www.comtaste.com

Autore

Flex Solutions: Essential Techniques for Flex 2

Flex 3 Developers FriendsofED (930 pages)

Blog

http://casario.blogs.com

http://blog.comtaste.com

Usare la Spry Toolbar di Dreamweaver CS3 Creare un XML Data Set Lavorare con le Spry Table Usare le Spry List Creare uno Spry Widget Usare l’estensione AIR per Dreamweaver CS3 Cosa vedremo

Usare la Spry Toolbar di Dreamweaver CS3

Creare un XML Data Set

Lavorare con le Spry Table

Usare le Spry List

Creare uno Spry Widget

Usare l’estensione AIR per Dreamweaver CS3

Perchè AJAX

Spry è una libreria di componenti e di behaviors Spry è rivolto ai web desginer ed ai developer Spry può essere esteso e implementato di nuove features SPRY per fare AJAX ?

Spry è una libreria di componenti e di behaviors

Spry è rivolto ai web desginer ed ai developer

Spry può essere esteso e implementato di nuove features

Architettura di Spry

Per poter manipolare XML Data bisogna creare uno Spry Data Set Un Data Set rappresenta il contenuto del documento XML da analizzare In Dreamweaver CS3 si crea dal Pannello Bindings SandBox security del browser : non si possono caricare XML al di fuori del dominio della web page (bisogna usare un proxy script) Gestione dei dati in Spry

Per poter manipolare XML Data bisogna creare uno Spry Data Set

Un Data Set rappresenta il contenuto del documento XML da analizzare

In Dreamweaver CS3 si crea dal Pannello Bindings

SandBox security del browser : non si possono caricare XML al di fuori del dominio della web page (bisogna usare un proxy script)

Spry Data Sets Caricamento dei dati Un Data Set rappresenta il contenuto del documento XML da analizzare Gestione dei dati Data types Load and reload Sorting / Filtering Cursor Paging

Caricamento dei dati

Un Data Set rappresenta il contenuto del documento XML da analizzare

Gestione dei dati

Data types

Load and reload

Sorting / Filtering

Cursor

Paging

Dreamweaver CS3 implementa Spry 1.4 Spry 1.4 ignora nodi XML con informazioni annidate nei child nodes (restituisce undefined ) Dal sito Labs di Adobe potete scaricare Spry 1.5 che non ha questa limitazione Limitazione Spry 1.4

Dreamweaver CS3 implementa Spry 1.4

Spry 1.4 ignora nodi XML con informazioni annidate nei child nodes (restituisce undefined )

Dal sito Labs di Adobe potete scaricare Spry 1.5 che non ha questa limitazione

Per poter manipolare XML Data bisogna creare uno Spry Data Set Un Data Set rappresenta il contenuto del documento XML da analizzare In Dreamweaver CS3 si crea dal Pannello Bindings SandBox security del browser : non si possono caricare XML al di fuori del dominio della web page (bisogna usare un proxy script) Gestione dei dati in Spry

Per poter manipolare XML Data bisogna creare uno Spry Data Set

Un Data Set rappresenta il contenuto del documento XML da analizzare

In Dreamweaver CS3 si crea dal Pannello Bindings

SandBox security del browser : non si possono caricare XML al di fuori del dominio della web page (bisogna usare un proxy script)

Si usa la Spry Toolbar cliccando il bottone Spry XML Data Set Si apre la finestra di wizard Spry XML Data Set Per usare un data set in una pagina web, bisogna creare una Spry Region Demo con Dreamweaver CS3 Creare Uno Spry Data Set

Si usa la Spry Toolbar cliccando il bottone Spry XML Data Set

Si apre la finestra di wizard Spry XML Data Set

Per usare un data set in una pagina web, bisogna creare una Spry Region

Demo con Dreamweaver CS3

Distinct on load : elimina i records duplicati nel data set Turn XML Data Caching Off : impedisce il caching dei dati (default). Utile se i il data source cambia spesso Auto refresh data : indica l’intervallo di tempo entro il quale il browser controlla se esistono nuovi dati. Spry Data Set: opzioni avanzate

Distinct on load : elimina i records duplicati nel data set

Turn XML Data Caching Off : impedisce il caching dei dati (default). Utile se i il data source cambia spesso

Auto refresh data : indica l’intervallo di tempo entro il quale il browser controlla se esistono nuovi dati.

Usare Insert Spry Table Odd row class: setta gli stili per le righe pari Even row class : setta gli stili per le righe dispari Select class: setta gli stili per la riga selezionata Dreamweaver CS3 non permette di editare in Design mode la Spry Table (solo via codice) Demo con Dreamweaver CS3 Visualizzare gli Spry Data Set

Usare Insert Spry Table

Odd row class: setta gli stili per le righe pari

Even row class : setta gli stili per le righe dispari

Select class: setta gli stili per la riga selezionata

Dreamweaver CS3 non permette di editare in Design mode la Spry Table (solo via codice)

Demo con Dreamweaver CS3

Usare Insert Spry Table Odd row class: setta gli stili per le righe pari Even row class : setta gli stili per le righe dispari Select class: setta gli stili per la riga selezionata Dreamweaver CS3 non permette di editare in Design mode la Spry Table (solo via codice) Demo con Dreamweaver CS3 Visualizzare gli Spry Data Set

Usare Insert Spry Table

Odd row class: setta gli stili per le righe pari

Even row class : setta gli stili per le righe dispari

Select class: setta gli stili per la riga selezionata

Dreamweaver CS3 non permette di editare in Design mode la Spry Table (solo via codice)

Demo con Dreamweaver CS3

Pensare a tavolino la funzionalità della tabella Non usano il tag <a> quindi bisogna cambiare il cursore del con i css : cursor: pointer Definire subito gli stili CSS Spry Tables: consigli

Pensare a tavolino la funzionalità della tabella

Non usano il tag <a> quindi bisogna cambiare il cursore del con i css :

cursor: pointer

Definire subito gli stili CSS

Esistono due tipi di Spry Region: Region : usata per mostrare elementi multipli da un data set Detail: permette di accedere all’elemento selezionato nel data set La Detail Region viene associata al valore da mostrare nel Data Set Demo con Dreamweaver CS3: mostrare i dettagli Spry Tables: Detail Regions

Esistono due tipi di Spry Region:

Region : usata per mostrare elementi multipli da un data set

Detail: permette di accedere all’elemento selezionato nel data set

La Detail Region viene associata al valore da mostrare nel Data Set

Demo con Dreamweaver CS3: mostrare i dettagli

La validazione del W3C ritorna degli errori sulla pagina creata con Spry. Gli errori sono dovuti ai tag spry:region, spry:repeatchildren e così via… Il namespace nel tag HTML non è sufficiente alla validazione del W3C Spry e la validazione del W3C

La validazione del W3C ritorna degli errori sulla pagina creata con Spry.

Gli errori sono dovuti ai tag spry:region, spry:repeatchildren e così via…

Il namespace nel tag HTML non è sufficiente alla validazione del W3C

Bisogna indicare dove trovare il DTD per Spry Si estende il DOCTYPE aggiungendo l’ENTITY : <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot; [ <!ENTITY % SPRY SYSTEM &quot;http://www.adobe.com/dtd/spry.dtd&quot;> %SPRY; ]> Demo con Dreamweaver CS3: validare con l’ENTITY Spry e la validazione del W3C

Bisogna indicare dove trovare il DTD per Spry

Si estende il DOCTYPE aggiungendo l’ENTITY :

<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;

[

<!ENTITY % SPRY SYSTEM &quot;http://www.adobe.com/dtd/spry.dtd&quot;>

%SPRY;

]>

Demo con Dreamweaver CS3: validare con l’ENTITY

A parte Opera 9, gli altri borwser interpretano male i custom document type. Una stringa %SPRY verrà mostrata a schermo Usate l’Entity per la validazione ma quando andate online rimuovetela ! The dark side of ENTITY

A parte Opera 9, gli altri borwser interpretano male i custom document type.

Una stringa %SPRY verrà mostrata a schermo

Usate l’Entity per la validazione ma quando andate online rimuovetela !

Si usa lo Spry Repeat List Si specifica uno di questi Container UL (unordered list) OL (ordered list) DL (definition list) SELECT (drop down menu) Demo con Dreamweaver CS3 Spry e le List

Si usa lo Spry Repeat List

Si specifica uno di questi Container

UL (unordered list)

OL (ordered list)

DL (definition list)

SELECT (drop down menu)

Demo con Dreamweaver CS3

spry:repeat è usato dalla repeat region in una tabella (per esempio) Ripete un elemento e tutto il suo contenuto per ogni riga del data set spry:repeatchildren è usato dalla definition list Ripete tutti i children perogni riga del data set Differenze tra spry:repeat e spry:repeatchildren

spry:repeat è usato dalla repeat region in una tabella (per esempio)

Ripete un elemento e tutto il suo contenuto per ogni riga del data set

spry:repeatchildren è usato dalla definition list

Ripete tutti i children perogni riga del data set

Il framework Spry implementa una serie di componenti scritti in standard HTML, CSS, e JavaScript. Un widget spry è un elemento di pagina che implementa funzionalità e grafica al suo interno. Demo con Dreamweaver CS3 Spry Widgets

Il framework Spry implementa una serie di componenti scritti in standard HTML, CSS, e JavaScript.

Un widget spry è un elemento di pagina che implementa funzionalità e grafica al suo interno.

Demo con Dreamweaver CS3

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.

A quali tipi di sviluppatori si rivolge Air ? Flash e Flex HTML, CSS, Javascript AJAX A tutti coloro che vogliono creare e distribuire Rich Internet application (RIA) sul desktop. 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

A quali tipi di sviluppatori si rivolge Air ?

Flash e Flex

HTML, CSS, Javascript

AJAX

A tutti coloro che vogliono creare e distribuire Rich Internet application (RIA) sul desktop.

Sul Labs di Adobe trovate Un widget spry è un elemento di pagina che implementa funzionalità e grafica al suo interno. Demo con Dreamweaver CS3 AIR in Dreamweaver CS3

Sul Labs di Adobe trovate

Un widget spry è un elemento di pagina che implementa funzionalità e grafica al suo interno.

Demo con Dreamweaver CS3

A cosa serve la firma digitale ? La digital signature garantisce che il codice di un’applicazione non sia stato alterato o corrotto dopo la sua creazione orginale. Tutte le applicazioni AIR richiedono la digital signature che può essere assegnata in questi modi : purchased digital certificate create your own certificate prepare an Adobe AIRI file (unsigned application) that you'll sign at a later time. Demo con Dreamweaver CS3 AIR Digital Signature

A cosa serve la firma digitale ?

La digital signature garantisce che il codice di un’applicazione non sia stato alterato o corrotto dopo la sua creazione orginale.

Tutte le applicazioni AIR richiedono la digital signature che può essere assegnata in questi modi :

purchased digital certificate

create your own certificate

prepare an Adobe AIRI file (unsigned application) that you'll sign at a later time.

Demo con Dreamweaver CS3

AIR Camp: Formazione gratuita su AIR 30 Ottobre 2007 - Agrate Brianza (MI) Adobe Systems Italia Centro Direzionale Colleoni, Pal. Taurus A3 Viale Colleoni, 5 Voglio saperne di più .. Organizzato da FlexGala www.augitaly.com/flexgala

AIR Camp: Formazione gratuita su AIR

30 Ottobre 2007 - Agrate Brianza (MI) Adobe Systems Italia Centro Direzionale Colleoni, Pal. Taurus A3 Viale Colleoni, 5

Comtaste, Consulenza e Formazione sullo sviluppo di RIA con Flex/Flash/AIR e AJAX www.comtaste.com Autore Flex Solutions: Essential Techniques for Flex 2 and Flex 3 Developers FriendsofED (930 pages) Blog http://casario.blogs.com http://blog.comtaste.com Q&A + Contatti

Comtaste, Consulenza e Formazione sullo sviluppo di RIA con Flex/Flash/AIR e AJAX

www.comtaste.com

Autore

Flex Solutions: Essential Techniques for Flex 2 and Flex 3 Developers FriendsofED (930 pages)

Blog

http://casario.blogs.com

http://blog.comtaste.com