Sencha Touch Tutorial – Building a Newsletter App (part 1)



Please note this tutorial was created using Sencha Touch 1.x.

I’ve been spending some time lately learning Sencha Touch and thought I’d post a tutorial here on how to use it to build a Newsletter style App. Clearly I have been inspired by the USA Today iPad App as you’ll see by the screen shots below. The screen shots show the mockup I did in Photoshop (on the left) to help me visualize the App before I ever start programming and how the App turned out looking in the iPad emulator (on the right) when I was finished.

Please keep in mind as you read through this that it’s my first tutorial so if you have any suggestions please let me know. And also that I am not a professional programmer, I am a graphic designer, so this tutorial is by no means a ‘best practice’ guide to sencha touch. This tutorial will span several different posts as I go through the various steps I took to get to my final product.

Okay, lets get down to the guts of the action. The first step I took was to ‘block’ out my App into main areas of content represented by areas of color just to help me visualize where elements would go and how they will fit together. Here is a screen shot of what we will end up with at the end of this first step in the tutorial.

So to get started with any Sencha Touch project you need to build a really simple index.html file first, here is what mine looks like:

<!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8">
     <title>Newsletter</title>

	 <!-- Sencha Touch CSS -->
	 <link rel="stylesheet" href="../sencha-touch/resources/css/sencha-touch.css" type="text/css">

	 <!-- Sencha Touch JS -->
	 <script type="text/javascript" src="../sencha-touch/sencha-touch-debug.js"></script>

	 <!-- Application JS -->
	 <script type="text/javascript" src="index-a.js"></script>

 </head>
 <body></body>
 </html>

Lets break this down line by line:

Lines 1 through 5 start the set up a very simple HTML 5 document.

Lines 7 and 8 include the Sencha Touch CSS styles in the HTML file. This is required code for any Sencha Touch project.

Lines 10 and 11 include the Sencha Touch library in the HTML file. There are a few different library files you can link to in this step. I like to link to the ‘debug’ library during the development phase. This is required code for any Sencha Touch project.

Lines 13 and 14 include my main javascript file in the HTML file.

Lines 16 through 18 finish off the HTML 5 document.

This is the most basic HTML file needed to run a Sencha Touch application.

Note that the Sencha Touch CSS and Library files are located outside of my main directory, that is my personal preference, your files can be organized another way if you choose.

The javascript file that is linked at line 14 “index-a.js” is where all the Sencha Touch javascript code will go that is going to drive the newsletter app. This file is where the magic happens.

This file can be named anything you like I used the name “index-a” because it is the first section of this tutorial. I plan on keeping each step organized into separate files so at the end they can all be downloaded and you can see the steps I’ve taken to build the app at each stage.

Let’s take a look a building the index-a.js file:

Ext.setup({

tabletStartupScreen: 'tablet_startup.png',
icon: 'icon.png',
glossOnIcon: true,

});

This is the basic building block of my javascript file where I set up the splash screen and icon files for the project. Since I am specificially targeting the iPad I’ve only set a table startup screen. If you were targeting a phone you could set up the ‘phoneStartupScreen:’ as well.

Line 3 points to my file for my splash screen. The splash screen must be named correctly as ‘tablet_startup.png’ and it must be 768 x 1024 pixels in dimension.

Line 4 points to my file for my icon. Just like the splash screen the icon must be named correctly as ‘icon.png’. I don’t think this has to be a specific pixel dimension like the splash screens but it should be square. Mine are 200 x 200 pixels.

Line 5 applies the gloss effect to my icon. If you didn’t want a glossy icon you would set your value to false.

These few lines will appear at the setup of just about any Sencha Touch document. The rest of my code is below, I’ll go through the high points line by line below as well.

Ext.setup({

tabletStartupScreen: 'tablet_startup.png',
icon: 'icon.png',
glossOnIcon: true,

onReady: function() {

var header = new Ext.Panel({
height: 35,
style:"background-color:lightblue;",
html: "The info button and updated on date will go here."
});

var masthead = new Ext.Panel({
height: 70,
style:"background-color:blue;",
html: "The masthead will go here."
});

var sidebar = new Ext.Panel({
flex: 1,
style:"background-color:red;",
html: "The sidebar information will go here.",
});

var stories = new Ext.Panel({
flex: 2,
style:"background-color:green;",
html: "The main story information will go here."
});

var content = new Ext.Panel({
height: 899,
layout: {
type:'hbox',
align:'stretch'
},
items: [
sidebar,
{
xtype: 'component',
height: 10,
width: 10
},
stories
]
});

rootPanel = new Ext.Panel({
fullscreen:true,
style:"background-color:white",
layout: {
type:'vbox',
align:'stretch'
},
items:[header, masthead, content]
});

}

});

