Agile Applications with ExtJS & Zend Framework

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