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 Applications for all the major mobile platforms, using HTML, CSS, and JavaScript technologies.

Monaca

Onsen UI Framework

Templates included in the 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 the Onsen UI framework

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

Prerequisites

Follow the steps, mentioned below to build an Onsen UI Splitter app, using the 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 the File -> New -> Project option for the New Apache Cordova app, using the Onsen UI framework.

Onsen UI App

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 the Project name Onsen UI Splitter app and click the OK button.

Onsen UI Splitter app

Step 3. The Main Screen will look, as shown below.

Onsen UI looks

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

Onsen UI solution

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 apps.
www This file contains the 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 5. Adding the Coding.

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

HTML coding

Step 6. Creating Splitter left-side Menu.

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

Let's see how to design the following left-side menu.

Splitter left-side

Coding Explanation
<ons-splitter id="mySplitter"> Create a menu list
<ons-list class="menu-list"> Add the menu
<ons-list-item class="long divider 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. Let's see how to design the Main menu, as shown below.

Main Screen

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

Add the Caption

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 other page, as shown below.

New Page

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

Creating the template page

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

Run

Output

The Main Screen is shown below.

Main Screen

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

Adding the Data

Output 2. Split Window looks, as shown below.

Split Window looks

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

New file

Conclusion

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