Post
Ask Question

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 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.

  1. Onsen UI Blank - Contains the blank app
  2. Onsen UI Navigation - Contains a navigator with a master and detail page.
  3. Onsen UI Splitter - Contains a side menu navigation.
  4. 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.

Visual Studio

The main screen will be like the following.

Visual Studio

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

Visual Studio

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

  1. 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

    1. <ons-page id="helloworld">  
    2.     <ons-toolbar>  
    3.         <div class="center"></div>  
    4.         <div class="right">  
    5.             <ons-toolbar-button>  
    6.                 <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>  
    7.             </ons-toolbar-button>  
    8.         </div>  
    9.     </ons-toolbar>  
    10.     <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>  
    11.     <p style="text-align: center">  
    12.         <ons-button>Click me!!!</ons-button>  
    13.     </p>  
    14. </ons-page>  
    Visual Studio
           
  2. 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

    1. document.addEventListener('init', function(event) {  
    2.     var page = event.target;  
    3.     if (page.matches('#helloworld')) {  
    4.         page.querySelector('ons-toolbar .center').innerHTML = 'Hello World Program';  
    5.         page.querySelector('ons-button').onclick = function() {  
    6.             ons.notification.alert('Hello world!!!!');  
    7.         };  
    8.     }  
    9. });  
    Visual Studio
           
  3. 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

Visual Studio

Output 1

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

Visual Studio

Output 2

With Alert Message - ons.notification.alert

Visual Studio

Output 3

With Alert Message - ons.notification.confirm

Visual Studio

Output 4

With Alert Message - ons.notification.prompt

Visual Studio

Conclusion

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


Similar Articles