Sunday, April 14, 2013

Dependency injection android (roboguice review)

Pre-req: you should know about development in android.
I am using: For this tutorial I am using windows xp, maven, android 2.33 , spring restfull android, robojuice

Hi guys,


People those are familiar with spring and Inversion of control, They knows that IOC provides good level of abstraction in managing object(s) i.e initializations, object management, association management. And also decrease lines of code. So lets see roboguice.

To install this first create a maven base project.


1) Add dependencies for roboguice into the project (POM.XML).

 <dependency>
     <groupId>org.roboguice</groupId>
     <artifactId>roboguice</artifactId>
     <version>2.0</version>
  </dependency>
            <dependency>
               <groupId>com.google.code.findbugs</groupId>
               <artifactId>jsr305</artifactId>
              <version>1.3.9</version>
           </dependency>
Reference


2) What we have?
    We can megre 2 steps i.e declaration and initialization, we can avoid object creation and management on different  level (code liens) at class level.


We can create service and bind it with our activities/fragments. This provides alot of ease in fast development.

we can also bind android resources string/arrays/color/config etc to objects.

Reference

3) List of warped components 
   Robo juice warped many android components, list of these components are below

  • RoboActivity
  • RoboListActivity
  • RoboExpandableListActivity
  • RoboMapActivity
  • RoboPreferenceActivity
  • RoboAccountAuthenticatorActivity
  • RoboActivityGroup
  • RoboTabActivity
  • RoboFragmentActivity
  • RoboLauncherActivity
  • RoboService
  • RoboIntentService
  • RoboFragment
  • RoboListFragment
  • RoboDialogFragment

To use feature of robojuice, all you need is to extend your components with one of respective above warped components. for example if you want to use robojuice dependency management in your activity then extent your class with  RoboActivity  instead of Activity.

4) Create and activity
  Lets create a activity with robojuce, lets say we have  list of software houses.
 So I have a list of software houses in string.xml


 and my activity is like below:




5) Lets create a factory to execute web service calls (Powered by Spring rest for android)

i) Create an interface  ResponseFctory 




ii) Create implementation of ResponseFctory , 
       Add annotation @Singleton on the top of implementation, because we are creating a factory of singleton scope.




iii) Create configuration file to bind Interface with implementation
   A class extends AbstractModule and bind interface with implementation in configure function
with command

bind(ResponseFctory.class).to(ResponseFactoryImpl.class); 
below is example


iv) Register custom AbstractModule  with robojuice 
Create a robojuice.xml file in res/values folder. Add path of your Configuration class like below

<resources>
    <string-array name="roboguice_modules">
        <item>com.testguice.config.Configuration</item>
    </string-array>
</resources>



v) Use this factory inside your activity like below





6) Benefits

i) Decrease association. We can bind parameters with function. Hence increase decoupling.
ii) Promote polymorphism, Singeltons and interfaces. Hence increase decoupling.
iii) Object creation and management. you dont need to initialize objects on different level (lines in code) of class.. Hence increase readability
vi) Decrease lines of code. Enforce  best practices.

Source code available.

Sunday, April 7, 2013

Review Twitter Bootstrap

Using: For this tutorial I am using Netbean IDE , windows xp plateform, php as server side language.
Pre-req: You should know about html, java script and css.

Preview my work here

I was looking into twitter bootstrap so here is my findings.


A) Structure of application:
    All you need is download , extract and and put the folders into your application. It has js, css and img folders. you can use it with any server side language. For demonstration I am using php. So after putting the files my project lookes like below:



B) Structure of web page:
    For creating a web page, we have 2 options
    1) Use Table structure/layout to display your contents.
     2) Use Divs  to show contents , then you need to concentrate on css to set thes div on required positions,

  Twitter Bootstrap solves layout issues. They provide css of div to divid your pages into rows and columns. So we dont need to worry about  positions of the Divs to show our contents.

   <div class="row">
        <div class="span1">contents 1</div>
        <div class="span1">contents 2</div>
 </div>
Column span levels are from 1 to 12.


Responsive Bootstrap: They have css/style created for tabs, mobiles and desktop. So your structure can easily adjust for device and desktop. All you need is to include a meta tag and css file

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  2. <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Their recommendation: Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.   (Reference)

So I  made a sample page with rows and colums on desktopn this lookes like

On mobile phone it lookes like below:



C) Widgets
     We have list of wigets below. These can are adjustable on both devices and destops. So that means you can use intratcive and cool wedgits on your mobile applications.

  1.  Button groups 
  2.  Button dropdowns 
  3.  Navigational tabs, pills, and lists 
  4.  Navbar 
  5.  Labels 
  6.  Badges 
  7.  Page headers and hero unit 
  8.  Thumbnails 
  9.  Alerts 
  10.  Progress bars 
  11.  Modals 
  12.  Dropdowns 
  13.  Tooltips 
  14.  Popovers 
  15.  Accordion 
  16.  Carousel 
  17.  Typeahead 


So here is a view on desktop
and how the look on mobile device






D) Javascript
    Here we have

  1. Event handling (like we do in web app i.e clicks, selections, display, inrection etc
  2. Transitions 
  3. Custom popup called Modals 
  4. Tooltips
  5. Carousel


E) Style
     There are amazing style sheets available that workes for mobiles, tabs and destop. You can create beautiful headings, labels, buttons, meues , carosels, thumnails etc. It provides redability on mobile devices.

Reference

F) Customization

   We can easily customize our applications. And with it we can create application for both mobile and dektops. It will definitly decrease the development cost. Because I have noticed that web developer spent most of the time in adjectment of contents position on page and we put extra efforts to make our web pages compatible with mobile browsers. In twitter bootsrap javascript is very usefull, provides all kind of event handling that we need in a web application.





Sunday, March 31, 2013

Android Common Utilities

Hi guys,

In android projects there are many programs/commands we use frequently. Most of the time we implement these programs from scratch or take these program files from existing projects and refactor to adapt into new projects, This process take time. So I decide to put these programs together as much I can. So that developers can use them and reduce their development time. These days I am looking at every possibility to decrease the development time. This is one of my steps.

Pre-req: You should know how to create android project. Then download AndroidCommonUtils.jar jar and put into your project.

In this package we have these classes

    1. ActivityDTO
            Use Map (data structure) in this class, To pass data from activities to other components, Because I have seen under the development cycle, Most of the time we need to refactor functions and need to add or remove parameters, and some time functions took large number of parameters. So adding removing function parameters takes time. So this is my suggestion you can do following thing.
                ActivityDTO activityDTO = new ActivityDTO();
       activityDTO.getMap().put("activity", this);
       activityDTO.getMap().put("progressBarThread", progressBarThread);
       activityDTO.getMap().put("appDebuger",appDebuger);
       activityDTO.getMap().put("userConfigDb",userConfigDb);
     
LoginTask loginTask = new LoginTask(activityDTO);
loginTask.execute(userDTO);
Above example demonstrates how I am  sending different objects into  LoginTask constructor.And inside constructor I can get back these objects.

public LoginTask(ActivityDTO activityDTO) {
activity = (LoginActivity)activityDTO.getMap().get("activity");
progressBarThread =(ProgressThreadUtils)activityDTO.getMap().get("progressBarThread");
appDebuger = (AppDebuger)activityDTO.getMap().get("appDebuger");
userConfigDb = (UserConfigDb)activityDTO.getMap().get("userConfigDb");
}

     2.  AppDebuger
         This utility has methods to print logs on screen for purpose of debugung. I am using Singleton Pattern, Developer can on/off debuging from any where.
          AppDebuger appDebuger = AppDebuger.init();
          appDebuger.setOn(true);
          appDebuger.printInfo("Printhing from blog" , "1234");

    3. CommonMessagesUtils 
        This class has methods to show Toast messages and Dialog Messages.

    4. CommonValidationsUtils
        This class has methods to validate email, strings, password, convert stream into string, check strings are alpha numeric, decimal adjustment. ect

     5. DAOTemplate
           This class has method to insert, delete, remove, update, open close db connections almost every method that will help you to play with you database.
To use do like this
    
    6.  PrivateSharedPrefeqencesForStringsUtils
        This class has methods to save,remove and get presistant strings from android SharedPrefeqences.

    7.  ProgressThreadUtils
         This is a thread utility to manage progress dialog on you activities, State of thread is mentioned in ProgressThreadState enum. Inside your activity use this thread like this


    8.   SDCardUtils

        This class has all methods to save, retrieve files from sd card, you can download resources from internet into sd card and retrieve these as file or bitmap


Download source.


Friday, March 15, 2013

Use HTTPS connection in android app

Note : For this tutorial I am using Ubuntu platform 


1) If you are working on android application with client - server model. And services expose by servers are on SSL connection (i.e https://myserver/login?email=&password) then you need settings in your android applications.


1) Download the certificate. for demonstration I am using a link (i.e https://www.google.com) and chrome browser.
  a) Open chrome and this link : https://www.google.com
  b) Press Lock icon on you url bar and then select Connection tab
  c) Then select Certificate information
  d) You will see a pop up. Select details tab and Select top of Hierarchy under  Certificate Hierarchy section.
   e) press export button and save certificate in you directory.


f)  Certificate will be like :
-----BEGIN CERTIFICATE-----
MIIDIDCCAomg..........................................
-----END CERTIFICATE-----

2) Download  BouncyCastle Provider and put it will you SSL certificate file.
3) Open terminal and open your Oracle JDK bin folder
    cd /usr/lib/jvm/java-7-oracle/bin

4) use blow command to create a keystore file mykeystore.bks with

 password mysecret

keytool -importcert -v -trustcacerts -file "/path/Builtin Object Token:Equifax Secure CA" -alias IntermediateCA -keystore "/path/mykeystore.bks" -provider org.bouncycastle.jce.provider.BouncyCastleProvider -providerpath "/path/bcprov-jdk16-145.jar" -storetype BKS -storepass mysecret
5) To verify mykeystore.bks use below command on same terminal
keytool -list -keystore "/path/mykeystore.bks" -provider org.bouncycastle.jce.provider.BouncyCastleProvider -providerpath "/path/bcprov-jdk16-145.jar" -storetype BKS -storepass mysecret

you will get result like
Keystore type: BKS
Keystore provider: BC

Your keystore contains 1 entry

IntermediateCA, Mar 14, 2013, trustedCertEntry,
Certificate fingerprint (SHA1): D2:32:09:AD:23:D3:14:23:21:74:E4:0D:7F:9D:62:13:97:86:63:3A
 6) Now put mykeystore.bks in to your android project/res/raw/mykeystore.bks


7) Now use  mykeystore.bks into get response input stream from your request.
    you can get code here 

private static InputStream getHttpInputStream(String urlAddress,Context ctx)  throws KeyManagementException, NoSuchAlgorithmException, CertificateException, IOException, KeyStoreException, UnrecoverableKeyException{
        TrustManagerFactory tmf;
       
        KeyStore trustedStore = loadClientKeyStore(ctx);
        tmf = TrustManagerFactory.getInstance("X509");
        tmf.init(trustedStore);

        SSLContext ssl_context = SSLContext.getInstance("TLS");
        ssl_context.init(null, tmf.getTrustManagers(), null);
       
       
        HostnameVerifier hostnameVerifier = org.apache.http.conn.ssl.SSLSocketFactory.STRICT_HOSTNAME_VERIFIER;
       
        URL u = new URL(urlAddress);
        HttpsURLConnection urlConnection = (HttpsURLConnection) u.openConnection();
        urlConnection.setSSLSocketFactory(ssl_context.getSocketFactory());
        urlConnection.setHostnameVerifier(hostnameVerifier);
        urlConnection.connect();
       
        return (InputStream)urlConnection.getInputStream(); 
    }

    private static KeyStore loadClientKeyStore(Context context) throws KeyStoreException, NoSuchAlgorithmException, CertificateException, IOException {
            InputStream in =  context.getResources().openRawResource(R.raw.mykeystore);
            KeyStore trusted = null;
            trusted = KeyStore.getInstance("BKS");
            trusted.load(in, "mysecret".toCharArray());
            in.close();
            return trusted;
    }





Wednesday, March 13, 2013

Eclipse & maven setup for android development

I am using ubuntu. So developers of windows or mac should Google respective  softwares for their platforms.


1) Download latest an Eclipse.(I prefer Helios)
2) Download Android sdk.
3) Install ADT plugin in your eclipse follow this link.

4) Install maven using terminal
  • wget http://mirror.olnevhost.net/pub/apache/maven/binaries/apache-maven-3.0.4-bin.tar.gz
  • Run command above from the dir you want to extract maven to (e.g. /usr/local/apache-maven)
  • tar xvf apache-maven-3.0.4-bin.tar.gz
  • Export maven path:
    export M2_HOME=/usr/local/apache-maven/apache-maven-3.0.4
    export M2=$M2_HOME/bin
    export PATH=$M2:$PATH
  • Verify
    mvn -version
   
 5) Install M2e plugin (maven integration for eclipse)



 5.1) Go Window -> preferences > choose Maven from left menu -> Installations
       -> Add the path of installed folder form maven (you did in step 4)

