Save 37% off PRO during our Black Friday Sale! »

Agile Applications with ExtJS & Zend Framework

Agile Applications with ExtJS & Zend Framework

ExtJS is an enterprise-level Javascript framework, the Zend Framework is one of the most powerful and flexible PHP frameworks to date - its a match made in heaven. I'll introduce you to these two technologies and how to combine them into an easy to maintain, agile application that can move as fast as your project needs. I'll show you how to build a sample application including a frontend MVC, REST backend and unit testing the result.

224dac66704579d941e927965a6220a2?s=128

Chris Cornutt

June 07, 2012
Tweet

Transcript

  1. Agile Applications with ExtJS & Zend Framework Chris Cornutt -

    Dutch PHP Conference 2012 https://github.com/enygma/Agile-ExtJS-ZF Thursday, June 7, 2012
  2. The ExtJS Framwork Thursday, June 7, 2012

  3. “Ext JS 4 is a pure JavaScript application framework that

    works everywhere from IE6 to Chrome 11. It enables you to create the best cross- platform applications using nothing but a browser, and has a phenomenal API.” - sencha.com Thursday, June 7, 2012
  4. What it Is A full-stack Javascript framework Complete with widgets,

    MVC & event handling Large Thursday, June 7, 2012
  5. What it Isn’t Easy to learn Bug free Lightweight Thursday,

    June 7, 2012
  6. Key Parts Controllers Views Models Stores (of MVC) Thursday, June

    7, 2012
  7. In the Box Event handling Auto-loading (lazy) Generated DOM Theming

    via CSS/LESS Thursday, June 7, 2012
  8. Widgets Toolbar Menus Date/color Pickers Multiple Layout Types Data Grids

    Charting Form Handling Data Tree ...among others. Thursday, June 7, 2012
  9. Widgets - Toolbar/Menu Can be used either as a generic

    container or as a true “toolbar” Thursday, June 7, 2012
  10. Widgets - Pickers Opens popup for “picker” element, built-in are

    color & date. Thursday, June 7, 2012
  11. Widgets - Data Grid Most used widget type, provides much

    more than just row display. Thursday, June 7, 2012
  12. Widgets - Charting Types of Graphs: - Bar - Line

    - Pie - Gauge - Radar - Scatter - Series Thursday, June 7, 2012
  13. Widgets - Tree Thursday, June 7, 2012

  14. Widgets - Forms Thursday, June 7, 2012

  15. Layout Types Absolute Accordion Anchor Border Card Column Fit Table

    Vbox Hbox Absolutely positioned elements Panels that slide in and out Items are “anchored” to the parent ‘s sides Regions are assigned and filled (N/S/E/W) Tab panel or Wizard using “card” panels Columns of elements Elements fit to the size of the parent Rows and cells Items aligned vertically Items aligned horizontally Thursday, June 7, 2012
  16. Controllers Extends “Ext.app.Controller” Loads for models, views and stores init()

    Handles actions “Controllers are the glue that binds an application together. All they really do is listen for events (usually from views) and take some action.” Thursday, June 7, 2012
  17. Example - Controller Ext.define(‘example.controller.Index’, { extend: ‘Ext.app.Controller’, models: [ ‘User’

    ], stores: [ ‘index.User’ ], views: [ ‘Userlist’ ], init: function() { console.log(‘Init controller!’); } }); Thursday, June 7, 2012
  18. Controllers init() control() refs getter/setters Common Methods/Properties Thursday, June 7,

    2012
  19. Example - Controller Ext.define(‘example.controller.Index’, { extend: ‘Ext.app.Controller’, refs: [ {

    ref: ‘list’, selector: ‘grid’ } ], models: [ ‘User’ ], stores: [ ‘index.User’ ], views: [ ‘Userlist’ ], init: function() { console.log(‘Init controller!’); this.control({ ‘button’: { click: this.refreshGrid } }); }, refreshGrid: function() { this.getList().store.load(); } }); Thursday, June 7, 2012
  20. Model Extends “Ext.data.Model” Defines fields and their types Can have

    methods of its own Setting validations “A Model represents some object that your application manages. For example, one might define a Model for Users, Products, Cars, or any other real-world object that we want to model in the system. Models are registered via the model manager, and are used by stores, which are in turn used by many of the data-bound components in Ext.” Thursday, June 7, 2012
  21. Example - Model Ext.define(‘example.model.Message’, { extend: ‘Ext.data.Model’, fields: [ {

    name: ‘message’, type: ‘string’ }, { name: ‘username’, type: ‘string’ }, { name: ‘id’, type: ‘int’ } ] initComponent: function() { console.log(‘Init Message model!’); this.callParent(arguments); } }); Thursday, June 7, 2012
  22. Models fields validations (and validate) belongsTo/hasMany/associations proxy Common Methods/Properties Thursday,

    June 7, 2012
  23. Store Extends “Ext.data.Store” Client-side data resource Data set locally or

    through a Proxy AutoLoad/AutoSync “The Store class encapsulates a client side cache of Model objects. Stores load data via a Proxy, and also provide functions for sorting, filtering and querying the model instances contained within it.” Thursday, June 7, 2012
  24. Example - Store Ext.define(‘example.store.User’, { extend: ‘Ext.data.Store’, model: ‘example.model.User’, initComponent:

    function() { console.log(‘Init User store!’); this.callParent(arguments); } }); Thursday, June 7, 2012
  25. Views Extends whatever panel/widget type you need Can be aliased

    initComponent Nested views/widgets “The View uses an Ext.XTemplate as its internal templating mechanism, and is bound to an Ext.data.Store so that as the data in the store changes the view is automatically updated to reflect the changes. The view also provides built-in behavior for many common events that can occur for its contained items including click, doubleclick, mouseover, mouseout, etc. as well as a built-in selection model.” Thursday, June 7, 2012
  26. Example - View Ext.define(‘example.view.index.Buttons’, { extend: ‘Ext.Panel’, alias: ‘widget.buttonpanel’, items:

    [ { xtype: ‘button’, text: ‘Click Me!’, handler: function() { } } ], initComponent: function() { console.log(‘Init User store!’); this.callParent(arguments); } }); Thursday, June 7, 2012
  27. The Zend Framework Thursday, June 7, 2012

  28. Controllers Types: Front, Action, Router_Rewrite, Dispatcher_Standard Augmented by “action helpers”

    init(), preDispatch() methods run first Accessors for request, parameters, arguments “The Zend_Controller system is designed to be lightweight, modular, and extensible. It is a minimalist design to permit flexibility and some freedom to users while providing enough structure so that systems built around Zend_Controller share some common conventions and similar code layout.” Thursday, June 7, 2012
  29. Example - Controller <?php class ExampleController extends Zend_Controller_Action { public

    function init() { // called at controller object create } public function indexAction() { // called when request is “/example/index” } } ?> Thursday, June 7, 2012
  30. Model Open ended for your interface Can use things like

    Zend_Db_Table ...or Doctrine Relationships (_dependentTables, _referenceMap) “The model captures the domain logic of the application — those actions a user might want to request — with a strong separation from the way that the user requests them and sees the results.” Thursday, June 7, 2012
  31. Example - Model <?php class Application_Model_Chatmessage extends Zend_Db_Table_Abstract { protected

    $_name = ‘chat_messages’; public function init() { // called when object is created } public function getLatest($limit=10) { // get 10 latest chat messages } } ?> Thursday, June 7, 2012
  32. View “View helpers” Partials Work with template engines (like Twig)

    “Views define exactly what is presented to the user. Usually controllers pass data to each view to render in some format. Views will often collect data from the user, as well. This is where you're likely to find HTML markup in your MVC applications.” Thursday, June 7, 2012
  33. Example - View <html> <head> <title>My Application</title> </head> <body> <?php

    echo $this->output; ?> </body> </html> Thursday, June 7, 2012
  34. Zend + Ext JS Thursday, June 7, 2012

  35. ZF Controller Ext Controller ZF View Ext Store Ext View

    ZF Model Ext Model ZF Data Source Thursday, June 7, 2012
  36. The usual stuff is easy... Custom plugins (like a RowExpander)

    HTML5 Features (File drag, local storage, form fields) Still need Javascript knowledge In Ext JS... Thursday, June 7, 2012
  37. Can be over-complicated Very flexible (both good and bad?) Don’t

    expect a “do it all for me” framework Single-page versus Multiple Pages? In Zend Framework... Thursday, June 7, 2012
  38. Example Time! Thursday, June 7, 2012

  39. Creating a basic application Setting up a Model and Store

    Widget Examples Working with Layouts Grids & Database Backend Simple User System Unit Testing with Jasmine Advanced App - Real-time Chat Thursday, June 7, 2012
  40. To the Cloud...er Code! Thursday, June 7, 2012

  41. Chris Cornutt @enygma @phpdeveloper / @phpquickfix https://joind.in/6220 Thanks! Thursday, June

    7, 2012