Post
Ask Question

Working With Switch Control 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 that 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 with Visual Studio Tools for Apache Cordova. It works pretty well with

Windows Universal, iOS, and Android apps.

Building Switches with Onsen UI Framework

A switch is a UI element that can be used to toggle between two states (On/Off). The state of a switch can be changed both by dragging the knob and by tapping on the switch.

It allows the user to change a setting between two states. It displays checked/unchecked states as a button. It is basically an on/off button with a light indicator. It is beneficial if the user has to change the setting between two states. It can be used to turn sound on/off, for wi-fi, Bluetooth, etc.

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

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 Switch and click the OK button.

Project Name

Step 3. The main screen is shown below.

Main screen

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

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

Adding the Coding

Adding the Switches.

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-switch> Add Switch to the List
<ons-switch checked> Add switch with Checked mode
<ons-switch disabled> Add switch with Disabled mode

Coding

<ons-page>

    <ons-toolbar>
        <div class="center">Using Switches on Onsen UI</div>
    </ons-toolbar>

    <ons-list>
        <ons-list-header>Settings</ons-list-header>
        
        <ons-list-item>
            <div class="center"> Bluetooth </div>
            <div class="right">
                <ons-switch checked></ons-switch>
            </div>
        </ons-list-item>

        <ons-list-item>
            <div class="center"> Camera </div>
            <div class="right">
                <ons-switch></ons-switch>
            </div>
        </ons-list-item>

        <ons-list-item>
            <div class="center"> WIFI </div>
            <div class="right">
                <ons-switch disabled> </ons-switch>
            </div>
        </ons-list-item>

    </ons-list>

</ons-page>

Toolbar

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

Application

Output 1. The Main Screen is given below.

Output

Output 2. Changing the state, as shown below.

Changing the state

Conclusion

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


Similar Articles