Sencha Inc. | HTML5 Apps

Hello World

Published Nov 24, 2010 | Peter deHaan | Tutorial | Easy
Last Updated Mar 21, 2012

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

Welcome to the world of Sencha Touch!

In this article, we will run through the absolute basics of building your first application, in the time-honored tradition of displaying the words 'Hello World'.

Downloading Sencha Touch

If you haven't already done so, download the Sencha Touch SDK. The distribution includes extensive documentation, example applications, build resources, and, most importantly, the JavaScript libraries and CSS stylesheets required to run Sencha Touch applications.

The SDK may seem like a large download, but the requirements for a production Sencha Touch application are only two files within it: the framework's JavaScript library and the CSS stylesheet. By default, these are named sencha-touch-all.js and sencha-touch.css respectively, and you should easily be able to find them in the SDK.

Application structure

For the sake of this article, create a new folder called hello-world, and place an empty file called index.html within it. Copy (or symlink) your Sencha Touch SDK as a subdirectory called lib/touch, next to it, so that the file structure looks like this:

When you come to deploy applications for real, you'll probably want to cherry-pick just the resource files you need, rather than deploying the whole SDK. But this is the easiest thing to do for now. The index.html file (that we'll be editing) - and the JS and CSS files - are highlighted in the image above.

The HTML file

Sencha Touch applications are bootstrapped with an HTML5 document, which contains references to JavaScript and CSS resources. These will include the two core files above, but also the application code that you'll develop yourself. Open up index.html in your favorite editor and add the following:

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

Let's go through each of these lines in turn:

<!DOCTYPE html> 
<html> 
    ...
</html>

This is the document type for HTML5. It's simple and unambiguous, and helps the browser know what type of markup the document contains. The <html> and </html> tags start and conclude the document.

<head> 
    <meta charset="utf-8"> 
    <title>Hello World</title> 
    ...
</head> 
<body></body>

Every HTML5 document must contain a <head> and a <body>.

In our case, the document has an empty <body> (i.e. the opening and closing tags have no content between them). This is because our JavaScript application will create all the content and user-interface elements entirely programatically.

The <head> of the document, though, needs to contain metadata about the document, including information about its content type and character set, and a title that the browser can display at the top of its window.

The <head> also contains the links to the script and style resources we'll be requiring:

<script src="lib/touch/sencha-touch-all.js" type="text/javascript"></script>

This <script> element itself is empty, but uses the src attribute to provide a relative link to the sencha-touch-all.js library that we've placed under our lib sub-directory. Obviously if you need to place the script in a different location, you should update this path accordingly.

<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />

This <link> tag identifies the location of the stylesheet file for making the application look beautiful. Again, this could be altered if you want to place the stylesheet in a different location. The rel attribute is required, and describes the relationship between this resource and the document - here indicating that it is the document's stylesheet. The type attribute is advisory, but hints to the browser what type the stylesheet is: in this case, CSS.

Congratulations! We now have a highly minimal, and completely empty, Sencha Touch application. Although it will load in a browser, not much will happen: basically a blank screen. However, if you inspect the DOM of resulting document in a browser like Chrome or Safari (or Firefox with the Firebug extension), you might notice something interesting:

The <body> element, which we had left plain and empty, has gained interesting id and class attributes. We don't need to worry about what these mean, but they are evidence that the Sencha Touch library has been invoked, and it has prepared the document for us to start placing a user interface into it.

Let's do that now.

The application code

Normally, you'll be developing your applications' JavaScript in a separate file (or files) and then linking to them in the same way that we have done for the Sencha Touch library, above. But for the very simplest of applications (like this one), it is also possible to embed our application's JavaScript into the HTML itself, inside a <script> tag within the document's <head>:

<script type="text/javascript"> 
 
    Ext.application({
        launch: function () {
            Ext.create('Ext.Panel', {
                fullscreen: true,
                html: 'Hello World!'
            });
        }
    });
 
</script>

Of course, this <script> element does not have a src attribute, as there's nothing external to fetch. The script itself goes between the tags. Let's look at each of its lines:

Ext.application({
    ...
});

This is creating our application - an instance of the Ext.app.Application class. The argument we pass to this constructor is an object containing various settings, such as the icons that will be used for it if users bookmark the application, and so on.

One of the most important settings we can pass in is what the application should do when the document completes loading. This is the 'launch' property, which should be set to be a function:

launch: function () {
    ...
}

Within this function, we place all of the code required to define and launch the application's user interface.

Ext.create('Ext.Panel', {
    ...
});

The only thing we do in this application is instantiate a 'panel': this is a component of the user interface upon which we can place various things (including other panels). Our panel is extremely simple, and so the configuration options we pass in are minimal:

