How to Onsen UI the Answer to Cordova UI Development?

View: 912    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: Android   Fields: Other

10 point/3 review File has been tested

Onsen UI is a new JavaScript and CSS framework for developing mobile apps. With its large selection of web based UI components, you can develop HTML5, PhoneGap and Cordova apps.

Introduction

Onsen UI is a new JavaScript and CSS framework for developing mobile apps. With its large selection of web based UI components, you can develop HTML5, PhoneGap and Cordova apps. With a focus on native-like performance, user experience, responsive design and diverse platforms, it seems quite promising. It combines the power of HTML 5 , CSS, AngularJS, jQuery and Font Awesome to create impressive looking apps.

Installation

To get started with Onsen UI, first make sure you have Node.js and npm installed.

Next, depending on the app platform for which you plan to develop, install the required Android or IOS platform dependencies. In this article, we’ll try to create an app for Android.

Cordova can be installed as shown below:

sudo npm install -g cordova

A number of templates are available from Onsen UI such as master details, sliding menu etc. We’ll be using the master detail template.

Download the template, extract it and navigate to the project root folder. Now, we’ll add the platform for which we’ll be developing the app. Add the platform as shown:

cordova platform add android

Once complete, type in the below command to emulate the template that we downloaded:

cordova emulate

Here is how it should look:

Home Screen Example

What we’ll be creating

In this tutorial, we’ll be designing our app using the Onsen UI components. The app will have a sign in, sign up page and page to list all registered users.
Once we are done with the design, we’ll hook up the app to Firebase.

You can find the final project on GitHub here

Designing Login Screen

Below is the folder structure of the template that we downloaded:

OnsenUI(root)
      -----> hooks
      -----> merges
      -----> platforms
      -----> plugins
      -----> www

The folder www contains the html, css and JavaScript files which we’ll modify to create our custom app.
I feel the best way to learn anything new is to start from scratch. Open up index.html and remove everything inside the body tag.

Onsen UI provides a number of components to create a UI. We’ll be using a few of these to design our screens.

In order to maintain a page stack, Onsen UI provides a component called ons-navigator. It acts as a container for all our pages. Inside this we’ll add another component called ons-page.

Here is how it should look:

<ons-navigator title="Navigator" var="myNavigator">
    <ons-page>
        // Page content comes here
    </ons-page>
</ons-navigator>

Inside the page add another component called ons-toolbar which acts as the toolbar.

We’ll also need to add a username and password input box. In order to add those, first we’ll add a list box and inside that we’ll include the input texts. To add list items, Onsen UI provides a component called ons-list.

Here is how it should look:

<ons-navigator title="Navigator" var="myNavigator">
    <ons-page>

        <ons-toolbar>
            <div class="center">Onsen UI App</div>
        </ons-toolbar>

        <ons-list>
            <ons-list-item>
                <input type="text" placeholder="Username" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
            </ons-list-item>


            <ons-list-item>
                <input type="password" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
            </ons-list-item>
        </ons-list>

    </ons-page>
</ons-navigator>

Next, we’ll add a button to sign in and for that we’ll use the ons-button component. Here is how the login screen looks after the above changes.

Designing Sign Up Screen

Next let’s add the Sign Up screen for the user to register with. The sign up screen should be accessible from the home screen. So, in the toolbar on the right side corner, add an icon for sign up. To add icons Onsen UI provides a component called ons-icon. Modify the ons-toolbar code as shown below:

<ons-toolbar>
      <div class="center">Onsen UI App</div>
      <div class="right">

        <ons-icon icon="ion-plus-circled" size="40px"</ons-icon>

      </div>
</ons-toolbar>

We’ll be defining the sign up page as a separate html fragment and for that we’ll make use of ons-template. The sign up html should have a toolbar, list items for input controls and a sign up button.

Here is the sign up template code:

<ons-template id="register.html">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-back-button>Back</ons-back-button>
            </div>
            <div class="center">Register</div>
        </ons-toolbar>

        <div style="text-align: center">
            <br />
            <ons-page>


                <ons-list>
                    <ons-list-item>
                        <input type="text" placeholder="Username" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
                    </ons-list-item>

                    <ons-list-item>
                        <input type="text" placeholder="Email Address" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
                    </ons-list-item>
                    <ons-list-item>
                        <input type="text" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
                    </ons-list-item>

                    <ons-list-item>
                        <ons-row>
                            <ons-col width="90px">
                                <span style="color: #666">Gender</span>
                            </ons-col>
                            <ons-col>

                                <div style="float: right; padding-right: 16px;">
                                    <label class="radio-button">
                                        <input type="radio" name="level">
                                        <div class="radio-button__checkmark"></div>
                                        Male
                                    </label>

                                    <label class="radio-button">
                                        <input type="radio" name="level">
                                        <div class="radio-button__checkmark"></div>
                                        Female
                                    </label>
                                </div>

                            </ons-col>
                        </ons-row>
                    </ons-list-item>



                </ons-list>


                <div class="content-padded">
                    <ons-button modifier="large" onclick="">
                        Sign Up
                    </ons-button>
                </div>


            </ons-page>
        </div>
    </ons-page>
