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

Article

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 the 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 JavaScript framework.

Onsen UI templates can be used with Visual Studio 2015. All templates are compatible for 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.

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.

Visual Studio

The main screen will be like the following.

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

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.

Visual Studio

Adding a Simple button

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

Explanation

Coding	Explanation
<ons-page id="helloworld">	Create a page
<ons-toolbar>	Create the toolbar
<ons-toolbar-button>	Add the button to the toolbar
<ons-icon icon="ion-navicon, 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>

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 center position
innerHTML = 'Hello World Program'	Display on the Text on the Menu bar
page.querySelector('ons-button').onclick = function ()	Write the script on onclick 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!!!!');
};
}
});

Changing the Alert message

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

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

Step 4 - Run the application

Now, we are ready to run our project. Thus, click the Ripple – Nexus (Galaxy) to run the application. (Apache Ripple is a free mobile simulator).

Visual Studio

Output

Main Screen

Output 1

Displays the Alert - "Hello World !!!" message

Output 2

With Alert Message - ons.notification.alert

Output 3

With Alert Message - ons.notification.confirm

Output 4

With Alert Message - ons.notification.prompt

Conclusion

I hope you understood how to create the "Hello World" app in Onsen UI, using Visual Studio 2015 and how to run it.

Up Next

Ebook Download

View all

Printing in C# Made Easy

Read by 10.8k people

Download Now!

Learn

View all

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