fullscreen: true,
html: 'Hello World!'

These should be fairly self-explanatory. The first indicates that the panel should stretch to cover the whole screen of the device and be shown automatically at startup. The second indicates what HTML should be placed on it.

And, well... that's it. Add this small script to your document, and save it. The whole index.html should look like:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>Hello World</title> 
 
        <script src="lib/touch/sencha-touch-all.js" type="text/javascript"></script> 
        <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" /> 
 
        <script type="text/javascript"> 
 
            Ext.application({
                launch: function () {
                    Ext.create('Ext.Panel', {
                        fullscreen: true,
                        html: 'Hello World!'
                    });
                }
            });
 
        </script> 
 
    </head> 
    <body></body> 
</html>

Seeing the results

Open the HTML file in a compatible desktop browser like Chrome or Safari. If all goes well, you should see something like:

Even better, place the files on a web server (preferably on your development machine or nearby). Once you've done that, you should then be able to run the application up on a mobile device emulator:

(The emulators above are part of the Xcode iOS and Android SDKs respectively. Both are very worthwhile downloads. But these emulators won't be able to open files directly from the host machine's file system, hence the need to host them on a web server.)

The iOS SDK also includes an iPad emulator, upon which the application also runs perfectly well, of course:

To see how your first application looks on a real mobile or tablet device, you'll need to configure the device's network in such a way as to be able to access the web server hosting it: the simplest way is to use WiFi to connect directly to the local network and see the same server that you used for the emulators.

If you want to see how the site works over a cellular network, you will either have to host your application on an external server (publicly visible to the device), or set up some sort of a tunnel or VPN to be able to access servers behind your firewall. (Frankly, WiFi is easier.)


So there we have it. A very gentle introduction to Sencha Touch, with a classic Hello World walkthrough. But this, of course, has just been the start...

Share this post:
Leave a reply

Written by Peter deHaan
Peter works as a Developer Relations Manager at Sencha. Prior to joining Sencha, he worked at Motorola Mobility as a Quality Engineer and Adobe Systems Inc as a Quality Engineer on the Flex SDK team and writing documentation for the Flash Player and Flash Authoring teams. You can read Peter's blogs at SenchaExamples.com, dhtmlExamples.com and FlexExamples.com.

36 Comments

Ajain

3 years ago

Is there any tutorial to work on with eclipse ide and sencha touch???

KPM

3 years ago

“But these emulators won’t be able to open files directly from the host machine’s file system, hence the need to host them on a web server”

Wrong. At least in the case of iOS (I don’t know about Android). Just drag and drop your html file onto the simulator.

Ajain

3 years ago

I understand we require web server for hosting…can anyone guide me through the step by step process…

Mfundo Sithole

3 years ago

I did every single step accordingly but No hello world showing.. please help!

Thanks

israelwong

3 years ago

In firefox 5.0.1 give a error:

uncaught exception: [Exception… “Not enough arguments” nsresult: “0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)” location: “JS frame :: http://localhost:8888/hello-world/lib/touch/sencha-touch.js :: <TOP_LEVEL> :: line 6” data: no]

In Safari and Chrome it works without problem….

Pete

3 years ago

The directory structure shown in the example does not even come close to matching whats provided in the sencha-touch-1.1.0 files.  To even try this example you gotta move tons of stuff around and rename stuff and then hope and pray you got it all right!

James Pearce Sencha Employee

3 years ago

@Pete The directory structure we show in the graphic is for your application. You will need to create this.

