Post
Ask Question

Understanding Dialog Box In Onsen UI Using 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 to allow mobile developers to build applications for all the major mobile platforms, using HTML, CSS, and JavaScript technologies.

Monaca

  1. 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.
  2. Monaca's Cloud-based IDE builds HTML5 hybrid mobile apps for iOS, Android, Windows, and Chrome apps, using HTML, CSS, and JavaScript.
  3. Monaca CLI provides Onsen UI templates, device debugger, remote building, and any service that you might need directly from your terminal.

Onsen UI Framework

  1. 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.
  2. 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 Dialog Box with Onsen UI Framework

Let’s see how to start building the App using Dialog Box 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 Dialog Box, 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.

Onsen UI App

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

Onsen UI Message Box

Step 3. The main screen is shown below.

Apache Cordova

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

Apache Cordova resemble

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.

HTML coding

Assigning the dialog box

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

Explanation
 

Coding Explanation
<ons-page> Create a Page
<ons-toolbar> Add the Toolbar
<ons-list> Getting Input from the user
<ons-list-header> Adding Header to the List
<ons-list-item tappable> Apply tappable list item
onclick="showDialog('dialog-1')” Assigning Dialog box
onclick="ons. notification.alert('Hello, world')" Assigning Alert Dialog box
onclick="ons. notification.confirm({message: 'Are you ready?'})" Assigning Confirm Dialog box
onclick="ons. notification.prompt({message: 'What is your name?'})" Assigning Prompt Dialog box


Coding

<ons-page>  
    <ons-toolbar>  
        <div class="center">Dialog Box</div>  
    </ons-toolbar>  
    <ons-list>  
        <ons-list-header>Showing dialog Box in Onsen UI</ons-list-header>  
        <ons-list-item tappable onclick="showDialog('dialog-1')">Simple dialog</ons-list-item>  
        <ons-list-item tappable onclick="showDialog('dialog-2')">Alert dialog</ons-list-item>  
        <ons-list-item tappable onclick="fromTemplate()">From template</ons-list-item>  
        <ons-list-header>Notifications</ons-list-header>  
        <ons-list-item tappable onclick="ons.notification.alert('Hello, world')">Alert</ons-list-item>  
        <ons-list-item tappable onclick="ons.notification.confirm({message: 'Are you ready?'})">Confirmation</ons-list-item>  
        <ons-list-item tappable onclick="ons.notification.prompt({message: 'What is your name?'})">Prompt</ons-list-item>  
    </ons-list>  
</ons-page>

Cordova

Designing and Displaying the Simple Dialog box

Next, we need to display the Simple dialog box.

Explanation
 

Coding Explanation
<ons-dialog id="dialog-1"> Displaying the Onsen Dialog Box
<ons-button onclick="hideDialog('dialog-1')"> Assign a simple button to hide the Dialog Box


Coding

<ons-dialog id="dialog-1">  
    <div style="text-align: center; padding: 10px;">  
        <p>This is a dialog box.</p>  
        <p>  
            <ons-button onclick="hideDialog('dialog-1')">Close</ons-button>  
        </p>  
    </div>  
</ons-dialog>

Hide dialog

Design and Displaying the Alert Dialog box

Next, we need to display the Alert dialog box.

Explanation
 

Coding Explanation
<ons-alert-dialog id="dialog-2"> Displaying the Onsen Dialog Box 2
<button class="alert-dialog-button" onclick="hideDialog('dialog-2')"> Displaying the alert dialog box


Coding

<ons-alert-dialog id="dialog-2">
    <div class="alert-dialog-title">Warning!!</div>
    <div class="alert-dialog-content">
        An error has occurred!
    </div>
    <div class="alert-dialog-footer">
        <button class="alert-dialog-button" onclick="hideDialog('dialog-2')"> Cancel</button>
        <button class="alert-dialog-button" onclick="hideDialog('dialog-2')"> OK</button>
    </div>
</ons-alert-dialog>

Apache dialog

Design and Displaying the Template Dialog box

Next, we need to display the Template dialog box.

Explanation
 

Coding Explanation
<ons-alert-dialog id="dialog-3"> Displaying the Onsen Dialog Box 3
<ons-button onclick="hideDialog('dialog-3')"> Displaying the template dialog box


Coding

<ons-template id="dialog.html">  
    <ons-dialog id="dialog-3">  
        <div style="text-align: center; padding: 10px;">  
            <p>  
                This dialog box was created from a template.  
            </p>  
            <p>  
                <ons-button onclick="hideDialog('dialog-3')">Close</ons-button>  
            </p>  
        </div>  
    </ons-dialog>  
</ons-template>

Template ID

Add Java Script Coding

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

Explanation
 

Coding Explanation
var showDialog = function(id) It shows the Dialog Box
var hideDialog = function(id) It hides the Dialog Box
var fromTemplate = function() It displays the template Dialog Box


Coding

var showDialog = function(id) {  
    document
        .getElementById(id)
        .show();  
};  
var hideDialog = function(id) {  
    document  
        .getElementById(id)  
        .hide();  
};  
var fromTemplate = function() {  
    var dialog = document.getElementById('dialog-3');  
    if (dialog) {  
        dialog.show();  
    } else {  
        ons.createDialog('dialog.html')  
        .then(function(dialog) {  
            dialog.show();  
        });  
    }  
};

Coding

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

Run the Application

Output

The Main Screen is given below.

Main Screen

Output 1. Simple Dialog box, as shown below.

Simple Dialog box

Output 2. Alert Dialog box, as shown below.

Alert Dialog box

Output 3. Template Dialog box, as shown below.

Template Dialog box

Output 4. Alert Notification box, as shown below.

Alert Notification box

Output 5. Confirm the Notification box, as shown below.

Confirm the Notification box

Output 6. Prompt Notification box, as shown below.

Prompt Notification box

Conclusion

I hope you understand how to start the Dialog box in Onsen UI using Visual Studio 2015 and how to run it.


Similar Articles