Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.


  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. For this lab, we will be converting the Chart Demo App into a SplitWindow app for iPad. Data inputs will be handled on the left, while the chart itself will be made fullscreen on the main window

  3. Begin by wrapping the Window of the original chart app with <SplitWindow> tags. Whatever ID you assign to the SplitWindow, make sure to change the line in index.js to call open() on that window instead of ‘win’

  4. Within a SplitWindow, two windows are assigned to run within the app side by side. The first one is designated as the masterView, and the second one is the detailView

    1. Make the original app the masterView, and create a new Window to serve as the detailView

    2. Move the chart from the masterView to the detailView, and change the url that the chart opens to chartfs.html

    3. Run the app in the simulator (don’t forget to build to iPad now) to demonstrate how interacting between two windows is simplified by having them share business logic


You can download the completed application from: this link.