Mixing Cordova/PhoneGap Components with Native iOS – Part 2

July 24, 2014By 0 Comments

final-ionic2

This is Part 2 of a tutorial on embedding custom Cordova components into a native iOS application to create a true hybrid application. See Part 1 for a detailed description and walk through of the basics.

In this post we’ll dig into how to customize your Cordova WebView components as well as how to add multiple custom Cordova views to an iOS application, including adding a full fledged Ionic/AngularJS application into a view. We’ll build on the example application from Part 1 and add more customization and features. The final version of this project is also available on my GitHub here for reference.

Customizing the Cordova view

In Part 1 we learned about the CDVViewController class and how it’s used/extended to create custom Cordova WebViews. We tried out the existing MainViewController class that was built when we ran the Cordova create script to create our project and learned how to set the ViewController in the Storyboard to use our custom Cordova View.

The iOS UIViewController class is extended by the CDVViewController and contains a viewWillAppear method that can be used to modify the View or WebView frame coordinates and size, change the background color or set a new folder/page location your custom ViewController class.

For instance, to try this out, open the MainViewController.m file and add some of these lines below to see how they affect the view when you run it.

Steps

  1. Setting the View size – Resize your iOS View frame and coordinates using the CGRectMake function with the desired bounds in the viewWillAppear method in your custom View.

    For instance:

    self.view.frame = CGRectMake(0, 0, 320, 480);

    The View object contains the WebView as a subview that is the same size and bounds by default. You can set the size of the WebView using similar code, such as:

    self.webView.frame = CGRectMake(50, 50, 230, 300);.

    You could also manually set the background color for either the View or WebView, such as: self.view.backgroundColor = [UIColor blueColor]; or self.webView.backgroundColor =[UIColor blueColor];

    For example, if I added all three of these lines to the viewWillAppear method in my MainViewController.m file:

    - (void)viewWillAppear:(BOOL)animated
    {
        // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),
        // you can do so here.
        self.view.frame = CGRectMake(0, 0, 320, 480);
        self.webView.frame = CGRectMake(50, 50, 230, 300);
        self.view.backgroundColor =[UIColor blueColor];
        [super viewWillAppear:animated];
    }
    

    The result would look like this:

    adv-blue1

  2. Test out Moving around Native Controls – go back into the Main.storyboard file and move the native label control we added previously down towards the bottom outside of the bounds of the webView we set above to see the effect. It would look something like this:

    adv-b2

Adding Another Custom Cordova View

In this last part you’ll see how you can create another custom Cordova ViewController to point to a different folder containing HTML/JS to add into your overall native application. We’ve been working with the MainViewController.m class up to this point since it was already created and the easiest way to show what’s going on here initially. However, you can create more ViewController classes similar to the MainViewController that extend CDVViewController and use them in your storyboard in the same fashion as we did in the basic tutorial above.

For this example I’m going to show how you could create a custom ViewController running another Cordova application in a view within your native application. I’m going to use the Ionic tutorial application here (sample code found here) that uses a slide box to swipe between slides so you can see how this would work and look within a native tabbed application. You could use any set of HTML/JS code you want at this point, however.

