Java – Path of the saint coder…

Creating a Phonegap-Android Application Development Project on Intellij IDEA 12

Creating an Android mobile application could be a tedious one when you need to build rich UI elements on your application. This could be a real problem if your UI designers have adequate or good HTML & CSS skillsets but have little to none knowledge of working with Android XML pages. Another problem arise when there is a requirement to ship your mobile app to support other mobile platforms such as iPhone, Win RT, Blackberry, etc beside on the Android platform. You would need to spend more time, resources & efforts for Designing, Developing, Testing & Shipping your app across multiple mobile platforms which could hurt your budget.

There is a workaround to solve these. Thanks to people whom were involved in Apache Cordova project, a library named “Phonegap” was born to the rescue. Phonegap is a java library that enable Android runtime to load & display HTML pages ( along with their CSS styles ) and also enable the runtime executing Javascript files as well in an Android application. Due to this feature, UI Designer is freed from working with tedious Android XML pages and able to use their current HTML+CSS+JS skillsets for developing the app’s UI elements similar to pages in web application. Since the app is mainly built on top of HTML 5+CSS +JS, a mobile application which is built on top of Phonegap is also runable on other mobile platforms, such as iPhone, with minimum to none modifications to the original code.

So how would it be look like in a simple Hello World application ? I would show you the steps in this article on how to do it in my favourite Java IDE, the Intellij IDEA 12.

Pre-requisites:

You have setup latest updates of JDK 6 or 7 in your machine. If you are a Linux Ubuntu’s user and have not done it yet in your environment, this article might be useful.
Ensure that you have setup Android SDK properly in your machine.
If you use Intellij IDEA like me, ensure that you have setup JDK & Android SDK settings in your IDEA.
Ensure that you have downloaded latest Phonegap’s library (By the time I write this post, the latest version is 2.7.0).

Enter the Steps:

Create a new Empty Project in the Intellij IDEA 12.
Add a new Android Application Module.
In the Android Module structure, create a new folder under ‘assets’ folder & name the new folder as ‘www’.
Copy Phonegap’s ‘cordova-x.x.x.js’ file into the ‘www’ folder.
Copy ‘cordova-x.x.x.jar’ into ‘libs’ folder.
Right click the ‘cordova-x.x.x.jar’ node & click ‘Add as library …’ option.
On the Create Library dialog, ensure that Name= cordova-x.x.x, Level = Project LIbrary, Add to Module = the Android Application Module then click [Ok].
Copy the Phonegap’s ‘xml’ folder where is located in <your phonegap root folder>\lib\android into the ‘res’ folder.
Add a new HTML5 file into ‘www’ folder. This is the HTML file which is designated for the application’s main page.

Add a script line in the Head tag for referring to Phonegap’s javascript file.


<!DOCTYPE html>
<html>
<head>
 <title>Demo Phonegap</title>
 <script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js">
 </script>
</head>
<body>
 <h2>Hello Android</h2>
</body>
</html>

Initially, our HomeActivity class is extended from Android’s Activity class. We need to modify it so that our HomeActivity class would be able to load & display our index.html page as the app’s main page. First, we’ll modify the class so that it is inherited from Phonegap’s DroidGap class. Secondly, we get rid the second line inside OnCreate method and replace it with a code that calls DroidGap’s loadUrl method. This is the code that is exactly doing the magic.
```
package Demo.Phonegap.Application;

import android.os.Bundle;
import org.apache.cordova.DroidGap;

public class HomeActivity extends DroidGap {
 /**
 * Called when the activity is first created.
 */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 super.loadUrl("file:///android_asset/www/index.html");
 }
}
```

Finally, we’ll modify the ‘AndroidManifest.xml’ file as in the following code snippet. Be advised, you might need to adjust the android:minSdkVersion option so that it match with the android version that has been used by your AVD or Physical Android Devices.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="Demo.Phonegap.Application"
 android:versionCode="1"
 android:versionName="1.0">
 <uses-sdk android:minSdkVersion="16"/>
 <supports-screens
 android:largeScreens="true"
 android:normalScreens="true"
 android:smallScreens="true"
 android:resizeable="true"
 android:anyDensity="true" />
 <uses-permission android:name="android.permission.VIBRATE" />
 <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.RECEIVE_SMS" />
 <uses-permission android:name="android.permission.RECORD_AUDIO" />
 <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
 <uses-permission android:name="android.permission.READ_CONTACTS" />
 <uses-permission android:name="android.permission.WRITE_CONTACTS" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 <uses-permission android:name="android.permission.GET_ACCOUNTS" />
 <uses-permission android:name="android.permission.BROADCAST_STICKY" />
 <application android:label="@string/app_name" android:icon="@drawable/ic_launcher">
 <activity android:name="HomeActivity"
 android:label="@string/app_name"
 android:screenOrientation="sensor"
 android:configChanges="orientation|keyboardHidden|screenSize">
 <intent-filter>
 <action android:name="android.intent.action.MAIN"/>
 <category android:name="android.intent.category.LAUNCHER"/>
 </intent-filter>
 </activity>
 </application>
</manifest>

Fire up your Android Virtual Device or connect your Android device into your development machine then build & run the project. You will see this if everything is alright.
```
 
```

Where do we go next from here ?

