Working With Onsen UI Navigation Apps In Visual Studio 2015

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

• Quick Start On Apache Cordova Using Visual Studio 2015
• Getting Started With Onsen UI Apps In Visual Studio 2015
• Getting Started With Ionic Blank App Using Visual Studio 2015
• Getting Started With Ionic Side Menu App Using Visual Studio 2015
• Getting Started With Ionic Tabs App Using Visual Studio 2015

Apache Cordova

Apache Cordova is an open source project, which aims to allow the mobile developers to build the Applications for all the major mobile platforms, using HTML, CSS and JavaScript technologies.

Monaca

Monaca is a software tool and Service solution to build and deploy HTML5 mobile hybrid apps. It is built on top of an open source Apache Cordova. Monaca provides a full-suite of resources including Cloud IDE, local development tools, debugger and the 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 which you might need directly from your terminal.

Onsen UI Framework

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

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

Templates Included in Onsen UI Framework

It is packed with the 4 templates, given below. Each template has JavaScript and TypeScript variants.

1. Onsen UI Blank
   It contains the Blank app
   
   
2. Onsen UI Navigation
   It contains a navigator with a master and a detail page.
   
   
3. Onsen UI Splitter
   Contains a side menu navigation.
   
   
4. Onsen UI Tab Bar
   Tab bar style navigation.

Building Navigation Apps with Onsen UI Framework

Let’s see how to start building Navigation app with Onsen UI framework, using Visual Studio 2015.

Prerequisites

• Visual Studio 2015.
• Visual Studio Tools for Apache Cordova.

Follow the steps, mentioned below to build a Onsen UI Navigation App, using Onsen UI Framework using Visual Studio 2015.

Step 1 

Create an Onsen UI App

Let’s be ready to create a New Project. Open Visual Studio 2015 and click File -> New -> Project for New Apache Cordova app, using Onsen UI framework.



Step 2 

 

Give the project name

New Project Window will open. Subsequently, you can select an Installed -> Template -> Java Script -> Manoca ->Onsen UI Navigation.

Type Project name Onsen UI Navigation-app and click OK button.



Step 3

Main screen will look, as shown below.



Step 4

Afterwards, we create the project. Our solution should resemble the one shown below.



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

 

File	Why is it in your project?
Merge Folder	It contains the Package for Android, ios and Windows apps.
www	This file contains the images, library and JS files.
config.xml	It contains the settings of our app.
taco.json	It defines which version of the Cordova CLI Visual Studio is used to build the project.

Step 5

Adding the coding

Go to index.html in the solution bar and add HTML coding.



Step 6

Go to www->js->app.js in the solution bar and add JavaScript coding.



Step 7

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



Output

Main screen will look, as shown below.



Output 1

After adding the user data, click on the Apple Item.



Output 2

It navigates to the next screen.



Output 3

Click the arrow to navigate to the first screen.



Conclusion

I hope, you understood how to start Onsen UI Navigate app, using Visual Studio 2015 and how to run it.