jQuery Mobile has a number of hooks to handle events such as taps, swipes, etc. In addition to those, the framework also provides more general events such as pageinit and pagebeforeload which allow code to be executed at specific instants in the lifecycle of a page. Finally, there are also a number of methods which can be used to change the behaviour of the web application when specific events occur.

The work to do is:

• Change the Javascript code already written to be more jQuery Mobile compliant
• Add a handler for swipeleft on the four songs pages
• Add a tap handler on the names of the French songs to display a dialog

Some Android application depend on data available on the Web. For example, a TopTracks application might show the top 10 tracks of a given artist using a web service such as AudioScrobbler.

Downloading this data can be slow and it is preferable to use a service to do that. In this way, the “main screen” of the application is an Activity and only takes care of displaying the user interface and starting / stopping the download service.

The application to develop allows the user to enter the name of an artist:

Click on Show Tracks does not necessarily display the tracks as this requires the track information to be downloaded first. This is done by clicking on Start Service.

When the data has been downloaded, the service displays a notification in the status bar telling the user that the top tracks have been downloaded. It is only then that the user can click on Show Tracks to get:

One important Android widget is AutoCompleteTextView which, as its name indicate, is a text view which allows the user to select text from among a list of possibilities based on the initial text typed:

As shown above, the user types “Ven” and is shown Venus on which the user can click on.

A second useful widget is the SeekBar which allows the user to select one value by dragging (here, a font size):

Finally, it is possible to embed a web browser within any Android application using a WebView. Note that this is different from launching a web browser activity (which launches the native Android web browser):

The work to do is to add a menu (also called an options menu) to the PermutationsReloaded application as shown in the picture. Choosing clear will erase everything on screen while choosing about will display a pop-up with some information about the app.

To create the menu, one should build one using the appropriate XML editor and override the onCreateOptionsMenu method of the activity. To handle clicks, the onOptionsItemSelected method will also need to be overriden.

Context menu

The second step is to add a context menu which opens when one long-presses on any of the permutations. The choices shown are “To uppercase” and “To lowercase” which are explicit enough.

The methods which are important here are onCreateContextMenu and onContextItemSelected as well as registerForContextMenu and unregisterForContextMenu.

Something noteworthy is that onCreateContextMenu is executed each time a context menu is shown (and not only once) and that one of its parameters is the view on which the long-press has been done.

Managing Preferences

The last enhancement to bring to the application is to allow the user to specify whether the last word entered should be remembered. If yes, the next time the application is started, the word should already appear in the EditText and the permutations shown.

To do that, a preference screen should be created using the XML editor, then a class derived from PreferenceActivity should be created and the onCreate method overriden. This new activity should be manually added to AndroidManifest.xml.

When this activity is launched (using, for example, startActivity), the Android framework will automatically store the preferences.

Finally, the application will have to be updated to store the word entered if the user has chosen to do so as well as restore that word when the application is resumed. The way to do that is to get a SharedPreference object from the PreferenceManager.

Accessing Files

Android applications can access files residing at three distinct places:

• Found in the application APK itself. This file is read-only as it is considered to be one of the static resources of the application. The work to do is to develop an application called Anagrams which given a word shows all the various anagrams of that word. Of course, this requires a dictionary and it will be stored in the APK. The key method to use here is openRawResource to get access to that dictionary.
• Found in flash memory. The second version of the application provides a simple menu (with load / save) which, depending on the item selected, either load or saves the anagrams found. This second version of the application loads and saves from flash memory.
• Found on the SD card. The third version of the application read and writes data on the SD card instead of using flash memory.

Android applications generally have four types of components:

• An activity represents a single screen with a user interface. An application can have multiple independent activities.
• A service is a component that runs in the background to perform long-running operations or to perform work for remote processes. For example, a service might play music in the background while the user is in a different application.
• A content provider manages shared application data. Other applications can query or even modify the data through the content provider.
• A broadcast receiver is a component that responds to system-wide broadcast announcements. A typical broadcast receiver might initiate a service to perform some work based on the event.

It is important to understand that any application can start another application’s component… but only indirectly as Android runs each application in a separate process. To do that, the application must deliver a message to the system that specifies its intent to start a particular component in a different application. The system then activates that component.

Work to do

Let’s start quickly. The first step is to setup the development environment as explained in the previous topic: (Java, Eclipse, Android SDK and Platform Tools).

At this point, it is possible to create an Android Virtual Device (AVD) and run an emulator.

The next step is to launch Eclipse, install (if needed) and configure the Android Development Tools plugin and start developing Android applications!

HelloWorld

The first application to develop is HelloWorld which should simply display a nice message in an activity when launched. The content of HelloWorld should be explored (AndroidManifest.xml, bin/, libs/, res/, src/, assets/, gen/ and proguard.cfg) and understood. HelloWorld should be launched in an Android emulator to check whether it’s working correctly. It is also interesting to launch it on a real Android devices (because we can) 🙂

Now

The second application to develop is called Now. It displays one button which fills in the whole of its activity. When the button is clicked, the current date and time will be updated in the button’s label.

The way to do that is to add an Android button to the activity, setOnClickListener appropriately (i.e. to update the label to the current date and time). The easiest way to do that is to use a Java inner class at this point.

The AndroidManifest.xml generated by Eclipse contains an activity, an intent-filter whose purpose is to make the activity appear in the launcher and, very importantly, specifies a minSdkVersion (which is an integer corresponding to a specific version of Android) and, optionally, a targetSdkVersion:

• 1 = Android 1.0 (obsolete)
• 2 = Android 1.1 (obsolete)
• 3 = Android 1.5
• 4 = Android 1.6 (obsolete)
• 5 = Android 2.0 (obsolete)
• 6 = Android 2.0.1 (obsolete)
• 7 = Android 2.1
• 8 = Android 2.2
• 9 = Android 2.3-2.3.2 (obsolete)
• 10 = Android 2.3.3-2.3.7
• 11 = Android 3.0
• 12 = Android 3.1
• 13 = Android 3.2
• 14 = Android 4.0-4.0.2
• 15 = Android 4.0.3-4.0.4

NowReloaded

The next application to be developed is an enhanced version of Now which, instead of using Java code to create a button uses an XML-layout generated graphically by the ADT plugin in Eclipse.

The Java code needs to be modified to use findViewById and care must be taken to really understand the difference between wrap_content and fill_parent (renamed to match_parent as from API level 8).

Forex

The next application is called Forex and allows the user to enter an amount in USD and, when the convert button is clicked, the MUR amount is calculated and displayed.

Airplanes

The application to build displays different airplanes based on which of the three radio buttons has been clicked on. The essential aspect of this application is that the radio buttons are found within a RadioGroup.