Downloaded 106 times
![Docked Items this.viewport = new Ext.Panel({ fullscreen: true, dockedItems: [{ xtype: "toolbar", dock: "top", title: 'BmoreJS' }] });](https://image.slidesharecdn.com/6812247/85/Sencha-Touch-Intro-22-320.jpg)
![Buttons dockedItems: [{ xtype: "toolbar", ... items: [{ ui: 'back', text: 'back', handler: function(){} }] }]](https://image.slidesharecdn.com/6812247/85/Sencha-Touch-Intro-24-320.jpg)
![Button UI dockedItems: [{ xtype: "toolbar", ... items: [{ ui: 'back', text: 'back', handler: function(){} }] }]](https://image.slidesharecdn.com/6812247/85/Sencha-Touch-Intro-26-320.jpg)
![Model Ext.regModel('Statuses', { fields: ['id_str','text'] });](https://image.slidesharecdn.com/6812247/85/Sencha-Touch-Intro-30-320.jpg)
![Model Ext.regModel('Statuses', { fields: ['id_str','text'] });](https://image.slidesharecdn.com/6812247/85/Sencha-Touch-Intro-31-320.jpg)
![Model Ext.regModel('Statuses', { fields: ['id_str','text'] });](https://image.slidesharecdn.com/6812247/85/Sencha-Touch-Intro-32-320.jpg)
![The List this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });](https://image.slidesharecdn.com/6812247/85/Sencha-Touch-Intro-37-320.jpg)
![The List this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });](https://image.slidesharecdn.com/6812247/85/Sencha-Touch-Intro-38-320.jpg)
![The List this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });](https://image.slidesharecdn.com/6812247/85/Sencha-Touch-Intro-39-320.jpg)
![The List this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });](https://image.slidesharecdn.com/6812247/85/Sencha-Touch-Intro-40-320.jpg)
![The List this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });](https://image.slidesharecdn.com/6812247/85/Sencha-Touch-Intro-42-320.jpg)
Uploaded byShea Frederick
Sencha Touch Intro
The document provides instructions for setting up a basic Sencha Touch application, including downloading the SDK, creating the base HTML structure, including CSS and JavaScript files, setting up the application and viewport, creating a data model and store to retrieve tweets from an API, and displaying the tweets in a list view.
![Sencha ExtJs Learning Part 2 - MVC And MVVM Architecture in ExtJs [ENGLISH]](https://cdn.slidesharecdn.com/ss_thumbnails/senchaextjslearningpart2-mvcandmvvmarchitectureinextjsenglish-150615094157-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
Sencha Touch Intro
- 1. Sencha Touch IntroWeb Based Native(ish) Apps
- 2.
- 3.
- 4.
- 5.
- 6.
- 7. Download The SDKExtract contents Grab the CSS files from resources/css folder Grab the JS files from the root folder
- 8. Create Base HTML<html> <head> <title>BmoreJS Mobile</title> </head> <body> </body> </html>
- 9. Include CSS &JS <link type="text/css" rel="stylesheet" href="sencha-touch-debug.css"> <script type="application/javascript" src="sencha-touch-debug.js"></script>
- 10. Setup The Aplication <script type="application/javascript"> Ext.regApplication({ name: 'BmoreJS', phoneStartupScreen: 'phone-startup.png', phoneIcon: 'apple-touch-icon.png', launch: function(){} }); </script>
- 11. Setup The Aplication <script type="application/javascript"> Ext.regApplication({ name: 'BmoreJS', phoneStartupScreen: 'phone-startup.png', phoneIcon: 'apple-touch-icon.png', launch: function(){} }); </script>
- 12. Setup The Aplication <script type="application/javascript"> Ext.regApplication({ name: 'BmoreJS', phoneStartupScreen: 'phone-startup.png', phoneIcon: 'apple-touch-icon.png', launch: function(){} }); </script>
- 13.
- 14.
- 15. Setup The Aplication <script type="application/javascript"> Ext.regApplication({ name: 'BmoreJS', phoneStartupScreen: 'phone-startup.png', phoneIcon: 'apple-touch-icon.png', launch: function(){} }); </script>
- 16.
- 17. Create The Viewport <script type="application/javascript"> ... launch: function(){ this.viewport = new Ext.Panel({ fullscreen: true }); } ... </script>
- 18. Create The Viewport <script type="application/javascript"> ... launch: function(){ this.viewport = new Ext.Panel({ fullscreen: true }); } ... </script>
- 19. Create The Viewport <script type="application/javascript"> ... launch: function(){ this.viewport = new Ext.Panel({ fullscreen: true }); } ... </script>
- 20. Create The Viewport <script type="application/javascript"> ... launch: function(){ this.viewport = new Ext.Panel({ fullscreen: true }); } ... </script>
- 21.
- 22. Docked Items this.viewport = new Ext.Panel({ fullscreen: true, dockedItems: [{ xtype: "toolbar", dock: "top", title: 'BmoreJS' }] });
- 23.
- 24. Buttons dockedItems: [{ xtype: "toolbar", ... items: [{ ui: 'back', text: 'back', handler: function(){} }] }]
- 25.
- 26. Button UI dockedItems: [{ xtype: "toolbar", ... items: [{ ui: 'back', text: 'back', handler: function(){} }] }]
- 27. Standard Button UI'sColor Variations confirm decline
- 28.
- 29. Data Store ModelReader Proxy Source
- 30. Model Ext.regModel('Statuses', { fields: ['id_str','text'] });
- 31. Model Ext.regModel('Statuses', { fields: ['id_str','text'] });
- 32. Model Ext.regModel('Statuses', { fields: ['id_str','text'] });
- 33. Store BmoreJS.stores.Statuses = new Ext.data.Store({ model: 'Statuses', proxy: { type: 'scripttag', url: 'http://api.twitter.com/1/statuses/user_timeline.json', extraParams: { screen_name: 'bmorejs' } }, autoLoad: true });
- 34. Store BmoreJS.stores.Statuses = new Ext.data.Store({ model: 'Statuses', proxy: { type: 'scripttag', url: 'http://api.twitter.com/1/statuses/user_timeline.json', extraParams: { screen_name: 'bmorejs' } }, autoLoad: true });
- 35. Store BmoreJS.stores.Statuses = new Ext.data.Store({ model: 'Statuses', proxy: { type: 'scripttag', url: 'http://api.twitter.com/1/statuses/user_timeline.json', extraParams: { screen_name: 'bmorejs' } }, autoLoad: true });
- 36.
- 37. The List this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });
- 38. The List this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });
- 39. The List this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });
- 40. The List this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });
- 41. Templates itemTpl: '<ahref="{url}"><img src="{img}">{text}</a>',
- 42. The List this.viewport = new Ext.Panel({ layout: 'fit', ... items: [{ xtype: 'list', itemTpl: '{text}', store: BmoreJS.stores.Statuses }] ... });
- 43.
Editor's Notes
- #2 Im going to give an introduction to sencha touch, which is a web based javascript library that can be used to create native looking apps. I say native looking, or native(ish) because the apps really end up looking and interacting like a native app. The UI elements such as buttons, lists, toolbars, all look very similar to their native counterparts on the iphone. The interactions work the same as well, such as momentum scrolling, swiping and pinching.
- #3 So where did this library come from. The library came into existence from the company Ext hiring David Kaneda, who developed jqTouch on his own. The company formerly called Ext took their Ext JS library and combined the concepts used in it with the cutting edge mobile web development that David had done.
- #4 The library they created reproduces the look and feel of native iOS apps, and has the JavaScript syntax and structure found in the Ext JS library with an MVC concept thrown in. Currently only Android and iOS devices are supported. BlackBerry 6's WebKit based browser should be supported in the next release of Sencha Touch and windows mobile should be down the road sometime. So this actually leaves us with a really easy way to develop our apps.
- #5 It means that when we develop an app, we can test it in Chrome and Safari and we can be fairly sure it will work just fine when used in Android and iOS devices. The library has been developed with these WebKit based browsers in mind. I would also suggest testing your app in not just chrome or safarim, but both Chrome and Safari, because while they share the same rendering engines, they do not share the same javascript engines, and there are subtle differences between them. Both IE and Firefox will fail horribly at this point. Don't bother. Support for IE or Windows Mobile should be available in the near future, though firefox support is not likely to ever happen, since there is no mobile device that has been made in the last two years that runs firefox. I just threw Opera in here because I felt bad for it. Lets move on to actually creating a simple app.
- #6 I like to split up this process into four main steps. We first setup the app, these are things that are related to the initial configuration of our app. The viewport is the main UI component of our app, which may contain a toolbar, or tabs, or whatever is the main navigation method of our app. Data is somethinge we of course need, apps aren't much fun without data. Even angry birds needs data. Finally the view, which is how we display our data, or otherwise interact with specific parts of the app. We can of course have many views, but for this demo we will just have one. Once we get all of these things in place, we should have a working app.
- #7 Lets start on the setup
- #8 First thing we need is the SDK download, so grab that from the Sencha web site. Note that it is a free library, and you do not need to put your email address in to download it. To develop the basic app, all we need is the default CSS and JS they provide in the SDK download. Throw these into your project folder.
- #9 Next we need a simple HTML page. Just the basics will do, as the Sencha Touch library will create all of the HTML elements it needs on its own.
- #10 Now we need to include the library stylesheet and javascript. These should both be in the head section of the HTML document. The debug versions of both the CSS and JavaScript are used for developing, which contain uncompressed content along with some console messages about improper usage and API changes. Directly after these includes were going to add a script block with the code to setup our Sencha Touch app. This could also be in the form of another javascript include but for the sake of this demo, ill just use a script block.
- #11 Were done with HTML now. That is all the html we will ever need to write for a Sencha Touch app, from now on, it's pure JavaScript. Here is a typical application setup. The application setup does a couple of things for us.
- #12 First off, it sets up a name for our application. This will setup namespaces for views stores, models and controllers based on our app name. We will use these namespaces later on when we setup our store and model. Since this app is so simple, im not going to take advantage of the view or controller namespaces it creates.
- #13 *used when in standalone mode, which is when you add a web app to your home screen. webclip. Next, it sets up the startup screen which is shown while the page is loading in standalone mode. The icon is also used for standalone mode. There are also options for tabletStartupScreen and tabletIcon <link rel=&quot;apple-touch-startup-image&quot; href=&quot;/startup.png&quot;>
- #14 The startup image for the phone should be 320 x 460 and must be in PNG format. The icon image for phones should be 57x57, however I like to use 114x114 because that is what the retina display uses, and standard displays will scale this down anyway. More details about all of the sizing requirements can be found in apples documentation, which is quite good, though hard to navigate. apple-touch-icon apple-touch-icon-precomposed (glossOnIcon === false)
- #15 The icon image for phones should be 57x57, however I like to use 114x114 because that is what the retina display uses, and standard displays will scale this down anyway. More details about all of the sizing requirements can be found in apples documentation, which is quite good, though hard to navigate. apple-touch-icon apple-touch-icon-precomposed (glossOnIcon === false)
- #16 The final part of this setup is the launch function to execute when the browser is ready. This is where we will create our UI. It could be compared to the onload event in html, or if your use to Ext JS, the onReady function. Lets dive into the UI setup now by stubbing out this launch function and creating the viewport.
- #17 step 2 - creating the viewport.
- #18 *Ext namespace - panel So I create a Panel, and set it to fullscreen true. Let's take a look at this in a browser now.
- #19 *Ext namespace - panel So I create a Panel, and set it to fullscreen true. Let's take a look at this in a browser now.
- #20 *Ext namespace - panel So I create a Panel, and set it to fullscreen true. Let's take a look at this in a browser now.
- #21 *Ext namespace - panel So I create a Panel, and set it to fullscreen true. Let's take a look at this in a browser now.
- #22 Wow, it's a grey screen. What we are not seeing here is that this panel we created has fit itself into the size of the window and can now manage UI elements to fit within that viewable area, resizing them appropriately if the orientation changes. Then next step is to give it something to manage. Like a toolbar maybe.
- #23 A docked item can be docked to any side of the screen and will stick there when the user is scrolling the page, along with moving position when the orientation changes. We can add the docked item to the main viewport screen as we have done here, and it will persist between section changes, or we can create a unique docked item for each section. The former method that we are using here is the more resource efficent. Let's see what this looks like now.
- #24 There is our docked item, the toolbar with a title. as long as were here, lets go ahead and add a button.
- #25 *items = children We do this by adding an item to the items array of the toolbar. We don't need to specify that its a button were adding, because the toolbar default to using buttons. Lets take a look at what this looks like. Don't ask about UI right now.
- #26 There we go, we have a back button. You might be wondering why it's a back button, instead of a regular looking button. This all comes down to the UI configuration.
- #27 The button UI options are 'normal', 'back', 'round', 'action', 'forward' and 'small', with the default being 'normal'.
- #28 The normal, round and small options also have a confirm and decline version, which are just green and red versions of the same buttons. Let's move on to getting our data loaded into the app. For this we will need three things.
- #30 The model that defines what our data looks like, the store holds data - along with a proxy - that will fetch our data.
- #31 Creating the model is fairly straight forward, we just need to give our model a name and describe the fields that are contained within it.
- #32 We give it a name of Statuses, since im going to pull in my timeline of statuses from Twitter.
- #33 Then we define what our data looks like. Now that we have a model of our data in place, lets create a store.
- #34 Our store is also fairly straight forward, particulairly if your use to using Ext JS. SInce we gave our app the BmoreJS name there is a namespace setup for stores which were going to use.
- #35 We use the model we just created.
- #36 and fetch the data with a script tag (which lets us do cross domain requests) from the Twitter API. Now that this is in place, we need a way to view the data.
- #38 back in our viewport, we add a list that is tied to the store we just created.
- #39 back in our viewport, we add a list that is tied to the store we just created.
- #40 back in our viewport, we add a list that is tied to the store we just created.
- #41 back in our viewport, we add a list that is tied to the store we just created.
- #43 back in our viewport, we add a list that is tied to the store we just created.
- #44 make overview slide showing whole process. place between each section.