SlideShare una empresa de Scribd logo
1 de 21
Descargar para leer sin conexión
Zend_Dojo: l'integrazione della
libreria Dojo nello Zend Framework
by Enrico Zimuel
Senior Consultant - Zend Technologies

Email: enrico.z@zend.com
Blog: http://www.zimuel.it/blog




                                        Copyright © 2007, Zend Technologies Inc.
Sommario


  •   Che cos'è lo Zend Framework (ZF)?
  •   Che cos'è Dojo?
  •   L'architettura di Dojo
  •   Configurare l'ambiente Dojo in ZF: il view
      helper dojo()
  •   Utilizzo dei widgets Dijit nello Zend_View
  •   Form 2.0 con Zend_Form e Dojo
Zend Framework

 • Framework PHP open source
     Semplicità di utilizzo
     Architettura flessibile
     Funzionalità Web 2.0
        • Web services
        • Ajax (integrazione Dojo, Adobe Flex)
     Codice di qualità (testato con PHPUnit)

 • Scritto in PHP 5, Object Oriented, MVC

 • Versione 1.8.1, download ed info:
   http://framework.zend.com/

                                                 Name of this section             | | 3
                                                                        May 15, 2009
Dojo
• Dojo è una libreria JavaScript open
  source per la realizzazione di Rich Internet
  Applications (RIA)
• Caratteristiche principali:
    performance;
    affidabilità;
    ampia disponibilità funzioni:
                                                 http://dojotoolkit.org/
     manipolazione DOM, animazioni, Ajax,
     gestione Eventi e normalizzazione
     keyboard
    Supporto multi-browser (Firefox, IE,
     Safari, Opera, etc)
    internazionalizzazione (i18n) e
     accessibilità (a11y)
                                                                          | | 4
                                                                May 15, 2009
Dojo: curiosità

• Dōjō, è un termine giapponese che significa
  etimologicamente luogo (jō) dove si segue la via (dō)




   道場
                                                             | | 5
                                                   May 15, 2009
L'architettura di Dojo




               Libreria di base < 30 Kb

                                                    | | 6
                                          May 15, 2009
Dojo: esempi


               http://demos.dojotoolkit.org




                                                | | 7
                                      May 15, 2009
Zend Framework e Dojo

 • Disponibile a partire dalla versione 1.6 dello Zend
   Framework
 • Dojo view helper per la gestione dell'ambiente
   Dojo
 • View helpers di tipo Dijit per la creazione di form
   ed elementi
 • Gestione delle strutture dojo.data con la classe
   Zend_Dojo_Data
 • JSON-RPC implementazione server


                                                              | | 8
                                                    May 15, 2009
Supporto Dijit

  • Supporto della maggior parte dei componenti dijits
    (Dojo widgets)
  • Utilizzo di view helpers per il rendering dei dijits
      I dijits sono generati automaticamente (default)
      Possibilità di specificare lo stile di generazione
  • Form decorators per i layout ed i form dijits
      Utilizzo di layout dijit decorators specifici per
       forms, sub forms e gruppi di visualizzazione
  • Gestione degli elementi di un form dijits
      Mappatura con i dijit view helpers


                                                                | | 9
                                                      May 15, 2009
Classic web application model (sync)




                                                 | | 10
                                       May 15, 2009
Ajax (async)




                         | | 11
               May 15, 2009
dojo.data Payload

  • dojo.data è una struttura dati utilizzata dai
      componenti Dojo
  •   Zend_Dojo_Data gestisce la generazione di
      strutture dati compatibili con dojo.data
  •   Possibilità di gestire ogni oggetto (arrays,
      Iterators, etc.) tramite un identificatore utilizzato
      poi per la creazione di una struttura JSON
      (JavaScript Object Notation).
  •   JSON è un formato adatto per lo scambio dei dati
      in applicazioni client-server



                                                                 | | 12
                                                       May 15, 2009
