Saturday, April 27, 2013

Integrate ChildBrowser into Worklight App (IOS Version)

Our team recently trying to get Worklight to open an external URL within a hybrid mobile app. Worklight has an OpenURL function that we first implemented, but the problem with this opens an external URL in the same window as the app,and this isn’t what we are looking for because when URL opens in the same window as the app, it’s difficult to exit the external website, and return to the app flow. So we went with the ChildBrowser plugin to implement child browser functionality within our current running Worklight app. 

During googling I found many people struggling with PhoneGap/Cordova to implement ChildBrowser up.So I come with the solution with easy step and I decided to write a post that hopefully shows up in google for people running and looking for solution.

The ChildBrowser plugin I’m using can downloaded from here.

Create a simple Worklight App name it ChildBrowserDemo. please follow the Figure 1.1

Figure 1.1
Define you app name in second screen or same ChildBrowserDemoApp see Figure 1.2

Figure 1.2

Copy the ChildBrowser.js from ChilBrowserPlugin folder and paste it under common/js folder in your project.
now add this code snipped under the project main html file.
a JavaScript code snippet I used to get it to work. I added a listener on button and call to the install method of the ChildBrowser object. Finally I calling a showWebPage function of childbrowser object that handles the URL opening.

 <h1> Child Browser Demo </h1>        
 <button id="open-child-browser">Open google.com</button>  
 <script>  
 document.getElementById("open-child-browser")  
 .addEventListener("click", function() {   
 try{  
  ChildBrowser.install();  
 }catch(e){  
  alert ("CB Error :"+e);  
 }  
 window.plugins.childBrowser.showWebPage('http://www.google.com');
});  
 </script>  
 <!-- application UI goes here -->  
 <script src="js/initOptions.js"></script>  
 <script src="js/ChildBrowser.js"></script>  
 <script src="js/ChildBrowserDemoApp.js"></script>  
 <script src="js/messages.js"></script>  


Figure 1.3
Now add iphone Worklight environment now build & deploy application this is done for studio side.
After Build & Deploy project from studio right-click on iphone icon and run as xcode project. please follow the below Figure 1.4 for the reference.

Figure 1.4
after opening the project in Xcode drag all of the .m, .h, and .bundle file(s) from the ChilBrowserPlugin folder to the Plugins folder of your project. Make sure the copy option is selected. check Figure. 1.5 below.
Figure 1.5

and then drag the following files into Resources folder into your project.
  1. ChildBrowser.bundle
  2. ChildBrowserViewController.xib
In your project, under the Supporting Files folder, open the Cordova.plist file. You’ll see a bunch of key/value pairs and the one you want is under Plugins. You’ll need to add 2 by clicking the add button that shows when you highlight the Plugins section.
Key: ChildBrowser,        Type:String, Value: ChildBrowser.js
Key: ChildBrowserCommand, Type:String, Value:ChildBrowserCommand

Figure 1.6
Now final step to add these .h and .m files again into Compile Sources to make this plugin available for app in xcode. (otherwise it will prompt ChildBrowserCommand plugin not found error. ) Please follow Figure 1.7.

Figure 1.7
Its time for Testing on Emulator.


Friday, March 15, 2013

How to use IntentSerivce with Broadcast Receiver Android (Flickr Feed)


IntentService is similar solution like AysnTask, but it's purpose is meant for background process like downloading, uploading, or other blocking operations that don't need user interaction to transform this idea into the real so I created the example of flickr feeds to do download operation in background with Broadcast Receiver.

This is how my DownloadService class look like.

DownloadService.java

public class DownloadService extends IntentService {

  private String requestType;

  public DownloadService() {
    super("DownloadService");
  // TODO Auto-generated constructor stub
  }
  
  @Override
  protected void onHandleIntent(Intent intent) {
     
    // TODO Auto-generated method stub
    Bundle bundle = intent.getBundleExtra(AppConstants.FLICKR_BUNDLE);
    requestType = bundle.getString(AppConstants.REQUEST_TYPE);
    if(requestType.equals("FlickrFeeds")) {
        String urlpath = bundle.getString("urlpath");
        getFlickrFeed(urlpath);
    }
  } // onHanlderIntent

}

getFlickrFeed method i created to hit the GET request to flickr api to get feeds from flickr and send the response back to my broadcast receiver using sendBroadcast (Intent intent) method to handle and process it further to display in ListView.

