Phonegap Sencha Touch Pin Code feature

A couple of days ago, I added the Pin Code locking functionality in Diary Mobile mobile app. It required some tinkering with iOS Objective-C, Android Java and HTML5 javascript code.

First I added a code in the onReady function of Sencha Touch


Ext.setup({
  //...
  onReady: function() {
  //...
    appActive = function() {
      Util.logger('===app is now active in function====');
      showVerifyPinCB();
    };
  //...
}

The showVerifyPinCB() function displays the pin code panel in the form:

Pin Code/Lock screen

 

 

This screen is also reused as a setting up the pin code screen. Now comes the Objective-C code:

- (void)applicationDidBecomeActive:(UIApplication *)application { 
 // delay of 1ms ensures code will be executed in new stack trace 
 // that way, event listener can't block applicationDidBecomeActive 
 // and crash the app 
 NSLog(@"%@",@"applicationDidBecomeActive\n"); 
 NSString *fireActiveEvent = @"window.setTimeout(appActive, 1);"; 
 [self.webView stringByEvaluatingJavaScriptFromString:fireActiveEvent]; 
} 

As mentioned in the comments, it calls the javascript appActive function after a 1 nanosecond delay. This code is placed in the diary_mobileAppDelegate.m file.
Similarly, for Android the code to be placed in the class that extends DroidGap is:


public class DiaryMobile extends DroidGap
{
//...
    @Override
    public void onStart()
    {
      appView.loadUrl("javascript:window.setTimeout(appActive, 1);");
      super.onStart();
    }
//...
}

For me this got the job done and cleared a major hurdle of firing an event from Objective-C/Java and catching it from javascript. After that I just had to write up the code to enable/disable pin code and verify the pin code to unlock the screen.

Advertisements

HTML5 mobile application for App Store

I’d use the tools IntelliJ IDEA v 9, Android SDK v 2.2, PhoneGap v 0.9.1, ant v 1.8, ruby v 1.8.7 and java v 1.6.

http://phonegap.pbworks.com/Getting-started-with-Android-PhoneGap-in-Eclipse

On the last screen of the IntelliJ android project wizard take care of two things:

  • The package name that you mention and
  • Create “Hello World!” project, the Activity name

must be the same as the “package_name” and “name” of your application respectively when you created a phonegap blank project by running the droidgap script.

You may have to update the default android virtual device from “Select Run/Debug Configuration” drop down –> Edit Configurations –> Select appropriate Android Virtual Device from the drop down.

*Update

A lot of updates have occurred since I last wrote this post back in September  2010. I saved it as a draft to revisit with complete details. However, I got busy with my job and managed to launch a proper phonegap and Sench Touch application for both the iOS and Android platform – Diary Mobile.