Esempio di struttura dati in JSON

 {
     quot;typequot;: quot;menuquot;,
     quot;valuequot;: quot;Filequot;,
     quot;itemsquot;: [
         {quot;valuequot;: quot;Newquot;, quot;actionquot;: quot;CreateNewDocquot;},
         {quot;valuequot;: quot;Openquot;, quot;actionquot;: quot;OpenDocquot;},
         {quot;valuequot;: quot;Closequot;, quot;actionquot;: quot;CloseDocquot;}
     ]
 }



  • Formato: { “etichetta” : “valore” }


                                                         | | 13
                                               May 15, 2009
Supporto JSON-RPC

  • JSON-RPC è un protocollo di Remote Procedure
      Call che utilizza JSON per la serializzazione dei
      messaggi
  •   Lo schema JSON specifica il Service Mapping
      Description (SMD) per la definizione dei metodi
      disponibili
  •   Zend_Json_Server implementa un server di tipo
      JSON-RPC con il supporto SMD
  •   Utilizzato principalmente nello sviluppo di
      applicazioni client “pesanti” dove il codice client
      è incluso in una View del modello MVC


                                                                | | 14
                                                      May 15, 2009
dojo() View Helper

  • Impostazione dell'ambiente dojo
      $view->addHelperPath('Zend/Dojo/View/Helper/',
       'Zend_Dojo_View_Helper');

  • Percorso delle librerie javascript (CDN o locale)
      $view->dojo()->setLocalPath('...')

  • Impostazione dei paths per I moduli personalizzati
      $view->dojo()->registerModulePath('...')

  • Impostazione del dojo.require per l'inclusione
    arbitraria di moduli dojo
      $view->dojo()->requireModule('...')

  • Impostazione dell'evento onLoad

                                                               | | 15
                                                     May 15, 2009
dojo() View Helper - temi

 • Dojo consente la creazione di temi personalizzati per
     i dijits (widgets).
      $view->dojo()->
           addStylesheetModule('dijit.themes.tundra');


 • Il path del tema è ricostruito sostituendo al '.' il
     separatore di directory ed utilizzando l'ultimo valore
     come nome del file .CSS.
 •   dijit.themes.tundra -> dijit/themes/tundra/tundra.css
 •   Quando si utilizza un tema è necessario impostarlo
     nel file HTML, il metodo più sicuro è includerlo nel
     body: <body class=”tundra”>


                                                                    | | 16
                                                          May 15, 2009
Dijit-Specific View Helpers

 • “Dijit è un sistema di elementi grafici (widget)
   sviluppato sulla base di dojo” (manuale Dojo)
 • Zend Framework fornisce un insieme di view helper
   per l'utilizzo di dijit, essi si suddividono in tre
   categorie:

     Layout Containers
     Form Dijit
     Form Elements




                                                                   | | 17
                                                         May 15, 2009
Using Layers (custom builds)


  • Ogni dojo.require effettua una richiesta al server per il
    download del relativo file javascript

  • Se sono presenti più dijits si avranno numerose
    richieste al server con evidenti rallentamenti!!!

  • In Dojo c'è la possibilità di creare custom builds
    tramite le utils fornite con la libreria

  • I file vengono raggruppati in layers (un singolo file JS).

                                                                   | | 18
                                                         May 15, 2009
Zend_Dojo: esempio




                               | | 19
                     May 15, 2009
Riferimenti

  • Matthew A.Russell “Dojo, the definitive guide”
      O'Reilly (2008)
  •   Rawld Gill, Craig Riecke, Alex Russell “Mastering
      Dojo. JavaScript and Ajax Tools for Great Web
      Experiences” The Pragmatic Bookshelf (2008)
  •   Frank Zammetti “Practical Dojo Projects” Apress
      (2008)
  •   Peter Svensson “Learning Dojo” Packt Publishing
      (2008)




                                                               | | 20
                                                     May 15, 2009
Grazie!

Per maggiori info: http://www.zend.com

Más contenido relacionado

Similar a Zend Dojo

Novità in Visual Studio 2012
Novità in Visual Studio 2012Novità in Visual Studio 2012
Novità in Visual Studio 2012
Sinergia Totale
 
Introduzione a TypeScript
Introduzione a TypeScriptIntroduzione a TypeScript
Introduzione a TypeScript
Sinergia Totale
 
Come sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTMLCome sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTML
Sinergia Totale
 
