Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Mobile Conference (Sencha Touch Workshop) Part II

The Mobile Conference (Sencha Touch Workshop) Part II

The Mobile Conference (Sencha Touch Workshop) Part II

Lee Boonstra

June 06, 2013
Tweet

More Decks by Lee Boonstra

Other Decks in Technology

Transcript

  1. Sencha Touch Workshop
    Sencha Workshop: Part 2
    • Objectives
    – Build Forms
    – Create Controllers
    – How to handle forms
    – Save data in the localstorage
    – Create a JSONP API request
    Wednesday, June 5, 13

    View Slide

  2. Sencha Touch Workshop
    Defining an Input Form
    • You can define data entry forms using the Ext.form.Panel
    class
    • Sencha Touch supports most HTML 5 input field types
    including the following
    • Check Box • Search
    • Date Picker • Select
    • Email Field • Slider
    • Fieldset • Spinner
    • Hidden • Text
    • Number • Text Area
    • Password • Toggle
    • Radio Buttons • URL
    Wednesday, June 5, 13

    View Slide

  3. Sencha Touch Workshop
    Defining Text Fields
    Ext.define('Sample.view.SampleForm', {
    extend : 'Ext.form.Panel',
    xtype : 'sampleform',
    config : {
    items : [{
    xtype : 'textfield',
    name : 'lname',
    label : 'Last Name',
    required: true,
    autoFocus: true
    },
    {
    xtype : 'textfield',
    name : 'last',
    label : 'First Name',
    required: true
    }]
    }
    });
    Wednesday, June 5, 13

    View Slide

  4. Sencha Touch Workshop
    Grouping Fields with a Fieldset
    {
    xtype: 'fieldset',
    title: 'Your location',
    instructions: ‘..’,
    items: [
    ...
    {
    xtype : 'textfield',
    name : 'city',
    label : 'City'
    },
    ...
    ]
    }
    Wednesday, June 5, 13

    View Slide

  5. Sencha Touch Workshop
    Implementing a Toggle Control
    • You can either deploy a Toggle control through the
    Ext.field.Toggle constructor or implicitly through the
    togglefield xtype
    {
    xtype: 'togglefield',
    name: 'active',
    label: 'Active?'
    }
    Wednesday, June 5, 13

    View Slide

  6. Sencha Touch Workshop
    Creating a Form with Sencha Cmd
    • sencha generate form
    -name MyForm -fields
    firstname,lastname
    Wednesday, June 5, 13

    View Slide

  7. Sencha Touch Workshop
    Controllers

    Wednesday, June 5, 13

    View Slide

  8. Sencha Touch Workshop
    Implementing Controllers
    • Responsible for responding to events that occur within the
    app
    • "Glues" the view classes to the Model classes
    • Each component has many events
    • Named after the object (model) that it primarily deals with.
    • refs section contains pointers to components
    • control section attaches event listeners
    • refs and control use Ext.ComponentQuery syntax
    Wednesday, June 5, 13

    View Slide

  9. Sencha Touch Workshop
    Component Events

    Wednesday, June 5, 13

    View Slide

  10. Sencha Touch Workshop
    Creating Controllers with Sencha Cmd
    • sencha generate controller -name MyController
    Ext.define('MyApp.controller.Mycontroller', {
    extend: 'Ext.app.Controller',
    config: {
    refs: {
    },
    control: {
    }
    },
    // called when the Application is launched,
    // remove if not needed
    launch: function(app) {
    }
    });
    Wednesday, June 5, 13

    View Slide

  11. Sencha Touch Workshop
    Refs & Control
    Ext.define('MyApp.controller.Mycontroller', {
    extend: 'Ext.app.Controller',
    config: {
    refs: {
    myForm : ‘settingsform’
    },
    control: {
    ‘myForm’ : {
    ‘submit’ : ‘onSubmitFn’
    }
    }
    },
    // called when the Application is launched,
    // remove if not needed
    launch: function(app) {
    this.getMyForm().hide();
    }
    });
    Wednesday, June 5, 13

    View Slide

  12. Sencha Touch Workshop
    Using Ext.ComponentQuery
    • Ext.ComponentQuery returns an array of components
    // retrieve all Ext.Container that are direct children of the
    // container with an id of viewport
    var aCntrs = Ext.ComponentQuery.query("viewport > container")
    // retrieve all tabpanels and toolbars
    var aToolbarLists =
    Ext.ComponentQuery.query('tabpanel, toolbar');
    // retreive all select fields with a name of "myfield"
    var cmpSelect =
    Ext.ComponentQuery.query('selectfield[name="myfield"]');
    // first button with itemId of 'btn1'
    var btn = Ext.ComponentQuery.query('button#btn1')[0];
    Wednesday, June 5, 13

    View Slide

  13. Sencha Touch Workshop
    Using up()/down()/query()
    • up()/down() walks up/down the items hierarchy looking for the first
    ancestor/descendant that matches a selector
    • query() is similar to down() but returns an array of matching items
    var owningTabPanel = formfield.up('tabpanel');
    var cntr = button.up('container');
    var form = cntrl.down('form');
    var aContainers = Ext.ComponentQuery.query('container');
    var sbtn = aContainers[0].down('button');
    // returns all buttons in the container and the
    // container's descendants
    var allButtons = myContainer.query("button");
    Wednesday, June 5, 13

    View Slide

  14. Sencha Touch Workshop
    Handling Form Input
    Wednesday, June 5, 13

    View Slide

  15. Sencha Touch Workshop
    Loading Data from a Model
    • Typically, communications between a form and the server are
    handled through a data model
    • With a single command you can populate form fields from a
    model
    • You will validate the data in a model, prior to transferring the
    data to the server via AJAX
    Wednesday, June 5, 13

    View Slide

  16. Sencha Touch Workshop
    Example
    • Transfer data from a form back into your model instance
    • Transfer data from a model to a form
    var model = Ext.create(‘MyApp.model.Settings’);
    myForm.updateRecord(model);
    var errors = model.validate();
    Wednesday, June 5, 13

    View Slide

  17. Sencha Touch Workshop
    Executing Validation Checks
    • Note that each error item supports the following methods
    –getField()
    –getMessage()
    saveFormData: function() {
    var model = Ext.create("Sample.model.SampleModel", {});
    var errorstring = "";
    this.getMyForm().updateRecord(model);
    var errors = model.validate();
    if (!errors.isValid()) {
    errors.each(function (errorObj){
    errorstring += errorObj.getMessage() + "
    ";
    });
    Ext.Msg.alert("Doh!", errorstring);
    }
    }
    Wednesday, June 5, 13

    View Slide

  18. Sencha Touch Workshop
    Outputting Error Messages in an Alert Box
    • The Ext.MessageBox class contains a number of methods that
    enable you to output modal popup boxes
    • Executes asynchronously
    • You can invoke each of the following methods from the Ext.Msg
    singleton class
    – alert(String title, String msg, [Function fn], [Object scope])
    – confirm (String title, String msg, [Function fn], [Object scope])
    – prompt (String title, String msg, [Function fn], [Object scope],
    [Boolean/number multiline],[String value], Object
    promptConfig)
    Wednesday, June 5, 13

    View Slide

  19. Sencha Touch Workshop
    Ext.Msg Windows
    Wednesday, June 5, 13

    View Slide

  20. Sencha Touch Workshop
    Caching Data Locally
    Wednesday, June 5, 13

    View Slide

  21. Sencha Touch Workshop
    Caching Data Locally
    • HTML5 Local Storage enables you to store keyname/value
    pairs on the device
    • Stored data persists on your device, even after a power-down
    • Represented in Sencha Touch as the LocalStorageProxy class
    • Store up to 5MB on most devices
    • SessionStorage is also available
    • Sencha Touch 2.1+ includes a Web SQL proxy
    Wednesday, June 5, 13

    View Slide

  22. Sencha Touch Workshop
    Defining a LocalStorageProxy
    • The LocalStorageProxy uses the HTML5 localStorage API to save Model data
    locally on the client browser
    • Extremely useful for saving user-specific info without needing to build
    server-side infrastructure to support it
    • HTML5 localStorage is a key-value store (e.g. cannot save complex objects)
    • LocalStorageProxy automatically serializes and deserializes abstract data
    types as JSON when saving and retrieving them
    • Attach the localstorage proxy to a Ext.data.Model or Ext.data.Store
    proxy: {
    type: 'localstorage',
    id: 'someID'
    }
    Wednesday, June 5, 13

    View Slide

  23. Sencha Touch Workshop
    Defining a LocalStorageProxy
    • The following example illustrates defining a model for
    contacts that references a localstorage area named
    localContacts
    Ext.define('Sample.model.Contact',
    {
    extend: 'Ext.data.Model',
    fields: [
    {name: 'lname', type: 'string', allowBlank: false },
    {name: 'fname', type: 'string', allowBlank: false },
    {name: 'email', type: 'string', allowBlank: false}
    ],
    validations: [
    {type: 'presence', field: 'fname'},
    {type: 'presence',field: 'lname'},
    {type: 'format', field: 'email', matcher: /^[a-zA-
    Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/}
    ],
    proxy: {
    type: 'localstorage',
    id: 'localContacts'
    }
    }
    )
    Wednesday, June 5, 13

    View Slide

  24. Sencha Touch Workshop
    Putting Data into LocalStorage
    var settings =
    Ext.create('Dinmu.model.Setting',
    {
    city: 'Amsterdam',
    country: 'NL'
    }
    );
    SettingsStore.add(settings);
    SettingsStore.sync();
    Wednesday, June 5, 13

    View Slide

  25. Sencha Touch Workshop
    Putting Data into LocalStorage
    • Use model and store persistence methods
    • store.add()
    • store.removeAt()
    • store.remove()
    • store.sync()
    • model.save()
    Wednesday, June 5, 13

    View Slide

  26. Sencha Touch Workshop
    Reading Data from Local Storage
    • Ext.data.Store.load()
    • Ext.data.Store.each(function, scope)
    • Ext.data.Store.first()
    • Ext.data.Store.getCount()
    • Ext.data.Store.getAt(Number index)
    Wednesday, June 5, 13

    View Slide

  27. Sencha Touch Workshop
    JSON Requests...
    Wednesday, June 5, 13

    View Slide

  28. Sencha Touch Workshop
    Making Ad-Hoc AJAX Requests
    • Use Ext.Viewport.setMasked()
    to inform the user of a slight
    delay while the transaction
    takes place
    • In your success and failure
    handlers you hide the
    loadmask to turn off the wait
    message
    • Use Ext.decode() to parse
    complex data that is
    represented as JSON
    Wednesday, June 5, 13

    View Slide

  29. Sencha Touch Workshop
    Making Ad-Hoc JSON-P Requests
    • The following example illustrates making an
    Ext.data.JsonP.request
    Ext.Viewport.setMasked({
    xtype: 'loadmask',
    message: 'Loading...
    });
    Ext.data.JsonP.request({
    url: 'http://free.worldweatheronline.com/feed/weather.ashx',
    params: {
    q: place,
    },
    success: function(result, request) {
    Ext.Viewport.unmask();
    //do stuff
    },
    failure: function(e) {
    Ext.Viewport.unmask();
    //do stuff when fails.
    }
    });
    Wednesday, June 5, 13

    View Slide

  30. Sencha Touch Workshop
    Lab: Part 2
    • Download Lab Instructions & solutions from:
    • https://github.com/savelee/conferences/
    • Objectives
    – Build & handle Forms
    – Create Controllers
    – Create Static methods
    – Create a JSONP API request
    – Save data in the localstorage
    Wednesday, June 5, 13

    View Slide