Working With PopOver Control In Onsen UI Using Visual Studio 2015

Alagunila Meganathan
Dec 26, 2016
2.7k
0
2
Article

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

Monaca is a software tool and Service solution for building and deploying 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 to develop cross-platform mobile apps, using Apache Cordova and PhoneGap. It’s fully independent of the 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 with Visual Studio Tools for Apache Cordova. It works pretty well with Windows Universal, iOS and Android apps.

Building PopOver with Onsen UI Framework

A PopOver can be used to display some additional information about a component.

Let’s see how to start building the app, using PopOver in Onsen UI Framework, using Visual Studio 2015.

Prerequisites

Visual Studio 2015.
Visual Studio Tools for Apache Cordova.

Follow the steps, mentioned below, to build an Onsen UI with PopOver, 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.

Step 2

Give the Project Name

"New Project" window will open. Subsequently, you can select an Installed -> Template -> JavaScript -> Manoca ->Onsen UI Blank app.

Type Project name Onsen UI PopOver and click OK button.

Step 3

Main screen is shown below.

Step 4

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

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. We can add our own HTML coding in between <body> tags.

Displaying the PopOver Control

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

Coding

<ons-page>
<ons-toolbar>
<div class="center">Popover</div>
</ons-toolbar>
<p style="text-align: center; margin: 50% 0;">
<ons-button onclick="showPopover(this)">Click me</ons-button>
</p>
</ons-page>
<ons-popover direction="up" id="popover">
<div style="padding: 10px; text-align: center;">
<p> This is a popover </p>
<p>
<ons-button onclick="hidePopover()">Close</ons-button>
</p>
</div>
</ons-popover>

Adding Javascript Coding

Go to the index.js in the Solution Bar and add javascript coding

Explanation

Coding	Explanation
<ons-page>	Create a page
<ons-toolbar>	Add the toolbar
<ons-button>	Create the button
<ons-popover direction="up" id="popover">	Create the popover box and display it in the upward direction

Coding

var showPopover = function(target)
{
document.getElementById('popover').show(target);
};
var hidePopover = function() {
document.getElementById('popover').hide();
};

Step 6

Run the Application

Now, we are ready to run our Project. Thus, click Ripple – Nexus (Galaxy) to run the Application. (Apache Ripple is a free mobile simulator).

Output

Main Screen is given below.

Output 1

PopOver dialog box is shown below.

Conclusion

I hope, you understood how to start the PopOver control in Onsen UI, using Visual Studio 2015 and how to run it.