jQuery Mobile on Android
I developed an app for BlackBerry PlayBook that is using the jQuery Mobile toolkit to create the user interface. Now jQM is a portable framework that can run on many platforms, ranging from your regular Chrome, FireFox or Safari browser, to mobile devices like iPhone or Android.
- First step is to create in Eclipse a new project: "File > New > Android Project" and give it a name (let's say "IceCream", I copied the jQM code from a blog by Matt Doyle), select the target and enter the package name, like "ws.iam.icecream". Keep Create Activity checked.
- Next we'll be adding a WebKit WebView to onCreate():
- This WebView will replace the LinearLayout in res > layout > main.xml.
<WebView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scrollbars="none" />
- While we're at it, we should update the AndroidManifest.xml file. Just after the <use-sdk> parameter, add the following line:
- Also we need to prevent Android from creating a new Activity when the user rotates his tablet. Add a parameter to the Activity declaration (for recent SDK versions, this should be android:configChanges="orientation,screenSize"):
<activity android:name=".IceCreamActivity" android:label="@string/app_name" android:configChanges="orientation">
- You probably want to replace the default res > drawable > icon.png files (in three resolutions) with your own.
- At the top of your index.html file, include the following lines:
And now you're all set to run your new app. Probably first just in the emulator. Give it a shot and you should see something like this.
Although this is a working app now, with the java code doing nothing more than being a wrapper, I like to add some native Android functionality. And that is a menu to Reload the app and to Exit it. To do that we've to add two more methods: "onCreateOptionsMenu()" and "onOptionsItemSelected()". Check it out in the complete source code for the Activity.
That all being done, you've to package up the whole thing, sign it and upload it to the Android market. I use Eclipse for this:
- select your IceCream project
- then "File > Export"
- expand the "Android" option and select "Export Android Application", click "Next"
- and "Next" again
- enter the details of your key-store (I assume you have one), click "Next"
- select "Create new key", click "Next"
- give your key the alias name "icecream", enter and confirm a password, give it a validity of 25 years, enter your name and country code and click "Next"
- enter folder and filename "IceCream.apk"
- and finally you can click "Finish".
The resulting packaged and signed application can be uploaded to the Android market, or copied to your Android device using a USB key.
Posted at 01:58PM Nov 20, 2011 by WWWillem in Software |