Build a Single Page Web Application with Knockout.js

Knockout.js makes working with JavaScript much more enjoyable. The MVVM pattern helps to better organize code and keeps the UI in sync with the server. In the case of complex web applications, a framework like this is incredibly helpful. I would not recommend this library for static web content or sites that need to be SEO heavy. Developers with an Object-Oriented Programming background will be right at home with Knockout.js. Using the content provided by David Ly, I was able to quickly ramp up on this framework.

David Ly and I recently worked together to create a video tutorial series for Knockout.js. The video series walks through creating a simplified version of Google Docs, allowing users to create documents, spreadsheets and surveys. You can find the video series here:

http://www.packtpub.com/building-single-page-web-application-with-knockoutjs/video

Building a Single Page Web Application with Knockout.js

Knockout.js is a free, light weight framework you can use to build web applications.

Sample Video from Section 4:

Sections 1, 2 and 3 are pretty basic (starts out simple). Sections 4 and 5 get a bit heavier. Sections 6, 7 and 8 are code heavy, they dive into the more interesting features of Knockout.js. The video series is meant for people with a basic knowledge of HTML, CSS and JS.

Additional Resources

Knockout.js Homepage link
Knockout Context Debugger – Chrome Extension link
Knockout.js Plugins link

Android Device Manager

Use the new Android Device Manager to locate, ring your device or do a remote wipe. This website provided by Google is similar to the Find My iPhone service and requires initial set-up on your phone. I’ve known plenty of people that have lost phones and wished they had activated a service like this in advance. Log on today and set up your device.

https://www.google.com/android/devicemanager

The service doesn’t keep a history of your locations. Your device must be turned on and connected to the internet to work with the service. Here is a screen shot of the service in action:

Two

ActionBar with Android Support Library r18

Google recently released a new version of the Android Support Library (r18). They added a number of features. One of the biggest additions is support for the ActionBar back to 2.1 devices. In this post we’ll cover what you need to set up the new ActionBarActivity within your project. The sample code also shows how to integrate the DrawerLayout which was added in r13 of the support library.

With the addition of the Drawer and ActionBar to the support library, developing apps for 2.1+ devices is easier with fewer dependencies on third party libraries.

ActionBar with menu drawer screen shot.

Step 1: Setup Android Studio

First, download Android Studio. Next, open the SDK manager and download the latest Android Support Library and Android Support Repository. We’ll be using both v4 and v7 for this demo (step 2).

http://developer.android.com/sdk/installing/studio.html
http://developer.android.com/tools/support-library/setup.html#download

Make sure you are running the latest version of Android Studio (0.2.2+) and the latest version of Android (18.0.1+). Create a new project and continue to step 2.

Note: You can also include these libraries with Eclipse. Follow the instructions on the support library setup page for more information.

Step 2: Add Dependencies

Update your gradle.build file to include the following. If your gradle.build file is empty to start with, you’re editing the wrong file. Drill down into your project folder and find the gradle.build file with content in it.

buildscript {
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:0.5.+'
    }
}
apply plugin: 'android'

repositories {
    mavenCentral()
}

dependencies {
    compile 'com.android.support:support-v4:18.0.+'
    compile 'com.android.support:appcompat-v7:18.0.+'
}

android {
    compileSdkVersion 18
    buildToolsVersion "18.0.1"

    defaultConfig {
        minSdkVersion 7
        targetSdkVersion 18
    }
}

At this point your project should compile.

Step 3: Add the Support ActionBar

public class MainActivity extends ActionBarActivity {

    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ...

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);

        ...

    }

Make sure to use the theme AppCompat or use a custom theme that inherits from AppCompat. If you don’t, you will get the following error: “must have a theme which inherits from Theme.AppCompat.”

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.AppCompat" >

Step 4: Style the ActionBar

You can use this website to help generate a theme based on AppCompat. Make sure to select AppCompat from the style compatibility drop down.

Keep in mind styles generated with that tool do not impact the styling of the ViewPager. ActionBar tabs may look similar to the ViewPager but they require a separate set of styles. More information can be found here.

Source Code:

Full source code to an example project built with Android Studio can be found here.

Invalidate Options Menu with ActionBarActivity

Problem:

The latest support library (r18) brings ActionBar support all the way back to Android 2.1 (API level 7) but the invalidateOptionsMenu function is only supported in API 11 and higher. If you want to hide an icon or change the look of the menu, your app needs to refresh the options menu.

Android ActionBar with options menu.

Android ActionBar with options menu.

Solution:

Call supportInvalidateOptionsMenu() within your ActionBarActivity class or within your Fragment by calling getActivity().supportInvalidateOptionsMenu(). This function allows you to invalidate the options menu. More information about support library functionality for the ActionBarActivity can be found here:

ActionBarActivity API Documentation

I’ve implemented the new ActionBarActivity on my current project and have been very happy with the performance and functionality. It was an easy transition from using ActionBarSherlock. The biggest difference is with some of the support library functions and with the theme. Luckily, the ActionBar style generator has already been updated to use the new AppCompat theme!

ActionBar Style Generator