The Mobile Conference (Sencha Touch Workshop) Part I

The Mobile Conference (Sencha Touch Workshop) Part I

Transcript

1. Sencha Touch Workshop Sencha Workshop: Part 1 • Objectives – Get to know the framework – Generate MVC Application – Create a Model – Validate a Model – Create Views (Carousel view, Toolbars & Buttons) Wednesday, June 5, 13
2. Sencha Touch Workshop Introducing Sencha Touch • Solves problems for designing for different screen resolutions • Write code once and run on all modern (mobile) browsers & devices. • Theme your application using CSS (Sass & Compass) • Provides a large set of icons for use in toolbars tabs • Supports a robust animation system • Create dynamic interactive charts • Compile to a native app • MVC Architecture Wednesday, June 5, 13
3. Sencha Touch Workshop Introducing Sencha Touch • Functionality in Sencha Touch can be broken down into the following categories • User Interface • Touch Events • Forms • Data • Animations • Media • MVC Framework / SDK Production tools • Charts Wednesday, June 5, 13
4. Sencha Touch Workshop Using the Sencha Touch Documentation • Goes beyond traditional API docs • Getting started guides • Videos • Sample applications • Editable code samples that run in a simulator Wednesday, June 5, 13
5. Sencha Touch Workshop Introducing Sencha Cmd 3 Wednesday, June 5, 13
6. Sencha Touch Workshop Using Sencha Cmd Generate  an  applica,on: sencha  generate  app  AppName  ../path/ Generate  a  controller: sencha  generate  controller  MyController Create  a  produc,on  build: sencha  app  build Create  na,ve  build: sencha  app  build  na:ve Wednesday, June 5, 13
7. Sencha Touch Workshop Understanding the MVC File Structure • How the folder structure for your lab application will appear when you've completed this course Wednesday, June 5, 13
8. Sencha Touch Workshop Understanding the Benefits of Sencha MVC • Wednesday, June 5, 13
9. Sencha Touch Workshop Understanding the Benefits of Sencha MVC • Wednesday, June 5, 13
10. Sencha Touch Workshop Introducing the Sencha Touch Data Package Wednesday, June 5, 13
11. Sencha Touch Workshop Creating Models with Sencha Cmd • sencha generate model -name MyModel -fields fName,lName Ext.define('MyApp.model.MyModel', { extend: 'Ext.data.Model', config: { fields: [ {name: 'fName, type: 'auto'}, {name: 'lName', type: 'auto'} ] } }); Wednesday, June 5, 13
12. Sencha Touch Workshop Defining Field Validations • There are five supported validations. Ext.define('MyApp.model.User', { extend: 'Ext.data.Model', config: { idProperty: 'idUser', fields: [ {name: 'idUser', type: 'int'}, {name: 'name', type: 'string'}, {name: 'age', type: 'int'}, 'phone', 'gender', 'username', {name: 'alive', type: 'boolean', defaultValue: true} ], validations: [ {type: 'presence', field: 'age', message: 'Age is Reqd'}, {type: 'length', field: 'name', min: 2}, {type: 'inclusion',field: 'gender', list: ['Male', 'Female']}, {type: 'exclusion', field: 'username', list: ['Admin', 'Operator']}, {type: 'format', field: 'username', matcher: /([a-z]+)[0-9]{2,3}/, } ] } }); Wednesday, June 5, 13
13. Sencha Touch Workshop Class System Wednesday, June 5, 13
14. Sencha Touch Workshop Working with the Sencha Touch Class System • Classes are in packages and namespaces based on related functionality • Automatic dependency management • Dynamic class loading • Automatic generation of getters and setters • Statics & Singletons Wednesday, June 5, 13
15. Sencha Touch Workshop Understanding Class-Based Programming • Sencha Touch ships with more than 200 classes • At that scale of a framework, there are significant challenges in providing a common code architecture that is – familiar and simple to learn – fast to develop, easy to debug, painless to deploy – well-organized, extensible and maintainable Wednesday, June 5, 13
16. Sencha Touch Workshop Defining and Instantiating New Classes in Sencha Touch • Define custom classes using the Ext.define() method • Create new instances of classes using Ext.create() • Virtually all of your Sencha Touch code will reside in classes • Using classes enables you to group related methods and data together • Ext.define('MyApp.classes.Car', { extend: 'Vehicle', // configs and custom methods go here }); var myCar = Ext.create('MyApp.classes.Car'); Wednesday, June 5, 13
17. Sencha Touch Workshop Nesting Sencha Touch Components Ext.define('MyApp.view.DemoView',{ extend: 'Ext.Container', xtype: ‘mymainview’, config: { items : [ { xtype: 'container', html: 'One' }, { xtype: 'container', html: 'Two' } ] } }); Wednesday, June 5, 13
18. Sencha Touch Workshop View Components Wednesday, June 5, 13
19. Sencha Touch Workshop Defining Toolbars Ext.define('Dinmu.view.Main", { extend : 'Ext.Container', config : { items : [{ xtype : 'toolbar', docked: 'top', title: 'Do I need my Umbrella?' }, { xtype : 'container', html : 'Settings Form' } ] } }); Wednesday, June 5, 13
20. Sencha Touch Workshop Configuring the Toolbar • The Ext.Toolbar class extends the Ext.Container class, and therefore inherits its configuration options • You will typically define the following toolbar configuration options –docked –title –items –disabled –ui Wednesday, June 5, 13
21. Sencha Touch Workshop Defining Toolbar Buttons • The following code snippet illustrates adding buttons to a toolbar { xtype: 'toolbar', docked: 'bottom', layout: { pack: 'justify'}, items: [ { xtype: 'button', text: 'Back' }, { text: 'Next' } ] } Wednesday, June 5, 13
22. Sencha Touch Workshop Defining Titlebars • Similar to Ext.Toolbar • The title config is always centered horizontally between items on the left and right • Items in the titlebar can be docked left or right • Button text auto-truncates Wednesday, June 5, 13
23. Sencha Touch Workshop Implementing a Carousel Layout • Customized Panels that enable you to slide back and forth between different child items • horizontal or vertical scrolling • Ext.Carousel • xtype: 'carousel' Ext.create('Ext.carousel.Carousel', { direction: 'horizontal', indicator: true, ui: 'dark', defaults: { xtype: 'container' } items: [ { html: 'One' }, { html: 'Two' }, { html: 'Three'} ] }); Wednesday, June 5, 13
24. Sencha Touch Workshop Carousel Configuration Properties • baseCls • direction • indicator • itemCls • ui Wednesday, June 5, 13
25. Sencha Touch Workshop Lab: Part 1 • Lab Instructions: • http://www.ladysign-apps.com/dinmu/labs/ • https://github.com/savelee/conferences/ • Objectives – Generate MVC Application – Create a Model – Validate a Model Wednesday, June 5, 13