際際滷

際際滷Share a Scribd company logo

Dojo and Zend Framework

Kuldeep Singh
Kuldeep Singh

Zend Framework and Dojo team up to deliver end-to-end tools for Rich Internet Application development.

1 of 46
Download to read offline
Rich UIs and Easy Ajax with Dojo and Zend Framework Matthew Weier O'Phinney Software Architect Zend Framework Copyright 息 2007, Zend Technologies Inc.
What we'll talk about What the Zend Framework/Dojo integration offers Demonstration of some Dijits exposed by Zend Framework Benefits of using the integration Demonstration of building a Dojo-ized application in Zend Framework Creating custom Dojo builds for deployment Zend Framework + Dojo | Sep 3, 2008 | 2
Overview of Dojo Integration Shipping Dojo with Zend Framework as of 1.6.0 Dojo view helper for managing Dojo environment Dijit-specific view helpers and form decorators and elements dojo.data response payloads with Zend_Dojo_Data JSON-RPC server implementation Zend Framework + Dojo | Sep 3, 2008 | 3
How is Dojo shipped with ZF? Lean-and-mean distribution: it's not Use the CDN Download Dojo yourself Create your own custom build to use Zend Framework + Dojo | Sep 3, 2008 | 4
How is Dojo shipped with ZF? "Kitchen Sink" distribution: full Dojo source build Contains Dojo source build (basically, full source minus a few artifacts) All tools necessary for building your own custom builds (Rhino) testing (Doh!) Zend Framework + Dojo | Sep 3, 2008 | 5
How is Dojo shipped with ZF? Subversion svn:externals to latest release branch of Dojo Full dojo source (including all artifacts) Zend Framework + Dojo | Sep 3, 2008 | 6
dojo() View Helper Sets up the dojo environment Specify CDN or local install Specify dojo.require statements for including arbitrary Dojo modules Specify module paths for custom modules Specify layer (build) files Specify onLoad events And more! Zend Framework + Dojo | Sep 3, 2008 | 7
Dijit Support Support for (most) dijits (Dojo widgets) View helpers for rendering dijits Dijits are generated programmatically by default You can specify Declarative style generation if desired Form decorators for layout and form dijits Use layout dijit decorators typically with forms, sub forms, and display groups Form elements for form dijits Map to the dijit view helpers Zend Framework + Dojo | Sep 3, 2008 | 8
dojo.data Payloads dojo.data is a powerful data abstraction used across a variety of Dojo components Zend_Dojo_Data generates dojo.data compatible payloads Attach any traversable item (arrays, Iterators, etc.), specify an identifier field, and spit out as JSON Zend Framework + Dojo | Sep 3, 2008 | 9
JSON-RPC Support JSON-RPC is a Remote Procedure Call protocol using JSON for the message serialization JSON Schema specification includes a Service Mapping Description (SMD) for defining available methods Zend_Json_Server implements a JSON-RPC server with SMD support Primary use case is for heavy client-side applications, where the client-side code is the View in MVC Zend Framework + Dojo | Sep 3, 2008 | 10
You've said all this before in two other webinars... Can I have something concrete to look at, please?
Demonstration Zend Framework + Dojo | Sep 3, 2008 | 12
Features seen TabContainer Attached to the form as a decorator Content Panes One per sub form, and a drop-in decorator to the form adding the Grid tab Most form dijits via Zend_Dojo_Form Remoting via ContentPane; Grid content pane pulls content dynamically Grids consuming Zend_Dojo_Data as a dojo.data source Zend Framework + Dojo | Sep 3, 2008 | 13
Code examples: form decorators Zend Framework + Dojo | Sep 3, 2008 | 14
Code example: sub form decorators Zend Framework + Dojo | Sep 3, 2008 | 15
Code example: form element Zend Framework + Dojo | Sep 3, 2008 | 16
Code example: view helper Zend Framework + Dojo | Sep 3, 2008 | 17
That's nice. So what? What do I really gain?
What you gain: Familiar PHP and ZF interface If you know how to use view helpers, you can use this If you know how to create forms with Zend_Form, you can use this In many cases, no need to learn Dojo immediately Takes care of things behind the scenes Sprinkle in where it makes sense Pretty interfaces Create consistent, beautiful interfaces, with little or no extra effort Zend Framework + Dojo | Sep 3, 2008 | 19
Show me I won't believe it until I see it.
Demonstration: Pastebin, without Dojo Zend Framework + Dojo | Sep 3, 2008 | 21
Demonstration: Pastebin, with Dojo Zend Framework + Dojo | Sep 3, 2008 | 22
Cool! How do I do it? What's the code behind it?
How we get there: bootstrap Set djConfig options Add dijit themes and custom stylesheets Specify path to dojo, as well as any custom code Specify javascript to run at initialization Disable by default (to allow enabling only when necessary) Zend Framework + Dojo | Sep 3, 2008 | 24
How we get there: layout script Create BorderContainer master layout and capture content to put in it Add several panes to it Zend Framework + Dojo | Sep 3, 2008 | 25
How we get there: layout script (cont) Sample ContentPane note that content can be provided to it directly. Zend Framework + Dojo | Sep 3, 2008 | 26
How we get there: pastebin form Extends Zend_Dojo_Form: easiest method for using Dojo with Zend_Form Adding elements is the same just new types for use with Dojo Zend Framework + Dojo | Sep 3, 2008 | 27
How we get there: pastebin form (cont) Elements have config options and accessors for setting Dijit parameters. Zend Framework + Dojo | Sep 3, 2008 | 28
How we get there: landing view Enable dojo when needed Mixture of content capturing and URL remoting for content panes All content captured within TabContainer Zend Framework + Dojo | Sep 3, 2008 | 29
How we get there: grid view Grid setup first, we tell Dojo to add some gridspecific CSS, and also what additional Dojo modules we need. Zend Framework + Dojo | Sep 3, 2008 | 30
How we get there: grid view (cont) Grid markup just HTML. This can be done programmatically, but Declarative style is often more expedient and fluent. Zend Framework + Dojo | Sep 3, 2008 | 31
How we get there: grid data generation Grid data generation: pass our data to Zend_Dojo_Data... and that's it. Zend Framework + Dojo | Sep 3, 2008 | 32
Deployment Considerations Or, how to reduce the number of XHR requests your Dojo application generates.
What's going on under the hood? Calling requireModule() generates dojo.require() statements. Each dojo.require() statement triggers one or more requests to the server to pull in the necessary Javascript. Design is very modular you only use what you need. However, this means... Zend Framework + Dojo | Sep 3, 2008 | 34
Firebug output for the sample app Zend Framework + Dojo | Sep 3, 2008 | 35
Ouch! (That's a lot of requests!) Zend Framework + Dojo | Sep 3, 2008 | 36
What can be done? The solution is to create a custom build Custom builds pull all (specified) functionality into a single file All template strings are interred into the code Code is minified whitespace removed, heuristics to condense variable names applied, etc. dojo.require() statements to modules compiled into the build become no-ops Trim the size of the scripts by many, many times, and reduce requests from many dozens to 1 or 2. Zend Framework + Dojo | Sep 3, 2008 | 37
Example profile Zend Framework + Dojo | Sep 3, 2008 | 38
Creating the build From the util/buildscripts/ directory, execute something like the following (assuming the profile script is in util/buildscripts/profiles/): Zend Framework + Dojo | Sep 3, 2008 | 39
Other considerations Buildsarealsocalledlayers.Aftercreatingit,you need to add the layer to your application: Zend Framework + Dojo | Sep 3, 2008 | 40
Firebug output from custom build Zend Framework + Dojo | Sep 3, 2008 | 41
Conclusions Develop with a source build maximum flexibility Identify what dojo.require statements are necessary Look at your generated HTML for dojo.require statements Run a screen scraper over your site to identify them Create a profile for your application (or perapplication on your site) from the information above Create a custom build for deployment using the profile(s) Full distro and SVN of ZF have all tools necessary for creating custom builds Zend Framework + Dojo | Sep 3, 2008 | 42
Parting Words What was all of that, again?
Summary dojo() view helper to setup environment Dijit view helpers to create layouts and form elements Dijit form decorators and elements to create sophisticated forms Zend_Dojo_Data to create dojo.data payloads JSON-RPC to create "thick client" apps, where the View of your MVC is your client-side code Create custom builds for deployment to production Zend Framework + Dojo | Sep 3, 2008 | 44
Where to get more information ZF Zend_Dojo manual: http://framework.zend.com/manual/en/zend.dojo.html The Book of Dojo: http://dojotoolkit.org/book/dojo-book-1-0 DojoCampus: http://dojocampus.org Zend Framework + Dojo | Sep 3, 2008 | 45
Thanks for listening! Now that you have no excuse to build beautiful, dynamic applications, what are you waiting for?

More Related Content

Dojo and Zend Framework

  • 1. Rich UIs and Easy Ajax with Dojo and Zend Framework Matthew Weier O'Phinney Software Architect Zend Framework Copyright 息 2007, Zend Technologies Inc.
  • 2. What we'll talk about What the Zend Framework/Dojo integration offers Demonstration of some Dijits exposed by Zend Framework Benefits of using the integration Demonstration of building a Dojo-ized application in Zend Framework Creating custom Dojo builds for deployment Zend Framework + Dojo | Sep 3, 2008 | 2
  • 3. Overview of Dojo Integration Shipping Dojo with Zend Framework as of 1.6.0 Dojo view helper for managing Dojo environment Dijit-specific view helpers and form decorators and elements dojo.data response payloads with Zend_Dojo_Data JSON-RPC server implementation Zend Framework + Dojo | Sep 3, 2008 | 3
  • 4. How is Dojo shipped with ZF? Lean-and-mean distribution: it's not Use the CDN Download Dojo yourself Create your own custom build to use Zend Framework + Dojo | Sep 3, 2008 | 4
  • 5. How is Dojo shipped with ZF? "Kitchen Sink" distribution: full Dojo source build Contains Dojo source build (basically, full source minus a few artifacts) All tools necessary for building your own custom builds (Rhino) testing (Doh!) Zend Framework + Dojo | Sep 3, 2008 | 5
  • 6. How is Dojo shipped with ZF? Subversion svn:externals to latest release branch of Dojo Full dojo source (including all artifacts) Zend Framework + Dojo | Sep 3, 2008 | 6
  • 7. dojo() View Helper Sets up the dojo environment Specify CDN or local install Specify dojo.require statements for including arbitrary Dojo modules Specify module paths for custom modules Specify layer (build) files Specify onLoad events And more! Zend Framework + Dojo | Sep 3, 2008 | 7
  • 8. Dijit Support Support for (most) dijits (Dojo widgets) View helpers for rendering dijits Dijits are generated programmatically by default You can specify Declarative style generation if desired Form decorators for layout and form dijits Use layout dijit decorators typically with forms, sub forms, and display groups Form elements for form dijits Map to the dijit view helpers Zend Framework + Dojo | Sep 3, 2008 | 8
  • 9. dojo.data Payloads dojo.data is a powerful data abstraction used across a variety of Dojo components Zend_Dojo_Data generates dojo.data compatible payloads Attach any traversable item (arrays, Iterators, etc.), specify an identifier field, and spit out as JSON Zend Framework + Dojo | Sep 3, 2008 | 9
  • 10. JSON-RPC Support JSON-RPC is a Remote Procedure Call protocol using JSON for the message serialization JSON Schema specification includes a Service Mapping Description (SMD) for defining available methods Zend_Json_Server implements a JSON-RPC server with SMD support Primary use case is for heavy client-side applications, where the client-side code is the View in MVC Zend Framework + Dojo | Sep 3, 2008 | 10
  • 11. You've said all this before in two other webinars... Can I have something concrete to look at, please?
  • 12. Demonstration Zend Framework + Dojo | Sep 3, 2008 | 12
  • 13. Features seen TabContainer Attached to the form as a decorator Content Panes One per sub form, and a drop-in decorator to the form adding the Grid tab Most form dijits via Zend_Dojo_Form Remoting via ContentPane; Grid content pane pulls content dynamically Grids consuming Zend_Dojo_Data as a dojo.data source Zend Framework + Dojo | Sep 3, 2008 | 13
  • 14. Code examples: form decorators Zend Framework + Dojo | Sep 3, 2008 | 14
  • 15. Code example: sub form decorators Zend Framework + Dojo | Sep 3, 2008 | 15
  • 16. Code example: form element Zend Framework + Dojo | Sep 3, 2008 | 16
  • 17. Code example: view helper Zend Framework + Dojo | Sep 3, 2008 | 17
  • 18. That's nice. So what? What do I really gain?
  • 19. What you gain: Familiar PHP and ZF interface If you know how to use view helpers, you can use this If you know how to create forms with Zend_Form, you can use this In many cases, no need to learn Dojo immediately Takes care of things behind the scenes Sprinkle in where it makes sense Pretty interfaces Create consistent, beautiful interfaces, with little or no extra effort Zend Framework + Dojo | Sep 3, 2008 | 19
  • 20. Show me I won't believe it until I see it.
  • 21. Demonstration: Pastebin, without Dojo Zend Framework + Dojo | Sep 3, 2008 | 21
  • 22. Demonstration: Pastebin, with Dojo Zend Framework + Dojo | Sep 3, 2008 | 22
  • 23. Cool! How do I do it? What's the code behind it?
  • 24. How we get there: bootstrap Set djConfig options Add dijit themes and custom stylesheets Specify path to dojo, as well as any custom code Specify javascript to run at initialization Disable by default (to allow enabling only when necessary) Zend Framework + Dojo | Sep 3, 2008 | 24
  • 25. How we get there: layout script Create BorderContainer master layout and capture content to put in it Add several panes to it Zend Framework + Dojo | Sep 3, 2008 | 25
  • 26. How we get there: layout script (cont) Sample ContentPane note that content can be provided to it directly. Zend Framework + Dojo | Sep 3, 2008 | 26
  • 27. How we get there: pastebin form Extends Zend_Dojo_Form: easiest method for using Dojo with Zend_Form Adding elements is the same just new types for use with Dojo Zend Framework + Dojo | Sep 3, 2008 | 27
  • 28. How we get there: pastebin form (cont) Elements have config options and accessors for setting Dijit parameters. Zend Framework + Dojo | Sep 3, 2008 | 28
  • 29. How we get there: landing view Enable dojo when needed Mixture of content capturing and URL remoting for content panes All content captured within TabContainer Zend Framework + Dojo | Sep 3, 2008 | 29
  • 30. How we get there: grid view Grid setup first, we tell Dojo to add some gridspecific CSS, and also what additional Dojo modules we need. Zend Framework + Dojo | Sep 3, 2008 | 30
  • 31. How we get there: grid view (cont) Grid markup just HTML. This can be done programmatically, but Declarative style is often more expedient and fluent. Zend Framework + Dojo | Sep 3, 2008 | 31
  • 32. How we get there: grid data generation Grid data generation: pass our data to Zend_Dojo_Data... and that's it. Zend Framework + Dojo | Sep 3, 2008 | 32
  • 33. Deployment Considerations Or, how to reduce the number of XHR requests your Dojo application generates.
  • 34. What's going on under the hood? Calling requireModule() generates dojo.require() statements. Each dojo.require() statement triggers one or more requests to the server to pull in the necessary Javascript. Design is very modular you only use what you need. However, this means... Zend Framework + Dojo | Sep 3, 2008 | 34
  • 35. Firebug output for the sample app Zend Framework + Dojo | Sep 3, 2008 | 35
  • 36. Ouch! (That's a lot of requests!) Zend Framework + Dojo | Sep 3, 2008 | 36
  • 37. What can be done? The solution is to create a custom build Custom builds pull all (specified) functionality into a single file All template strings are interred into the code Code is minified whitespace removed, heuristics to condense variable names applied, etc. dojo.require() statements to modules compiled into the build become no-ops Trim the size of the scripts by many, many times, and reduce requests from many dozens to 1 or 2. Zend Framework + Dojo | Sep 3, 2008 | 37
  • 38. Example profile Zend Framework + Dojo | Sep 3, 2008 | 38
  • 39. Creating the build From the util/buildscripts/ directory, execute something like the following (assuming the profile script is in util/buildscripts/profiles/): Zend Framework + Dojo | Sep 3, 2008 | 39
  • 40. Other considerations Buildsarealsocalledlayers.Aftercreatingit,you need to add the layer to your application: Zend Framework + Dojo | Sep 3, 2008 | 40
  • 41. Firebug output from custom build Zend Framework + Dojo | Sep 3, 2008 | 41
  • 42. Conclusions Develop with a source build maximum flexibility Identify what dojo.require statements are necessary Look at your generated HTML for dojo.require statements Run a screen scraper over your site to identify them Create a profile for your application (or perapplication on your site) from the information above Create a custom build for deployment using the profile(s) Full distro and SVN of ZF have all tools necessary for creating custom builds Zend Framework + Dojo | Sep 3, 2008 | 42
  • 43. Parting Words What was all of that, again?
  • 44. Summary dojo() view helper to setup environment Dijit view helpers to create layouts and form elements Dijit form decorators and elements to create sophisticated forms Zend_Dojo_Data to create dojo.data payloads JSON-RPC to create "thick client" apps, where the View of your MVC is your client-side code Create custom builds for deployment to production Zend Framework + Dojo | Sep 3, 2008 | 44
  • 45. Where to get more information ZF Zend_Dojo manual: http://framework.zend.com/manual/en/zend.dojo.html The Book of Dojo: http://dojotoolkit.org/book/dojo-book-1-0 DojoCampus: http://dojocampus.org Zend Framework + Dojo | Sep 3, 2008 | 45
  • 46. Thanks for listening! Now that you have no excuse to build beautiful, dynamic applications, what are you waiting for?