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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

5. Sencha Touch Workshop
   Introducing Sencha Cmd 3
   Wednesday, June 5, 13
   

   View Slide

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
   

   View Slide

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
   

   View Slide

8. Sencha Touch Workshop
   Understanding the Benefits of Sencha MVC
   •
   Wednesday, June 5, 13
   

   View Slide

9. Sencha Touch Workshop
   Understanding the Benefits of Sencha MVC
   •
   Wednesday, June 5, 13
   

   View Slide

10. Sencha Touch Workshop
    Introducing the Sencha Touch Data Package
    Wednesday, June 5, 13
    

    View Slide

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
    

    View Slide

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
    

    View Slide

13. Sencha Touch Workshop
    Class System
    Wednesday, June 5, 13
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

18. Sencha Touch Workshop
    View Components
    Wednesday, June 5, 13
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

24. Sencha Touch Workshop
    Carousel Configuration Properties
    • baseCls
    • direction
    • indicator
    • itemCls
    • ui
    Wednesday, June 5, 13
    

    View Slide

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
    

    View Slide