PROJECT: BUILDING A WEB APPLICATION WITH SENCHA TOUCH
Sencha Touch is arguably the most complex web framework used in this book. There is a heavy reliance on JavaScript. The goal of this project is to present to you a tool that allows you to see a complete Sencha Touch project from A to Z.
In this project you will build a web application that identifies your location using geolocation in the mobile web browser, displays a Google Map of your location, and lists a stream of tweets in your area.
What You Will Need
To get started with this project you will need to download the files from www.visualizetheweb.com. The files for this project are contained in a ZIP file that you can extract on your desktop.
You will find a lot of project files. The two most important are index.html and index.js—these are the two files that drive your application.
Setting Up Your Sencha Touch Project: First, the HTML
The first document you will review is index.html. The file is constructed of the following:
• Reference to the Sencha Touch CSS
• Reference to custom CSS
• Google Map JavaScript file
• Sencha Touch JavaScript file
• Custom JavaScript
Here is the HTML from index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>Find Tweets</title>
<!-- Sencha Touch CSS -->
<link rel=“stylesheet” href=“css/sencha-touch.css” type=“text/css”>
<!-- Custom CSS -->
<link rel=“stylesheet” href=“css/guide.css” type=“text/css”>
<!-- Google Maps JS -->
<script type=“text/javascript” src=“http://maps.google.com/maps/api/js?sensor=false”></script>
<!-- Sencha Touch JS -->
<script type=“text/javascript” src=“sencha-touch.js”></script>
<!-- Application JS -->
<script type=“text/javascript” src=“src/index.js”></script>
<style>
.refreshBtn {
margin: 0 !important;
}
</style>
</head>
<body></body>
</html>
The HTML is merely a container to load the files needed in the project. This is common for all Sencha Touch projects. Figure P4.1 shows the application running on a mobile device.
Figure P4.1 A Sencha Touch web app.
Second: Custom CSS
The CSS has been extended for the project. What follows is a new collection of CSS that you can find in the file named guide. css. The file allows for the Twitter feeds to present correctly on the Tweet screen as shown in Figure P4.2.
Figure P4.2 The customized user interface for the Twitter news stream.
.x-tabbar {
padding-top: 10px !important;
border-bottom: 2px solid #306aa1 !important;
}
.tweet {
padding: 10px 0 10px 68px;
min-height: 68px;
background-color: #fff;
}
.tweet h2 {
font-weight: bold;
}
.tweet .avatar {
position: absolute;
left: 10px;
}
.tweet .avatar img {
max-width: 48px;
}
The next step is to review the JavaScript.
The first block of JavaScript sets up the project, the loading images, and the icon, and identifies the two different screens: Tweets and Your Location.
Ext.setup({
tabletStartupScreen: ‘tablet_startup.png’,
phoneStartupScreen: ‘phone_startup.png’,
icon: ‘icon.png’,
glossOnIcon: false,
onReady: function() {
var timeline = new Ext.Component({
title: ‘Tweets’,
cls: ‘timeline’,
scroll: ‘vertical’,
tpl: [
‘<tpl for=“.”>’,
‘<div class=“tweet”>’,
‘<div class=“avatar”><img src=“{profile_image_url}” /> </div>’,
‘<div class=“tweet-content”>’,
‘<h2>{from_user}</h2>’,
‘<p>{text}</p>’,
‘</div>’,
‘</div>’,
‘</tpl>’
]
});
The following refreshes the screen and pulls your location from using the Geolocation class:
var refresh = function(position) {
var coords = position || map.geo.coords;
if (coords) {
map.update(coords);
This takes your data and searches for information in your area from Twitter’s news stream service:
Ext.util.JSONP.request({
url: ‘http://search.twitter.com/search.json’,
callbackKey: ‘callback’,
params: {
geocode: coords.latitude + ‘,’ + coords.longitude + ‘,’ + ‘5mi’,
rpp: 30
},
callback: function(data) {
if (data && data.results && !!data.results.length) {
data = data.results;
The following forces the Twitter timeline to update:
timeline.update(data);
The next section adds a point to the map to identify your location:
for (var i = 0, ln = data.length; i < ln; i++) {
addMarker(data[i]);
}
} else {
timeline.getContentTarget().update(‘No Results Available’);
} }});}};
The following section identifies your location as the default location for the Google Map screen:
var map = new Ext.Map({
title: ‘Your Location’,
useCurrentLocation: true,
mapOptions: {
zoom: 11
},
listeners: {
maprender: function(mapC, map) {
refresh(this.geo.coords);
this.geo.on(‘update’, refresh);
}
}
});
;
var panel = new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: ‘slide’,
items: [map, timeline]
});
The following leverages the Google Map APIs to add your position to the screen:
var markers = {};
var addMarker = function(tweet, position) {
if (markers[tweet.from_user_id]) {
return;
}
position = tweet.geo ? tweet.geo.coordinates: null;
if (!position && tweet.location) {
var L = String(tweet.location).split(‘:’)[1] ||
tweet.location;
position = L.split(‘,’);
}
if (position) {
new google.maps.Marker({
map: map.map,
title: tweet.from_user,
position: new google.maps.LatLng(position[0], position[1])
});
}
};
The following adds the tabBar to the top of the screen:
var tabBar = panel.gettabBar();
tabBar.addDocked({
cls: ‘refreshBtn’,
xtype: ‘button’,
ui: ‘plain’,
iconMask: true,
iconCls: ‘refresh’,
dock: ‘right’,
stretch: false,
align: ‘center’,
handler: refresh
});
panel.doComponentLayout();
}
});
Save your file.
At this time you have added all the custom code needed for your project. Move your files to your website and view the project through your favorite smart phone.
Summary
In this project you have seen how you can build a web app with Sencha Touch. The application allowed you to experiment with several key technologies such as:
• Geolocation
• Google Maps
• JSON data feeds
• Loading Twitter feeds
• Extending Sencha Touch CSS
There is a steep learning curve to Sencha Touch. The reward, however, is that you can build complex applications that leverage the latest APIs in your web browser, such as geolocation.