Working With Onsen UI Splitter Apps In Visual Studio 2015

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

Apache Cordova

Apache Cordova is an open source project, which aims at allowing 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 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 for developing cross-platform mobile apps, using Apache Cordova and PhoneGap. It’s fully independent of the 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 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 four templates. 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 detail page.
  3. Onsen UI Splitter - It contains a side menu navigation.
  4. Onsen UI Tab Bar - Tab bar style navigation.

Building Splitter apps with Onsen UI framework.

Let’s see how to start building Splitter 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 Splitter app, using Onsen UI framework, using Visual Studio 2015.

Step 1

Create an Onsen UI App

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

Onsen UI

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 Splitter app and click OK button.

Onsen UI

Step 3

Main Screen will look, as shown below.

Onsen UI

Step 4

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

Onsen UI

This table 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 app.
www This file contains the images, library and JS files.
config.xmlContains the settings of our app.
taco.jsonDefines which version of the Cordova CLI Visual Studio uses to build the project.

Step 5

Adding the Coding

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

Onsen UI

Step 6
 
Creating Splitter left-side Menu

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

Lets see how to design the following left-side menu.

Onsen UI
 
 
 

Coding

Explanation

<ons-splitter id="mySplitter">

Create a menu list

<ons-list class="menu-list">

Add the menu

<ons-list-item class="longdivider menu-item">

Create the item to the menu

<ons-icon icon="fa-plus" class="list__item__icon">

Create the icon(+)

<ons-list class="bottom-menu-list">

Create the bottom menu list. Eg. Setting, Help etc


 

 
 
 
 
Onsen UI

Step 7
 
Creating Main Screen

Go the www->index.html in the solution bar and add HTML coding. Lets see how to design the Main menu, as shown below.

Onsen UI
<ons-toolbar> Create the Main tool bar.
<ons-icon icon="ion-navicon, material:md-menu">Create the Icon.
<div class="center">Main</div>Add the Caption.

Onsen UI

Step 8

Creating a New Page

Go the www->index.html in the solution bar and add HTML coding.

Let's see how to design the another page, as shown below.

Onsen UI
<ons-template id="another-page.html">Creating the template page.
<ons-page> Adding the page.
<ons-toolbar> Adding the tool bar.
<ons-icon icon="ion-navicon, material:md-menu">Adding the icon to the page.

Onsen UI

Step 9

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

Onsen UI

Output

Main Screen is shown below.

Onsen UI

Output 1

After Adding the Data, the Window looks, as shown below.

Onsen UI

Output 2

Split Window looks, as shown below.

Onsen UI

Output 3

Open a new file, which looks, as shown below.

Onsen UI

Conclusion

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

Up Next
    Ebook Download
    View all
    Learn
    View all