MVC Mobile Web Development with Sencha Touch
‘);
if (window.focus) {newwindow.focus()}
}
In a prior installment of this special array on mobile Web development, we looked during jQTouch, a absolute jQuery plugin useful for building Web-based mobile applications. As it happens, jQTouch is one of several renouned open source projects fostered by a Sencha Labs foundation. As it happens, Sencha Labs’s namesake corporate arm also offers a second mobile Web focus horizon called Sencha Touch, that presents a possess singular set of constrained features.
Sencha Touch keys on many of a singular facilities done accessible around HTML5 and CSS3, fixation special courtesy on information integration, an MVC-based design for effectively handling your focus code, and charity a absolute set of tradition touch-based interactions such as tapping, pinching, and rotating. Sencha Touch is good value a demeanour for anybody exploring Web-based mobile applications.
In this essay I’ll deliver we to Sencha Touch and uncover we how to start building a elementary focus regulating a discerning MVC-driven approach.
Installing Sencha Touch
Sencha Touch is dual-licensed underneath both a blurb and open source license, with a former compulsory should we be meddlesome in building exclusive applications and a latter should we emanate an open source focus protected underneath a GPL v3 (FLOSS exceptions are also accessible for other licenses, see a licensing page for some-more details). Interestingly, a blurb permit is giveaway for many purposes, definition you’ll usually be set behind a few dollars should we be meddlesome in purchasing technical support.
- Post a comment
- Email Article
- Print Article
In any case, we can implement Sencha Touch by streamer over to a download page. Create a new office that will residence your mobile project. For a functions of this educational I’ll call this office m.example.com. Unzip a Sencha download and place a essence somewhere within a plan directory. For instance we tend to place third-party libraries within a office named lib/, renaming a third-party office to something easier to type, such as sencha (I’ll use this gathering via a residue of a tutorial). Therefore, so distant a plan office looks like this:
m.example.com/
lib/
sencha/Additionally, keep in mind Sencha Touch is geared towards browsers regulating a WebKit blueprint engine, a dual many important of that embody Google Chrome and Safari. Therefore, we should implement one of these dual browsers if we haven’t already in sequence to use one for testing. It goes but observant that we should perform poignant additional contrast regulating a mobile device before releasing anything for open consumption.
Creating a MVC Project Structure in Sencha Touch
If we review a jQTouch tutorial, we substantially remember that any page was encapsulated within a possess DIV element. Sencha Touch takes a drastically opposite approach, regulating JavaScript to expostulate a focus blueprint and behavior. While regulating JavaScript to foreordain an application’s blueprint might seem an peculiar choice, as you’ll shortly see a proceed resembles a syntax and concepts used by GTK+.
Let’s continue work on a plan by formulating a other directories that will store a models, views, and controllers.
m.example.com/
app/
controllers/
models/
views/
lib/
sencha/Next, emanate an HTML page named index.html that looks like this (minus a line numbers). Place this record in your project’s base directory:
01 html
02 head
03 titleExample.com Mobile Website/title
04
05 !-- CSS --
06 couple rel="stylesheet" href="/lib/sencha/resources/css/sencha-touch.css" type="text/css" target="_blank"
07
08 !-- SENCHA --
09 book type="text/javascript" src="/lib/sencha/sencha-touch.js" target="_blank"/script
10
11 !-- APPLICATION --
12 book type="text/javascript" src="/app/app.js" target="_blank"/script
13
14 !-- ROUTES --
15
16 !-- CONTROLLERS --
17
18 !-- VIEWS --
19
20 /head
21
22 body
23
24 /body
25
26 /html- Line 06 integrates a
sencha-touch.cssCSS file, that provides a mobile-specific look-and-feel. - Line 09 integrates a
sencha-touch.jsJavaScript library, that provides all of a functionality we’ll subsequently use to build a application. - Line 12 integrates a JavaScript record that we’ll use to build a application. (Currently this record doesn’t exist so you’ll need to emanate it if you’re following along.)
- Finally, lines 14, 16, and 18 offer as placeholders denoting a areas where we will be adding a router, controllers, and views used to energy a representation application.
Initializing a Sencha Touch Application
The app.js record referenced in a prior inventory will during a smallest be obliged for initializing a mobile application. In sequence to get things rolling this book will demeanour like this:
Ext.regApplication({
name: 'App',
defaultUrl: 'Index/index',
launch: function()
{
this.viewport = new App.views.Viewport();
},
});These few lines are flattering absolute in that they initialize a focus by initial identifying an inner namespace (App), conclude a default route, and conclude any other specific tasks that should take place when a focus starts (defined by a launch property’s reserved unknown function, that during this indicate usually instantiates a focus layout, famous as a viewport). I’ll lapse to a viewport in a moment.
You’ll notice a default track is set to Index/index, that means we wish a Index controller’s index movement to execute. But Sencha doesn’t commend a controller/action track gathering by default; we need to conclude it within a record (typically named routes.js), like so:
Ext.Router.draw(function(map) {
map.connect(':controller/:action');
});Place this record in a app office and afterwards supplement a following line to your index.html file, predictably within a ROUTES section:
script type="text/javascript" src="app/routes.js" target="_blank"/script- 1
- 2
Networking Solutions
‘);
}else {
try {
if (window.external.msIsSiteMode()) {
jQuery.get(‘http://www.developer.com/latest_articles’, function(data){
displayLatestNews(data);
});
}
} locate (ex) { }
}
}else{
document.write(‘
Upgrade your browser to IE 9 to see a energy of Site Pinning!
‘);
}
}
function displayLatestNews(data){
try{
g_ext = window.external;
if(data.articles != uncertain data.articles.length){
g_ext.msSiteModeClearJumpList();
g_ext.msSiteModeCreateJumplist(‘Developer.com Latest News’);
for(i=0; i
<!–
.dmcontent_container
{
text-align: center;
background-color:
width: 125px;
height: 250px;
border-top: 2px solid; border-color:
}
.dmcontent_title
{
text-align: left;
height: 20px;
line-height: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
width: 125px;
color:
background-color:
}
.dmcontent_body
{
overflow-y: auto;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 14px;
font-size: 10px;
margin-left: auto;
margin-right: auto;
width: 123px;
height: 219px;
color:
background-color:
border: 1px solid; border-color:
}
.dmcontent_link
{
text-decoration: none;
color:
}
–>
Architecture & Design
>Database
>Java
>Languages & Tools
>Microsoft & .NET
>Open Source
>Project Management
>Security
>Techniques
>Wireless
–>
The Network for Technology Professionals
Copyright 2010 QuinStreet Inc. All Rights Reserved.
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers