Archive for August 2011
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
- Create a new PhoneGap project in Xcode, call it SenchaTouch_KitchenSink.
- In the Project Info section, change iOS Deployment Target to 4.2.
- In the Target Summary section, change Devices to Universal and Deployment Target to 4.2.
- Perform a Build to make sure it compiles and Run to install to iPhone or iPad Simulator.
- Add the PhoneGap’s www folder to the Project.
- Copy the Sencha Touch Kitchen Sink example code to the www folder.
- 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.
- Copy resources/css/sencha-touch.css to the resources/css/ of the PhoneGap’s www folder.
- 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.
- Edit the index.html in the root www folder to include the css and js for the Kitchen Sink demo.
- 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)
- 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.
- 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