Fixing the incompatibility between Cordova Statusbar Plug-in and MobileFirst Foundation 8.0
Vittal R Pai June 13, 2016
MobileFirst_Platform iOS CordovaWhen integrating the cordova-plugin-statusbar to an iOS Cordova application that uses the MobileFirst Cordova SDK for MobileFirst Foundation 8.0, you may notice that the status bar is not displayed properly in your application.
As MFP sample screenshot with cordova-plugin-statusbar
and the status bar style set to blacktranslucent
the output should look as seen here below:
By default, the status bar should display like this:
But the way it is rendered is like this:
This is because of following reasons:
-
MFPAppDelegate
ofcordova-plugin-mfp
is designed to meet the MobileFirst Foundation product requirement of a Cordova application that can contain both hybrid and native screens, where it loads theUIViewController
as the root view controller andCDVViewController
as child view controller. -
This implementation introduces potential friction points with
cordova-plugin-statusbar
that assumesCDVViewController
is the root view controller.
In order to make cordova-plugin-statusbar
work as expected, you will need to set CDVViewController
as the root view controller. Replacing the code snippet in the wlInitDidCompleteSuccessfully
method as suggested below in the MFPAppdelegate.m file of the cordova iOS project will resolve the issue.
Existing snippet:
-(void)wlInitDidCompleteSuccessfully
{
UIViewController* rootViewController = self.window.rootViewController;
// Create a Cordova View Controller
CDVViewController* cordovaViewController = [[CDVViewController alloc] init] ;
cordovaViewController.startPage = [[WL sharedInstance] mainHtmlFilePath];
// Adjust the Cordova view controller view frame to match its parent view bounds
cordovaViewController.view.frame = rootViewController.view.bounds;
// Display the Cordova view
[rootViewController addChildViewController:cordovaViewController];
[rootViewController.view addSubview:cordovaViewController.view];
[cordovaViewController didMoveToParentViewController:rootViewController];
}
Suggested fix:
-(void)wlInitDidCompleteSuccessfully
{
// Create a Cordova View Controller
CDVViewController* cordovaViewController = [[CDVViewController alloc] init] ;
cordovaViewController.startPage = [[WL sharedInstance] mainHtmlFilePath];
[self.window setRootViewController:cordovaViewController];
[self.window makeKeyAndVisible];
}
Your application status bar will now be renedered as expected with cordova-plugin-statusbar without issues.
Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.