Journey to App - Part 5 - Addressing iPhone and iPad Form Factors

On the next step in our Journey to App, we will discuss addressing the different form factors for the iPhone and iPad.  In today's world of App development, your app needs to support both the iPhone and the iPad, and preferably, the user interface will leverage the strength of each platform and screen size.

Typically, the main difference between iPhone and iPad for productivity apps, has to do with how much information can be presented at once.  For our PDF app, we will use typical design patterns for both the iPhone and the iPad.  

For the iPhone, the UI is very hierarchical ... with each screen having a dedicated function, such as a list of files, or a preview of a file.  For the iPad, with the additional screen real estate, both the list of files, as well as the preview of a file can be shown on the screen at the same time.

For my development process, I like to tackle the different form factors, once the prototyping phase is complete.  I often find that there are additional functional problems to solve, and with the PDF app it was no different.

The key functionality that needed to be developed was cycling through documents on the preview.  For the iPhone, it is fine to preview a single file at a time, but for the iPad, I wanted to make it easy for the user to cycle through the files.  To accomplish this, I needed to use another Titanium Module.  Luckily, there was an open source one called Ti.Quicklook that had the functionality that we needed.  As a point, working with Appcelerator Titanium is great, because it has a very active development community, which makes it much easier to find examples and usable code to incorporate into your app.

In addition to new functionality, you will typically need to detect and provide conditional code to address the different form factors.

Here is an example of some code branching that detects and executes code only if the app is running on iPad.

function doTableviewClick(e) {
   APP.log("debug", "documents.doTableviewClick.e | " + JSON.stringify(e));
   var path = e.row.path;
   var index = e.row.index;
   APP.log("debug", "documents.doTableviewClick.path: " + path);
   APP.log("debug", "documents.doTableviewClick.index: " + index);

   if (APP.Device.isTablet) {
      SELECTED = index;
      APP.addChild("document_detail", {
         index : index
      });
   } else {
      var z = Ti.UI.iOS.createDocumentViewer({
         url : path
      });
      z.show();
   }
};

Lets take a look at how the app looks like on the different form factors now that we have incorporated in the iPad.

PDF Document Handling - iPhone

PDF Document Handling - iPad

URL History and Browser - iPhone

URL History and Browser - iPad

Up Next ...
With the prototyping complete, and updating the UI to address iPhone and iPads, the next step is our app development process is to start our formal code review, add error handling and address language localization.

Running Total Hours

Activities

• Developing iPad / iPhone UI updates - 5 hours

Total Hours to date 12.5 hours

Previous Part 4 - Prototyping

Next Part 6 - Coding