This recipe outlines the steps to set up the environment for the iOS-based (for example, iPhone, iPad, iPod) development.
JDK is installed and the following environment variables are set correctly:
JAVA_HOMEPATH
You should have created the ch01_01.js file as mentioned in the previous recipe.
Carry out the following steps:
Download and install Xcode from Apple Developer Portal (http://developer.apple.com). This requires you to have membership of the iOS and Mac developer programs.
Download the copy of
PhoneGap-1.0.0and extract its contents. Navigate to theiOSdirectory and run the installer until completion.Launch Xcode, and under the File menu, select New and then New Project. Name the new project
SenchaTouch.Select PhoneGap-based Application from the list of templates.
Click on the Next button. Fill in the Product Name and Company Identifier for your application.
Choose a directory in which to store your application.
You should see your project in Xcode 4 now. Click on the Run button at the top-left corner. Your build should succeed and launch in the simulator.
You should see an error in your simulator informing you that
index.htmlwas not found.In order to fix this, we need to copy the
wwwdirectory into the project. Right-click on the project in the left navigation window and click on Show in finder.In Finder, you should see the
wwwdirectory beside your project.Drag the
wwwfolder into Xcode 4.Move the
C:\sencha-touchfolder towww.After you drag, you should see a prompt with a few options. Make sure to select Create folder references for any added folders and click on Finish.
Add the
ch01folder towwwand copy thech01_01.jsfile, which was created in the previous recipe, inside it.Open the folder named
wwwand paste the following code inindex.html:<!DOCTYPE HTML> <html> <head> <title>Yapps! - Your daily applications!</title> <link rel="stylesheet" href="sencha-touch/resources/css/sencha-touch.css" type="text/css"> <script type="text/javascript" charset="utf-8" src="phonegap.1.0.0.js"></script> <script type="text/javascript" charset="utf-8" src="sencha-touch/sencha-touch-debug.js"></script> <script type="text/javascript" charset="utf-8" src="ch01/ch01_01.js"></script> </head> <body></body> </html>Deploy to Simulator:
Make sure to change the Active SDK in the top-left menu to Simulator+version#
Click on Run in your project window header
Deploy to Device:
Open
SenchaTouch-Info.plistand changeBundleIdentifierto the identifier provided by Apple. If you have a developer license, then you can access and run the Assistant at http://developer.apple.com/iphone/manage/overview/index.action and register your App.Make sure to change the Active SDK in the top left menu to Device+version#.
Click on Run in your project window header.
In steps 1 and 2, we downloaded and installed XCode and other required tools and libraries. XCode is the IDE provided by Apple for the iOS-based application development.
In steps 3 through 6, we created a PhoneGap-based iOS project, using XCode.
In steps 7 through 14, we prepared the www folder for the application. Its contents are described in the Setting up the Android-based development environment recipe.
In step 15, we included the Sencha Touch related files and the application specific JS file—ch01_01.js—in index.html.
In steps 16 and 17, we deployed and tested the application in the simulator, as well as a real iOS device, such as iPhone.