private void getFlickrFeed(String url) {

  DefaultHttpClient httpClient = new DefaultHttpClient();
  HttpGet request = new HttpGet(url);
  String responseData = "";
  try {
   HttpResponse response = httpClient.execute(request);
   if (response.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
    InputStream instream = response.getEntity().getContent();
    BufferedReader rd = new BufferedReader(new InputStreamReader(
      instream));
    StringBuilder total = new StringBuilder();
    String line;
    if (rd != null) {
     while ((line = rd.readLine()) != null) {
      total.append(line);
     }
    }
    // instream.close();
    responseData = total.toString();
    rd.close();
   } else {

    Log.w("HTTP1:", response.getStatusLine().getReasonPhrase());
    response.getEntity().getContent().close();
    throw new IOException(response.getStatusLine()
      .getReasonPhrase());
   }
  } catch (Exception e) {
   e.printStackTrace();
  }

  Intent broadcastIntent = new Intent();
  broadcastIntent.setAction(AppBroadCastReceiver.PROCESS_RESPONSE);
  broadcastIntent.addCategory(Intent.CATEGORY_DEFAULT);

  /* parepare bundle for broadcase */
  Bundle finishBundle = new Bundle();
  finishBundle.putString(AppConstants.RESPONSE_TYPE, "FlickrFeeds");
  finishBundle.putString(AppConstants.RESPONSE_DATA, responseData);
  broadcastIntent.putExtra(AppConstants.FLICKR_BUNDLE, finishBundle);
  sendBroadcast(broadcastIntent);
 }

Now our service class looks ready to hit the wall, Ahem!! Flickr :)
Not Finished Yet!! Its time to call this service from our Activity. As we following this example using BroadCastReceiver Class.

A broadcast receiver extends the BroadcastReceiver class and which is registered as a receiver in an Android Application via the AndroidManifest.xml file or dynamically via the Context.registerReceiver() method.

Alternatively to this static registration, you can also register a broadcast receiver dynamically via the Context.registerReceiver() method.

Note: If registering a receiver in your Activity.onResume() implementation, you should unregister it in Activity.onPause(). Otherwise the system will report a leaked broadcast receiver error. For instance if you registered a receive in in onResume() methods of your activity, you should unregister it in the onPause() by using Context.unregisterReceiver() method.

For retrieving flickr feeds I used Adeel Ansari Flickr PhotoStream.

MainActivity.java with nested AppBroadCastReceiver Code Snippet;

public class MainActivity extends FragmentActivity {
   AppBroadCastReceiver receiver;
   private static DataListFragment list;
   private Button loadFlickrBtn;
   // Adeel Ansari Flickr PhotoStream
   public static String flickrPath = "http://api.flickr.com/services/"
    +"feeds/photos_public.gne?id=47906772@N05&lang=en-us&format=json";

   /**
    * onCreate
    * 
    **/
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        System.out.println("MainActivity onCreate called ");
 }
    
    public void onClick(View view) {

       Intent msgIntent = new Intent(this, DownloadService.class);
       Bundle bundle = new Bundle();
       bundle.putString(AppConstants.REQUEST_TYPE, "FlickrFeeds");
       bundle.putString("urlpath", flickrPath);
       msgIntent.putExtra(AppConstants.FLICKR_BUNDLE, bundle);
       startService(msgIntent);
    }

    @Override
    protected void onResume() {
       // TODO Auto-generated method stub
       IntentFilter filter = new IntentFilter(
       AppBroadCastReceiver.PROCESS_RESPONSE);
       filter.addCategory(Intent.CATEGORY_DEFAULT);
       receiver = new AppBroadCastReceiver();
       registerReceiver(receiver, filter);
       System.out.println("MainActivity onResume called ");
       super.onResume();
    }

    @Override
    protected void onPause() {
       // TODO Auto-generated method stub
       super.onPause();
       System.out.println("MainActivity onPause Called");
       unregisterReceiver(receiver);
    }
}

In onClick method Activity send requests through startService(Intent) calls. The service is started and handle Intent in turn using a worker thread, and stops itself when it runs out of work.

Our Broadcast Receiver class with name AppBroadCastReceiver is defined as nested class in MainActivity.
When implementing a broadcast receiver you have to create a subclass of Android’s BroadcastReceiver and have to implement the onReceive() method.

Android calls the onReceive() method on all registered broadcast receivers whenever the event occurs or sendBroadcast() method allows you to send Intents to your registered receivers.

// nested AppBroadCastReceiver class 
public class AppBroadCastReceiver extends BroadcastReceiver {

