Kelvin Ling

All things Kelvin

PhoneGap: Sencha Touch Kitchen Sink app

with 6 comments

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

Written by Kelvin

August 3, 2011 at 9:23 PM

Posted in Projects

Tagged with , , ,

6 Responses

Subscribe to comments with RSS.

  1. Hi Kelvin,

    nice done this sample of sencha. I have a couple of questions for you!

    1) I would like to hide the source button from the detail top bar panel?
    2) When you select the animation row it slide an intro and then you can keep selecting the other option inside animation, I would like to take this slide intro from the animation part?

    3) do you know where I can find a referent of sencha how to resize photos in case that I want to place photos inside any selection?

    Regards

    mbarcala

    mbarcala

    November 4, 2011 at 4:15 PM

    • Hi,

      To answer the first question, edit index.js and on line 238 where the onNavigate function is declared, comment the line that shows the sourceButton

      if (this.sourceButton.hidden) {
      // this.sourceButton.show();
      // ui.navigationBar.doComponentLayout();
      }

      The second question, not sure if I understand. Do you want to remove the intro slide?

      The third question, can you give an example? In some cases, the resize is done automatically by specifying the width and height of the element you are putting the photo in via css.

      Hope this helps.

      Thanks,
      Kelvin

      Kelvin

      November 4, 2011 at 6:50 PM

      • Hi,

        Thanks for answering me so soon Kelvin. This is about my last two questions:

        2. On the navigation menu, on the left side you can see several categories, one of them is “Animations”. When you click on “Animations”, to see the sub categories, the detail panel slides to the left and then you see a text “Sencha Touch provides pre-defined, optional, animations for moving between cards….bla bla bla”
        My question is, how can I take away the slide from “animations” category? I want just to see the slide when I select any of the sub categories inside “animations” but I don’t want to see the slide when I click on “animations”. I tried a couple of things but nothing worked.

        3. I’m including a link here so you can see a sample of what I’m trying to do. As a universal app between tablets and smart phones I would like the picture to adapt to any of the two screen resolutions.

        (Try to resize the webpage to see that no matter the size, small or large, the image adapt to the screen size)

        http://adaptive-images.com/

        Again thank you

        mbarcala

        November 5, 2011 at 4:40 PM

      • Hi,

        To answer the second question, that slide is controlled via the animations.js file. To get rid of the html for the main Animations slide, look at animations.js and you can either set html to be empty string or get rid of the html property.

        demos.Animations = new Ext.Panel({
        cls: ‘card card1’,
        html: ”
        })

        or

        demos.Animations = new Ext.Panel({
        cls: ‘card card1’
        })

        I will look at the link you mentioned and see what options we can use.

        Thanks,
        Kelvin

        Kelvin

        November 5, 2011 at 5:07 PM

  2. Hi Kelvin,

    I found better solution I think, but I would like to know what is your opinion. I take out this piece of the code in the structure file;

    card: Ext.is.Phone ? false : crecipes.Animations,

    this make stop the slide that i was mention you when you click the “Animation category” and it doesn’t create any problem so far even in iPad or iPhone. I would like to know what do you think and if this can make me have others problem?

    regards

    mbarcala

    mbarcala

    November 6, 2011 at 12:51 PM

    • corrected code line sorry

      card: Ext.is.Phone ? false : demos.Animations,

      mbarcala

      November 6, 2011 at 12:52 PM


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: