Sencha Inc. | HTML5 Apps

Sencha Touch Quick Start

Published Aug 06, 2011 | James Pearce | Tutorial | Easy
Last Updated Dec 05, 2011

This Tutorial is most relevant to Sencha Touch, 1.x.

Want to build something amazing with Sencha Touch? Use these simple recipes for Mac OSX, and Microsoft Windows to ensure you can get started with the framework's SDK as quickly as possible. Ideal for a rolling start at hackathons!

If you're really in a hurry, try the Ultimate Short Cut to Sencha Touch development...

Developing with Sencha Touch on Mac OSX

There are certain advantages to using a Mac for mobile app development. For a start, the operating system comes installed with an Apache web server. The default browser, Safari, echoes the behavior of WebKit-based mobile browsers well. And of course you can run the excellent iOS simulator (as part of the Xcode tool chain) to demo your cool app to everyone else, and then package it for the Apple App Store later.

The following steps are the quickest way to get yourself a Sencha Touch development environment on a Mac:

1. Download the Sencha Touch SDK

You'll find the ZIP file available as a download here. Choose whether you want the commercial or open-source license. But the software is exactly the same in both cases, and both are free-of-charge.

2. Start your web server

Although a lot of the Sencha Touch demos run straight from the file-system, it's worth running them from a web server so you can be sure that emulators, real handsets - and your fellow team-members - can access them easily.

You can install Apache as part of MAMP, or using a package manager like MacPorts. Unless you have either of those in place already (in which case, skip this step), by far the easiest thing to do is run up OSX's own version of Apache.

Go to System Preferences, and in the 'Sharing' panel, enable 'Web Sharing':

Depending on the version of OSX you are running, you'll have a button and link to take you to the folder and site for both the user and/or the computer as a whole. Check it's running OK.

Open the folder for this site in Finder. This is normally called Sites and is in your home folder.

3. Unzip the Sencha Touch SDK

Unzip the previously downloaded file (which will be called something like sencha-touch-1.1.0.zip). Copy the folder into the Sites folder and rename it to touch:

You can now access the local SDK by appending /touch to the URL in your desktop browser:

4. Install Xcode (optional)

It's a very large download, but you can usefully install Xcode from the Apple Developer Center - if only because you can then run its excellent iPhone and iPad simulator to test and demo apps locally. Once downloaded, it is a standard OSX install process.

5. Install the Android SDK (optional)

Download Google's Android SDK if you want to create Android Virtual Device (AVD) simulators on your local machine. If you use Eclipse as your development environment, you can also install the ADT Plugin to integrate the simulators into the IDE. Instructions for these installations are given in the page linked above.

6. Test the examples on a real device (optional)

If you have a real device to hand, use it to join the same WiFi network as your development machine. Ensure your Mac is not running any firewall software that might block access to your web server from a remote client. You should then be able to use the same URL on your device to access the server:

You're ready to start developing.

Developing with Sencha Touch on Windows

It's almost as easy to set yourself up for Sencha Touch development on a PC, but you might need to install a few extra pieces of software, since Windows itself does not ship with a suitable WebKit-based browser, nor always an easy-to-run web server. This walkthrough assumes Windows XP, but the process is similar for later versions too. The main downside of using Windows is that you won't be able to run Apple's Xcode development environment, with its excellent iOS simulator.

Nevertheless, the following steps are the quickest way to get yourself a Sencha Touch development environment on Windows:

1. Download the Sencha Touch SDK

You'll find the ZIP file available as a download here. Choose whether you want the commercial or open-source license. But the software is exactly the same in both cases, and both are free-of-charge.

2. Install Safari or Chrome

Microsoft's Internet Explorer (at any version) is not suitable for testing Sencha Touch applications, which are designed for WebKit-based mobile devices.

The good news is that both Google Chrome and Apple Safari are WebKit-based, and are available for the Windows platform. Download either of them and run through their standard Windows installers.

3. Install a web server

Although a lot of the Sencha Touch demos run straight from the filesystem, it's worth running them from a web server so you can be sure that emulators, real handsets - and your fellow team-members - can access them easily.

You may already be running Microsoft's own Internet Information Server (IIS) on your computer. If not, you can easily install Apache on Windows as part of XAMPP, an open-source bundle of server-side platforms that has a convenient installer.

Once downloaded, run the installer, and use the default values throughout:

You'll have the option to immediately open the XAMPP control panel. Do so (or launch it from the Start menu), and then press 'Start' on the Apache part of the panel:

(You may be prompted by your firewall software. Ensure you 'Unblock' or allow Apache to open its connection.)

In Chrome or Safari, now navigate to http://localhost. You should see the default XAMPP web page:

Check you can find the folder for Apache's web content in Windows Explorer. This is probably located at C:\xampp\htdocs.

4. Unzip the Sencha Touch SDK

Unzip the previously downloaded file (which will be called something like sencha-touch-1.1.0.zip). Copy the folder into the C:\xampp\htdocs folder and rename it to touch:

