Post
Ask Question

Working With Onsen UI Tab Bar Apps In Visual Studio 2015

Before reading this article, please go through the article's link, mentioned below.

Apache Cordova

Apache Cordova is an open source project, which aims at allowing 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 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 the  following 4 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 Tab Bar Apps with Onsen UI Framework

Let’s see how to start building Tab BaraApp 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 Onsen UI Tab Bar 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 Option for New Apache Cordova App, using Onsen UI framework.

Visual Studio

Step 2
 
Give the Project Name

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

Type Project name Onsen UI Tabbar app and click OK button.

Visual Studio

Step 3

Main screen is shown below. 

Visual Studio

Step 4

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

Visual Studio

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.xml Contains the settings of our app.
taco.json Defines which version of the Cordova CLI Visual Studio uses to build the project.

Step 5

Adding the coding

  1. Adding the Simple User Text

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

    Coding
     <br />Welcome to Onsen UI Tab Bar App, using Visual Studio 2015 <br />

    Visual Studio

Step 6 Creating Home Page

Go to the www->index.html in the Solution Bar and add HTML coding.

Let’s see how to design the page, mentioned below.

Visual Studio

Coding Explanation
<ons-template id="home.html"> Create a template.
<ons-page id="home-page"> Add the page.
<ons-toolbar> Create the toolbar.
<ons-list> Create the list.
<ons-list-item tappable onclick="alertMessage()"> Add the list to the item. If you click on the list, it will open the alert message.
<div class="list__item__title"> Add the list title.
<div class="list__item__subtitle"> Add the subtitle to the list.

Visual Studio

Now, edit the user data on the templates.

Visual Studio

Likewise, we add the remaining data.

Coding

  1. <ons-template id="home.html">  
  2.     <ons-page id="home-page">  
  3.         <ons-toolbar>  
  4.             <div class="left">  
  5.                 <ons-toolbar-button onclick="alertMessage()">  
  6.                     <ons-icon icon="ion-compose"></ons-icon>  
  7.                 </ons-toolbar-button>  
  8.             </div>  
  9.             <div class="center">Home</div>  
  10.         </ons-toolbar>  
  11.         <!-- This list will be filled on page initialization --><br /> Welcome to Onsen UI Tab Bar App Using Visual Studio 2015 <br />  
  12.         <ons-list>  
  13.             <ons-list-item tappable onclick="alertMessage()">  
  14.                 <div class="left">  
  15.                     <div class="list__item__thumbnail picture"></div>  
  16.                 </div>  
  17.                 <div class="center">  
  18.                     <div class="list__item__title">Apple</div>  
  19.                     <div class="list__item__subtitle">Delicious and crunchy, apple fruit is one of the most popular and favorite fruits among the health conscious, fitness lovers who firmly believe in the concept of “health is wealth.</div>  
  20.                 </div>  
  21.             </ons-list-item>  
  22.         </ons-list>  
  23.         <ons-list>  
  24.             <ons-list-item tappable onclick="alertMessage()">  
  25.                 <div class="left">  
  26.                     <div class="list__item__thumbnail picture"></div>  
  27.                 </div>  
  28.                 <div class="center">  
  29.                     <div class="list__item__title">Bananna</div>  
  30.                     <div class="list__item__subtitle">A banana is a curved, yellow fruit with a thick skin and soft sweet flesh</div>  
  31.                 </div>  
  32.             </ons-list-item>  
  33.         </ons-list>  
  34.         <ons-list>  
  35.             <ons-list-item tappable onclick="alertMessage()">  
  36.                 <div class="left">  
  37.                     <div class="list__item__thumbnail picture"></div>  
  38.                 </div>  
  39.                 <div class="center">  
  40.                     <div class="list__item__title">Cherry</div>  
  41.                     <div class="list__item__subtitle">A small fruit, usually red, black or yellow, with a smooth hard seed and a short hard stem.</div>  
  42.                 </div>  
  43.             </ons-list-item>  
  44.         </ons-list>  
  45.         <ons-list>  
  46.             <ons-list-item tappable onclick="alertMessage()">  
  47.                 <div class="left">  
  48.                     <div class="list__item__thumbnail picture"></div>  
  49.                 </div>  
  50.                 <div class="center">  
  51.                     <div class="list__item__title">Grapes</div>  
  52.                     <div class="list__item__subtitle">A grape is a fruiting berry of the deciduous woody vines of the botanical genus Vitis.</div>  
  53.                 </div>  
  54.             </ons-list-item>  
  55.         </ons-list>  
  56.     </ons-page>  
  57. </ons-template>  
Step 7 Creating Second Screen

Go the www->index.html in the Solution Bar and add HTML coding.

Lets see how to design the Setting screen, mentioned below.

Visual Studio

 

Coding Explanation
<ons-row class="profile-wrapper"> Create the row.
<ons-col width="60px"> Create the column with width size.
<div class="list__item__thumbnail picture"> Add the thumbnail.
<div class="profile-name"> Add the caption.
<div class="profile-email"> Add the Email ID.
<div class="settings-header"> Create a header.
<ons-list modifier="inset" class="settings-list"> Create the list.
<ons-list-item modifier="longdivider"> Add the items to the list.
<label class="center" for="twitter-switch"> Insert the label that switch to other file.
  1. Designing the Second page Facebook, Terms of Service

    Now, we set the thumbnail, set the name and mail ID. Subsequently, we create the toggle button also.

    Visual Studio

    Visual Studio

  2. Designing the Second page – Privacy Policy and Sign out

    Now, we design the privacy policy and sign out options.

    Visual Studio

    Visual Studio

Step 8

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 Timeline Window is shown below.

Visual Studio

Output 1

Setting Window is shown below.

Visual Studio

Output 2

Tabbed Window is shown below.

Visual Studio

Output 3

Add the User text is shown below.

Visual Studio

Output 4

After Editing User text is shown below.

Visual Studio

Conclusion

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


Similar Articles