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.
![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]()
- 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>
![Visual Studio]()
- 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!!!!');
- };
- }
- });
![Visual Studio]()
- 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.