But under the ‘lib’ directory, you need to place the Sencha Touch download that you unzipped. By convention we rename that ‘touch’. If you look in the graphic, you will see that the folder structure of that ‘lib/touch’ directory is the same as the one in the SDK download (with folders like ‘docs’, ‘examples’, ‘jsbuilder’ etc. In fact the only thing you need to have in there is the JS and CSS, but you may as well copy the lot for the purposes of simplicity.

So there isn’t exactly ‘tons’ of moving grin  - just one directory, which you should then just rename.

James Pearce Sencha Employee

3 years ago

@israelwong On the desktop you really need to use a WebKit-based browser: Google Chrome or Apple Safari. Firefox is certainly getting better for HTML5 support, but Sencha Touch currently targets WebKit rendering engines only.

James Pearce Sencha Employee

3 years ago

@Mfundo Can you send me some more details about your server and setup?

James Pearce Sencha Employee

3 years ago

@Ajain What sort of machine do you have? On both Windows & Apple OSX, there are web servers built in, or you can download WAMP or MAMP stacks respectively.

James Pearce Sencha Employee

3 years ago

@KPM You’re right! How did I not know that grin Indeed file:// URLs work in the iOS simulators. In Android, no-go, I’m afraid… you have to point to http://10.0.2.2 to get to the host machine’s web server.

Ajain

3 years ago

@James Pearce : I am unable to configure Sencha Touch along with phone gap in eclipse ide….can u guide regarding it ...whereas when u take android we hav ADT Plugin especially for eclipse ide…

Pete

3 years ago

@James, I just think that if we’re gonna follow convention here, newbies should not be required to rename *anything*  It’s hard enough trying to wrap your head around something new without jumping through a bunch of hoops.  Bottom line for me is that I spent two full days (my entire weekend) with this product and I got nowhere.  I’m gonna ditch this.

Mfundo Sithole

3 years ago

I have it all sorted out—hello world is working.

Just have a problem with using kitchensink tabs—the other tabs dont click through, yet they visible

Thanks Guys

Frederick Weiss

3 years ago

Great example, super easy to follow.

Prem

3 years ago

I did the “Hello world!” app. I created the same library structure as well. I am getting the “Hello world!” on the screen but when I open the DOM in chrome/ safari there is no change in y body tag. Does it mean the Sencha Touch library has not been invoked. Kindly Plz help on this,

aaca

3 years ago

I have xampp installed on my Windows machine (XP Pro). File structure is as follows C:\xampp\htdocs\hello-world\lib\touch. Touch is where I put the downloaded SDK. Index.html is in hello-world directory. Tried with Chrome and Safari—don’t see anything. Source view does not show anything between body tags. Help—what am I doing wrong!!

squid

3 years ago

If you want this to catch on , you should update it with the extras things you need to do to make it work with eclipse/android

sanjay

3 years ago

Does Sencha Touch work with the EXT deisgner that I downloaded. I really like this tool, but am not able to see the Sencha Tocuh library components…

P. Cheese

3 years ago

For everyone who says it is not working, I have the solution!

I’m assuming you’re trying to few the results in firefox, I was doing the same :(

Unfortunately, Sencha is targetted at webkit browsers, such as Google Chrome and Safari. You will have to use one of these browsers to get any results.

Hope that helped smile

PeteMz

3 years ago

Regarding the feedback to @israelwong - is there a recommended practice for how identify and provide some alternative to unsupported browsers?

Jack Bellis

3 years ago

P. Cheese, you got my story right. This probably only happens a few thousand times a day. smile
James, Nice work.
PS, you might want to change the sentence, “Open the HTML file in a compatible desktop browser like Chrome or Safari.” to
“Open the HTML file in a - strong - webkit desktop browser, which means for instance, Chrome or Safari. Firefox 5.0.1 and earlier will not work.- strong -
Users probably don’t ‘read’ a sentence like this but scan the page and only bold will help.

phani

3 years ago

hi

phani

3 years ago

hi everyone , iam unable to get the o/p.i have followed the process ,i installed the xampp on windows after that i started the respective server given by u. and can u say me detailed process after tht plz


Cheers
phanikumar

fanani

3 years ago

nice .. I like it :D

Anuja Chandan

3 years ago

Could you have a hello world version with phonegap+android+eclipse

Steven

3 years ago

Simply Great!

Jayman Pandya

3 years ago

Good Article to start with… I suggest people to start using some HTML tags also in their trial. Thanks James… :D

BARRMAN

3 years ago

Good job on the Hello World tutorial.
I downloaded a freeware windows webserver then followed your steps and had no problem with Hello World in the browser or my iPhone over WiFi. I have never worked with a webserver or coded in HTML but I did at least know that the default page for a webserver is index.html. That knowledge and your steps made it pretty intuitive to get working.
The next thing I’m going to try is reading the code from your other example pages and then incorporating some of those features into the Hello World app but one thing I’m not clear on is, how do I detect that the connection is from a PC browser versus a mobile touch device so I can display the pages in a different way on standard browsers?

Vincent D.

3 years ago

Well, from Firefox 6 on, the example works!

Ronan

3 years ago

@israelWong

Did you paste the javascipt into the html <head> part ? if you did in the <body> part you get an error in FF (working in chrome)

Ronan

3 years ago

@israelwong Did you paste de javascript code in the <head>  section ? If you did in the <body> section you get the error you mentioned in FF (working in chrome).

carla

3 years ago

thanks very well explained, very usefull

J Pancras Gomez

3 years ago

Works perfect

shihab

3 years ago

gud example

SSK

3 years ago

This is awesome. WebKit CSS3 and HTML5 is not oly the future of web development, but is alo the now. Thank you for sharing.

Leave a comment:

Commenting is not available in this channel entry.