</ons-template>

Most of the components used in the code above are the same we used on the sign in page. The two new components used are ons-back-button and ons-row. ons-back-button is used to provide back button support and ons-row is used to represent a row in a grid system.

Finally in order to link the icon in the toolbar to the sign in page, add an onclick event to the icon. To navigate we’ll use ons-navigator’s pushPage method as shown below:

<ons-icon icon="ion-plus-circled" size="40px" onclick="myNavigator.pushPage('register.html', { animation : 'slide' } )"></ons-icon>

 

How to Onsen UI the Answer to Cordova UI Development?

How to Onsen UI the Answer to Cordova UI Development? Posted on 22-03-2016  Onsen UI is a new JavaScript and CSS framework for developing mobile apps. With its large selection of web based UI components, you can develop HTML5, PhoneGap and Cordova apps. 3.3333333333333/10 912

Comment:

To comment you must be logged in members.

Files with category

  • How to Monetizing Apps with the Google AdMob SDK

    View: 528    Download: 0   Comment: 0   Author: none  

    How to Monetizing Apps with the Google AdMob SDK

    Category: Android
    Fields: Other

    4.75/2 review
    AdMob is a mobile advertising platform from Google that developers can use to generate revenue from apps through in-app advertising. AdMob provides different sets of ads like banner ads, interstitial ads, video ads, or native ads integrated with...

  • How to Securing Your Android Apps with the Fingerprint API

    View: 458    Download: 0   Comment: 0   Author: none  

    How to Securing Your Android Apps with the Fingerprint API

    Category: Android
    Fields: Other

    5/1 review
    Passwords have had their day, with software vendors and hardware manufacturers encouraging users to try other methods of securing their data. Fingerprint readers are becoming more common on Android devices since Marshmallow introduced a new...

  • Transfer Data between Activities with Android Parcelable with android

    View: 936    Download: 0   Comment: 0   Author: none  

    Transfer Data between Activities with Android Parcelable with android

    Category: Android
    Fields: Other

    0/0 review
    An Android app typically consists of more than one activity that need to pass data between each other. For example a primary activity with a list of elements and a corresponding secondary activity to show the details of these elements

  • Optimize Your Java Code with Android Butter Knife

    View: 580    Download: 0   Comment: 0   Author: none  

    Optimize Your Java Code with Android Butter Knife

    Category: Android
    Fields: Other

    1.5/3 review
    Creating code can sometimes be frustrating. Developers have to deal with redundant coding that is visually unattractive.

  • How to Use React Native to a Create a Face Recognition App

    View: 583    Download: 0   Comment: 0   Author: none  

    How to Use React Native to a Create a Face Recognition App

    Category: Android
    Fields: Other

    2.25/2 review
    nce you have signed up for an account, login and click on the search icon at the top of the screen and search for ‘cognitive services’. From the dropdown that shows, click on Cognitive Services accounts (preview) and you should see the following...

  • How to Authenticating Users via OAuth with Cordova and Ionic

    View: 322    Download: 0   Comment: 0   Author: none  

    How to Authenticating Users via OAuth with Cordova and Ionic

    Category: Android
    Fields: Other

    0/0 review
    You will need to install Cordova (I recommend SitePoint’s QuickTip) and the Ionic framework (again, I recommend SitePoint’s QuickTip)

  • Make Access Platform APIs with React Native Modules

    View: 22178    Download: 0   Comment: 0   Author: none  

    Make Access Platform APIs with React Native Modules

    Category: Android
    Fields: Other

    4.5/1 review
    SitePoint has a full guide for installing React Native available here. Once it’s installed, create a new project with the following command

  • Build Animating an Android Floating Action Button

    View: 566    Download: 0   Comment: 0   Author: none  

    Build Animating an Android Floating Action Button

    Category: Android
    Fields: Other

    4.5/1 review
    The Floating Action Button looks something like this in a layout file and will be auto generated if create an Android Studio project with a Blank Activity:

 

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd