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...
36 Comments
Ajain
2 years agoIs there any tutorial to work on with eclipse ide and sencha touch???
KPM
2 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
2 years agoI understand we require web server for hosting…can anyone guide me through the step by step process…
Mfundo Sithole
2 years agoI did every single step accordingly but No hello world showing.. please help!
Thanks
israelwong
2 years agoIn 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
2 years agoThe 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
2 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
- just one directory, which you should then just rename.
James Pearce Sencha Employee
2 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
2 years ago@Mfundo Can you send me some more details about your server and setup?
James Pearce Sencha Employee
2 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
2 years ago@KPM You’re right! How did I not know that
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
2 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
2 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
2 years agoI 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
2 years agoGreat example, super easy to follow.
Prem
2 years agoI 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
2 years agoI 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
2 years agoIf 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
2 years agoDoes 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
2 years agoFor 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
PeteMz
2 years agoRegarding the feedback to @israelwong - is there a recommended practice for how identify and provide some alternative to unsupported browsers?
Jack Bellis
2 years agoP. Cheese, you got my story right. This probably only happens a few thousand times a day.
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
2 years agohi
phani
2 years agohi 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
2 years agonice .. I like it :D
Anuja Chandan
2 years agoCould you have a hello world version with phonegap+android+eclipse
Steven
2 years agoSimply Great!
Jayman Pandya
2 years agoGood Article to start with… I suggest people to start using some HTML tags also in their trial. Thanks James… :D
BARRMAN
2 years agoGood 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.
2 years agoWell, from Firefox 6 on, the example works!
Ronan
2 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
2 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
2 years agothanks very well explained, very usefull
J Pancras Gomez
2 years agoWorks perfect
shihab
2 years agogud example
SSK
2 years agoThis 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.