Sencha Touch Hello World(转）

来源：互联网发布：怎么在淘宝上开店铺步骤编辑：程序博客网时间：2024/06/16 18:47

转载链接：http://www.sencha.com/learn/hello-world/

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...

0 0