DotNetToscana - Sessione TypeScript
DotNetToscana - Sessione TypeScriptDotNetToscana - Sessione TypeScript
DotNetToscana - Sessione TypeScript
Sinergia Totale
 
Sviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle MonorailSviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle Monorail
DotNetMarche
 

Similar a Zend Dojo (20)

Dojo nuovo look alle vostre applicazioni web Domino
Dojo nuovo look alle vostre applicazioni web DominoDojo nuovo look alle vostre applicazioni web Domino
Dojo nuovo look alle vostre applicazioni web Domino
 
Novità in Visual Studio 2012
Novità in Visual Studio 2012Novità in Visual Studio 2012
Novità in Visual Studio 2012
 
Blazor with .net 5 - di Gerardo Greco
Blazor with .net 5 - di Gerardo GrecoBlazor with .net 5 - di Gerardo Greco
Blazor with .net 5 - di Gerardo Greco
 
Sviluppo Web con React e Delphi - Seminario Delphi Day 2016, Piacenza
Sviluppo Web con React e Delphi - Seminario Delphi Day 2016, PiacenzaSviluppo Web con React e Delphi - Seminario Delphi Day 2016, Piacenza
Sviluppo Web con React e Delphi - Seminario Delphi Day 2016, Piacenza
 
I linguaggi del web - seconda edizione (3° giornata)
I linguaggi del web - seconda edizione (3° giornata)I linguaggi del web - seconda edizione (3° giornata)
I linguaggi del web - seconda edizione (3° giornata)
 
All you can store
All you can storeAll you can store
All you can store
 
Rich Internet Application
Rich Internet ApplicationRich Internet Application
Rich Internet Application
 
Introduzione a TypeScript
Introduzione a TypeScriptIntroduzione a TypeScript
Introduzione a TypeScript
 
Open Day June 17th Creare componenti AngularJS riutilizzabili tra applicazioni
Open Day June 17th Creare componenti AngularJS riutilizzabili tra applicazioniOpen Day June 17th Creare componenti AngularJS riutilizzabili tra applicazioni
Open Day June 17th Creare componenti AngularJS riutilizzabili tra applicazioni
 
Zend Framework 2
Zend Framework 2Zend Framework 2
Zend Framework 2
 
Come sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTMLCome sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTML
 
DDive - 8.5.2 Xpages - L'evoluzione continua
DDive - 8.5.2 Xpages - L'evoluzione continuaDDive - 8.5.2 Xpages - L'evoluzione continua
DDive - 8.5.2 Xpages - L'evoluzione continua
 
I Linguaggi Del Web (2° Giornata)
I Linguaggi Del  Web (2°  Giornata)I Linguaggi Del  Web (2°  Giornata)
I Linguaggi Del Web (2° Giornata)
 
Spring e Flex
Spring e FlexSpring e Flex
Spring e Flex
 
Framework per la realizzazione di ria
Framework per la realizzazione di riaFramework per la realizzazione di ria
Framework per la realizzazione di ria
 
DotNetToscana - Sessione TypeScript
DotNetToscana - Sessione TypeScriptDotNetToscana - Sessione TypeScript
DotNetToscana - Sessione TypeScript
 
Dominopoint meet the experts 2015 - XPages
Dominopoint   meet the experts 2015 - XPagesDominopoint   meet the experts 2015 - XPages
Dominopoint meet the experts 2015 - XPages
 
Best practices per lo sviluppo Frontend
Best practices per lo sviluppo FrontendBest practices per lo sviluppo Frontend
Best practices per lo sviluppo Frontend
 
Il Pattern di Zend Framework 2
Il Pattern di Zend Framework 2Il Pattern di Zend Framework 2
Il Pattern di Zend Framework 2
 
Sviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle MonorailSviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle Monorail
 

Más de GrUSP

PHP & IBM i
PHP & IBM iPHP & IBM i
PHP & IBM i
GrUSP
 
Memi Beltrame Collaborative Design
Memi Beltrame Collaborative DesignMemi Beltrame Collaborative Design
Memi Beltrame Collaborative Design
GrUSP
 

Más de GrUSP (10)

