Create "Hello World" App In Onsen UI Using Visual Studio 2015

Before reading this article, please go through the links, mentioned below.

Apache Cordova

Apache Cordova is an open-source project that aims at allowing mobile developers to build applications for all major mobile platforms, using HTML, CSS, and JavaScript technologies.

Monaca

Monaca is a software tools and services solution for building and deploying HTML5 mobile hybrid apps. Built on top of open-source Apache Cordova, Monaca provides a full suite of resources, including Cloud IDE, local development tools, debugger, and back-end support.

Monaca's Cloud-based IDE builds HTML5 hybrid mobile apps for iOS, Android, Windows, and Chrome apps using HTML, CSS, and JavaScript.

Monaca CLI provides Onsen UI templates, device debugger, remote building, and any service you might need directly from your terminal.

Onsen UI Framework

Onsen UI is a front-end UI framework for developing cross-platform mobile apps, using Apache Cordova and PhoneGap. It’s fully independent of frameworks - you can easily plug these components into any project, regardless of the JavaScript framework.

Onsen UI templates can be used with Visual Studio 2015. All templates are compatible with Visual Studio Tools for Apache Cordova. It works pretty well with UWP, iOS, and Android apps.

Templates Included in Onsen UI Framework

It is packed with the following 4 templates. Each template has JavaScript and TypeScript variants.

Onsen UI Blank: Contains the blank app
Onsen UI Navigation: Contains a navigator with a master and detail page.
Onsen UI Splitter: Contains a side menu navigation.
Onsen UI Tab Bar: Tab bar style navigation.

Building: Hello World" app with Onsen UI Framework

Here, first, we create the Button control so that if you click on the button, it will display the "Hello World" message.

Let’s see how.

Prerequisites

Visual Studio 2015.
Visual Studio Tools for Apache Cordova.

Follow the steps, mentioned below, to build an Onsen UI "Hello World" app, using Onsen UI Framework in Visual Studio 2015.

Step 1. Create a project

Create a new project. Open Visual Studio 2015 and click File -> New -> Project.

Visual Studio

Step 2. Select the project type and name the project.

The New Project window will open. Subsequently, you can select Installed -> Template -> Java Script -> Manoca ->Onsen UI Blank App.

Type your project name as Onsen UI HelloWorldApp and click OK.

Onsen UI

The main screen will be like the following.

Main screen

Once, we create the project, our solution should resemble the following.

Create the project

This table gives the basic idea of how we might use each one.

File/Folder	Why it is used in our project
Merge Folder	It contains the package for Android, iOS, and Windows app.
www	This file contains images, library, and js files.
config.xml	Contains the settings of our app.
taco.json	Defines which version of the Cordova CLI Visual Studio is used to build the project.

Step 3. Adding the Code

Go to the index.html in Solution Explorer and add the HTML code. We can add our own HTML coding in between <body> tags.

Adding the Code

Adding a Simple button

Go to the index.html and add the following HTML code.

Explanation

Coding	Explanation
<ons-page id="hello world">	Create a page
<ons-toolbar>	Create the toolbar
<ons-toolbar-button>	Add the button to the toolbar
<ons-icon icon="ion-favicon, material:md-menu">	Add the Navigation icon
<ons-button>	Add the button

Coding

<ons-page id="helloworld">
    <ons-toolbar>
        <div class="center"></div>
        <div class="right">
            <ons-toolbar-button>
                <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
            </ons-toolbar-button>
        </div>
    </ons-toolbar>
    <div class="center">
        <br /><br /> Hello World Program Using Button Control in Onsen UI App Using Visual Studio 2015
        <br /><br /> Welcome to My Hello World Program!!!!!
        <br /><br /><br /><br />
    </div>
    <p style="text-align: center">
        <ons-button>Click me!!!</ons-button>
    </p>
</ons-page>

Code

Adding JavaScript Program

Go to the index.js and add the following JavaScript code. After you click on the button, it will display the alert message.

Explanation

Coding	Explanation
document.addEventListener('init', function (event)	Create the Event Listener to the button
(page.matches('#helloworld'))	Add the Page
page.querySelector('ons-toolbar .center')	Display the toolbar on the center position
innerHTML = 'Hello World Program'	Display the Text on the Menu bar
page.querySelector('ons-button').onclick = function ()	Write the script on on click event
ons. notification.alert('Hello world!!!!');	Display the notification

Coding

document.addEventListener('init', function(event) {
    var page = event.target;
    if (page.matches('#helloworld')) {
        page.querySelector('ons-toolbar .center').innerHTML = 'Hello World Program';
        page.querySelector('ons-button').onclick = function() {
            ons.notification.alert('Hello world!!!!');
        };
    }
});

Index

Changing the Alert message

There are three types of Alert messages used in Onsen UI Framework.

Types	Meaning
ons. notification. alert	Display the OK button only
ons.notification.confirm	Display OK and Cancel button
ons. notification. prompt	Display with the OK button and enter the message also