Tuesday, January 12, 2016

10 Best Hybrid Mobile App UI Frameworks: HTML5, CSS and JS

Native developers love working with native code but that doesn't always go well with the business case or result in effective use of effort and time. We often see scenarios where developers end up building same mobile app for android, iOS, windows and other mobile platforms using native APIs and libraries of individual platform. 

10 Great Tools to Create a Mobile Version of Your Site

84% of Americans currently own a mobile phone. Sadly, there are no figures showing how many of these devices are ageing bricks without internet capabilities, but you can bet that, within a few years, the majority of mobile phone users will be able to browse the internet, wherever they are.

Right now, most websites are completely unsuitable for mobile viewing, taking 60 or more seconds to load and looking jumbled and confused as they’re squashed onto smaller screens.

Tuesday, January 5, 2016

How To Add And Keep Custom Code Changes In Your App

This article explains how you can add custom code to your mobile app, generated by the Telerik Platform Views service (formerly Screen Builder), so that these changes are not overwritten the next time you edit the app in the Views service.
When you generate an app with the Views service, it's common to enhance and modify the generated code in AppBuilder. If you want to do that but want to return to the Views service to edit the app again, e.g. add a new or edit an existing view without losing the custom code changes, you should follow certain rules. In every file generated by the Views service there is a block comment outlining an area dedicated for such custom code changes.

Monday, January 4, 2016

SQLite – a local database for your mobile apps

If you need relational storage for your Cordova-based app, SQLite provides a lightweight and feature-rich database.  I will walk you through the steps to use SQLite with Telerik’s Icenium IDE and build a demo Shopping List app that will select, insert, update, and delete records from a local database on the device.
First, add the SQLite plugin in Icenium.  Double-click your “Properties” folder, select the Plugins tab and check the “SQLite” plugin.  This will add the Plugins folder and SQLite scripts within that folder.

Database and Table Setup

Before you can use your SQLite database and tables, you need to make sure they have been created. You cannot access SQLite until after the deviceready event has been raised, so we will create an event listener for this:
document.addEventListener("deviceready", init, false);
 
var myApp = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
 
// Initialize the app
function init() {
    myApp.openDb();
    myApp.createTable();
    navigator.splashscreen.hide();
}
First, we determine whether the SQLitePlugin is available, or if we fall back to the native SQLite engine that is available in iOS and Android:
myApp.openDb = function() {
    if(window.sqlitePlugin !== undefined) {
        console.log("Using SQLite Plugin DB");
        myApp.db = window.sqlitePlugin.openDatabase("ShoppingListDB");
    } else {
        // For debuging in simulator fallback to native SQL Lite
        console.log("Use built in SQLite");
        myApp.db = window.openDatabase("ShoppingListDB", "1.0", "Shopping List Demo", 200000);
    }
}
The openDatabase call will create the database if it doesn’t exist, or open it if it already exists.
Now that we have the database open, let’s create our tables.  For our Shopping List app, we will only need one table, and we’ll call it shopping_list.  The only properties we need are a name for each item and whether it is done and marked off our list.
myApp.createTable = function() {
    var db = myApp.db;
    db.transaction(function(tx) {
        tx.executeSql("CREATE TABLE IF NOT EXISTS shopping_list(id INTEGER PRIMARY KEY ASC, item_name TEXT, is_done INTEGER)", [], myApp.onSuccess, myApp.onError);
    });
}
A few things to note about the code above.
  1. We use the “IF NOT EXISTS” clause so we only create the table if it doesn’t already exist in the DB.
  2. I am creating an “id” column which is an integer and our primary key.  Note that it isn’t necessary to create this column.  By default, all tables in SQLite will have an integer “rowid” column as the primary key.  If you specify a column as INTEGER PRIMARY KEY, it will become an alias of the rowid column.
  3. We are using the executeSql method to execute commands against the database.  We will be using this same method for all following database operations.

Inserting Data

If this is the first time the app has run on the device, the table will be empty, so let’s insert some data into it.  My Shopping List app has a text field where you can enter a new item for your list.  When you click the ADD button, it calls our addItem function:
myApp.addItem = function(itemName){
    var db = myApp.db;
    db.transaction(function(tx) {
        tx.executeSql("INSERT INTO shopping_list(item_name, is_done) VALUES (?,?)",
                      [itemName, 0],
                      myApp.onSuccess,
                      myApp.onError);
    });
}
Notice that we are only passing in values for the item_name and is_done columns. The id column will automatically be generated similar to an identity column in SQL Server. I am initializing is_done to zero so it isn’t marked as completed.

Selecting Data

Now that we have data in our table, let’s look at the code to select rows from our table. This is part of my “refresh” function which gets called any time an item is inserted, updated or deleted so our ListViews are kept up to date:
var db = myApp.db;
db.transaction(function(tx) {
    tx.executeSql("SELECT * FROM shopping_list", [],
                  render,
                  myApp.onError);
});
Nothing fancy here, it simply calls my “render” function when the query is complete and “render” will receive both the transaction object and the resultset object that we can iterate through. You can look at the full source for this code, but the “render” method will refresh two ListView objects: one for items that aren’t completed (is_done == 0) and completed items (is_done == 1).

Updating Data

When the user marks an item as completed, it will update the is_done column and then refresh the ListViews. I pass in the id of the item to update. See the full code on how to use a Kendo Template to bind a ListView to an object and pass the ID of the object in the function call.
myApp.markComplete = function(itemId){
    var db = myApp.db;
    db.transaction(function(tx) {
        tx.executeSql("UPDATE shopping_list SET is_done = 1 WHERE id = ?",
                      [itemId],
                      myApp.onSuccess,
                      myApp.onError);
    });
}

Deleting Data

Finally, we give the user the option to “Clear Completed” items which will delete all rows where is_done == 1:
myApp.clearCompleted = function() {
    var db = myApp.db;
    db.transaction(function(tx) {
        tx.executeSql("DELETE FROM shopping_list WHERE is_done = 1",
                      [],
                      myApp.onSuccess,
                      myApp.onError);
    });
}
Now you can add new items, mark them as complete, and clear completed items from the list. You can close the app and reopen it to find all your data still intact. The database only gets removed when the app is uninstalled from the device.
Get more information about SQLite syntax at SQLite.org.
Get the full source code for this demo on GitHub.
Reference: http://blog.falafel.com/icenium-and-sqlite-a-local-database-for-your-mobile-apps/

Telerik Navigation Type

The predefined navigation types that you can choose from in the Telerik Platform Views service are:
  • Tab Menu: displays a tab for each view included in the navigation. The position of the tab menu depends on the current operating system. The menu is part of the layout of each view included in the navigation.
    With Tab Menu navigation, you can choose the transition effect that will be used when navigating between views. When you choose this navigation type, the Telerik Platform Views service shows a dropdown list with the available options.
    Currently applicable only to Hybrid mobile apps.
  • Drawer: displays a button in the header or footer that triggers a drawer menu containing an item for each view included in the navigation. The position of the button depends on the current operating system. The drawer button is part of the layout of each view included in the navigation.
    Currently applicable only to Hybrid mobile apps.
  • List Menu: displays a main navigation that lists all views included in the navigation. When the user navigates to a view, a Back and Index buttons are displayed in the view header.
    With List Menu navigation, you can choose the transition effect that will be used when navigating between views. When you choose this navigation type, the Telerik Platform Views service shows a dropdown list with the available options.
  • None: does not implement any navigation. Use this option when you want to implement custom navigation later in AppBuilder.
Reference: http://docs.telerik.com/platform/screenbuilder/getting-started/configure-navigation