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

Onsen UI Framework

Templates Included in Onsen UI Framework

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

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

Building List Control with Onsen UI Framework

Let’s see how to start building the App using List Control in Onsen UI Framework using Visual Studio 2015.

Prerequisites

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

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

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

ListApp

Step 3. Main Screen.

Main screen

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

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

Coding

Adding the List Control

Go to the index.html in the solution bar and add the HTML coding.

Explanation

Coding Explanation
<ons-list> Create a list
<ons-list-header> Add the header to the list
<ons-list-item> Add the items to the list


Coding

<ons-list>
  <ons-list-header>Default</ons-list-header>
  <ons-list-item>Apple</ons-list-item>
  <ons-list-item>Orange</ons-list-item>
  <ons-list-item>Mango</ons-list-item>
  <ons-list-item>Cherry</ons-list-item>
</ons-list>

Preview code

Adding the Tappable List

Now, add the Tappable list to the List of items

Explanation

Coding Explanation
<ons-list-item Tappable> Adding the Tappable list


Coding

<ons-list>
  <ons-list-header>Tappable / Ripple List</ons-list-header>
  <ons-list-item tappable>Apple</ons-list-item>
  <ons-list-item tappable>Orange</ons-list-item>
  <ons-list-item tappable>Mango</ons-list-item>
  <ons-list-item tappable>Cherry</ons-list-item>
</ons-list>

Tappable

Adding the switch button to the list.

Now, add the switch button.

Coding

<ons-list-header>Switch</ons-list-header>
<ons-list-item>
  <div class="center">
    Turn it on
  </div>
  
  <div class="right">
    <ons-switch></ons-switch>
  </div>
</ons-list-item>

HTML code

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

Output

Main Screen - Timeline.

Main Screen

Output 1. Tappable list.

Tappable list

Output 2. with switch button.

Switch button

Conclusion

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