Building a Native (kind of) Android App using Grails, HTML 5, CSS, Javescript hosted on CloudFoundry

Been very busy with personal life lately and haven’t had time to do much of interesting stuff specifically on CloudFoundry, Grails and Android.
Here is my attempt to build an android application entirely based on HTML 5, CSS and JS. Ever since I found out that LinkedIn built their Mobile app based on those technologies instead of pure native application. I have been very interested in trying it out myself.
I truly am a believer in CloudFoundry! I think it is going to change how “Cloud” service is provided (PaaS). (Wanted to blog about CloudFoundry Micro but my machine doesn’t Support VT ūüė¶ so may be will get to blog about it sometime later…)

Let’s Jump on to our today’s topic.
Here is my vision:
1. Build a Grails application that is hosted on cloudfoundry. This will serve as a mobile website. I will be using jQuery Mobile.

2. Build a Native looking app using PhoneGap that will interface to the grails web application hosted on cloudfoundry.

About the application:

We will build an android application that will give events that are going on around you given your location. We will be using YQL to get the data. You can learn more about YQL at

Since I want it to be a good size blog entry and not to long, This will be part I of the application.
By the end of this blog I should have.
1. Grails App optimized for mobile hosted on Cloudfoundry
2. Android App based on PhoneGap that will serve as an interface to the Grails App built above.

Let’s Start with the first part:

Building Grails App and hosting it on CFoundry:

I am going to build it from the ground up. I may skip few things, but, if you just want to know how this is done, you can read my old blog post about building a grails app on Cfoundry here.

Creating Grails app and installing the CFoundry plugin:

  $ grails create-app FindEventsGA
  $ grails install-plugin cloud-foundry

(Note: Refer to the link above to set up your Cloudfoundry account in Config.groovy)

Setting up jQuery Mobile Test page:
If you followed me till here you should have a standard grails app all ready to go.
Now, Lets wire up the jQuery Mobile. At the time of this writing, jQuery Mobile Beta 3 was the latest.
Now Navigate to your “index.gsp” in your “views” folder and replace the current content with the following content.


<!DOCTYPE html> 
<title>Grails Mobile App on CloudFoundry</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<div data-role="page" id="dashboard">
	<div data-role="header">
	</div><!-- /header -->

	<div data-role="content">	
		<p>Hello From Grails Mobile App!</p>	
	</div><!-- /content -->
</div><!-- /page -->

Above HTML 5, will replace the standard Grails homepage.
In the Page above, it simply imports jQuery Mobile JS and CSS.
You can read more about them at jQuery Mobile page

Now we are ready to publish the app.

Lets run the following command from the grails project directory and verify that it renders the page correctly.
(Note: If you are using Eclipse with Grails plugin or STS, you can simply press “Ctrl+Alt+Shit+G” –> This will give you grails command prompt where you can simply type “prod cf-push”)

$ grails prod cf-push

I set up my application to be hosted under “;
After the app has been published, We can get to it through a browser.
See an screen Shot below.

Since I have pushed the app up in the cloudfoundry “cloud”, I can navigate to it from my mobile browser.
Here is how it looks on the device.

We are half way done! – Building a native application
Now the web app is ready, Let’s set up the android application.

Create a new android project on Eclipse or any other IDE of your choice. ( has tutorials if you are new to Android development.)

After you have a Android Project ready. We will go to PhoneGap and download their Jars.

Go to PhoneGap website and download their android tools.

Unzip the file and place following artifacts.

1. Get the Android “phonegap-1.0.0.jar” (or whatever version you get) from and “Android” directory in the zip and place it in your Project under “libs” folder. (Create the “libs” directory under your android project)

2. In your android project, create “www” folder under “assets” folder (assets folder should already be in your android project). Copy the “phonegap-1.0.0.js” found in the Android folder in the zip file into this www directory.

3. Copy the “xml” folder found in the Android folder inside the zip file into “res” folder in your android application.

Your Project should look similar to one below:

As we added the jar, let’s add it to the build path.
To do this, simply right click on the project and click on “Properties”.
Navigate to “Java Build Path”>”Libraries”. Click on “Add JARs…” and point to the phonegap jar.

