Embedding Cordova WebView on iOS
Beginning with Cordova 1.4, you can use Cordova as a component in your iOS applications. This component is code-named "Cleaver".
New Cordova-based applications created using the Xcode template provided in Cordova 1.4 or greater use Cleaver, and this template is considered the reference implementation for Cleaver.
It is recommended that you follow the Cordova.framework
instructions below. The CordovaLib
sub-project instructions are for Cordova core developers or users that have custom CordovaLib
project code (for ease of debugging the core).
Prerequisites
- Cordova 1.4.1 or greater
- Xcode 4.2 or greater
Cordova.plist
file
Adding Cleaver to your Xcode project (Cordova.framework)
- Copy the
Cordova.plist
file into your project folder on disk - Drag and drop the
Cordova.plist
file into the Project Navigator of Xcode - Choose the radio-button "Create groups for any added folders"
- Press the key combination Option-Command-A, which should drop down a sheet to add files to your project (the "Add Files…" sheet). Make sure the "Created groups for any added folders" radio-button is selected
- Press the key combination Shift-Command-G, which should drop down another sheet for you to go to a folder (the "Go to the folder:" sheet)
- Enter
/Users/Shared/Cordova/Frameworks/Cordova.framework
in the "Go to the folder:" sheet and then press the "Go" button - Press the "Add" button in the "Add Files…" sheet
- Select
Cordova.framework
in the Project Navigator - Press the key combination Option-Command-1 to show the File Inspector
- Choose "Absolute Path" in the File Inspector for the drop-down menu for Location
- Click on the project icon in the Project Navigator, select your Target, then select the "Build Phase" tab
- Expand "Link Binaries with Libraries"
-
Click on the "+" button, and add these frameworks (and optionally in the Project Navigator, move them under the Frameworks group):
AddressBook.framework AddressBookUI.framework AudioToolbox.framework AVFoundation.framework CoreLocation.framework MediaPlayer.framework QuartzCore.framework SystemConfiguration.framework MobileCoreServices.framework CoreMedia.framework
Adding Cleaver to your Xcode project (CordovaLib sub-project)
- Copy the
Cordova.plist
file into your project folder on disk - Drag and drop the
Cordova.plist
file into the Project Navigator of Xcode - Choose the radio-button "Create groups for any added folders"
- Press the key combination Option-Command-A, which should drop down a sheet to add files to your project (the "Add Files…" sheet). Make sure the "Created groups for any added folders" radio-button is selected
- Press the key combination Shift-Command-G, which should drop down another sheet for you to go to a folder (the "Go to the folder:" sheet)
- Enter
~/Documents/CordovaLib/
in the "Go to the folder:" sheet and then press the "Go" button - Select the
VERSION
file in the the "Add Files…" sheet - Press the "Add" button in the "Add Files…" sheet
- Press the key combination Option-Command-A, which should drop down a sheet to add files to your project (the "Add Files…" sheet). Make sure the "Created groups for any added folders" radio-button is selected
- Press the key combination Shift-Command-G, which should drop down another sheet for you to go to a folder (the "Go to the folder:" sheet)
- Enter
~/Documents/CordovaLib/CordovaLib.xcodeproj
in the "Go to the folder:" sheet and then press the "Go" button - Press the "Add" button in the "Add Files…" sheet
- Select
CordovaLib.xcodeproj
in the Project Navigator - Press the key combination Option-Command-1 to show the File Inspector
- Choose "Relative to CORDOVALIB" in the File Inspector for the drop-down menu for Location
- Click on the project icon in the Project Navigator, select your Project, then select the "Build Settings" tab
- Enter "Header Search Paths" in the search field
- Add
$(CORDOVALIB)/Classes
and check the Recursive checkbox (the checkbox may be unlabeled) - for the "Header Search Paths" value - Add
-all_load
and-Obj-C
- for the "Other Linker Flags" value - Click on the project icon in the Project Navigator, select your Target, then select the "Build Phases" tab
- Expand "Link Binaries with Libraries"
-
Click on the "+" button, and add these frameworks (and optionally in the Project Navigator, move them under the Frameworks group):
AddressBook.framework AddressBookUI.framework AudioToolbox.framework AVFoundation.framework CoreLocation.framework MediaPlayer.framework QuartzCore.framework SystemConfiguration.framework MobileCoreServices.framework CoreMedia.framework
- Expand "Target Dependencies" - the top box labeled like this if you have multiple boxes!
- Click on the "+" button, and add the
CordovaLib
build product - Expand "Link Binaries with Libraries" - the top box labeled like this if you have multiple boxes!
- Click on the "+" button, and add
libCordova.a
Adding new classes to CordovaLib sub-project
In general if you are only modifying or debugging existing CordovaLib classes you should be OK with just the above steps. However if you are adding new classes you need to follow a few additional steps:
- In your project's Frameworks directory in Xcode, remove
Cordova.framework
. - Just to reiterate step 18 and 20 above: make sure your dependencies and libraries are in the top-most boxes under Build Phases for your project's Target.
- In your project's Target's Build Settings, search for "Other Linker
Flags". Add
-Obj-C
and-all_load
to this.
Using CDVViewController in your code
-
Add this header if you used the
Cordova.framework
:#import <Cordova/CDVViewController.h>
-
Add this header if you used the
CordovaLib
sub-project:#import "CDVViewController.h"
-
Instantiate a new
CDVViewController
, and retain it somewhere:CDVViewController* viewController = [CDVViewController new];
-
(OPTIONAL) Set the
wwwFolderName
property (defaults to"www"
):viewController.wwwFolderName = @"myfolder";
-
(OPTIONAL) Set the
startPage
property (defaults to"index.html"
):viewController.startPage = @"mystartpage.html";
-
(OPTIONAL) Set the
useSplashScreen
property (defaults toNO
):viewController.useSplashScreen = YES;
-
Set the view frame (always set this as the last property):
viewController.view.frame = CGRectMake(0, 0, 320, 480);
-
Add Cleaver to your view:
[myView addSubview:viewController.view];
Adding your HTML, CSS and JavaScript assets
- Create a new folder in your project on disk, for example, name it
www
- Put your HTML, CSS and JavaScript assets into this folder
- Drag and drop the folder into the Project Navigator of Xcode
- Choose the radio-button "Create folder references for any added folders"
-
Set the appropriate
wwwFolderName
andstartPage
properties for the folder you created in (1) or use the defaults (see previous section) when you instantiate theCDVViewController
./* if you created a folder called 'myfolder' and you want the file 'mypage.html' in it to be the startPage */ viewController.wwwFolderName = @"myfolder"; viewController.startPage = @"mypage.html"