REST e Resource Oriented Architectures
REST e Resource Oriented ArchitecturesREST e Resource Oriented Architectures
REST e Resource Oriented Architectures
 
Drupal come framework di sviluppo
Drupal come framework di sviluppoDrupal come framework di sviluppo
Drupal come framework di sviluppo
 
PayPal e PHP
PayPal e PHPPayPal e PHP
PayPal e PHP
 
Zend Server
Zend ServerZend Server
Zend Server
 
PHP & IBM i
PHP & IBM iPHP & IBM i
PHP & IBM i
 
Programmazione Ad Eventi In Php
Programmazione Ad Eventi In PhpProgrammazione Ad Eventi In Php
Programmazione Ad Eventi In Php
 
Joomla! 1.5: CMS a mani tese verso gli sviluppatori
Joomla! 1.5: CMS a mani tese verso gli sviluppatoriJoomla! 1.5: CMS a mani tese verso gli sviluppatori
Joomla! 1.5: CMS a mani tese verso gli sviluppatori
 
Symfony 2.0
Symfony 2.0Symfony 2.0
Symfony 2.0
 
Memi Beltrame Collaborative Design
Memi Beltrame Collaborative DesignMemi Beltrame Collaborative Design
Memi Beltrame Collaborative Design
 
Mocking Objects Practices
Mocking Objects PracticesMocking Objects Practices
Mocking Objects Practices
 