5.2) Now in same menu select User settings and then browse path of maven you installed in step 4 and select cofig/settings.xml (i.e /usr/share/maven/conf/settings.xml)

6) Install Android configrator for m2e (From eclipse market place)
(Open help -> eclipse marketplace.. -> search for this plugin)




7) Select window -> Preferences -> Archetypes --> Add local catelog
   and add this  file  from your machine



Thats all you configuration for maven and eclipse of complete

Wednesday, January 30, 2013

How to speed up jquery for mobile and phoneGap

Pre-req: You guys can use Setup Blog post for setup. First of all create a android project and add  PhoneGap stuff into it. Then inside asset/www/css & asset/www/js
copy the jquery mobile js and css file.

In this tutorial i am giving tips to speed up you native app



1) Put you script code at the end of </body> tag.

2) Integrate the jquery function with phoneGap function for example in my code app is consuming JSON from a PHP server. I used
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
        $.getJSON("http://aamirkhan9876.byethost7.com/mobMoviesServer/services/m/get_banners.php",function(jData){//code});
}
onDeviceReady(); is provided by phoneGap.

3) PhoneGap application takes time on startup. A black screen appears for few seconds. To avoide that use a splash screen.



  On DroidGap Activity. use
        super.setIntegerProperty("splashscreen", R.drawable.images);
        super.loadUrl("file:///android_asset/www/index.html", 10000);  
 It will show the splash screen instead of black screen for 10000 ms.
 For activity loads before this time use blow code in index.html
 function onDeviceReady() {
      cordova.exec(null, null, "SplashScreen", "hide", []);
}

 4) Avoid jquery mobile nvigation transition. If you can.
     $.mobile.defaultPageTransition="none"
5) Compress your js & css files. Use any Compressor. i.e I found yui compressor awesome.

Source code is available.








Sunday, January 27, 2013

Facebook Connect & Jquery For mobile, Phonegap android app


If you want to create an android native app rather the a web app then you need Facebook android sdk for connect purpose. If you want to use html 5, jquery and other stuff and want to create a native app from these
scripting languages. Then one of the good solution is phone gap. Below example demonstrate how to create a phone gap project.

For setup download few things:

1) PhoneGap sdk
2) Facebook android sdk, For your help here is a jar file with all class files sdk have.
3) Phonegap plugin facebook connect



Step A:
          i) Extract facebook android sdk and copy \facebook-android-sdk-3.0.2.b\facebook to your destination folder.
ii) Open eclipse and go to File -> Import -> Existing Project into work space.
iii) Then go to your dest. work space and select the facebook project.
iv) Modify AndroidManifest according to your requirements and add permission for internet access.
v) facebook is name of my project.

Step B:

i) Extract PhoneGap sdk. Go to folder phonegap-2.3.0\lib\android.
ii) Copy folder xml and past it into facebook/res
Add below lines in xml

<plugin name="org.apache.cordova.facebook.Connect" value="org.apache.cordova.facebook.ConnectPlugin" />

iii) Copy cordova-2.3.0.jar into folder facebook/libs. Right click the jar and select Build Path -> Add to Build Path.
iv) Copy cordova-2.3.0.js into  \facebook\assets\www. IF you dont find these folders the create.
vii) Create a droid activity as we do in PhoneGap. Let say MainActivity.java

Step C:
By Project here I mean facebook the destination project.

i) Extract Phone facebook connect plugin.
ii) Copy www/cdv-plugin-fb-connect.js into project assets\www.
iii) Copy lib/facebook_js_sdk into project assets\www.
iv) Copy org\apache\cordova\facebook\ConnectPlugin.java to project src folder.
v) Copy contents fron folder phonegap-plugin-facebook-connect-master\example\HackBook  to project assets\www.
vi) Edit index.html and put your facebook app id there. Click for Tutorial 


Note: Right Click project Go to Properties -> Android and un check Is Library option. 

You can use Jquery for mobile in this project , put jquery for mobiles css and js files into www/css,
www/js folders.
You index.html will look like this. 

Now you can run project on device.

For Source code click.






Click here for Referece.