Skip to end of metadata
Go to start of metadata

Mission: In this lab you will learn how to add support for changing the orientation of the app and supporting gestures.

Specification: You will make the app be able to respond to orientation changes by rotating the content on the screen. You will also add support for letting the user shake the device to perform an action.

  1. Download the starting code for this lab from this link and unzip the files. Import the project into Titanium Studio. Update the tiapp.xml, if necessary (e.g. to set an appropriate SDK version or build target for your environment).

  2. Orientation change
    1. For iPhones, you may need to enable the landscape orientationmodes in your tiapp.xml file as only Portrait is enabled by default
      1. In tiapp.xml, find the UISupportedInterfaceOrientations~iphone key
      2. You will see it accepts an array of strings.
      3. Copy/paste the UIInterfaceOrientationstring from the ~ipad section to enable these orientationmodes
    2. iPads and android devices typically have all orientationmodes available by default.

    3.  In order to account for orientation changing, first we need to start a Gesture listener for the 'orientationchange' event. 
      1. As a callback, pass it the function “handleOrientation,” and create a function with that name that uses Ti.API.info() to stringify out the orientationchange event passed as an argument.
    4. In the handleOrientation function, compare the “orientation” property to the orientationmode constants to determine orientation.
      1. Ti.UI.LANDSCAPE_LEFT and Ti.UI.LANDSCAPE_RIGHT indicate it is in landscape mode
      2. Ti.UI.PORTRAIT and Ti.UI.UPSIDE_PORTRAIT indicate the app is in portrait mode
      3. In the block of code designating landscape mode, have a fullscreen version of the chart animate on screen, and in the block for portrait, remove it.
    5. Now the app should display a fullscreen version of the chart while in landscape mode! Neat.
  3. Gestures
    1. Shake: To demonstrate the “shake” gesture, we will give the app what I like to call “etch-a-sketch functionality”
      1. Start by adding an event listener for the “shake” gesture. Name the callback function whatever you like
      2. Within the callback function, set up an app-wide event similar to the one found in generateChart(), but instead of building a payload, send an empty set of data to the chart webview
      3. Now, upon shaking one’s phone, the chart clears itself


    You can download the completed application from: this link.
  • No labels