Sencha touch


Published on

Cross Platform Mobile Web Development

1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Javascript library for developing web based applications for mobile and tablet devices…Works in conjunction with web absed tech like html5,css3
  • Open source version under gpl3
  • Sencha touch

    1. 1. Sencha Touch HTML5 and JavaScript Mobile Web App Framework Version 1.01
    2. 2. <ul><li>To build applications on different platforms we would require knowledge of objective c for ios, android sdk for android platform or j2me. </li></ul><ul><li>It is not possible to learn and master all the languages, unless there is a third party native framework to bridge the gap between all the different platforms. </li></ul><ul><li>If one wants to use the knowledge of JavaScript ,HTML and CSS to develop mobile web applications which would run on different platforms like ios and android, Sencha Touch is the solution. </li></ul><ul><li>Sencha Touch brings the native application feel by means of a clever blend of HTML5, CSS3 and JavaScript, all optimized for the best mobile experience. </li></ul>Building Applications on mobile
    3. 4. INTRODUCTION TO SENCHA TOUCH <ul><li>Sencha Touch was developed on top of the Ext JS framework and is the first mobile HTML5 JavaScript framework. </li></ul><ul><li>Sencha Touch was developed with the intention of developing Web Applications that to a large extent mimic native mobile applications. </li></ul><ul><li>Sencha Touch helps building web applications resemble native applications by using clever blend of HTML5,CSS3 and JavaScript. </li></ul><ul><li>License: GPL - GNU General Public License GPL - GNU General Public License </li></ul>
    4. 5. <ul><li>Sencha Touch runs on iOS (iPhone, iPad) devices, as well android phones </li></ul><ul><li>Its latest version allows developing applications for Blackberry 6. </li></ul><ul><li>Sencha has also announced it would support windows 7 Mobile in future </li></ul>Platform support and
    5. 6. Starting With Sencha Touch <ul><li>Pre-Requisites </li></ul><ul><ul><li>To start using Sencha Touch, all we need is working knowledge of the JavaScript language, HTML and CSS. As mentioned, the framework abstracts many of the features and styles you'd normally be assembling from scratch . </li></ul></ul><ul><li>Using Sencha Touch: Main Steps </li></ul><ul><ul><ul><li>Set up your Environment </li></ul></ul></ul><ul><ul><ul><li>Create the HTML File </li></ul></ul></ul><ul><ul><ul><li>Add the Sencha Library Files in the HTML File </li></ul></ul></ul><ul><ul><ul><li>Create the Application JavaScript File </li></ul></ul></ul>
    6. 7. <ul><ul><li>Download the Sencha Touch Library from the following URL:- </li></ul></ul><ul><ul><li>The library would be a zip file which would contain two important files:- </li></ul></ul><ul><ul><ul><ul><li>Sencha Touch.js </li></ul></ul></ul></ul><ul><ul><ul><ul><li>SenchaTouch.css </li></ul></ul></ul></ul><ul><ul><li>Also there is a CSS specifically written for Android called android.css and a CSS file written specifically for ios called apple.css </li></ul></ul><ul><li>Set up your Environment </li></ul>
    7. 8. <ul><li>In NetBeans or Dreamweaver start creating a HTML File. </li></ul><ul><li>In this HTML file, we would now link the necessary files from the Sencha Touch library . </li></ul><!DOCTYPE html> <html> <head> <!-- <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=us-ascii&quot; />--> <title>Overlay</title> <link rel=&quot;stylesheet&quot; href=&quot;css/sencha-touch.css&quot; type=&quot;text/css&quot; /> <script type=&quot;text/javascript&quot; src=&quot;JS/sencha-touch.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;JS/myapp.js&quot;></script> </head> </body> </html> Creating the HTML file
    8. 9. <ul><li>Myapp.js the file where the actual code of the application would reside. </li></ul>Ext.setup({ tabletStartupScreen: 'tablet_startup.png', phoneStartupScreen: 'phone_startup.png', icon: 'icon.png', glossOnIcon: true, onReady: function() { // write your Sencha Code here } }); Create the application JavaScript File:-
    9. 10. <ul><li>tabletStartupScreen:- Property. Specifies the name of the icon file to use as the application's start up screen on tablet devices. </li></ul><ul><li>phoneStartupScreen :-Property. Specifies the name of the icon file to use as the application's start up screen on phone devices. </li></ul><ul><li>icon Property:-Specifies the name of the application's default icon file, icon.png . </li></ul><ul><li>glossOnIcon:-Property. Specifies whether you want the gloss effect to be applied to the default icon. In this case, the value is set to false indicating not to add gloss to the default icon. </li></ul><ul><li>onReady Method:- Specifies the function to run when the browser's Document Object Model (DOM) is ready after the application HTML file has loaded. </li></ul>
    10. 11. <ul><li>To test your application: Emulators include </li></ul><ul><li>Upload the library files to the destination directory on your Web server. </li></ul><ul><li>Upload the application files (html, js, and css) and all referenced files to the destination directory on your Web server. </li></ul><ul><li>Point your browser to http:// localhost:8080/myapp.html where: </li></ul><ul><ul><li>localhost is the Web server host name or IP address </li></ul></ul><ul><ul><li>8080 is the Web server port number </li></ul></ul><ul><ul><li>myapp.html is the name of the application HTML file </li></ul></ul>Test the Application
    11. 12. BUILDING MOBILE USER INTERFACES WITH SENCHA TOUCH <ul><li>Sencha Touch consists many ready to use components like Grid, Tab Panel, Docked Bottom Bars and many more. </li></ul><ul><li>It also contains several ready to use icons which are stored in the form of inline images in the css itself. </li></ul><ul><li>There are several default themes that can be used in the web Application and even the CSS is highly customizable </li></ul><ul><li>There are several extensions called as UX which can be included in the Sencha library. For eg:-UX Touch Grid Panel. </li></ul>
    12. 13. The framework’s provide many ready to use themes that make the Web App look native
    13. 14. Sencha Touch Components
    14. 15. Panels <ul><li>Panels are used as containers in Sencha Touch. </li></ul><ul><li>It can contain an array of different Sencha components </li></ul><ul><li>Panel is the default component type. </li></ul><ul><li>Explain the hierarchy as to how tab is also tabPanel </li></ul>
    15. 16. Panels can contain an array of Items and docked Items:- Ext.setup({ tabletStartupScreen: 'tablet_startup.png', phoneStartupScreen: 'phone_startup.png', icon: 'icon.png', glossOnIcon: true, onReady: function() { new Ext.Panel ({ fullscreen : true , items : [ ] , dockedItems : [ ] }); } });
    16. 17. In the figure we have a Panel with three docked items:- ToolBar docked at the Top List Panel docked at the Left ToolBar docked at the bottom Docked Items Example
    17. 18. Creating a Component <ul><li>xtype is a symbolic name given to a class. </li></ul><ul><li>If you have xtype, the only thing that sits in the memory is a simple configuration object, that is not that expensive as a complex instantiated class. </li></ul><ul><li>With this approach we instantiated a class, a object of the class is created . </li></ul>
    18. 19. Styling With UI Attribute
    19. 20. Sencha Touch Buttons and icons and docked Toolbars
    20. 21. Buttons in Sencha Touch <ul><li>Sencha Touch provides wide variety of built-in button styles. </li></ul><ul><li>We can modify the button styles just my changing the UI attribute as shown below. </li></ul><ul><li>Example: </li></ul><ul><li>{ </li></ul><ul><li>xtype:’button’, </li></ul><ul><li>ui: ’confirm ’ </li></ul><ul><li>} </li></ul><ul><li>This would result in a green button as shown in image which prompts the user to take some action </li></ul><ul><li>In the next slide I have mentioned List of UI available for buttons and general theming. </li></ul>
    21. 22. ToolBars in Sencha Touch <ul><li>ToolBars are generally docked to the top or bottom of the page </li></ul><ul><li>They consist of group of buttons, titles, searchfields and select list. </li></ul><ul><li>The best practice is to wrap the toolbar inside a panel as shown in the example. </li></ul>var viewport = new Ext.Panel({ fullscreen: true, dockedItems: [{ xtype: 'toolbar', dock: 'top', items: [ { xtype: 'textfield', name : 'name', placeHolder: 'Text', }, { xtype: 'searchfield', name : 'search', placeHolder: 'Search' }, { xtype: 'button', ui:'confirm', text:'Test' }] }] });
    22. 23. Icons in Sencha Touch <ul><li>There are wide variety of icons in Sencha Touch </li></ul><ul><li>These can be added just by using the iconCls attribute as shown in the example below. </li></ul><ul><li>Example </li></ul><ul><li>xtype : ’toolbar’, </li></ul><ul><li>{ </li></ul><ul><li>items:[ </li></ul><ul><li>{ </li></ul><ul><li>iconCls : &quot;star&quot; </li></ul><ul><li>}, </li></ul><ul><li>{ </li></ul><ul><li>iconCls : “home&quot; </li></ul><ul><li>}, </li></ul><ul><li>{ </li></ul><ul><li>iconCls : “add&quot; </li></ul><ul><li>} </li></ul><ul><li>] </li></ul><ul><li>} </li></ul>
    23. 24. Layouts <ul><li>There are some other layouts also like:- </li></ul><ul><li>Auto:- It would fit only that much content needed to occupy the space </li></ul><ul><li>Card :- It can accommodate multiple components. It is generally used with tab panel.. </li></ul>Layouts decide how the components would be placed on the Page. Many Layouts are available in Sencha Touch:- Hbox:-It tiles items horizontally Vbox:-It tiles items vertically Fit:-Items occupy entire space available
    24. 25. Container Properties Layouts <ul><li>These can be used within layout property of any container </li></ul><ul><li>These properties offer more flexibility to control arrangement of child widgets on the screen </li></ul>
    25. 26. Forms in Sencha Touch <ul><li>Forms in Sencha Touch is a nested list of xtypes and fieldsets. </li></ul><ul><li>The FormPanel is a container that is typically used to display any of the input fields that Sencha Touch provides and is automatically scrollable. </li></ul><ul><li>Various fields can be grouped via the FieldSet widget . </li></ul><ul><li>Forms provide many components like :- </li></ul><ul><ul><li>Textfield </li></ul></ul><ul><ul><li>Passwordfield </li></ul></ul><ul><ul><li>Emailfield </li></ul></ul><ul><ul><li>Urlfield </li></ul></ul><ul><ul><li>Textareafield </li></ul></ul><ul><ul><li>Togglefield </li></ul></ul><ul><ul><li>Sliderfield </li></ul></ul><ul><ul><li>Spinnerfield </li></ul></ul><ul><ul><li>Checkboxfield </li></ul></ul><ul><ul><li>Selectfield </li></ul></ul>
    26. 28. TabPanels in Sencha Touch <ul><li>TabPanel is a container well and automatically sets a top-docked or bottom-docked toolbar for you with automatically generated buttons for every child item. Tapping any of the buttons allows you to “flip” through each of the tab items. </li></ul><ul><li>Sencha adds various animations directly when we click on the toolbar buttons. </li></ul><ul><li>If we use the bottom tab Bars we automatically get the icons with the name of the tab title. </li></ul>
    27. 29. Carousels in Sencha Touch <ul><li>Carousels are very prominent on the Smart Phones. </li></ul><ul><li>Panels act as containers for the Carousels. </li></ul><ul><li>Some of the important features of carousels are:- </li></ul><ul><ul><li>Direction </li></ul></ul><ul><ul><li>UI </li></ul></ul><ul><ul><li>Indicator </li></ul></ul>var carousel2 = new Ext.Carousel({ direction: 'vertical', ui: 'light', items: [ { title: 'Tab 1', html: ‘1’ }, { title: 'Tab 2', html: '2' }, { title: 'Tab 3', html: '3' }] });
    28. 30. Templates and XTemplates <ul><li>Templates are useful to render data in a customized way by creating a HTML Template. </li></ul><ul><li>With the help of XTemplates we can also create a for loop to run through the array of items or an If loop to place conditional statements. </li></ul><ul><li>They are frequently used with store class to render some data in a customized way. </li></ul>var planetinfo=new Ext.Template( ‘ <table>’, ‘ <tr>’, ‘ <td>’, '<h2>Name:{name}</h2>', ‘ </td>’, ‘ </tr>’, ‘ </table>>’ )
    29. 31. List of Formatting Functions with Templates <ul><li>ellipsis(length): Useful for when you want to only show the first x characters and then provide a more detailed view. </li></ul><ul><li>undef: If the variable is undefined show &quot;&quot; instead of &quot;undefined&quot; </li></ul><ul><li>htmlEncode: If the variable contains ampersands, less than, greater than symbols or quotes HTML escape them. </li></ul><ul><li>trim: If the variable contains extra whitespace, trim it. </li></ul><ul><li>substr(start, length): Substring the variable. </li></ul><ul><li>lowercase: Transform the variable to all lowercase. </li></ul><ul><li>uppercase: Transform the variable to all uppercase. </li></ul><ul><li>capitalize: Capitalize the first letter of the variable. </li></ul><ul><li>usMoney: Format in US Dollars. ie: $10.97 </li></ul><ul><li>date[(format)]: Transform the variable to a date format, if the format argument is omitted uses the mask 'm/d/Y' . </li></ul>
    30. 32. List component in Sencha Touch <ul><li>List components are of three varieties in Sencha Touch:- </li></ul>Single List Grouped List Disclosure List
    31. 33. Data Stores Ext.regModel('Task', { fields: [ {name: 'name', type: 'string'}, {name: 'description', type: 'string'} ] }) var dataStore = new{ model: 'Task', data: tasks }) var listControl = new Ext.List({ store: dataStore}) For data-driven controls - such as Lists and Trees, Sencha Touch requires that you use their data model abstraction. To convert an array of objects(with the prescribed fields) into an Ext data store, we would have to:- To bind dataStore  to a List control, we would have to:-
    32. 34. ListPanel in Sencha Touch Ext.regModel('Contact',{ fields:['firstn','lastn'] }); var storex=new{ model:'Contact' , data:[ {firstn:&quot;Askhay&quot;,lastn:&quot;Prabhu&quot;}, {firstn:&quot;Ammeet&quot;,lastn:&quot;Iyer&quot;}, {firstn:&quot;Prateek&quot;,lastn:&quot;Koul&quot;} ] )}; listPanel = new Ext.List({ id: 'disclosurelist', store: storex, grouped:'true', }); wrapperpanel=new Ext.Panel({ id:'wrapperpan', items:listPanel, }); Step 1 Step 2 Step 3
    33. 35. Other useful Sencha Components var datePicker = new Ext.DatePicker({ useTitles: true, }); var panel = new Ext.Panel({ fullscreen: true, layout: { type: 'vbox', align: 'center', pack: 'center' }, items: [{ xtype: 'button', ui: 'normal', text: 'Show DatePicker', handler: function() {; } }] }); Date Picker
    34. 36. xtype:'button', text:'Test', handler:function(){ Ext.Msg.alert( ‘ Title ‘ , ’Hello’); } xtype:'button', text:'Test', handler:function(){ Ext.Msg.confirm(' Confirmation','Are You Sure You Want To Quit?',Ext.emptyFn); } xtype:'button', text:'Test', handler:function(){ Ext.Msg.prompt('Welcome','Enter First Name', Ext.emptyFn); } Sencha Touch Pop-Ups xtype:'button', text:'Test', handler:function(){ Ext.Msg.alert( ‘ Title ‘ , ’Hello’); } Alert Box Prompt Box Confirm Box
    35. 37. Maps in Sencha Touch <ul><li>Sencha Touch also provides the Map class. </li></ul><ul><li>This class requires the Google Map API, below is the example to illustrate the same </li></ul>new Ext.Panel({ fullscreen:true, items:[ { xtype: ’map’ , title: ’ Maps ’ } ] });
    36. 38. Sencha Touch UX Extensions <ul><li>In addition to the existing Sencha Components, there are many extensions available to the existing library. </li></ul><ul><li>Some are displayed at the following URL:- </li></ul><ul><li> / </li></ul><ul><li>All these extended libraries can be downloaded from GitHub. </li></ul>
    37. 39. Touch Grid Panel Ext.regModel(&quot;TouchGridPanel&quot;, { fields: [ &quot;AppName&quot;, &quot;Description&quot;, &quot;Type&quot;, &quot;Download&quot;, ] }); store = new{ model: &quot;TouchGridPanel&quot;, data: [ { AppName: &quot;“, Description: &quot;&quot;, Type: &quot;&quot;, Download:&quot;&quot;, updated: &quot;&quot; }, { AppName: &quot;“, Description: &quot;&quot;, Type: &quot;&quot;, Download:&quot;&quot;, updated: &quot;&quot; }, { AppName: &quot;“, Description: &quot;&quot;, Type: &quot;&quot;, Download:&quot;&quot;, updated: &quot;&quot; }, { AppName: &quot;“, Description: &quot;&quot;, Type: &quot;&quot;, Download:&quot;&quot;, updated: &quot;&quot; }, ] }); <ul><li>Before using the touch grid panel the Touch Grid UX files should be added in the html file </li></ul><ul><li>The code is an example of how to use an UX Sencha Component </li></ul>
    38. 40. Touch Grid Panel(Continued) var colModel = [{ header: &quot;<span style='font-size:13px'>AppName</span>&quot;, mapping: &quot;AppName&quot;, style: &quot;text-align: center;&quot; }, { header: &quot;<span style='font-size:13px'>Description</span>&quot;, mapping: &quot;Description&quot;, style: &quot;text-align: center;&quot; }, { header: &quot;<span style='font-size:13px'>Type</span>&quot;, mapping: &quot;Type&quot;, style: &quot;text-align: center;&quot; }, { header: &quot;<span style='font-size:13px'>Download</span>&quot;, mapping: &quot;Download&quot;, cls: &quot;centered-cell&quot;, } ]; new Ext.ux.TouchGridPanel({ store: store, colModel: colModel, });
    39. 41. Animations <ul><li>Sencha Touch provides many animation schemes like:- </li></ul><ul><ul><li>Slide </li></ul></ul><ul><ul><li>Pop </li></ul></ul><ul><ul><li>Fade </li></ul></ul><ul><ul><li>Cube </li></ul></ul><ul><ul><li>Flip </li></ul></ul><ul><li>This animations are generally used when switching between TabPanels or disclosure of List items. </li></ul><ul><li>These animations can also be added when opening up a new page or panel. </li></ul>
    40. 42. The Framework recognizes various tap events, hence allowing for mapping functions to each event. Sencha Touch Events
    41. 43. Event Listeners var EventPanel=new Ext.Panel({ }); EventPanel.addListener({ body:{ swipe: function(){Ext.Msg.alert( &quot;Title&quot; , &quot;swiped&quot;);}, tap: function(){Ext.Msg.alert( &quot;Title&quot; , &quot;Tapped&quot;);} } }); var viewport=new Ext.Panel({ fullscreen:true, layout:&quot;fit&quot;, items:[EventPanel] }); In the example, touch events are added to the body or element section if the panel. The EventPanel is then added to another container panel, which would then render it.
    42. 44. Difference between Panel and Panel Body or Element
    43. 45. Building Applications on mobile with Sencha <ul><li>Think light-weight </li></ul><ul><li>Remember - it’s a browser! </li></ul><ul><li>Throw away what you don’t need </li></ul><ul><li>Reduce the data </li></ul>
    44. 46. Limitations of Sencha Touch <ul><li>Sencha touch API doesn't have the following capabilty: Access to camera </li></ul><ul><li>Access to contacts </li></ul><ul><li>Access to accelerometer </li></ul><ul><li>Not good for hardcore graphics and animations . </li></ul><ul><li>If we need to develop a graphics heavy game one should stick with native applications. </li></ul><ul><li>As we can see, you might have to drop out of the API to find solutions to one of these problems. Another approach is to build a hybrid app with phonegap. </li></ul>
    45. 47. Sencha Touch optimization <ul><li>Remove unwanted components from the DOM and unwanted classes from CSS. </li></ul><ul><li>Apply animations only to light DOM elements like List and TabPanel Components. </li></ul><ul><li>Also, as shown in the figure deep nesting of xtypes should be avoided as far as possible </li></ul><ul><li>Using background image as gradient should be acvoided, </li></ul><ul><li>CSS3 properties should be used instead to apply gradient effect. </li></ul>panel.on('cardswitch', function(newCard, oldCard) { if (oldCawrd) { this.remove(oldCard, true); } }, panel);
    46. 48. Sencha Touch Community Demos <ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul>
    47. 49. Learning Resources For Sencha <ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li>Sencha Touch Docs:- </li></ul><ul><li> </li></ul><ul><li>Video Tutorials:- </li></ul><ul><li> </li></ul>
    48. 50. Thank You