Getting Started With Onsen UI Apps In Visual Studio 2015

Before reading this article, please go through the article links, mentioned below.

Apache Cordova

Apache Cordova is an open-source project, that aims at allowing mobile developers to build applications for all the major mobile platforms, using HTML, CSS, and JavaScript technologies.

What is Monaca?

Monaca is a software tool and a Service solution to build and deploy HTML5 mobile hybrid apps, which 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. Multi-platform app development utilizes native language components and functionalities. Monaca is framework agnostic and provides integration with Onsen UI and Ionic Framework for building user interfaces.

Onsen UI Framework Completely integrated with Monaca kit, a complete set of tools that makes PhoneGap/Cordova development super simple.

Monaca CLI provides Onsen UI templates, device debugger, remote building, and any service you might need directly from your terminal.

What is the Onsen UI Framework?

Onsen UI is a front-end UI framework for developing cross-platform mobile apps using Apache Cordova and PhoneGap.

It is highly flexible and gives hybrid apps a native look and feel on all platforms. When used with Monaca, it is simple to add backend features and device support, resulting in a publishable app.

Onsen UI 2.0 was released and supports React, Angular 1 and 2, and Web Components together within your Cordova app. With more than 100 components, you can easily create great-looking HTML5 hybrid mobile apps with Material and Flat design.

It’s fully independent of frameworks - you can easily plug these components into any project, regardless of the JavaScript framework.

Onsen UI templates can be used with Visual Studio 2015. All templates are compatible with Visual Studio Tools for Apache Cordova. It works pretty well with Windows Universal, iOS, and Android apps.

Why use the Onsen UI Framework?

Onsen UI is a front-end development tool that radically improves PhoneGap/Cordova apps.

Onsen UI is a new JavaScript and CSS framework for developing mobile apps.

With a focus on native-like performance, user experience, responsive design, and diverse platforms, it seems quite promising.

Key Features

Cross-platform development using HTML5 and AngularJS.
Quick start to develop Onsen UI apps using Visual Studio 2015.
JavaScript and TypeScript support.
Develop Windows Universal, iOS, and Android apps with single source code.

Onsen UI Icon

Cordova

Templates Included

It is packed with the following 4 templates. Each template has JavaScript and TypeScript variants.

Onsen UI Blank: Contains the Blank App
Onsen UI Navigation: Contains a navigator with a master and detail page.
Onsen UI Splitter: Contains a side menu navigation.
Onsen UI Tab Bar: Tab bar style navigation.

Onsen UI Framework Features

The important features of the Onsen UI Framework are listed below.

AngularJS: Onsen is using AngularJS MVC architecture to build rich single page Applications, which are optimized for mobile devices.
CSS Components: With a native look and feel, these components offer almost all the elements, that a mobile Application needs. The component's default styling can be easily overridden to accommodate your own design.
JavaScript components: These components extend CSS components with JavaScript functionalities to cover all the mobile elements, which can't be done only with HTML and CSS.
Cordova Plugins: Apache Cordova plugins offer API, required for using native device functions with JavaScript code.
Framework agnostic: This means that it can be used with whatever front-end framework you prefer. However, it also provides a binding library for Angular 1 & 2 which makes it easy to integrate our custom tags with these frameworks.
Beautifully made with flat (iOS) and Material Design (Android) flavors: It automatically styles your app depending on the platform and gives you control to customize it.

Onsen Framework Advantages

Onsen UI is used for hybrid app development. This means that you can package your Applications for iOS, Android, and Windows Phone.
Starting your app is very easy since Onsen provides a useful pre-generated app setup with simple layouts.
The apps are built in a very clean and modular way, so it's maintainable and easy to update.
With its large selection of web-based UI components, you can develop HTML5, PhoneGap, and Cordova apps.
It combines the power of HTML 5, CSS, Angular JS, jQuery, and Font Awesome to create impressive-looking apps.

Building Hybrid Apps with Onsen

Now, you must have an understanding of what Onsen is and why it exists.

Now, you are ready to start building your first app with it. Let’s see how to install and start building with Onsen.

Prerequisites

Visual Studio 2015.
Visual Studio Tools for Apache Cordova.

Follow the steps, mentioned below to build an Onsen UI Blank App, using the Onsen UI Framework.

Step 1. Install the Onsen UI Framework

Prior to installing the Onsen UI Framework, we must install the most recent version of Apache Cordova, which will take our app and bundle it into a native wrapper to turn it into a traditional native app.

In Visual Studio, click on the Tools menu, and choose Extension and Updates option.

Visual Studio

Step 2. Search for Install

Now, the Extension and Updates window will open. Go to the Search Bar and search the keyword Onsen UI.

It will search the Onsen UI templates for Visual Studio, click on the Download button, and Install.

Search for Install

Now, it's downloading.

Install

Now, click on the install button.

Install button

Now, it's installed.

Download

Now, click on the Restart button to restart the Visual Studio.

Restart button

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

New Project

Step 4. Give the Project Name

A New Project window will open. Subsequently, you can select an Installed -> Template -> Java Script -> Manoca ->Onsen UI Blank.

Type the Project name Onsen UI BlankApp and click the OK button.

BlankApp

Step 5. Main Screen.

Main Screen

Step 6. Solution Bar

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

Solution Bar

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 App.
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 7. Adding the Coding

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

Adding the Coding

Step 8. Run the Application

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

Run the Application

Output

Conclusion

I hope you understood how to start the Onsen UI blank app, using Visual Studio 2015 and how to run it.

4 Comments

Join the conversation! Your thoughts help the community grow.

Reshwanth S8y ago
Thank you mam for sharing your valuable resource
Vignesh Mani9y ago
Very Useful Information and Nice Explanations
Humayun Kabir Mamun10y ago
Nice article, very detail oriented.
- Alagunila Meganathan10y ago
  Thank u for ur comments...