Steps

  1. Add the new HTML/JS source – Start by adding the new source code folder to the root project. I’m going to name the folder wwwIonic and add the sample code I downloaded from the codepen site into it. In my case I put the downloaded HTML/JS code at path: ~/NativeCordovaExample/wwwIonic

    The result in the file system looks like this:

    Screen Shot 2014-07-20 at 7.55.42 PM

    You can use the wwwIonic source folder from my github project to do this most quickly, otherwise feel free to experiment with any other set of HTML/JS source code at this point.
  2. Drag the new folder into XCode – We still need to add this folder into XCode before we can use it. Drag your new wwwIonic folder from the file system into XCode at the same level as the www folder in the project root ensuring you checked the Create folder references for any added folders box such as:

    Screen Shot 2014-07-20 at 3.53.39 PM

  3. Create the new ViewController files – Now we need a new ViewController class and header file to associate this new wwwIonic folder with and to specify in our Storyboard. The easiest way to do this is to copy the contents of MainViewController.m and MainViewController.h into new files with new names and replace the references with the new name within them.

    IMPORTANT: You will also want to remove the customized view frame sizing and color changes we made in the viewWillAppear method in the previous since that was for example purposes only and we want this webView to run with the same bounds as the native View.
  4. Change the name references – With the new IonicViewController class and header files created and the content copied in from the MainViewController files, next go into each and do a find/replace on Main and replace it with Ionic. The XCode keyboard shortcut for Replace is Option+Command+F. See the final project if you’re questioning this step or what the resulting code should look like.
  5. Set the HTML folder/start page – This step wouldn’t be required if you had simply overwritten the www folder that was created in the base project with the Ionic www folder, however it’s useful to show how you could have custom folders and sets of HTML/JS code being used within your native application.

    Open the IonicViewController you just created and locate the viewDidLoad method. Add the following lines for self.wwwFolderName and self.startPage to point to your new source folder (wwwIonic unless you chose something on your own):

    - (void)viewDidLoad
    {
        // CUSTOM IONIC APP - POINT TO SEPARATE FOLDER/PAGE TO LOAD HERE...
        self.wwwFolderName = @"wwwIonic";
        self.startPage = @"index.html";
        
    
        [super viewDidLoad];
        // Do any additional setup after loading the view from its nib.
    }
    

    These properties were originally set in the loadSettings method from the CDVViewController.m within the CordovaLib/Classes/Cleaver folder. That snippet of code is shown below for reference:

    - (void)loadSettings {
    ...
        // And the start folder/page.
        self.wwwFolderName = @"www";
        self.startPage = delegate.startPage;
        if (self.startPage == nil) {
            self.startPage = @"index.html";
        }
    

    Be aware that the Cordova config.xml also contains a setting for the start page via the content element and defaults to index.html. Take a look at your config.xml to see what I’m referring to, but it looks like this:

    You can see in the code snippet from the loadSettings method above that it’s checking for the existence of the startPage first when loading the settings/config but will otherwise set it to index.html. You can override this in your custom ViewController to be whatever you like.

  6. Use the new IonicViewController – Now go back into your storyboard file and modify your Cordova view to point to the IonicViewController instead of the MainViewController custom class. Refer to Part 3 - Add a Cordova View step in the previous tutorial if you’ve forgotten how to do this.

    NOTE: You will also want to remove that native label control we had added to the ViewController previously as it doesn’t make sense for this particular step and was for example purposes.


    The result should look something like below:

    ionic-status-bar

    You may notice the top buttons appear to be overlapping the status bar a bit and don’t have enough space. This is fixed in the next step.

  7. Fix the Status bar (iOS7 specific) – If you’re running on iOS7, you may have noticed the top buttons for the Ionic tab bar (Skip Intro/Next etc) are running into the status bar. This is an iOS7 issue and we can fix it by simply adding the Cordova StatusBarPlugin. Previously in this tutorial I mentioned the use of Plugman to add plugins to your native Cordova projects. We will use that method again as follows:

    Run the following command from the root project directory:
    $ plugman install --platform ios --project . --plugin org.apache.cordova.statusbar

    The StatusBar plugin will set the following preferences in your Cordova config.xml which can be adjusted to work best for the needs of your particular application. See the Status Bar plugin documentation for all the details on what these preferences mean:

        <preference name="StatusBarOverlaysWebView" value="true">
        <preference name="StatusBarBackgroundColor" value="#000000">
        <preference name="StatusBarStyle" value="lightcontent">
    

    For this example, I think it’s best to match the native view in the other tab to give the buttons in the top bar enough space. To do this, set the StatusBarOverlaysWebVView to false, the StatusBarBackgroundColor to white and the StatusBarStyle to default. This will cause the status bar to be above the WebView rather than overlap it, and use the default native black text on the lighter background in the status bar.

        <preference name="StatusBarOverlaysWebView" value="false"> <!-- remove overlay -->
        <preference name="StatusBarBackgroundColor" value="#FFFFFF" />
        <preference name="StatusBarStyle" value="default" />
    

    The result should now look like:

  8. final-ionic

    Here’s a 15 second video showing it in use as well. I use the Next/Previous buttons to go between the slides in the Ionic app, followed by swiping to show how you can go between the views there within the native view.

    The status bar looks blue for part of the video due to my use of AirPlay and Reflector for the recording. At the end of the recording in the final View you will see the default status bar color set by the preferences above.

Extra Credit! :)

Now see if you can take what you learned in this tutorial to include three tabs total; the native view, the original custom Cordova MainViewController and the new custom Ionic app via the IonicViewController all as separate tabs with different icons and labels.

Cleanup

You may have noticed there was a MainViewController.xib file in the Classes folder and wondered about it but we’re not actually using it for anything so you can delete it. An XIB file is another way to visually design a component but has no concept of transitions/segues and is more of a modular component. In this case the MainViewController.xib file was created in the project by default to correspond to the MainViewController class (by naming convention) and you could have used it to design for that View as well. When using multiple views as we are though, it’s nice to use the Storyboard approach so you can design the relationships between the views more easily. Feel free to delete the MainViewController.xib since it’s not being used.

Related Reading

Filed in: CordovaioniciOSMobile DevelopmentPhoneGap Tags:

About the Author ()

Leave a Reply