Building a Hello World application

Exclusive offer: get 50% off this eBook here
Instant Sencha Touch [Instant]

Instant Sencha Touch [Instant] — Save 50%

Build native applications with Sencha Touch easily and efficiently with this book and ebook

$12.99    $6.50
by Hiren J. Dave | October 2013 | Open Source

This article by Hiren J. Dave, author of the book Instant Sencha Touch, will give you a brief insight on initiating the creation of a Hello World applications using Sencha Touch

(For more resources related to this topic, see here.)

The Hello World application

In the previous sections, we saw how to set up environments for development of Sencha Touch. Now let's start with the Hello World application.

First of all, create a new folder in your web server and name it sencha-touch-start. Create a subfolder lib inside this folder. In this folder, we will store our Sencha Touch resources. Create two more subfolders inside the lib folder and name them js and css respectively. Copy the sencha-touch-all.js file from the SDK, which we had downloaded, to the lib/js folder. Copy the sencha-touch.css file from SDK to the lib/css folder. Now, create a new file in the sencha-touch-start folder, name it index.html, and add the following code snippet to it:

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

Now create a new file in the sencha-touch-start folder, name it app.js, and add the following code snippet to it:

Ext.application({
name: 'Hello World',
launch: function () {
var panel = Ext.create('Ext.Panel', {
fullscreen: true,
html: 'Welcome to Sencha Touch'
});
Ext.Viewport.add(panel);
}
});

Add a link to the app.js file in the index.html page; we created the following link to sencha-touch-all.js and sencha-touch.css:

<script src = "app.js" type="text/javascript"></script>

Here in the code, Ext.application({..}) creates an instance of the Ext.Application class and initializes our application. The name property defines the name of our application. The launch property defines what an application should do when it starts. This property should always be set to a function inside which we will add our code to initialize the application. Here in this function, we are creating a panel with Ext.create and adding it to Ext.Viewport. Ext. Viewport is automatically created and initialized by the Sencha Touch framework. This is like a base container that holds other components of the application.

At this point, your application folder structure should look like this:

Now run the application in the browser and you should see the following screen:

If your application does not work, please check your web server. It should be turned on, and the steps mentioned earlier should be repeated.

Now we will go through some of the most important features and configurations of Sencha Touch. These are required to build real-time Sencha Touch applications.

Introduction to layouts

Layouts give a developer a number of options to arrange components inside the application. Sencha Touch offers the following four basic layouts:

  • fit
  • hbox
  • vbox
  • card

hbox and vbox layouts arrange items horizontally and vertically, respectively. Let's modify our previous example by adding hbox and vbox layouts to it. Modify the code in the launch function of app.js as follows:

var panel = Ext.create('Ext.Panel', {
fullscreen: true,
layout: 'hbox',
items: [{
xtype: 'panel',
html: 'BOX1',
flex: 1,
style: {
'background-color': 'blue'
}
},{
xtype: 'panel',
html: 'BOX2',
flex: 1,
style: {
'background-color': 'red'
}
},{
xtype: 'panel',
html: 'BOX3',
flex: 1,
style: {

'background-color': 'green'
}
}]
});
Ext.Viewport.add(panel);

In the preceding code snippet, we specified the layout for a panel by setting the layout: 'hbox' property, and added three items to the panel. Another important configuration to note here is flex. The flex configuration is unique to the hbox and vbox layouts. It controls how much space the component will take up, proportionally, in the overall layout. Here, we have specified flex : 1 to all the child containers; that means the height of the main container will be divided equally in a 1:1:1 ratio among all the three containers. For example, if the height of the main container is 150 px, the height of each child container would be 50 px. Here, the height of the main container would be dependent on the browser width. So, it will automatically adjust itself. This is how Sencha Touch adaptive layout works; we will see this in detail in later sections. If you run the preceding code example in your browser, you should see the following screen:

Also, we can change the layout to vbox by setting layout: 'vbox', and you should see the following screen:

When we specify a fit layout, a single item will automatically expand to cover the whole space of the container. If we add more than one item and specify only the fit layout, only the first item would be visible at a time. The card layout arranges items in a stack of cards and only one item will be visible at a time, but we can switch between items using the setActiveItem function. We will see this in detail in a later section.

Panel – a basic container

We have already mentioned the word "panel" in previous examples. It's a basic container component of the Sencha Touch framework. It's basically used to hold items and arrange them in a proper layout by adding the layout configuration. Besides this, it is also used as overlays. Overlays are containers that float over your application. Overlay containers can be positioned relative to some other components. Create another folder in your web server, name it panel- demo, and copy all the files and folders from the sencha-touch-start folder of the previous example. Modify the title in the index.html file.

<title>Panel Demo</title>

Modify app.js as follows:

Ext.application({
name: 'PanelDemo',
launch: function () {
var panel = Ext.create('Ext.Panel', {
fullscreen: true,
items: [{
xtype: 'button',
text: 'Show Overlay',
listeners: {
tap: function(button){
var overlay = Ext.create('Ext.Panel', {
height: 100,
width: 300,
html: 'Panel as
Overlay'
});
overlay.showBy(button);
}
}
}]
});
Ext.Viewport.add(panel);
}
});

In the preceding code snippet, we have added button as the item in the panel and added listeners for the button. We are binding a tap event to a function for the button. On the tap of the button, we are creating another panel as an overlay and showing it using overlay. showBy(button).

Summary

This article thus provided us with details on building a Hello World application, which gave you further introduction to the most used components and features of Sencha Touch in real-time applications.

Resources for Article :


Further resources on this subject:


Instant Sencha Touch [Instant] Build native applications with Sencha Touch easily and efficiently with this book and ebook
Published: October 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Hiren J. Dave

Hiren J. Dave is a software engineer who graduated from Sardar Patel University. He has more than five years' experience in the enterprise software industry. He is currently working as a Technical Head in The Design Shop. Hiren is passionate about researching and learning new technologies. He is also passionate about mobile application development. His expertise lies in developing cross-platform and native mobile application development. He also shares his knowledge with the world through his blog, http://davehiren.blogspot.in.

Books From Packt


 Sencha Touch Cookbook, Second Edition
Sencha Touch Cookbook, Second Edition

 Creating Mobile Apps with Sencha Touch 2
Creating Mobile Apps with Sencha Touch 2

Sencha Touch Mobile JavaScript Framework
Sencha Touch Mobile JavaScript Framework

Sencha MVC Architecture
Sencha MVC Architecture

Sencha Touch 2 Mobile JavaScript Framework
Sencha Touch 2 Mobile JavaScript Framework

 Sencha Architect App Development
Sencha Architect App Development

 Ext JS 4 Plugin and Extension Development
Ext JS 4 Plugin and Extension Development

Sencha Touch Cookbook
Sencha Touch Cookbook


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
U
2
H
i
y
R
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software