  public static final String PROCESS_RESPONSE = Intent.ACTION_VIEW;
 
  @Override
  public void onReceive(Context context, Intent intent) {
   String response = null;
   Bundle receiveBundle = intent
       .getBundleExtra(AppConstants.FLICKR_BUNDLE);
   String responseType = receiveBundle
       .getString(AppConstants.RESPONSE_TYPE);
   System.out.println("onReceive " + responseType);
   if (responseType.equals("FlickrFeeds")) {
 /* Receiving Feeds from url */
 response = receiveBundle.getString(AppConstants.RESPONSE_DATA);
 response = fixJsonResult(response);
 ArrayList flickrFeedsList = parepareList(response);
 FragmentManager fm = getSupportFragmentManager();
 
 // Create the list fragment and add it as our sole content.
 list = new DataListFragment(flickrFeedsList);
 fm.beginTransaction().add(R.id.fragment_container, list)
 .commit();
 }
  }

  public String fixJsonResult(String json) {
   json = json.replace("jsonFlickrFeed(", "");
   json = json.replace("})", "}");
   return json;
  } // fixJsonResult

  private ArrayList parepareList(String response) {
  
   ArrayList flickrFeedsList = new ArrayList();

   try {
      if (response != null && response != "") {
        JSONObject jsonObj = new JSONObject(response);
          if (jsonObj.getJSONArray("items") != null) {
     JSONArray jobPosts = jsonObj.getJSONArray("items");
            
            for (int i = 0; i < jobPosts.length(); i++) {
              flickrFeedsList.add(new FlikrFeed(jobPosts
  .getJSONObject(i)));
            }
         }
       }
     } catch (JSONException e) {
        e.printStackTrace();
     }
     return flickrFeedsList;
  } // parepareList

} // AppBroadCastReceiver

In onReceive method this receive a json data fetch by service and displaying feeds in listView, I used DataListFragment class which extends ListFragment and prepare the result to view in the list.

App Screen Shots:


Download Source Code.: https://github.com/m-saifuddin/AndroidProjOne

Reference :
1) Android Service Tutorial by (By Lars Vogel)
2) Android Tutorial: BroadcastReceiver by Wolfram Rittmeyer

Wednesday, December 26, 2012

zBar integeration with IOS iphone/ipad.


Few Days back I started learning IOS, and asked me to integrate Bar Code Scanner within application. After spent few hours I found the zBar SDK for iphone and found this very easy to implement within app.

So this simple scanner barcode view looks like.

















To build this interface I follow this steps.

  1. Create new project in xcode.
  2. Select Single View Application under IOS->Application Tab (Press Next)
  3. I used the app name ZbarExample in product name and select two checkboxes "Use storyboard" and "Use Automatic Reference Counting".
  4. Now click to mainStoryboard.storyboard file. Drag a label onto the view and customize the placement and appearance as you like.
  5. Drag a Round Rect Button onto the view and title it “Scan”. Customize the placement and appearance as you like.
Now we're going to make an outlet for this label field on the ViewController using Assistant Editor feature of Xcode. Open the Assistant Editor with the button from the toolbar (the one that looks like tuxedo/ alien face). it should automatically open on ViewController.h

Select the label field and ctrl-drag into the .h file:
Let go of the mouse button and a popup appears:

Name the new outlet "viewResult". After you click Connect, Xcode will add the following property to ViewController.h:

do the same for button and name it "scan" and select IBAction in connection this time.

and your file should look like this.

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (strong, nonatomic) IBOutlet UILabel *viewResult;

- (IBAction)scan:(id)sender;

@end

Entries of that code inserted in ViewController.m file automatically.

Now its time to integrate Zbar Sdk into our example.

Use this http://zbar.sourceforge.net/iphone/sdkdoc/install.html to download and integrating step to follow.

After download and add following framework in your app.

Open ZBarSDK-1.2.dmg in the Finder.(its appear like something)

















Drag the ZBarSDK folder into your Xcode project. In the dialog that appears, you should choose to copy the SDK into your project by checking the box.


















The target that you want to link with the library should also be selected in the target list.


Link the following additional frameworks to any targets that link with the ZBarSDK. You should set the first three to use weak references and configure an appropriate deployment target if you still need to support iOS 3:
  • AVFoundation.framework (weak)
  • CoreMedia.framework (weak)
  • CoreVideo.framework (weak)
  • QuartzCore.framework
  • libiconv.dylib
If you check “Link Binary With Libraries” for the target(s), you should see all of these frameworks followed by libzbar.a.