You can now access the local SDK by visiting http://localhost/touch in Chrome or Safari:

5. Install the Android SDK (optional)

Download Google's Android SDK if you want to create Android Virtual Device (AVD) simulators on your local machine. If you use Eclipse as your development environment, you can also install the ADT Plugin to integrate the simulators into the IDE. Instructions for these installations are given in the page linked above.

6. Test the examples on a real device (optional)

If you have a real device to hand, use it to join the same WiFi network as your development machine. Ensure your Windows PC is not running any firewall software that might block access to your web server from a remote client. Firstly, you will need to get the PC's network IP address. Get this by launching the command prompt and running ipconfig:

Using that IP address in place of localhost, you should then be able to use your device to access the server.

You may see a security error like this:

In this case, follow the instructions, and open the httpd-xampp.conf file, probably in C:\xampp\apache\conf\extra, in a suitable plain text editor. At the bottom of that file, find:

<LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server-status|server-info))">
    Order deny,allow
    Deny from all
    Allow from 127.0.0.0/8
    ErrorDocument 403 /error/HTTP_XAMPP_FORBIDDEN.html.var
</LocationMatch>

If you are not too concerned about security, you can simply open this up to all users by setting Allow from all in the fourth line:

<LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server-status|server-info))">
    Order deny,allow
    Deny from all
    Allow from all
    ErrorDocument 403 /error/HTTP_XAMPP_FORBIDDEN.html.var
</LocationMatch>

Then stop and restart Apache with the XAMPP Control Panel, and you will be able to access the SDK with your device at the /touch URL.

You're ready to start developing.

Start developing

Look for inspiration

There are example apps and code at /touch/examples. Remember you must use a WebKit-based browser (such as Safari or Chrome - not Firefox or Internet Explorer!) to be able to see these applications running correctly.

Feel free to use any of these examples in the SDK as a starting point for your application. There are also a number of well-documented apps that we've created on GitHub, many with accompanying tutorials:

(To run locally, you can simply download the code from each GitHub repo as a ZIP file, and then typically you'll need to copy the touch folder into the lib folder of each app to make sure the SDK is linked to correctly by the app's index.html. Each project contains README instructions.)

Creating a new application

Create a new folder myapp in your web server's folder. In that, create a folder called lib and then copy the SDK folder (called touch) into it.

Create a file called index.html, and place in it the following markup:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
        <script src="app/app.js" type="text/javascript"></script>
        <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
    </head>
    <body></body>
</html>

Then create a folder called app and create a file called app.js. Place in it the following code:

new Ext.Application({
    launch: function() {
        new Ext.Panel({
            fullscreen: true,
            dockedItems: [{xtype:'toolbar', title:'My First App'}],
            layout: 'fit',
            styleHtmlContent: true,
            html: '<h2>Hello World!</h2>I did it!'
        });
    }
});

Your folder structure should look something like this:

And when you open ../myapp in your browser, device, or emulator, you should see this most basic of apps running:

You're ready to get creative!

Where to go for help

There are three places you'll consistently keep referring to when developing with Sencha Touch:

Most of all... have fun!


PS: The Ultimate Short Cut

Sencha hosts copies of the Sencha Touch library and stylesheet. Assuming your development machine is constantly connected to the web, and you agree to the license terms for the SDK as a whole, you can get a really quick start by simply creating the following file, named index.html, anywhere on your Mac or PC:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js" type="text/javascript"></script>
        <link href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
 
new Ext.Application({
    launch: function() {
        new Ext.Panel({
            fullscreen: true,
            dockedItems: [{xtype:'toolbar', title:'My First App'}],
            layout: 'fit',
            styleHtmlContent: true,
            html: '<h2>Hello World!</h2>I did it!'
        });
    }
});
        </script>
    </head>
    <body></body>
</html>

Open it up in a Google Chrome or Apple Safari web browser.

Bang. You're done. It's quick and dirty, but you now have a single-file app you can hack on. Check out the list of examples, tutorials and resources in the article above.

Share this post:
Leave a reply

Written by James Pearce
James Pearce heads developer relations at Sencha. He is a technologist, writer, developer and practitioner, who has been working with the mobile web for over a decade. Previously he was the CTO at dotMobi and has a background in mobile startups, telecoms infrastructure and management consultancy. James is the creator of tinySrc, the WordPress Mobile Pack, WhitherApps, modernizr-server and confess.js, and has written books on mobile web development for both Wiley and Wrox.
Follow James on Twitter

20 Comments

Armando Afa

3 years ago

Hello…
I’d like to develop an splitview app from scrach using SQLite, PhoneGap and Sencha.
Should I use Kitchen Sink sample app and change its code?
I there any other code model to follow?

James Pearce Sencha Employee

3 years ago

@Armando, take a look at this tutorial: http://www.sencha.com/learn/idiomatic-layouts-with-sencha-touch This goes through a reliable way to create multiple-layout, split-screen apps.

