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.

Advertisement

Leave a Comment

No comments yet.

Comments RSS TrackBack Identifier URI