Creating A New Cordova Mobile Application Using Sencha Touch Framework In Visual Studio

Indraneel Pole
9y
9.3k
0
1

Article

So, when I started to work on a Cordova project in Visual Studio and decided to use Sencha Touch framework, obviously my first instinct was to Google any existing tutorial of this, where someone has worked on the same technologies using same framework in same IDE for mobile devices. Too many constraints, isn’t it? Well Google thought so too, and I couldn’t find anything helpful for my query except couple of tutorials where people showed creating new website using Sencha Touch instead of a Mobile Application where Cordova is included in the scene. Not much difference but hey, it can get tricky. So, after spending a whole day with trial and error approach to create my first mobile app using Sencha Touch and Cordova in Visual Studio, I decided to write a small tutorial about it myself.

This tutorial assumes that you are well aware of (Or at least have read the Wikipedia pages of) all the things that are mentioned in the title of this article and so I won’t go deep into what is what, and would jump straight into explaining how to create it.

Go to Visual Studio. Open New Project, go to Installed Templates, JavaScript, then click Apache Cordova Apps.

Here I have assumed that you have already installed Visual Studio tools for Apache Cordova. If not, here is a complete tutorial from Visual Studio site on how to do it.

Give the name of the App and click OK.

blank app

A getting started guide will open. You should read this documentation if you aren’t familiar with Cordova already.

In Solution Explorer, you will see a ‘www’ folder inside your project. It is basically the website instance of your app. This is treated as a website with its own HTML, JavaScript and CSS files. You will see an index.html file which looks something like this.

Right now if you run your application inside Ripple Browser, you will see a simple application with single page that has one line “Hello, your application is ready!”.

Till this point we haven’t done anything with Sencha Touch. We have just created a successful Cordova App with Visual Studio. Now let’s integrate Sencha Touch in this application.

First - Download Sencha Touch Library from their website. Fill in the form there, and then you will get a download link in your email inbox. Use this link to download the framework. The downloaded zip folder will have name similar to sencha-touch-2.x.y-commercial.zip, where x and y will change according to latest version of the framework. Extract this folder and then open. Inside this folder there will be some JavaScript files for example, sencha-touch.js, sencha-touch-all.js and so on. These files differ based on whether they are minified, commented, and so on. For example, sencha-touch.js is the minified version of framework, while sencha-touch-all-debug.js is non-minified and has proper commenting. You can use any of them, but for understandability purpose we will use sencha-touch-all-debug.js. Copy this file and paste it inside the script folder of your project. Then in the library folder, go to resources->css folder, and copy the sencha-touch.css to resources->css folder of your project. Your project might not have this folder by default in that case create this hierarchy inside www.

Now we come to the point where we add app.js to the solution. In Sencha Touch all the views and controllers are defined and used inside a single file known as app.js. Right click on www to add a new JavaScript file. Call it app.js. (Remember! this file can also be created with Sencha Touch’s visual tools, in which case you can simply paste that file in www.).

Similarly inside the resources->css folder, create a new css file named app.css. And add this line to the app.css -

@import url(sencha-touch.css);

Your solutions explorer should look like this now:

CSS

Go to index.html now and add the following code to the body of the html.

<link href="resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script src="scripts/sencha-touch-all-debug.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>

You have now referenced sencha touch framework as well as app.js in your project. And now you are free to use app.js to create your Sencha Touch App in Cordova using Visual Studio.

We will do a simple app where clicking on a button invokes an alert box telling you have clicked a button. To do so-

First, go to index.html and add the following style and script inside the html <head> tag,

<style type="text/css">
/**
* Example of an initial loading indicator.
* It is recommended to keep this as minimal as possible to provide instant feedback
* while other resources are still being loaded for the first time
*/
html, body {
height: 100%;
background: url('resources/images/background-pattern-solidcolor.png') repeat;
background-size: 4px 4px;
}
#appLoadingIndicator {
position: absolute;
top: 50%;
margin-top: -15px;
text-align: center;
width: 100%;
height: 30px;
-webkit-animation-name: appLoadingIndicator;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
}
#appLoadingIndicator > * {
background-color: #F58220;
display: inline-block;
height: 30px;
-webkit-border-radius: 15px;
margin: 0 5px;
width: 30px;
opacity: 0.8;
}
@-webkit-keyframes appLoadingIndicator {
0% {
opacity: 1;
}
50% {
opacity: 0.2;
}
100% {
opacity: 1;
}
}
</style>
<script type="text/javascript">
//this is latest check in by me
//MSApp.execUnsafeLocalFunction(function () {
(function (h) {
function f(c, d) {
document.write('<meta name="' + c + '" content="' + d + '">')
}
if ("undefined" === typeof g) var g = h.Ext = {};
g.blink = function (c) {
var d = c.js || [], c = c.css || [], b, e, a;
f("viewport", "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");
f("apple-mobile-web-app-capable", "yes");
f("apple-touch-fullscreen", "yes");
b = 0;
for (e = c.length; b < e; b++) a = c[b], "string" != typeof a && (a = a.path), document.write('<link rel="stylesheet" href="' + a + '">');
b = 0;
for (e = d.length; b <
e; b++) a = d[b], "string" != typeof a && (a = a.path), document.write('<script src="' + a + '"><\/script>')
}
})(this);
;
Ext.blink({
"id": "9e31cc20-c5bd-11e1-9ff6-3313363a50f2", "js": [
{ "path": "appConfig.js", "type": "js" },
{ "path": "app.js", "bundle": true, "update": "delta", "type": "js" }
], "css": [
{ "path": "resources/css/app.css", "update": "delta", "type": "css" }
]
});
//});
</script>

Now, inside <body> tag add this division,

<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>

This is nothing but adding an initialization animation provided by Sencha-Touch. This runs while app is being initialized. Now, go to app.js file, and add the following code.

Ext.application({
name: "BlankCordovaApp101",
launch: function () {
Ext.fly('appLoadingIndicator').destroy();
var button = Ext.create('Ext.Button', {
text: 'Test Button',
listeners: {
tap: function () {
Ext.Msg.alert("Warning", "You clicked test button");
}
}
});
Ext.Viewport.add({ xtype: 'container', padding: 10, items: [button] })
}
});

In Sencha Touch framework, the entry point in the application is always launch function of Ext.application({}).

Inside the launch function, you first delete the app loading indicator animation. Then you create a new button, and add a listener to it. When the button is clicked a message is shown inside the alert box.

This is how it should look.

test button