Visual Studio

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 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 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 for 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 a 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.

Apache Cordova

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 Message Box and click OK button.

Apache Cordova

Step 3

Main screen is shown below.

Apache Cordova

Step 4

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

Apache Cordova

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.

Apache Cordova

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

    1. <ons-page>  
    2.     <ons-toolbar>  
    3.         <div class="center">Dialog Box</div>  
    4.     </ons-toolbar>  
    5.     <ons-list>  
    6.         <ons-list-header>Showing dialog Box in Onsen UI</ons-list-header>  
    7.         <ons-list-item tappable onclick="showDialog('dialog-1')">Simple dialog</ons-list-item>  
    8.         <ons-list-item tappable onclick="showDialog('dialog-2')">Alert dialog</ons-list-item>  
    9.         <ons-list-item tappable onclick="fromTemplate()">From template</ons-list-item>  
    10.         <ons-list-header>Notifications</ons-list-header>  
    11.         <ons-list-item tappable onclick="ons.notification.alert('Hello, world')">Alert</ons-list-item>  
    12.         <ons-list-item tappable onclick="ons.notification.confirm({message: 'Are you ready?'})">Confirmation</ons-list-item>  
    13.         <ons-list-item tappable onclick="ons.notification.prompt({message: 'What is your name?'})">Prompt</ons-list-item>  
    14.     </ons-list>  
    15. </ons-page>  
    Apache Cordova

     

  2. 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 simple button to hide the Dialog Box

    Coding

    1. <ons-dialog id="dialog-1">  
    2.     <div style="text-align: center; padding: 10px;">  
    3.         <p>This is a dialog box.  
    4.             <p>  
    5.                 <p>  
    6.                     <ons-button onclick="hideDialog('dialog-1')">Close</ons-button>  
    7.                 </p>  
    8.     </div>  
    9. </ons-dialog>  
    Apache Cordova

     

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

    1. <ons-alert-dialog id="dialog-2">  
    2.     <div class="alert-dialog-title">Warning!!</div>  
    3.     <div class="alert-dialog-content">  
    4.         An error has occurred!  
    5.     </div>  
    6.     <div class="alert-dialog-footer">  
    7.         <button class="alert-dialog-button" onclick="hideDialog('dialog-2')"> Cancel</button>  
    8.         <button class="alert-dialog-button" onclick="hideDialog('dialog-2')">OK</button>  
    9.     </div>  
    10. </ons-alert-dialog>  
    Apache Cordova

     

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

    1. <ons-template id="dialog.html">  
    2.     <ons-dialog id="dialog-3">  
    3.         <div style="text-align: center; padding: 10px;">  
    4.             <p>  
    5.                 This dialog box was created from a template.  
    6.             </p>  
    7.             <p>  
    8.                 <ons-button onclick="hideDialog('dialog-3')">Close</ons-button>  
    9.             </p>  
    10.         </div>  
    11.     </ons-dialog>  
    12. </ons-template>  
    Apache Cordova

     

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

    1. var showDialog = function(id) {  
    2.     document  
    3.         .getElementById(id)  
    4.         .show();  
    5. };  
    6. var hideDialog = function(id) {  
    7.     document  
    8.     getElementById(id)  
    9.     hide();  
    10. };  
    11. var fromTemplate = function() {  
    12.     var dialog = document.getElementById('dialog-3');  
    13.     if (dialog) {  
    14.         dialog.show();  
    15.     } else {  
    16.         ons.createDialog('dialog.html')  
    17.         then(function(dialog) {  
    18.             dialog.show();  
    19.         });  
    20.     }  
    21. };  
    Apache Cordova

     

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

Apache Cordova

Output

Main Screen is given below.

Apache Cordova

Output 1

Simple Dialog box, as shown below.

Apache Cordova

Output 2

Alert Dialog box, as shown below.

Apache Cordova

Output 3

Template Dialog box, as shown below.

Apache Cordova

Output 4

Alert Notification box, as shown below.

Apache Cordova

Output 5

Confirm Notification box, as shown below.

Apache Cordova

Output 6

Prompt Notification box, as shown below.

Apache Cordova

Conclusion

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

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs