This sample is based on the Apple iPhone Contacts application and shows how to put an iPhone application prototype together including scrolling regions, switching between portrait and landscape orientations, and use of the iPhone Library of design widgets.
This is a typical structure for an iPhone application prototype project.
The "_Widgets" folder is a place to put any Custom Elements (it's set as a Custom Elements Folder) that you need to repeat throughout your project but also edit in each case. The leading underscore ("_") keeps it sorted near the top of the tree where it's most handy.
If you want to create concept plans first then it's a good idea to place them in their own "Concepts" folder.
"Parts" are for Component designs that will be used within other screens.
The "Screens" folders contain our screen designs in Landscape and Portrait orientations.
Using the "_Concepts" widgets from the iPhone Library, you can throw together a quick and very rough concept diagram to get a feel for the overall scope of the project and how many screens you want to create.
In this case, the screens to add a photo for the contact were not included in the final prototype!
If you know that most of your screens need the same basic layout then a good place to start is to create a general screen layout Custom Element that you can drag and drop to kick off a new screen.
Note: You could also turn this into a Template if you're going to use a similar layout in lots of projects. In that case, you don't need the Custom Element in each project.
This one is built entirely from widgets within the iPhone Library.
Components (use as-is):
Custom Elements (for editing):
The process for creating each screen is simple:
A common requirement of iPhone applications is scrolling long screens of information. Instead of trying to emulate a touch screen interface, we simply cheat here and use a scroll bar.
It works well, doesn't interfere with the screen display and actually makes it clear when testing and demonstrating the prototype that there's actually something more to see and scroll to (something that's not always obvious with an actual iPhone).
Scrolling regions are created using a 2-step process:
The content design will typically use the full screen width (320 pixels for portrait, 480 for landscape) and be as high as it needs to be.
The best element to use as a background is the standard "Web Page Part" with Margins set to 9 pixels all around. This provides a nice border to snap content to and renders invisible so that whatever background you've used on the main screen (stripes anyone?) will show through.
If you're a neat-freak (like us) then you can set the "Web Page Part" background element to have a Fixed Width too. This will prevent you from accidentally changing the width.
If you're using a more complex background that needs to scroll with the content then you'll need to add that to the design here.
When you drag and drop your content part as a Component onto your screen, it will appear full size.
All you need to do is make a few quick property changes to the Component and all will be well. First check the "Maintain size" Style option so that it doesn't try to adjust itself to match the actual content size:
Then remove the "Fixed Height" constraint and add 16 pixels onto the "Width" to allow for the scroll bar (320 + 16 = 336 for portrait or 480 + 16 = 496 for landscape):
Finally, all you need to do is drag the bottom resize handle on the Component up to snap it to the correct height on the screen.
At this point, the scroll bar will appear and, with the Component selected, you can actually scroll the content within the design.