Import the SDK header from your prefix header to make the barcode reader APIs available and include ZBarReaderDelegate like this.


#import <UIKit/UIKit.h>
#import "ZBarSDK.h"

@interface ViewController : UIViewController <ZBarReaderDelegate> {
}

@property (strong, nonatomic) IBOutlet UILabel *viewResult;

- (IBAction)scan:(id)sender;

@end

now move to the ViewController.m file and replace this code into scan method and don't forget to import ZBarSDK.h in same.

- (IBAction)scan:(id)sender {
      
    //initialize the reader and provide some config instructions
    ZBarReaderViewController *reader = [ZBarReaderViewController new];
    reader.readerDelegate = self;
    
    [reader.scanner setSymbology: ZBAR_I25
                          config: ZBAR_CFG_ENABLE
                              to: 1];
    reader.readerView.zoom = 1.0; // define camera zoom property
    
    //show the scanning/camera mode
    [self presentModalViewController:reader animated:YES];
    // Do any additional setup after loading the view from its nib.

}


And add this method in same ViewController.m file.

- (void) imagePickerController: (UIImagePickerController*) reader
 didFinishPickingMediaWithInfo: (NSDictionary*) info {
    
    //this contains your result from the scan
    id results = [info objectForKey: ZBarReaderControllerResults];
    
    //create a symbol object to attach the response data to
    ZBarSymbol *symbol = nil;
    
    //add the symbol properties from the result
    //so you can access it
    for(symbol in results){
        
 //symbol.data holds the value        
        NSString *upcString = symbol.data;
        
        //print to the console
        NSLog(@"the value of the scanned UPC is: %@",upcString);
        
        NSMutableString *message = [[NSMutableString alloc] 
        initWithString: @"Scanned Barcode: "];
        
        [message appendString:[NSString stringWithFormat:@"%@ ",
        upcString]];
        
        //Create UIAlertView alert
        UIAlertView  *alert = [[UIAlertView alloc] 
        initWithTitle:@"Product Barcode" message: message delegate:self 
        cancelButtonTitle:@"Cancel" otherButtonTitles: nil];
        
        self.viewResult.text = upcString;
        [alert show];
        //After some time
        [alert dismissWithClickedButtonIndex:0 animated:TRUE];
        
        //make the reader view go away
        [reader dismissModalViewControllerAnimated: YES];
    }
    
}



Time for Testing. :)

Download Source Code.: https://github.com/m-saifuddin/iphone


Friday, April 24, 2009

Code Generator For Spring Framework..



JWAG (Java Web Application Code Generator) is an easy to use, a simple Java based design on template-based approach. using Jakarta Velocity for templates language. JWAG generates a complete Spring web application to do CRUD (Create, Retrieve, Update and Delete) operations on selected tables, include set of JSPs like(list, view, add, edit), Controllers (using a predefined Spring controllers), Dao interface and implementation with CRUD opertions as well as JavaBeans from MySQL database.


url : http://jwag.cjb.net

Monday, April 14, 2008

Get your resume in PDF through Linkedin


writing an effective resume is one that gets results. All your effort that is spent on writing a good resume is worth it and on web there are uncounted web site available which will helps you to provide the tips in order to write a resume (like at the time of writing ,you need to be very selective in the information you share on a resume and only include details that are relevant to the employer and the position) . as far as concern with all these tips, it will take minimum 1 or 2 hours or sometimes more than that when we are considering to implement some effectual template in it.
if I say, creating a profile on web is taking less time instead of writing resume in PDF or any other format. then you would agree, but I won't. why because linkedin is here.. [To create your short resume. click on adobe acrobat file type icon next to the printer icon] as a user of LinkedIn, determine the way that anyone who wanted to create their resume with cool template , could used their linkedin profile to get inshort resume, I wouldn't say in milliseconds but less than 10 seconds you'll have your resume in your machine in pdf format.

Tuesday, January 09, 2007

Won the Ajax book on Javaranch Book Promotion


December 23rd The day when I saw my name in the winners of Kris Hardlock book, Ajax for Web Application Developers in JavaRanch Book Promotion. More on more on web I found JavaRanch very helpful place on earth. JavaRanch treats their member as a student where member can learn, discuss and clear their queries regarding in Java Technologies. Thanks JavaRanch for being there as such a strong and large community.
And I also like to thanks to all Sheriffs, Authors and Bartenders at JavaRanch and congrats all others winner of this valuable book.