Developing Login Page In Onsen UI Using Visual Studio 2015

Alagunila Meganathan
May 22
22k
0
1

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 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 Login Page with Onsen UI Framework

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

Login Page

A login, logging in, or logging on is the entering of identifying information into a system by a user in order to access that system (e.g., a computer a website, or an app).

A login generally requires the user to enter two pieces of information; i.e., first the user name and then the password. This information is entered into a login page

A user name is also referred to as an account name. A password differs from a user name, which is intended to be kept secret.

Prerequisites

Visual Studio 2015.
Visual Studio Tools for Apache Cordova.

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

Apache

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

Ok button

Step 3. The main&nbsscreen is shown below.

Main screen

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

Create the project

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.

Coding

Adding the controls

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-input>	Getting Input from the user
<ons-button>	Create a Submit button

Coding

<ons-page>
    <br /><br />
    <ons-toolbar>
        <div class="center">Login Page Using Onsen UI</div>
    </ons-toolbar>
    <div style="text-align: center; margin-top: 30px;">
        <p>
            <ons-input id="username" modifier="underbar" placeholder="Username" float></ons-input>
        </p>
        <p>
            <ons-input id="password" modifier="underbar" type="password" placeholder="Password" float></ons-input>
        </p>
        <p style="margin-top: 30px;">
            <ons-button onclick="login()">Sign in</ons-button>
        </p>
    </div>
</ons-page>

HTML

Add Validating Coding

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

Explanation

Coding	Explanation
login	Adding the Login function
ons. notification. alert	Displaying the Alert Message

Coding

var login = function() {
    var username1 = document.getElementById('username').value;
    var password1 = document.getElementById('password').value;
    if (username1 === 'admin' && password1 === 'admin') {
        ons.notification.alert('Congratulations!');
    } else {
        ons.notification.alert('Incorrect username or password.');
    }
};

Index