Developing mobile applications with Visual Studio and Apache Cordova

By Nov 11, 2016

Description:

Developing mobile applications with Visual Studio and Apache Cordova

Preferencesoft

In this article, we will see how to create a cross-platform application with Visual Studio 2015 and Apache Cordova.

There are many developers who know the languages HTML/CSS and JavaScript/Typescript, because Web pages are based on these languages. They can create applications into Web pages that can run on any computer with a Web browser. These applications are limited because they cannot access all the devices on a local computer. However, they can easily access websites, they can display data in the form of text, tables or images and allow interaction with users using buttons, text boxes etc.

Unfortunately, these applications cannot run on a computer without having to launch a web browser.

Cordova Apache allows you to create cross-platform applications for mobile in HTML/CSS and JavaScript that can access certain devices like Camera, accelerometer, contacts application, …

This framework allows developers to adapt certain web applications to mobile devices or to design new applications in these languages.

Visual Studio 2015 and Apache Cordova

I assume you have already installed Visual Studio. To install Cordova Apache, you must select New project > Typescript > Cordova Apache apps and click OK. The installation is entirely guided by Visual Studio.
Then depending on the chosen target system, Android, Windows or IOS, you will need to install an emulator.

To use the Android Google emulator, you need to download Google Chrome.

Personally, I installed the developer Android sdk, which allowed me to create several different configurations of devices.

In the SDK Manager, download:

  •          API 23

  •          Android SDK Tools (last version)

  •          Android SDK Platform-tools (last version)

Why did I choose typescript rather than JavaScript?

The main reason is that to create complex applications, I prefer to structure the code with classes and trigger an automatic typing control, by systematically specifying the types of all variables. In any case, it is possible to include in the project files in JavaScript.

Getting Started with Apache Cordova Applications

Creating a single page application
First, create a project. In Visual Studio, create a new blank App project, named by default BlankCordovaApp

 (You can find it under Typescript->Apache Cordova Apps in the New Project dialog box).

Project files in VS

Three files are important:

  •          Index.html in www/

  •          Index.css in www/css/

  •          Index.ts in scripts/

 

Files of extension html and css contain graphic objects and their properties, while the file index.ts contains functions for objects in Typescript.

It is strongly recommended to separate code from HTML objects.

Here is the content of the .html and .ts files:

<!DOCTYPE html>
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <!--
        Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
        For details, see http://go.microsoft.com/fwlink/?LinkID=617521
    -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>BlankCordovaApp</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="scripts/platformOverrides.js"></script>
        <script type="text/javascript" src="scripts/appBundle.js"></script>
    </body>
</html>

 

module BlankCordovaApp {
    "use strict";
 
    export module Application {
 
        export function initialize(): void {
            document.addEventListener("deviceready", onDeviceReady, false);
        }
 
        function onDeviceReady(): void {
            var parentElement: HTMLElement;
            var listeningElement: Element;
            var receivedElement: Element;
            // handle the Cordova pause and resume events
            document.addEventListener("pause", onPause, false);
            document.addEventListener("resume", onResume, false);
            // todo: Cordova has been loaded. Perform any initialization that requires Cordova here.
            parentElement = document.getElementById("deviceready");
            listeningElement = parentElement.querySelector(".listening");
            receivedElement = parentElement.querySelector(".received");
            listeningElement.setAttribute("style", "display:none;");
            receivedElement.setAttribute("style", "display:block;");
        }
 
        function onPause(): void {
            // todo: This application has been suspended. Save application state here.
        }
 
        function onResume(): void {
            // todo: This application has been reactivated. Restore application state here.
        }
 
    }
 
    window.onload = function (): void {
        Application.initialize();
    };
}

I slightly modified the .ts file so that the compiler does not give warning about the types.

Simple example

Let's modify the file index.ts, to add a click event handler to the button button1.

      function onDeviceReady(): void {
            var parentElement: HTMLElement;
            var listeningElement: Element;
            var receivedElement: Element;
            // handle the Cordova pause and resume events
            document.addEventListener("pause", onPause, false);
            document.addEventListener("resume", onResume, false);
            // todo: Cordova has been loaded. Perform any initialization that requires Cordova here.
            parentElement = document.getElementById("deviceready");
            listeningElement = parentElement.querySelector(".listening");
            receivedElement = parentElement.querySelector(".received");
            listeningElement.setAttribute("style", "display:none;");
            receivedElement.setAttribute("style", "display:block;");
            document.getElementById("button1").addEventListener("click", onButtonClick, false);
        }
 
        function onButtonClick(): void {
            var t = document.getElementById("text1").innerHTML;
            document.getElementById("text1").innerHTML = "Hello";
        }

In the div section of the application in index.html, add a button and another div section.

<div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
            <div class="custom">
                <button id="button1">
                    HELLO
                </button>
                <div id="text1">-----</div>
            </div>
        </div>

Let's add a custom class in the file index.css.

.custom {
    background-color:greenyellow;
    text-transform:none;
}

Google emulator

Creating a multiple page application

By default, the Typescript index.ts file is compiled into a JavaScript file called appBundle.js.

We will change the configuration so that a <name>.ts file is compiled into <name>.js.

Change the file tsconfig.json in the directory www, deleting line containing out and replacing it by "outDir":"../www/scripts",.

tsconfig.json:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "outDir": "../www/scripts",
    "inlineSources": true,
    "target": "es5"
  }
}

 

Let's create copies of the files index.html, index.css and index.ts named page.html, page.css, and page.ts.

In the file page.ts, change the name of the module. Let's call it BlankCordovaAppPage for example.

In the files index.html and page.html, replace the line

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

respectively with

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

 

and

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

 

In the files page.html, replace the line

<link rel="stylesheet" type="text/css" href="css/index.css">

 

with

<link rel="stylesheet" type="text/css" href="css/page.css">

 

For navigation, create a button in the page index.html to navigate to page.html and a back button in the page.html page.

Index.html:

<button id="button2">Go to page</button>

 

page.html:

<button id="button2">RETURN</button>

 

Index.ts:

        function onDeviceReady(): void {
            // handle the Cordova pause and resume events
            document.addEventListener("pause", onPause, false);
            document.addEventListener("resume", onResume, false);
            // todo: Cordova has been loaded. Perform any initialization that requires Cordova here.
            var parentElement: HTMLElement = document.getElementById("deviceready");
            var listeningElement: Element = parentElement.querySelector(".listening");
            var receivedElement: Element = parentElement.querySelector(".received");
            listeningElement.setAttribute("style", "display:none;");
            receivedElement.setAttribute("style", "display:block;");
            document.getElementById("button2").addEventListener("click", onButton2Click);
        }
 
        function onButton2Click(): void {
            window.location.href = "page.html";
        }

 

page.ts:

      function onDeviceReady(): void {
            // handle the Cordova pause and resume events
            document.addEventListener("pause", onPause, false);
            document.addEventListener("resume", onResume, false);
            // todo: Cordova has been loaded. Perform any initialization that requires Cordova here.
            var parentElement: HTMLElement = document.getElementById("deviceready");
            var listeningElement: Element = parentElement.querySelector(".listening");
            var receivedElement: Element = parentElement.querySelector(".received");
            listeningElement.setAttribute("style", "display:none;");
            receivedElement.setAttribute("style", "display:block;");
            document.getElementById("button2").addEventListener("click", onButton2Click);
        }
 
        export function onButton2Click(): void {
            window.history.back();
        }

 


TypeScript

Categories

Share

Follow


KodFor Privacy Policy