Now, navigate to your Main Activity on your android Project and make following changes.

1. Extend the activity to “DroidGap” instead of “Activity”

2. add URL to your grails application.


Your class may look similar to the following:

import android.os.Bundle;

import com.phonegap.DroidGap;

public class FindEventsGADroidActivity extends DroidGap {
    /** Called when the activity is first created. */
    public void onCreate(Bundle savedInstanceState) {

Now let’s change the AndroidManifest.xml and we are ready for the show time.

Add following xml before the <application tag

		android:anyDensity="true" />

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 

Add android:configChanges="orientation|keyboardHidden" to the activity tag in AndroidManifest. (view image below)

Add a second activity below under you application tag in AndroidManifest. (view image below)

<activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> 
     <intent-filter> </intent-filter>

Your Manifest should look something like below:

Learn more about PhoneGap at

We are done!

Show Time
Run your application and you should see the Grails app that will apear like a native application on your device.

See below for a screen shot of my application.

We have accomplished our goal for this post and are at a good stopping point.
We now have a grails app thats running on cloudfoundry appear as a native app on Android!

In the next post I will be working on gestures etc on grails app and will use YQL.
Most interestingly use device gps etc to find location. We will have to make some significant changes to the project. Hope you enjoyed this post.

Integrating AdMob in your Android App and make money

As an android developer, I write android apps and publish them on the market mostly for free as I try to build a reputation :). But, wouldn’t it be great if I could offer my app for free at the same time make some $$ through “Advertisement”? In this post I will go through integrating AdMob in an android application and start making some money (at least few cents ;)).

If you want to learn more about AdMob, please visit their website

Let’s get started:

Step 1: Registering with AdMob
First of all you need to register yourself with AdMob. You can do this by simply clicking on “Register” Link when you visit “”.

You can find more info about registration in

Step 2: Setting up AdMob with your App

Once you are registred, login to the site and follow link to You can get here by clicking on “Android” Icon on the homepage. (At the time of this writing AdMob website has an icon in the center of the page that features, iPhone, Android etc, I assume that link above should still work.)

i. Click on “Get Started” and then click on “Sites & Apps”. You can follow the link

ii. Click on “Add Site/App” button, this should take you to a setup wizard. In this example we will be working on an android app. Click on “Android App”

iii. Provide the Details. Put your app name under “App Name” (In this example I used “Demo”), As this is a new app and we haven’t published the app yet, you can put your website in the “Android Package URL”. (This is a required filed, so you have have something here). Select a category and add description and click “Continue”.

iv. Thats it you have successfully set up your “App” on AdMob. (You will see a page from where you should be able to download the admob library, if you do this now, you can skip Step 3 below.)

Step 3: Getting the AdMob library jar

If you did not download the jar that you saw at the end of Step 2. You can still get there by navigating to¬†¬†You should see the app you registered in Step 2. ¬†If you hover over the app name, you should see “Manage Settings”, Click on that. This should land you to a page from where you can get the library by clicking on “Get Publisher Code”.

Step 4: Setting up an Android App

¬†Let’s create an Android a Demo app. You can do this by going into Eclipse or any IDE with Android SDK and creating a new project.

Step 5: Adding the Library:

Once you have the android project set up create a directory called “libs”, and add the jar file you downloaded in step 3.

Now, go to the project properties by right clicking on the project name and clicking on “Properties”. ¬†Go to “Java Build Path”, then on the right side, click on “Libraries” tab.

To add the jar, click on “Add JARs…” button and locate the Jar file in the libs folder in your project.

Step 6: Setting up a view

Since you added the lib and if you do not see any project problems you are all set. Now this should allow us to use a “AdView” in your android app. This is the view where AdMob will place a HTML5 advertisement.

There are two ways we can add this view, 1. in the Activity java code or 2. in the Layout XML. For Simplicity, lets do the XML one.

If you have the project set up lets go to the main layout of the app found in “res>layout” directory in your project. Locate “main.xml”.

In the XML, Lets Copy Paste the following XML in your layout.

< android:id="@+id/adView"
                         ads:adUnitId="YOUR_PUBLISHER_ID HERE"

Replace “YOUR_PUBLISHER_ID HERE”, with id you got while in Step 3.

