The Mobile Conference (Sencha Touch Workshop) Part II

The Mobile Conference (Sencha Touch Workshop) Part II

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
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
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
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
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
6. Sencha Touch Workshop Creating a Form with Sencha Cmd • sencha generate form -name MyForm -fields firstname,lastname Wednesday, June 5, 13
7. Sencha Touch Workshop Controllers • Wednesday, June 5, 13
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
9. Sencha Touch Workshop Component Events • Wednesday, June 5, 13
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
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
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
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
14. Sencha Touch Workshop Handling Form Input Wednesday, June 5, 13
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
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
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() + "<br />"; }); Ext.Msg.alert("Doh!", errorstring); } } Wednesday, June 5, 13
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
19. Sencha Touch Workshop Ext.Msg Windows Wednesday, June 5, 13
20. Sencha Touch Workshop Caching Data Locally Wednesday, June 5, 13
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
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
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
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
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
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
27. Sencha Touch Workshop JSON Requests... Wednesday, June 5, 13
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
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
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