Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196
News

Build mobile apps with Sencha Touch

An introduction to creating web apps for Android and iPhone with Sencha Touch, a new standards-based framework

Mobile frameworks highlight the ability to create native app-like experiences through standards- based web technologies such as HTML5, CSS3 and JavaScript. This tutorial concentrates on Sencha Touch, which is an open-source framework for creating mobile apps built using ‘Ext.js’ JavaScript.

Sencha Touch uses a HTML document that links to JavaScript and CSS, while the HTML contains an empty body tag with no content. Using JavaScript, the content is built on the page for the user so that the content can be built specifically for the screen size of the device. The good news is that you get some very polished results that scale to fit the browser of any device, which is key when designing for a variety of different devices. The downside of this is that Sencha Touch is a little harder than jQuery Mobile and you will probably spend far more time learning the framework, but the results are excellent for a very native app experience.

tools | tech | trends: Dreamweaver CS5, Sencha Touch, iOS Simulator
expert: Mark Shufflebottom
tutorial files: download here

01. Get the project started
From the cover CD, drag the ‘start’ folder onto your desktop. It’s a good idea to point your browser towards the Sencha Touch www.sencha.com/products/touch site and download the framework. In the start folder create a new HTML page, ‘index.html’, in Dreamweaver and add the code to the head section.

001 <link rel=”stylesheet” href=”resources/css/sencha-touch.css” type=”text/css”>
002 <link rel=”stylesheet” href=”bolt.css” type=”text/css”>
003 <script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=true”></script>
004 <script type=”text/javascript” src=”sencha-touch.js”></script>
005 <script type=”text/javascript” src=”bolt.js”></script>

02. Start the app
The previous code links up to the Sencha touch CSS, our own CSS ‘bolt.css’, the Google Maps api and the Sencha Touch JavaScript. We’re going to create our own App JavaScript, so create a new JavaScript file and name it ‘bolt.js’. Now add the code shown which associates start up screens and icons to the app if saved to the home screen in iOS.

001 Ext.setup({
002     tabletStartupScreen: ‘tablet_startup.png’,
003     phoneStartupScreen: ‘phone_startup.png’,
004     icon: ‘icon.png’,
005     glossOnIcon: false,
006     onReady: function() {
007     }
008 });

03. Basic structure
Inside the onReady function add the code shown. This sets up four pages, which are the four variables, home, work, blog and map. This is how Sencha creates pages. Some of these pages will change in their functionality as we go through the tutorial but this is useful in helping us to get the basics in place.

001 var home = {
002     title:’Home’, scroll: ‘vertical’, html: ‘home’
003 }
004 var work = {
005     title:’Work’, scroll: ‘vertical’, html: ‘work’
006 }
007 var blog = {
008    title:’Blog’, scroll: ‘vertical’, html: ‘blog’
009 }
010 var map = {
011 title:’Map’, scroll:vertical’, html: ‘map’
012 }

04. Create the menu
Add the next code under the last variable from the previous step. This creates a tab menu bar for us, and creates the transition between the ‘cards’ (pages). Notice the items added are the four variables from the previous steps. Save all pages now and test ‘index.html’ in the browser.

001 var myPanel = new Ext.TabPanel({
002     fullscreen:true,
003     cardSwitchAnimation: {type:
004     ‘slide’, duration: 500},
005     ui: ‘light’,
006     layout: ‘card’,
007     items: [home, work, blog, map],
008 });

05. Create the homepage
You might have noticed the ui being set as ‘light’, just try changing this to ‘dark’ and check your browser again. It’s always worth exploring the built-in user interfaces. Now go back to the home section and replace the html with the code shown. Notice the last line, ‘cls’ – this sets the
pages’ class, and you can check this out in ‘bolt.css’.

