+

Search Tips   |   Advanced Search

Add MobileFirst web capabilities to an existing native app

We can add a MobileFirst web view into an existing native Android, iOS, or Windows Phone 8 application. For example, we can transform the application from pure native to hybrid. With such a change, we can add MobileFirst web capabilities to an existing native application.

To add MobileFirst web capabilities to an existing native app:

  1. Export the corresponding resources from an existing MobileFirst project.

  2. Integrate those resources into the native app and update your code to show a MobileFirst web view.

  1. Use either the Eclipse plug-in or the command-line interface, export the corresponding resources from an existing MobileFirst hybrid project.

    When first adding the web view to a native app, select the option to export the native libraries. Subsequent exports do not need to include these libraries and will result in much smaller archives.

    • With MobileFirst Studio:

      1. Ensure that the latest resources are built.

      2. Right-click Run As: Build Environment.

      3. Right-click the environment directory. For example, right-click iphone, android, or windowsphone8.

      4. Select Export MobileFirst Hybrid Resources.

      5. Specify the location in which to create the .zip file archive. For example, hybrid_resources.zip.

    • With MobileFirst Platform Command Line Interface:

      1. Change the directory to the environment directory. For example: cd apps/myhybridapp/android

      2. Make sure that the latest resources are built. For example: mfp build

      3. Run the mfp export command.

      4. Specify the name and location where to create the .zip archive. For example: hybrid_resources.zip

  2. Integrate the hybrid resources into the native application to show a MobileFirst web view. Here are the steps for Android, iOS, and Windows Phone 8 devices.

    • For Android devices:

      1. For Android devices, extract the archive, for example hybrid_resources.zip file, to the native Android project.

      2. If we are using the Android Native API, some files might need to be replaced, such as the libraries (lib/*.jar) and the client properties (assets/wlclient.properties).

      3. When we are extracting the file, if the application contains a file with the same path name as provided by the MobileFirst hybrid archive, merge the contents of the two files such as res/ and values/strings.xml.

      4. Update the AndroidManifest.xml file for your native Android application with the contents of the AndroidManifest-WL.xml file, which is provided in the MobileFirst hybrid archive.

      5. If we are using Android Studio, take into account that the project directory might differ from the Eclipse ADT. Extract the MobileFirst hybrid archive content to the app/libs directory for libraries and the app/src/main/ directory for assets and resources.

      6. Update the code to initialize the MobileFirst Web Framework and show a Cordova web view. See the sample in Implementing a custom startup process in Android-based hybrid applications.

    • For iOS devices:

      1. If the WorklightAPI and worklight.plist files are in the iOS native project, delete them.

      2. Extract the MobileFirst hybrid resources contents from the archive, for example the hybrid_resources.zip file, into the directory containing the iOS native project where the .xcodeproj file is located.

      3. Add the Cordova subproject to the native application:

        1. Right-click Project Navigator - Add Files to Xcode_project_name.

        2. Select CordovaLib/CordovaLib.xcodeproj.

        3. Select Copy items into destination group's folder (if needed).

        4. Select Create groups for any added folders.

      4. Add the MobileFirst files to the native application:

        1. Right-click Project Navigator - Add Files to Xcode_project_name.

        2. Select the following files and directories: 
          buildtime.sh config.xml
FipsHttp
Frameworks/
Resources/
Tealeaf/
worklight.plist
WorklightSDK

        3. Select Copy items into destination group's folder (if needed).

        4. Select Create groups for any added folders.

      5. Add the web assets to the native application:

        1. Right-click Project Navigator - Add Files to Xcode_project_name.

        2. Select www/.

        3. Select Copy items into destination group's folder (if needed).

        4. Select Create groups for any added folders.

      6. Add the Cordova library as a build dependency:

        1. Select Target.

        2. Select Build Phases.

        3. Under Target Dependencies, add CordovaLib.

      7. Add the Cordova library dependency, which is libCordova.a.

      8. Add Run Script Before Copy Bundle Resources.

      9. Add Run Script as last Phase.

      10. Select Editor > Add Build Phase > Add Run Script Build Phase.

      11. Open a shell. At the command prompt, type:

          /bin/sh touch -cm ${PROJECT_DIR}/www

      12. Add Run Script After Copy Bundle Resources.

      13. Select Editor > Add Build Phase > Add Run Script Build Phase.

      14. Open a shell. At the command prompt, type: 
        /bin/sh script_file="buildtime.sh"
echo "Running a custom build phase script: $script_file"
unsecure_project_path=${PROJECT_DIR}
secure_project_path="${unsecure_project_path// /\ }"
eval ${secure_project_path}/${script_file}
scriptExitStatus=$?
echo "DONE with script: ${script_file} (exitStatus=${scriptExitStatus})\n\n"
exit "${scriptExitStatus}"

      15. Add Linker flag to link the external dependencies:

        1. Select Target.

        2. Click Build Settings.

        3. Expand Linking and select All.

        4. Double-click the value for Other Linker Flags.

          Use the search box to filter the list.

        5. Copy and paste the following code: 
          -force_load
"$(BUILT_PRODUCTS_DIR)/libCordova.a"
-force_load
"$(SRCROOT)/WorklightSDK/libWorklightStaticLibProject.a"
-ObjC

      16. Check the armv7 architecture.

        1. Select Project.

        2. Click Build Settings.

        3. Expand the Architectures section.

        4. Click a value for Architectures.

        5. Select Other.

        6. Remove Standard architectures (including 64-bit) or $ARCHS_STANDARD_INCLUDING_64_BIT.

        7. Add armv7.

      17. Verify that the following libraries and frameworks are referenced: 
        AddressBook.framework
AddressBookUI.framework
AssetsLibrary.framework
AudioToolbox.framework
AVFoundation.framework
CFNetwork.framework
CoreData.framework
CoreGraphics.framework
CoreLocation.framework
CoreMedia.framework
CoreMotion.framework
CoreTelephony.framework
Foundation.framework
ImageIO.framework
MediaPlayer.framework
MobileCoreServices.framework
Security.framework
SystemConfiguration.framework
QuartzCore.framework
UIKit.framework
libz.dylib
libstdc++.6.dylib

      18. Update the code to initialize the MobileFirst web framework and show a Cordova web view. See the sample in Implementing a custom startup process for iOS-based Hybrid applications.

    • For Windows Phone 8 devices:

      1. Extract the hybrid resources, for example the hybrid_resources.zip file, into a directory, such as WP8HybridResources.

      2. Add the hybrid resources to the native application by completing the following steps:

        1. Open the native application in Visual Studio.

        2. Add the www directory to the native application.

        3. Add the config.xml file to the native application.

        4. Add the worklight.xml file to the native application properties.

        5. Add the wlclient.properties file to the native application.

        6. Copy the WP8Hybridresources/buildtarget directory to the native application root directory.

        7. Add the WLCordovaClassLib.dll file to the native application.

        8. Add the NewtonSoft.Json.dll file to the native application.

        9. Open the native_application.csproj file, which is the Visual Studio project file for the native application. 
          <ItemGroup>
  <Reference Include="WLWPNativeLib.dll">
    <HintPath>buildtarget\$(Platform)\WLWPNativeLib.dll</HintPath>
  </Reference>
  <Reference Include="WLCordovaClassLib.dll">
    <HintPath>.\WLCordovaClassLib.dll</HintPath>
  </Reference>
  <Reference Include="NewtonSoft.Json.dll">
    <HintPath>.\NewtonSoft.Json.dll</HintPath>
  </Reference>
</ItemGroup>

          This step adds the DLL references to the project.

      3. Update the capabilities from the hybrid application:

        1. From the native application in Visual Studio, open Native App > Properties > WMAppManifest.xml.

        2. Add the missing capabilities, which are part of the WP8HybridResources/Properties/WMAppManifest.xml file.

      4. Create a page and copy the contents from the hybrid application:

        1. Add a page from native project in Visual Studio.

        2. Right-click the native project and select Add > New Item > Windows phone portrait page.

        3. Provide a name for the page. For the sake of this procedure, consider that the page name is: HybridPage.xaml

      5. Open the new HybridPage.xaml page, and remove the exiting Grid XML content.

      6. Open the WP8HybridResources/MainPage.xaml page in a text editor.

      7. Copy the Grid XML section and paste it into the new HybridPage.xaml page. The following code shows the new grid XML section: 
        <Grid x:Name="LayoutRoot" Background="Transparent">
  <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <my:CordovaViewHorizontalAlignment="Stretch"
    Margin="0,0,0,0"
    x:Name="CordovaView"
    VerticalAlignment="Stretch"
    StartPageUri="/www/skinLoader.html"/>
</Grid>

      8. Copy the xmlns:mytag from the WP8HybridResources/Mainpage.xaml file to the HybridPage.xaml page for the phone tag. For example: 
        xmlns:my="clr-namespace:WPCordovaClassLib;
assembly=WPCordovaClassLib"

      9. Open the App.xaml.cs file of the native application in Visual Studio.

      10. In the App constructor method, after the lineInitializePhoneApplicaton method, add the following code to initialize the native library: 
        new WPNativeLib.Initializer();
new HybridPluginInitializer.Initializer();

      11. Open the HybridPage.xaml.cs file of the native application in Visual Studio.

      12. After the constructor, add the following method: 
        voidCordovaView_Loaded(object sender, RoutedEventArgs e){
}

      13. Open the hybrid page from the native application.

      14. Add a button in the native application.

      15. For the Click method, write the following code to open the hybrid page:

          NavigationService.Navigate(new Uri("/HybridPage.xaml", UriKind.Relative));

      16. Open the HybridPage.xaml.cs file inside the default construction and add the following entry:

          WL.createInstance(); //create the instance of the ActionSender API

        Select your target architecture, such as "x86" or "ARM", but not "Any CPU".

      17. If we use the JSONStore feature from the JavaScript API on Windows Phone 8, follow the next steps:

        1. Open the native_application.csproj file, which is the Visual Studio project file for the native application.

        2. Copy the following XML code into this project file: 
          <ItemGroup>
  <Content Include="buildtarget\$(Platform)\sqlite3.dll">
    <Link>sqlite3.dll</Link>
    <CopyToOutputDirectory>Always</CopyToOutputDirectory>
  </Content>
  <Reference Include="JSONStoreWP8Lib">
    <HintPath>buildtarget\$(Platform)\JSONStoreWP8Lib.dll</HintPath>
  </Reference>
</ItemGroup>

        3. In Visual Studio, open the App.xaml.cs file of the native application.

        4. In the App constructor method, after the new WPNativeLib.Initializer() line, add the following code to initialize the JSONStore library:

            new JSONStoreWP8Lib.Initializer();


Parent topic: Develop native applications