Zend Dojo

  • 1. Zend_Dojo: l'integrazione della libreria Dojo nello Zend Framework by Enrico Zimuel Senior Consultant - Zend Technologies Email: enrico.z@zend.com Blog: http://www.zimuel.it/blog Copyright © 2007, Zend Technologies Inc.
  • 2. Sommario • Che cos'è lo Zend Framework (ZF)? • Che cos'è Dojo? • L'architettura di Dojo • Configurare l'ambiente Dojo in ZF: il view helper dojo() • Utilizzo dei widgets Dijit nello Zend_View • Form 2.0 con Zend_Form e Dojo
  • 3. Zend Framework • Framework PHP open source  Semplicità di utilizzo  Architettura flessibile  Funzionalità Web 2.0 • Web services • Ajax (integrazione Dojo, Adobe Flex)  Codice di qualità (testato con PHPUnit) • Scritto in PHP 5, Object Oriented, MVC • Versione 1.8.1, download ed info: http://framework.zend.com/ Name of this section | | 3 May 15, 2009
  • 4. Dojo • Dojo è una libreria JavaScript open source per la realizzazione di Rich Internet Applications (RIA) • Caratteristiche principali:  performance;  affidabilità;  ampia disponibilità funzioni: http://dojotoolkit.org/ manipolazione DOM, animazioni, Ajax, gestione Eventi e normalizzazione keyboard  Supporto multi-browser (Firefox, IE, Safari, Opera, etc)  internazionalizzazione (i18n) e accessibilità (a11y) | | 4 May 15, 2009
  • 5. Dojo: curiosità • Dōjō, è un termine giapponese che significa etimologicamente luogo (jō) dove si segue la via (dō) 道場 | | 5 May 15, 2009
  • 6. L'architettura di Dojo Libreria di base < 30 Kb | | 6 May 15, 2009
  • 7. Dojo: esempi http://demos.dojotoolkit.org | | 7 May 15, 2009
  • 8. Zend Framework e Dojo • Disponibile a partire dalla versione 1.6 dello Zend Framework • Dojo view helper per la gestione dell'ambiente Dojo • View helpers di tipo Dijit per la creazione di form ed elementi • Gestione delle strutture dojo.data con la classe Zend_Dojo_Data • JSON-RPC implementazione server | | 8 May 15, 2009
  • 9. Supporto Dijit • Supporto della maggior parte dei componenti dijits (Dojo widgets) • Utilizzo di view helpers per il rendering dei dijits  I dijits sono generati automaticamente (default)  Possibilità di specificare lo stile di generazione • Form decorators per i layout ed i form dijits  Utilizzo di layout dijit decorators specifici per forms, sub forms e gruppi di visualizzazione • Gestione degli elementi di un form dijits  Mappatura con i dijit view helpers | | 9 May 15, 2009
  • 10. Classic web application model (sync) | | 10 May 15, 2009
  • 11. Ajax (async) | | 11 May 15, 2009
  • 12. dojo.data Payload • dojo.data è una struttura dati utilizzata dai componenti Dojo • Zend_Dojo_Data gestisce la generazione di strutture dati compatibili con dojo.data • Possibilità di gestire ogni oggetto (arrays, Iterators, etc.) tramite un identificatore utilizzato poi per la creazione di una struttura JSON (JavaScript Object Notation). • JSON è un formato adatto per lo scambio dei dati in applicazioni client-server | | 12 May 15, 2009
  • 13. Esempio di struttura dati in JSON { quot;typequot;: quot;menuquot;, quot;valuequot;: quot;Filequot;, quot;itemsquot;: [ {quot;valuequot;: quot;Newquot;, quot;actionquot;: quot;CreateNewDocquot;}, {quot;valuequot;: quot;Openquot;, quot;actionquot;: quot;OpenDocquot;}, {quot;valuequot;: quot;Closequot;, quot;actionquot;: quot;CloseDocquot;} ] } • Formato: { “etichetta” : “valore” } | | 13 May 15, 2009
  • 14. Supporto JSON-RPC • JSON-RPC è un protocollo di Remote Procedure Call che utilizza JSON per la serializzazione dei messaggi • Lo schema JSON specifica il Service Mapping Description (SMD) per la definizione dei metodi disponibili • Zend_Json_Server implementa un server di tipo JSON-RPC con il supporto SMD • Utilizzato principalmente nello sviluppo di applicazioni client “pesanti” dove il codice client è incluso in una View del modello MVC | | 14 May 15, 2009
  • 15. dojo() View Helper • Impostazione dell'ambiente dojo  $view->addHelperPath('Zend/Dojo/View/Helper/', 'Zend_Dojo_View_Helper'); • Percorso delle librerie javascript (CDN o locale)  $view->dojo()->setLocalPath('...') • Impostazione dei paths per I moduli personalizzati  $view->dojo()->registerModulePath('...') • Impostazione del dojo.require per l'inclusione arbitraria di moduli dojo  $view->dojo()->requireModule('...') • Impostazione dell'evento onLoad | | 15 May 15, 2009
  • 16. dojo() View Helper - temi • Dojo consente la creazione di temi personalizzati per i dijits (widgets).  $view->dojo()-> addStylesheetModule('dijit.themes.tundra'); • Il path del tema è ricostruito sostituendo al '.' il separatore di directory ed utilizzando l'ultimo valore come nome del file .CSS. • dijit.themes.tundra -> dijit/themes/tundra/tundra.css • Quando si utilizza un tema è necessario impostarlo nel file HTML, il metodo più sicuro è includerlo nel body: <body class=”tundra”> | | 16 May 15, 2009
  • 17. Dijit-Specific View Helpers • “Dijit è un sistema di elementi grafici (widget) sviluppato sulla base di dojo” (manuale Dojo) • Zend Framework fornisce un insieme di view helper per l'utilizzo di dijit, essi si suddividono in tre categorie:  Layout Containers  Form Dijit  Form Elements | | 17 May 15, 2009
  • 18. Using Layers (custom builds) • Ogni dojo.require effettua una richiesta al server per il download del relativo file javascript • Se sono presenti più dijits si avranno numerose richieste al server con evidenti rallentamenti!!! • In Dojo c'è la possibilità di creare custom builds tramite le utils fornite con la libreria • I file vengono raggruppati in layers (un singolo file JS). | | 18 May 15, 2009
  • 19. Zend_Dojo: esempio | | 19 May 15, 2009
  • 20. Riferimenti • Matthew A.Russell “Dojo, the definitive guide” O'Reilly (2008) • Rawld Gill, Craig Riecke, Alex Russell “Mastering Dojo. JavaScript and Ajax Tools for Great Web Experiences” The Pragmatic Bookshelf (2008) • Frank Zammetti “Practical Dojo Projects” Apress (2008) • Peter Svensson “Learning Dojo” Packt Publishing (2008) | | 20 May 15, 2009
  • 21. Grazie! Per maggiori info: http://www.zend.com