Also, Include following namespace code int he Layout tag.


So your final code should look something like this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""
    < android:id="@+id/adView"

Step 7: Setting the Manifest
AdMob requires internet and network access, so it can pull down the ad to display on your app. So, Lets update the AndroidManifest.xml.
Edit the AndroidManifest.xml file found in your project. Add Following Activity right below the current activity.

    <activity android:name=""

And Now, add following permissions

<uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

Your Manifest should look something like:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android=""

    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".CouponManager"
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />

 	<activity android:name=""


    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>


Step 8: Done!
That’s it, now you can run your demo app and see the admob advertisement show up in your app!
(Note: It may take a while for the app to appear on the screen as it is being set up for the very first time, it should be faster in subsequent loads)

You can learn more Here:

Setting up MySQL on Cloudfoundry

In my previous post, I showed how to create a quick Grails app on Cloudfoundry.
It was a very simple ‘Hello World’ type example app. In this post we are going to dig little deeper into cloudfoundry.

At the time of this writing, Cloudfoundry supports 3 different type of data store.
1. MongoDb – No SQL Database
2. redis – A persistent key value database
3. MySQL – Most popular free database

CloudFoundry calls these “Services”. You can create/instantiate these services for your application.
Let’s continue on with our previous example. We will create a MySQL database service and we will call it ‘hcfmysql-db’ (abbreviation to HelloCloudFoundryMySQL)

1. Creating CloudFoundry Service
You can create an instance by invoking the ‘cf-create-service’ command, Lets create ‘hcfmysql-db’

grails cf-create-service mysql hcfmysql-db

You should see an output like upon successful creation.


Service 'hcfmysql-db' provisioned.

You can verify that instance was created by running the following Grails command

grails cf-services

You should see output like follows:

============== System Services ==============

| Service | Version | Description                   |
| mysql   | 5.1     | MySQL database service        |
| redis   | 2.2     | Redis key-value store service |
| mongodb | 1.8     | MongoDB NoSQL store           |

=========== Provisioned Services ============

| Name          | Service |
| hcfmysql-db   | mysql   |

2. Binding the Database to the application
In Cloudfoundry, you will have to “bind” the services you created to the application you are working with.
In our example above, we will have to bind the hcfmysql-db with our HelloCloudFoundry app .
to do so, you can run “cf-bind-service” command.
For instance, in our example we can do:

grails cf-bind-service hcfmysql-db --appname=hellocloudfoundry

You should see the following output

Creating new service binding to 'hcfmysql-db' for 'hellocloudfoundry'.

Application 'hellocloudfoundry' updated
Service 'hcfmysql-db' added

Application 'hellocloudfoundry' stopped.

Trying to start Application: 'hellocloudfoundry'.
Application 'hellocloudfoundry' started.

3. Setting up the app to use the database
When we do the binding to a cloud foundry application, CF will set up the connection settings to the services at runtime. This makes the settings very transparent and intuitive.
Lets configure our app for the data.
Edit the DataSource.groovy found under /grails-app/config

