The Mobile Conference (Sencha Touch Workshop) Part II

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

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

View Slide

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
},
{
name : 'last',
label : 'First Name',
required: true
}]
}
});

View Slide

Grouping Fields with a Fieldset
{
xtype: 'fieldset',
title: 'Your location',
instructions: ‘..’,
items: [
...
{
name : 'city',
label : 'City'
},
...
]
}

View Slide

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?'
}

View Slide

Creating a Form with Sencha Cmd
• sencha generate form
-name MyForm -fields
firstname,lastname

View Slide

Controllers
•

View Slide

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

View Slide

Component Events
•

View Slide

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) {
}
});

View Slide

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();
}
});

View Slide

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];

View Slide

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");

View Slide

Handling Form Input

View Slide

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

View Slide

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();

View Slide

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);
}
}

View Slide

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)

View Slide

Ext.Msg Windows

View Slide

Caching Data Locally

View Slide

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

View Slide

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'
}

View Slide

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'
}
}
)

View Slide

Putting Data into LocalStorage
var settings =
Ext.create('Dinmu.model.Setting',
{
city: 'Amsterdam',
country: 'NL'
}
);
SettingsStore.add(settings);
SettingsStore.sync();

View Slide

Putting Data into LocalStorage
• Use model and store persistence methods
• store.add()
• store.removeAt()
• store.remove()
• store.sync()
• model.save()

View Slide

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)

View Slide

JSON Requests...

View Slide

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

View Slide

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.
}
});

View Slide

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

View Slide

The Mobile Conference (Sencha Touch Workshop) Part II

The Mobile Conference (Sencha Touch Workshop) Part II

Lee Boonstra

More Decks by Lee Boonstra

Other Decks in Technology

Featured

Transcript