001  html: ‘<img src=”img/ logo.png” width=”280” height=”133” alt=”logo” class=”mainImg” />
002 <span class=”rounded”><h2 class=”welcome”>Welcome to Bolt</h2>
003 <p>We produce beautiful design and illustrations. Explore our work to find out how we can enhance your digital experience.</p>
004 </span>’,
005 cls:’home’

06. Change the work section
We’re going to completely replace the work section now with a Carousel component, so copy in the new code shown. The Carousel is a swipe-enabled system to swipe left or right to flick between pages, just perfect for showing off your work. Save the files and then test it out in your browser.

001  var work = new Ext.Carousel({
002     title: ‘Work’, scroll: ‘vertical’,
cls:’home’,
003     items:[
004 {title: ’Work1’, html:‘Work1’},
005 {title:’Work2’, html: ‘Work2’},
006 {title:’Work3’, html: ‘Work3’}
007     ]
008 });

07. Real content to the work
We’ll add real content to the work sections, so that we can see the content being swiped. Change the html of ‘Work1’, as shown. This will place in an image and some text below that. Notice the class names here – they are again found in the ‘bolt.css’ file, which is worth keeping open to compare the classes with the final result.

001  html: ‘<img src=”img/3d.png” width=”260” height=”210” alt=”logo” class=”mainImg” />
002 <h2 class=”work”>Illustrations</h2>
003 <p class=”alt”>3D Illustration and visualisation. <br><small>Swipe left to explore more.</small></p>’

08. Further develop the carousel
The carousel looks much better, however there is only one section complete and the others still look empty. Replace the ‘Work2’ html with the following code that will add some content to the second panel. The main difference here is the image, and the text reflects that with the description.

001  html: ‘<img src=”img/web.png” width=”260” height=”210” alt=”logo” class=”mainImg” />
002 <h2 class=”work”>Web Design</h2>
003 <p class=”alt”>Bespoke Web CMS and Site Design  <br><small>Swipe to explore more. </small></p>’

09. Last carousel panel
Now we’ll add the final code for the ‘Work3’ panel in the carousel. Replace the html section with the code shown here. Once added, save your work and view the file in your browser. You should be able to swipe left and right now, to see different panels sliding in and out much more clearly with the content.

001 html: ‘<img src=”img/mob.png” width=”260” height=”210” alt=”logo” class=”mainImg” />
002 <h2 class=”work”>Mobile Experiences</h2>
003 <p class=”alt”>Mobile App and site design  <br><small>Swipe right to explore more. </small></p>’

10. Start the blog
We’re going to start the process of importing data from a blog, an
d we’ll do this through RSS and the YQL method. Move to the very top of the JavaScript document and add the following code. This sets up a new object that we’ll call later to draw in the data, this will be an object that can call any RSS source.

001  Ext.YQL = {
002     useAllPublicTables: true,
003     yqlUrl: ‘http://query.yahooapis.com/v1/
public/yql’,
004     request: function(cfg) {
005         var p = cfg.params || {};
006         p.q = cfg.query;
007         p.format = ‘json’;

11. Call with JSONP
The YQL request uses JSONP to get the data from the URL that will be passed in when called. Once the data has been received from this URL, the ‘callback’ function will be called. This function will parse the data and pass it into a template for the blog for each entry.

001  if (this.useAllPublicTables) {
002     p.env = ‘store://datatables.org/alltableswithkeys’;
003 }
004 Ext.util.JSONP.request({
005     url: this.yqlUrl,
006     callbackKey: ‘callback’,

12. Send back to function
Once the content has been pulled out of the YQL statement using JSONP, the content is sent back to the function that has called the query. We will set up the function that passes the URL for the feed in the next step. The closing brackets just finish off this section of the code as a separate function.

001 params: p,
002 callback: cfg.callback,
003 scope: cfg.scope || window
004 });
005 }
006 };
13. Call the RSS feed
Scroll down to the ‘var myPanel’ code. After the closing brackets, ‘});’ start adding the code shown. This is the variable that sets up the function to make the  YQL request, as indicated by the name of the function. Here the query is passed to the Ext.YQL.request we set up in step 10. Feel free to change the URL to your own RSS feed.