production {
        dataSource {
			dialect = org.hibernate.dialect.MySQLInnoDBDialect
			driverClassName = "com.mysql.jdbc.Driver"
			username = "n/a"
			password = "n/a"
            url = "n/a"
            dbCreate = "update"

Note that i have set up ‘n/a’, under username, password and url. You can put anything you want here as these will be overridden by cloudfoundry at runtime.

This is it! You are done.

4. Putting it all together
Let’s verify that our database is working. To do this we can create a “Domain” Class and we will do a scaffolding.

Lets create a Domain class called “Person” with id and name as two attributes.

grails create-domain-class Person

We will update the class as follows

package hellocloudfoundry

class Person {
    long id
    String name
    static constraints = {

We will create a controller as follows

grails create-controller Person

Update the controller as follows

package hellocloudfoundry

class PersonController {

    def scaffold = Person

Lets the deploy the app on the cloudfoundry.
Since we had already deployed the app before you can do an update

grails prod cf-update

Now you can navigate to your app in my example I deployed my app as
so i can navigate to

Ubuntu Window Placement Similar to Win7

With Ubuntu 11.04, It came with ‘Grid’ enabled under ‘Window Management’. This means, if you drag a ‘Window’ of an app to the right of the window it will stick to the right and left if you do left, taking half of the screen very similar to how Windows 7 has done. Drag from the mouse works fine however, the key combination is different than the Window. In this post I will talk about how to make it similar to how it works on Windows i.e. “Win + Right” key will stick the Window the right and “Win + Left” will stick the Window to the left.

To do this you need “CompizConfig Settings Manager” installed if you don’t have it already.
If you don’t then you can do so by running following command.

$ sudo apt-get install compizconfig-settings-manager

CompizConfig Settings Manager
Go to CompizConfig Settings Manager by going to “System>Preferences>CompizConfig Settings Manager”
Scroll down to the “Window Management”
Compiz Window

1. Click on the ‘Grid’ to manage the key bindings.
2. For this example lets work on the putting the window to the Left (to put on Right follow the same instructions except for picking the right key combinations)
a. Click on the key binding for action you want to edit, in this case right next to ‘Put Left’, (currently has ‘KP4’)
b. You will be prompted with a modal window, click on ‘Grab key cobination’

c. After you click on that button press the key that you want to bind the action with in our case lets do “Window Key + Left Arrow”
d. It should show ‘<Super>Left’ then click on ‘Ok’ button on the window to close it.
e. Now if you click on ‘Win’ Key + Left arrow then current window will take half of the screen and will be on the left side.

You can follow similar steps to do for pan the window right, maximize, minimize etc.

Mounting .disk file on Ubuntu

As mentioned in my earlier post, I recently upgraded my Ubuntu to 11.04. In my 10.10, I had created a virtual HDD called “home.disk” where I stored all my ‘home’ content. Now its time to recover some of that info.
This is how I am able to mount a ‘.disk’ file as a drive on ubuntu and be able to copy the content.

1. Creating a mount point
First of all you need to create a directory where you will be mounting your .disk file to

  $ sudo mkdir /media/homedisk

2. Mounting the disk file
I have my “home.disk” file in my external HDD which is mounted in my ubuntu under “/media/Elements/home.disk”
So, my command to mount it is as follows, (If you .disk file is elsewhere just point to that)

  $ sudo mount -o loop /media/Elements/home.disk /media/homedisk

There you have it!, now you should see an icon on your desktop called ‘homedisk’ and if you click in there, you should see the contents of the file!

Setting up Groovy and Grails on Ubuntu 11.04

After upgrading my Ubuntu since 8.04 to 10.10 as a regular system upgrade my system started becoming really slow. So, I decided to do a clean install of Ubuntu 11.04.
As I am going through this I wanted to document the process of setting up Ubuntu 11.04 with Groovy and Grails.(Note: I have Ubuntu 64 bit installed, there may be extra steps I may had to do compared to 32 bit.)

1. Installing JDK
As a first steps, we will have to install JDK.
Lets run the following command to install the JDK on the system

$ sudo apt-get install sun-java6-bin sun-java6-jre sun-java6-jdk

2. Installing Eclipse
a. Let’s grab the latest version of eclipse from the website

b. I got the “Eclipse IDE for Java EE Developers” (64- bit version as my Ubuntu is 64 bit)

c. After you obtain the zip, simiply unzip the content to the home folder. This should result in structure like “/home/manijshrestha/eclipse”

3. Groovy Eclipse plug-in
You can follow the instructions in groovy website in

a. go to “Help>Install New Software… ”
b. Put “; and hit enter
c. Install “Groovy-Eclipse”, “Groovy Eclipse SDK” and “Extra Groovy Compilers”

4. Grails Install
For grails, spring source provides with STS plugin for eclipse, Lets install that,
For that, Similar to Groovy Install, lets install the STS plug-in. Lets follow the steps below

a. go to “Help>Install New Software… ”

b. Click on “Add” Button and put following URL
(you can give a name like “Spring STS” etc)

c. Click on “Add” Button again to add URL for dependencies:
(you can give name like “Spring Dependencies”)

d. Back in the ‚ÄúInstall New Software‚ÄĚ window, choose to work with: ‚ÄĚSpringSource update site for Eclipse 3.6 Release‚ÄĚ

e. Select ‚ÄĚSpringSource Tool Suite Grails Support‚ÄĚ under the category ‚ÄĚExtensions / STS‚ÄĚ

f. Press the Next button and follow the wizard to complete the installation. The installation might seem to be stuck at zero percent for a couple of minutes, just be patient. You will also get a warning that you are trying to install unsigned content which is normal in this case.

g. Re-start eclipse as prompted and you are DONE!
(you can verify the settings by going to File>New>Other – You should see “Groovy” and “Grails” listed…)

These plug-ins are installed inside Eclipse so in the “Terminal” you may not see a result if you do “groovy -version” or “grails -version”.

I will post on how to manually install Groovy and Grails on Ubuntu in my next Post.

Setting up a Grails app on Cloud Foundry

I was lucky enough to get access to cloud foundry. I have heard a lot about how easy it is to deploy a grails app on cloudfoundry. I had to try it myself and here is my experience trying to do so….

Building An App
Lets just create a simple grails app called “HelloCloudFoundry”. to do so, we can create a grails app by running the “grails create-app” command like follows:

   /home/manijshrestha/workspace/$grails create-app HelloCloudFoundry

Once the app is created lets just dummy up a index.gsp, I usally delete the default one grails creates and replace it with my own with body text “HelloWorld”. For this example I replaced the content of the index.gsp with simple html as follows

        <title>Hello Cloud Foundry</title>
        Hello From the Cloud!

Installing cloud foundry plugin
I was pretty impressed that grails already had a cloupowershellpowershelld foundry plugin, to install lets just run our typical grails install as follows

/home/manijshrestha/workspace/HelloCloudFoundry$ grails install-plugin cloud-foundry 

Now, it should install the plugin for cloudfoundry

Configuring the App
To set up the app its fairly easy, edit the Config.grooy file found in grails-app/conf/Config.groovy
and set up with your credentials. If you don’t have an account get one via
You should receive an email with user username and password

grails.plugin.cloudfoundry.username = ''
grails.plugin.cloudfoundry.password = 's3kr3t'
grails.plugin.cloudfoundry.appname = 'YOUR-APP-NAME'

thats it!!! we about 90 percent done!

Now, lets deploy our app!!! Yes we are there now..

Now lets just run a grails command to push the app to the cloud foundry

from the command line run

NOTE: technically, we should configure our database like mysql or mongodb etc, but for our demo we will just push it, the command will asks us to create one and we will do so.

   $grails prod cf-push

You will see some input dialogs asking you for the app url? and also since, we didn’t configure a service it will ask you if you would like to bind a mysql service, See my responses below:

Application Deployed URL: ''?

Would you like to bind the 'mysql-XXXX' service? ([y], n)

And BOOM we are done now you can navigate to your application URL
in my case its

Hopefully you enjoyed this, feel free to comment!

Helpful Links:

Mobile Development using FLEX!

Adobe air has been creating buzz about being able to develop flex application in multiple platform pretty similar to Java. Now, with Adobe Air being available in mobile devices, possibility is endless. It will be interesting to see how far this will go. Specially, the devices with lot of hardware like accelerometer, gyroscope, GPS. (Hello Apple, will you someone day support Adobe Air?Ans: No, If you want adobe use Android!)

Android SDK – Changing background of a layout at run time

I was working on a android project where I had to change background image in a layout at at run time. For instance, the user selects an image and it becomes the background of the layout. It is fairly simple to do in Android. See below on how I achieved it:

I have a Frame Layout in which I have defined a background in my case the image file name is “wooden.png” so I have, ‘¬†android:background=”@drawable/wooden” ‘ in the layout definition.¬†By having this line in my layout, Android will use the wooden.png ¬†that is in the “drawable” directory as the background for the activity .

See below for xml extract:

<FrameLayout xmlns:android=""	android:id="@+id/main_layout"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="@drawable/wooden">

.. ...



In the code if I want to change the background I could achieve this by calling “setBackgroundResource” method on the layout.

See below for an example.


View mainLayout = findViewById(; // getting the layout

mainLayout.setBackgroundResource(R.drawable.stone); // changing the background to 'stone.png'