Of course, you could tell your Web Designers to get back working on the Rich UI elements you wish to put in your super-awesome mobile app, immediately 😀 However, there is a drawback for you as a Java developer if you are going on this way. You would need to use lot of JS when you are coding the UI Logics. Your Java skill would be shifted from being used for developing the UI logics ( Activities , events) to your app’s backend development ( This is true if you goes to n-tier with your mobile app and you still want to use Java for developing your app’s backend services ).
Another situation that you should consider is when you have no UI Designers in your team due to limited budget, for example. This should not stop you from using Phonegap. 3rd party vendors like Telerik or Community have created wonderful UI framework that would sit tight & nice with Phonegap, such as Telerik’s Kendo UI or Jquery Mobile. In the upcoming articles, i would present you about how to integrate these UI Frameworks with android & Phonegap through using a little bit advanced problem sample than a simple ‘Hello World’ app. Or extending them further by integrating cool JS framework like Durandaljs 😀 So, stay tuned, My Friends 🙂

Java, Java SE, Linux, Ubuntu

Setup Latest Oracle JDK on Ubuntu Linux

Most of people understand that installing Oracle JDK & JRE on their Windows machine is mostly easy like eating peanuts ( Well, they might still need to setup JAVA_HOME variable & update their PATH variable though). It can be turned out to be a problem when due to some case they need to move from Windows to Linux development environment, such as Ubuntu Linux. In this HOW TO article, i’ll cover the steps for setting up the JDK on Ubuntu Linux. I hope it would be useful for anyone whom are still having problem with it.

Open a terminal window (press CTL+T) and run these commands in order (we’ll assume that we are going to install JDK version 7 ):
```
1. sudo add-apt-repository ppa:webupd8team/java
2. sudo apt-get update
3. sudo apt-get install oracle-java7-installer
```
If you wish to remove the JDK from your machine, run this command in the terminal box:
```
sudo apt-get remove oracle-java7-installer
```
Should you need to upgrade your current JDK version to the latest one, you could try running this command and see if it would work:
```
sudo update-java-alternatives -s java-7-oracle
```
If the prior command does not work then you could remove your current JDK and re-install the latest one using prior steps as the last resort.

Those are the steps that I always follow when setting up JDK on my Ubuntu machine. Until the time I written this post, i still found no problem when using it on my Intellij IDEA 12.1, working for either Android application development or Play 2 based web application development.

Java, Play Framework

HOW TO – Enable Play 2.0 Support in Intellij IDEA 12

The new version of Intellij IDEA has been released by Jetbrains. By the time i write this article, the version of IDEA that i use is 12.0.1. As a Play 2.1 developer, i got myself feel excited as Jetbrains has announced that the latest IDEA would support Play 2.0. However, the excitement wand off, turned into little bit disappointment as i found the feature came ‘half-baked’. Extra efforts needs to be performed in order to get the feature works on the new IDEA. I’m not sure if most of Play 2.0 developers known this issue and able to resolved it after taking some time to figure out. But in case you are a Player, an owner of Intellij IDEA 12.x copy and still struggling on how to get the feature working properly, i hope this ‘HOW TO’ would help you resolve the issue. Please enjoy, Players.

General steps to install the Play 2.0 supports on IDEA 12:
1. Install & Enable Scala plugin.
2. Install & Enable Play 2.0 support plugins.
3. Restart the IDEA to get the new plugins work.
4. Create Play 2 app configuration.
5. Make & run the Play 2 project using the created Play 2 app configuration.

HOW TO – Install Scala Plugin & Play 2.0 support plugins:

1. Click [File] then [Settings] menu.
2. On the “Settings” dialog, select ‘Plugins’ where is placed under ‘– IDE Settings –’ section.
3. Click [Browse Repositories…] where is placed at the bottom of ‘Plugins’ right side panel.

4. On the Browse Repositories dialog, type ‘scala’ in the small search text box where is placed at the righ-top corner of the dialog.
5. The result grid should display an item with name ‘Scala Custom Languages’, double click this item to install the plugin. The plugin’s size is 23 megs, it might take a while for IDEA to download & install it.

6. To install the play 2.0 plugins, type ‘Play 2.0 support’ in the search text box and double click the result.

HOW TO – Enable play framework support on settings menu:

1. Click [File] then [Settings] menu.
2. Select ‘Play Configuration’ where is placed under ‘–Project Settings [your project’s name] –’.
3. On the Play Configuration panel section, enter the root folder of your play 2.x binaries ( e.g. D:\Java\Play-2.1rc), enter the working directory of your play 2 project (e.g. E:\PROJECTS\JAVA\Demo.Play.SocMed) and tick ‘Show on console run’ option.
4. Click [Apply] and [Ok].

5. Restart your Intellij IDEA & then re-open your play project in the restarted IDEA.

HOW TO – Create Play 2 App Run/Debug configuration:
1. Click [Run] then [Edit configurations…] menu.
2. On the Run/Debug Configurations dialog, click the greenish ‘+’ icon on the top-left corner of the dialog.

3. Click ‘Play 2 app’ option in the drop down menu. Confirm that a new option ‘Unnamed’ is created under ‘Play 2 App’ section on the left panel.
4. Rename the play 2 app config then click [Apply], [Ok].