001 var makeYqlRequest = function() {
002 Ext.YQL.request({
003 query: “select * from rss where url=’http://www.webspaceinvader.com/feed/’ limit 5”,

14. Answer the call
The callback function is added next, straight after the previous code. The code we added in step 11 and 12, call this code. A variable is set up called results, which is an array. We use the if statement to check the query has been handled and if there are some results, we store them in the results array.

001 callback: function(response) {
002 var results = [];
003 if (response.query && response.query.results) {
004 results = response.query.results;
005 }

15. Pass it on
Add in the code, following the last steps code. Once we have the results stored in the results array, we call the blog variable and update it by passing over the results array. The closing brackets close off the function and then the function is called by using makeYqlRequest().

001 blog.update(results);
002 }
003 });
004 };
005 makeYqlRequest();
16. Update the blog
Find the ‘var blog’ code we added in step 3 and completely replace it with the code shown below. Notice the blog is now a component? This will enable us to create a template for each of the blog posts from the RSS. The ‘<tpl’ denotes a template and it creates a new heading for each of the posts.

001  var blog = new Ext.Component({
002     title:’Blog’,scroll:‘vertical’, cls:’home’, tpl:[
003     ‘<tpl if=”item”>’,
004     ‘<tpl for=”item”>’,
005      ‘<h2 class=”blog”><a href=”{link}” target=”_blank”>{title}</a>
17. Close the blog section
Add the following code directly under the last. This adds the author of the post in smaller text next to the post title. Under this, the description is dropped in. Again, this is repeated for each of the posts. The closing template tags complete this section. Save this file and preview in the browser after you refresh the view.

001 <small> by {creator}</small></h2>’,
002 ‘<p class=”alt”>{description}</p>’,
003 ‘</tpl>’,
004 ‘</tpl>’
005 ]
006 });

18. Add a geo position
If you’ve got a good memory, you’ll remember adding a JavaScript link file for Google Maps in step 1. Directly underneath the last code and before the map variable, add the following map variable, which adds a geo position to a new variable that we will add to the map when we display it on the map screen.

001 var position = new google.maps.LatLng (50.743213, -1.896901);

19. Replace the original map
Remove the entire map variable, as we are going to change it now to reflect a real map – what we had before was just a placeholder. As you can see from the code shown here, we set up a new map object and give it a title. An important property here is to not use the current location, however you might need this for your own apps.

001  var map = new Ext.Map({
002 title: ‘Map’,
003 useCurrentLocation: false,

20. Always have options
Continue adding the code to finish off the map section. This code centers the map on the position variable and sets the zoom factor of the map. Save your file now and refresh your view in the browser. You will now be able to click the map button, and it will display a map of our example location Bournemouth, UK.

001 mapOptions: {
002     center : position,
003     zoom: 12
004 }
005 });

21. Add a map marker
Under the ‘myPanel’ section, add the code shown. This sets up a new variable to hold the information for a marker. The position of this marker is set to the position variable defined in step 18. We also have to tell the marker what to be added to – in this case, it’s the map found in the map variable. Yes, it’s confusing!

001 var marker = new google.maps.Marker({
002     position: position,
003     map: map.map
004 });

22. Add an info bubble
Add the final section of the code that adds a unique bubble when the map marker is pressed. The event listener adds the bubble to the marker. Finally, save the file and test it out in your browser. This should conclude your first introduction to Sencha Touch – you can view the Kitchen Sink demo to go even further and expand the complexity of the project.

001     var infowindow = new google.maps.InfoWindow({
002 content: ‘<img src=”img/bolt.png” width=”50”
003 height=”44” alt=”logo” align=”left” />Bolt
004 Design<br>Tel: 01202 123456’
005 })
006 google.maps.event.addListener(marker,
‘click’, function() {
007         infowindow.open(map, marker);
008 });
×