Setting up the iOS-based development environment_Sencha Touch Cookbook-QQ阅读男生都市网

上QQ阅读APP看书，第一时间看更新

Setting up the iOS-based development environment

This recipe outlines the steps to set up the environment for the iOS-based (for example, iPhone, iPad, iPod) development.

Getting ready

JDK is installed and the following environment variables are set correctly:

JAVA_HOME
PATH

You should have created the ch01_01.js file as mentioned in the previous recipe.

How to do it...

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.0 and extract its contents. Navigate to the iOS directory 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.html was not found.
In order to fix this, we need to copy the www directory 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 www directory beside your project.
Drag the www folder into Xcode 4.
Move the C:\sencha-touch folder to www.
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 ch01 folder to www and copy the ch01_01.js file, which was created in the previous recipe, inside it.

Open the folder named www and paste the following code in index.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.plist and change BundleIdentifier to 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.

How it works...

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.