I found the following blog post that describes the process of implementing this interaction: "Worklight Action Sender: A tutorial on adding a native header into a hybrid mobile app." When working with this information, though, it was not completely clear to me how to insert the Android activity into the already existing HelloWorklight hybrid application. I got some additional information from the blog author on how to implement it, and I enhanced the application to include page content. Here I use Building a multi-page application from the IBM Worklight Foundation “Getting Started” examples.
1. Create a Worklight HelloWorklight hybrid application.
Add a Worklight environmentfor Android and iPhone (on a Mac only).
3. Follow “Part two: Android Native Action Bar” in the blog post to implement the Android side.
- Apply these changes to the HelloWorklightProjectHelloWorklightAndroid project.
- Set the minimum Android API level to 14 in AndroidManifest.xml.
- Because you already have HelloWorklight.java Android activity you can completely overwrite this with the HybridActivity shown in the blog post, but keep the package name com.HelloWorklight.
- Then you have to change the class name to the original HelloWorklight. With this you don't have to change the AndroidManifest.xml because HelloWorklight is already defined as the main activity.
- Resolve all errors by adding the import statements (Press Ctrl+Shift+O). Select android.util.Log on the Organize Importspanel.
- At the end of the section, follow the two important notes.
4. Right-click on …/app/HelloWorklight and select Run As → Build All Environments.
5. Right-click on HelloWorldProjectHelloWorldAndroid and select Run As → Android Application. The Android application now looks as shown in the blog post.
6. Follow "Part three: iOS Native Navigation Header” and with Xcode open the generated iPhone project ...iphone/native/HelloWorldProjectHelloWorldiphone.xcodeproj.
7. Right-click on the Classes folder and create new Cocoa classes (.m and .h) with names MyCordovaViewController (UIViewController) and OptionsMenu (UIView).
8. Copy the source code from the blog post into each of the files and in the HelloWorklight.m change the WlInitDidCompleteSucessfully function as shown in the post.
9. Click the Run button. The app should look like it is shown in the blog post.
In the next steps, we will add the content from the multi-page Worklight example and add the back button to the Android header to achieve the same functionality as with iOS.
10. Download the multi-page application and import it into your workspace.
11. From the …/apps/MultiPageApp/common/js folder copy MainPage.js, Page1.js and Page2.js to the …/common/js folder of our HelloWorklight app.
12. Copy the …/apps/MultiPageApp/common/pages folder to …/common folder of the HelloWorklight app.
13. In …/HelloWorklight/common/index.html add <div id="wrapper"><div id="pagePort"></div></div> inside the html <body> below the Hello Worklight string.
14. Adjust the main.js, hybrid.js, MainPage.js, Page1.js and Page2.js as shown in the attached project source to allow interaction with the native UI.
The combined application does not support Option3/Action #3 from the blog post, and the HTML back buttons of the multi-page application do not reflect in the action bar.
Here is an interesting reflection on the topic.
Do you have any comments or suggestions to share? Follow me on Twitter @kpschlotter.