Line 7 is the Sencha Touch onReady function that will execute once the file is fully loaded and ready to go. I’ve placed the rest of my code inside this function.

Line 9 is a variable named ‘header’ that builds a new Panel in Sencha Touch. A Panel is one of the basic building blocks of Sencha Touch and is used to layout and contain other information. For the sake of this first tutorial all of my Panels are going to contain only color and some sample text stating what the Panel will hold later. Panels can hold other Panels, text, graphics, buttons, pretty much anything.

Line 10 sets a physical height in pixels of my header panel. I’m setting specific sizes for all my panels in this tutorial since I am targeting the iPad with this project. If you were being more flexible with your targets (iPad’s and iPhone’s perhaps) you might not want to set specific sizes to your elements.

Line 11 sets the background color of my header Panel to light blue. The Style element can take multiple values, here I am only setting the ‘background-color’ value. I’ve used the text name for the color just for the sake of speeding through my test. You can also use Hex colors here like: #5ed1f2.

Line 12 sets the html element to a bit of text just to describe what will be held in the panel later.

Line 13 closes the variable.

Lines 15-19, 21-25 and 27-31 set up the ‘masthead’, ‘sidebar’, and ‘stories’ variables in exactly the same way.

Please note however lines 22 and 28. Here I am setting the ‘flex’ width of the sidebar and stories panels. If you look at the screen shot above you will note the stories panel is twice the width of the sidebar panel, that is because I’ve set these flex values. So if I wanted the sidebar panel to be 1/3 the width of the stories panel I’d edit line 28 to be flex: 3.

Line 33 sets up a new variable for ‘content’ this is a good example of one panel that contains several other panels. This is where the layout flexibility of Sencha Touch starts to shine. When you grasp how to nest panels of information it becomes pretty easy to start to build complex layouts.

Line 34 sets the physical height of the content panel to 899 pixels. If you add up all my height values of my panels you’ll note they equal 1004 pixels, the full display size of the iPad. They equal 1004 and not 1024 because the top 20 pixels of the iPads screen is reserved for the status bar info.

Lines 35-38 set some layout properties of the panel. There are others to choose from but I only needed to set these two properties for my project. The ‘type’ property sets my panel up as an hbox (horizontal box). This means that the items I place within the content panel in lines 39-47 will be stacked in a horizontal line starting on the left of the screen and flowing to the right. The ‘align’ property is set to stretch which causes the depth of my panels to stretch to the full depth of their parent panel which is 899 pixels deep.

Line 39 opens the items element. This section will place some of the panels I have already set up above within the content panel.

Line 40 places the sidebar panel which will be placed at the far left of the screen since I’ve set this panel up with a type of hbox.

Line 41 starts an ‘on the fly’ component.

Line 42 adds a generic ‘component’ as an xtype on the fly. I could have created a panel here as well by replacing ‘component’ with ‘panel’. Calling an xtype creates whatever element you call as its property.

Lines 43-44 sets the width and depth to 10 pixels. This component is added to act as a gutter between the sidebar and stories panels. It is built on the fly just as an example of another way to add items to a panel, I could have just as easily set it up as its own variable and called that in just like I am the sidebar and stories panels.

Line 45 closes the ‘on the fly’ component.

Line 46 adds the stories panel.

Line 47 closes the items element.

Line 48 closes the content variable.

So you can seen how the content panel now holds the sidebar, gutter, and stories panels. If I were to move or change the content panel the panels contained by it would adjust accordingly.

Line 50-58 bring all of these elements together and draws them to screen.

Line 50 sets the rootPanel element as a new panel. This can be thought of as the base panel that holds everything that will be shown on screen.

Line 51 sets the size of the rootPanel to full screen. If you wanted something besides full screen, you could set the height and width instead.

Line 52 sets my background color to white.

Lines 53-56 sets the layout properties of my rootPanel. Like the content panel above I’ve set the type and align properties. This time I’ve set the type to vbox (vertical box) so any items placed within this panel will stack from the top of the screen to the bottom of the screen.

Line 57 sets the items of the rootPanel to the variables ‘header’, ‘masthead’ and ‘content’. You’ll note these stack on screen in the order they are placed here.

Lines 58-62 just close everything out.

Remember for the files below to work correctly on your system you’ll need the Sencha Touch Libraries installed as well.

You can download the source files here:

Leave a comment


Name*

Email(will not be published)*

Website

Your comment*

Submit Comment

© Copyright Mostly Creative - Theme by Pexeto