Armando Afa

3 years ago

Thanks James, it is a very good start point.. We’ll keep in touch… Regards

Armando Afa

3 years ago

Thanks again James. I´ve could get the idea of using this great framework.
I still have a question.
I aim to use PhoneGap (for example) if I would like to take control of the devices? I mean:
.- Reload pages y devices changes from landscape to portrait and VS
.- Use the camera
.- etc

Thanks in advance

Thi?t k? website

3 years ago

Thank your post!

Adam Gent

3 years ago

Another option instead of installing Apache is to install node.js
Then
cd sencha-touch-1.1.0
wget https://raw.github.com/gist/1104658/6db19d14ba4e731a3caf5f634079c43bc4d663fe/static_server.js
node static_server.js

Then point your browser to http://localhost:8888

@James Pearce Sencha is awesome. (You posted on my blog urging me to try it and you were right)

James Pearce Sencha Employee

3 years ago

@Adam - haha; awesome grin and even coming to a Windows machine near you soon too, I guess.

Glad you’re enjoying it.

dashingfish

3 years ago

Hi,
This is great post for beginners.
but i have one question
how to run this same tutorial on my blackberry device
1)
is that BB device accepts url like
(IPADDRESS/examplaes/index.html)
or
(IPADDRESS/examplaes/index.php)....??
on wi-fi
2)
with sencha touch can i build
application with php + mysql + senchatouch + phonegap(for deploying software)..??

if it is can u give me tutorial link..

    Thanks
    James
    cheers..

Jay Bharat

3 years ago

Hello, first of all I wanted to say many thanks for publishing this SENCHA , then second this tutorial is also very, easy to understand, in last wanted to say your downloaded tutorial also giving us the good and fast way to learning SENCHA and creating SAFARI WEB based HTML5 applications.

Once lot of thanks.

David jimenz

3 years ago

Hi,
I want to create a twitter flicker mash up which is now working but I want to integrate sencha touch to add a working interface to my mashup. I am not sure what licensee should I get. Open Source License.. or commercial Commercial Software License (Now Free!). I would lie to add it to the app store it it turns ok to be downloaded for free… any advise?

Bruno

2 years ago

There’s a problem I’ve encountered while trying out sencha touch on my MacBook pro.
I’ve set web sharing and did everything as in tutorial, but web inspector in Safari reports same error message: TypeError: ‘undefined’ is not a constructor (evaluating ‘new Ext.Application’)

any help, please?

James Pearce Sencha Employee

2 years ago

@Bruno to be clear: this walkthrough is for Sencha Touch v1. It will not work for the developer preview of Sencha Touch 2. If you’re using that, it will indeed need to be updated to use the new class system, but the ST2 docs themselves do include an updated getting started guide.

Jonas Andersson

2 years ago

Hi,

I just stumbled upp on this thingy. I cant se what the difference with just creating an ordinary webpage and this do. Could somebody explain for me? or is this just som pre ready css/design witgets?

Regards
Jonas

Fernando Madruga

2 years ago

@Jonas: try the kitchen sink examples and you’ll see that it’s much easier to use Sencha to make a native-look app for Android/iOS devices than if you do all the work yourself in plain html+css. There’s a lot more to it than just the widgets (you get data handling classes for example). Sencha + PhoneGap (or the new Sencha 2 alone when it’s ready), allows you to make some cool apps that look and feel native on most phone/tablets. Besides, it’s mostly a “write-once-run-everywhere” kind of library so you’re (mostly) free of the peculiarities of BlackBerry or iOS or Android or whatever the library supports.

byron

2 years ago

In this examples sencha touch need a browser to start an app. There is a way to open an aplication made with sencha touch without the browser in a phone or pad. You know I would see more native if a browser is not necesary

Armando

2 years ago

byron, I try to figure out you are wondering if you can use sencha wo a browser… if this is true, well, no, this is no posible. there is some server framework whi let you code js to be executed but it is the same aproach, i mean, there is something around your js code. my advice? keep on doing native code if your app is near to be an enterprise app or consumes a lot of data structure, there is no tablet around ready to be a lap or pc. if your app is medium or small, you can use a webview to render you sencha or whatever js code..

Bruno

2 years ago

Thanks!
I’ve tried with v1.x and it works smile

shiv

2 years ago

Hi,

Is it possible to execute/access a web application developed using sencha touch from a iPAD directly? i mean how can i deploy the application in iPAD? if i deploy the source file in production server and try to access the URL in iPAD will it work?  for that iPAD need to be connected to the LAN in which the production server is associated with. Kindly clarify.

Greg

2 years ago

Am I correct in saying that Sencha Touch are tools for web content made for Mobile platforms? Not actual applications that are stored on the device?

Karol

2 years ago

Can you share me the code for direct from one page to another page in sencha

Leave a comment:

Commenting is not available in this channel entry.