PhoneGap: Sencha Touch Kitchen Sink app

These steps assume the user has already setup PhoneGap 1.0, Xcode 4 and has configured it correct to build and run a sample app on the iPhone stimulator.  For detailed instructions, visit Phone’s Getting Started with Xcode guide.

To build a PhoneGap app of the Sencha Touch Kitchen Sink demo

1. Create a new PhoneGap project in Xcode, call it SenchaTouch_KitchenSink.
2. In the Project Info section, change iOS Deployment Target to 4.2.
3. In the Target Summary section, change Devices to Universal and Deployment Target to 4.2.
4. Perform a Build to make sure it compiles and Run to install to iPhone or iPad Simulator.
5. Add the PhoneGap’s www folder to the Project.
6. Copy the Sencha Touch Kitchen Sink example code to the www folder.
7. Copy sencha-touch-1.1.0/senchatouch.js and sencha-touch-1.1.0/examples/autotheme.js to the www folder, same folder as phonegap.js.
8. Copy resources/css/sencha-touch.css to the resources/css/ of the PhoneGap’s www folder.
9. Adjust path in index.js for senchatouch.js and auto theme.js to reflect the files are now in the same root folder as index.html.
10. Edit the index.html in the root www folder to include the css and js for the Kitchen Sink demo.
11. Edit the SenchaTouch_KitchenSink-Info.plist file and make sure ‘Supported interface orientations’ have the same options as ‘Supported interface orientations (iPad)’.  This will allow the app to handle rotations.
    • Item 0 Portrait (bottom home button)
    • Item 1 Landscape (left home button)
    • Item 2 Portrait (top home button)
    • Item 3 Landscape (right home button)
12. Perform a Build to make sure it compiles and Run to install to iPhone or iPad Simulator.  If all goes well, the Kitchen Sink application should appear on your Simulator.
13. For iPhone/iPod devices, If you want to use the Sencha Touch’s app icon and Splash screen:
    • Copy resources/img/phone_startup.png from the www folder to the Resouces/splash folder of the Xcode project and rename the file to Default.png.
    • Copy resources/img/icon.png from the www folder to the Resources/icons folder of the Xcode project and rename to icon-72.png.
    • Take the file icon-72.png and make a 57×57 version of the image and save it as icon.png.

You can download my xCode source at my GitHub repository.

Links

• PhoneGap
• SenchaTouch
• Sencha Touch: Kitchen Sink example

Advertisement