Thursday, December 12, 2013

PhoneGap/Cordova Android Application setup on eclipse.

Here we are going to discuss about the development environment for Cordova (also known as PhoneGap) and to execute sample application. Here one thing i need to be clear that cordova provides a base to make installer files which can be install on IOS, Android, Windows Phone & many others. Only it provides us the access to the device features using HTML5.

What we need:

  1. Eclipse IDE with ADT & Android SDK Installed. check Here.
  2. Get the latest Copy of Cordova/Phonegap. Extract it & using command line go inside cordova-android\framework & make a jar build using ant jar. This will generate cordova-x.x.x.jar. 
Setup New Project:
Now Launch Eclipse navigate to File => New => Android Application Project


Now specify Application & Project name


Now make sure the checkbox for Mark this project as a library is unchecked


here we can select the application icon


Select Blank Activity
& Just finish it here with activity name as MainActivity

Here Our Android Activity is Created without PhoneGap integration. Now will start making some changes for implementing Phonegap. 

Now if our application consoles error like "Unable to execute dex: java.nio.BufferOverflowException" then we have to add 

sdk.buildtools=18.1.1

in project property file bottom.


Phonegap implementation

In the root directory of project, create a new directory as 
/assets/www
Copy cordova-x.x.x.js from Cordova download earlier to assets/www
Create a index.html file in assets/www directory.
Copy cordova-x.x.x.jar from Cordova download earlier which we build using ant jar to /libs
Copy xml folder from your Cordova download earlier to /res

Verify that cordova-x.x.x.jar is listed in the Build Path for the project. Right click on project and go to Build Paths => Configure Build Path.... Then, in the Libraries tab, add cordova-x.x.x.jar to the project using Add JARs... . If our jar file is not visible the refresh the project & do again the above step.



Now make some changes in MainActivity.java
from

package com.example.myapp; 
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu; 
public class MainActivity extends Activity { 
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
to 
package com.example.myapp; 
import android.os.Bundle;
import org.apache.cordova.*; 
public class MainActivity extends DroidGap { 
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
Here we done. Now build the project & run it as Android Application. in AVD emulator it will launch the application & will navigate to our Landing Page index.html.

Note: we have to place HTML pages  within assets/www folder.

Now open "AndroidManifest.xml" where we Can Add
android:configChanges="orientation|keyboardHidden|keyboard|locale"
within Activity tag to Support orientation changes. Also add some additional permission's to our application so that it can access device features.

<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" /> 

These permissions are Optional, just add which ever is required.

Tuesday, October 8, 2013

Enable HTTPS/SSL on Tomcat Server

By default Tomcat server HTTPS or SSL is disabled. To enable this two steps need to be followed.

  1. Create a SSL certificate
  2. Enable the SSL Configuration

  • Create a SSL certificate

Tomcat server is based on JDK Environment, and JDK provides a tool to create a SSL certificate.
just execute a command Keytool from Command prompt or terminal as
keytool -genkey -alias <alias name> -keyalg <Encryption Algorithm> -keystore <keystore file path>

Here Alias name: can be any text
Encryption Algorithm: is usually RSA for cereating SSL certificate
keystore file path: path for the file to be created

During keystore creation process it will ask to set keystore password and Certificate details followed by tomcat password.
Once its done, our certificate for SSL is created & ready to use.

  • Enable the SSL Configuration
To enable SSL Configuration open server.xml inside tomcat server's conf directory.

Here search for

'<Connector port="8443" protocol="HTTP/1.1" SSLEnabled="true"
               maxThreads="150" scheme="https" secure="true"
               clientAuth="false" sslProtocol="TLS" />'

Change it to

'<Connector port="8443" protocol="HTTP/1.1" SSLEnabled="true"
               maxThreads="150" scheme="https" secure="true"
               clientAuth="false" sslProtocol="TLS"
               keystoreFile="<keystore file path>"
               keystorePass="<keystore password>" />'

Now we need restart tomcat server. on successfull restart our SSL is ready to use.
Navigate to "https://localhost:8443" in browser to test it.

Wednesday, August 7, 2013

Jetty Server : How to deploy a war file?

Jetty is an open-source project providing an HTTP server, HTTP client, and javax.servlet container.Jetty implements aspects of the Java EE specification, primarily the Servlet Specification.

Downloading the Jetty Distribution
The standalone Jetty distribution is available for download from the Eclipse Foundation:
http://download.eclipse.org/jetty
It is available in both zip and gzip formats; download the one most appropriate for your system. When you download and unpack the binary, it is extracted into a directory called jetty-distribution-VERSION. Put this directory in a convenient location.

jetty [JETTY_HOME]
+---bin
+---etc
+---lib
+---logs
+---resources
+---start.d
+---webapps
\---webapps.demo
    +---ROOT
    +---test-jaas.d
    \---test.d

Now extract the application war example.war to jetty/webapps/example.

Create a file example.xml in jetty/webapps.demo with following content

<?xml version="1.0"  encoding="ISO-8859-1"?>
<!DOCTYPE Configure PUBLIC "-//Mort Bay Consulting//DTD Configure//EN" "http://jetty.mortbay.org/configure.dtd">
<configure class="org.mortbay.jetty.webapp.WebAppContext">
<set name="contextPath">/example</set>
<set name="example"><systemproperty name="jetty.home" default="."/>/webapps/example</set>
</configure>


save it &amp; start the jetty server with command: java –jar start.jar
Now done.Open the web browser type the address as http://localhost:8080/example/

Wednesday, March 13, 2013

Moving Listitems between two listbox using javascript.

This example shows how to move items between two ListBox. Basically it allows us to move multiple list items from right to left & Left to right on click event.


<!DOCTYPE html>
<html>
    <head>
        <title>move accross List box</title>
        <style>
            .list{
                float: left;
            }
            #list1,#list2{
                width: 100px;
                height:100px;
            }
            input[type='button']{
                width: 30px;
                float: left;
                margin-top: 30px;
            }
        </style>
    </head>
    <body>
        <div class="list">
            <select name="list1" id="list1" multiple="multiple">
                <option value="opt1">opt1</option>
                <option value="opt2">opt2</option>
                <option value="opt3">opt3</option>
                <option value="opt4">opt4</option>
                <option value="opt5">opt5</option>
                <option value="opt6">opt6</option>
                <option value="opt7">opt7</option>
                <option value="opt8">opt8</option>
                <option value="opt9">opt9</option>
                <option value="opt10">opt10</option>
                <option value="opt11">opt11</option>
            </select>
        </div>
        <input type="button" name=">" value=">" onclick="moveacross('list1','list2')">
        <input type="button" name="<" value="<" onclick="moveacross('list2','list1')">
        <div class="list">
            <select name="list2" id="list2" multiple="multiple">
            </select>
        </div>
        <script>
            function moveacross(sourceID, destID) {
                var src = document.getElementById(sourceID);
                var dest = document.getElementById(destID);

                for(var count=0; count < src.options.length; count++) {

                    if(src.options[count].selected == true) {
                            var option = src.options[count];

                            var newOption = document.createElement("option");
                            newOption.value = option.value;
                            newOption.text = option.text;
                            newOption.selected = true;
                            try {
                                     dest.add(newOption, null); //Standard
                                     src.remove(count, null);
                             }catch(error) {
                                     dest.add(newOption); // IE only
                                     src.remove(count);
                             }
                            count--;
                    }
                }
            }
        </script>
    </body>
</html>

and the output is:

Enjoy...