Tersus: Stage 4 - Organizing the Navigation Bar

Stage 4 - Organizing the Navigation BarDate: Jul 15, 2010

Adding another iPhone Screen:

Zoom into <iPhone View>/Body.
Right Click Body --> Add Element: Scroll Pane.
Rename the new Scroll Pane to: Public Tweets Screen.
Body should look similar to this:

In the model editor, zoom into <iPhone View>.

Right Click <iPhone View> --> Add Element: Navigation Bar.

Zoom into Navigation Bar and rename Navigation Bar Item to: Top Trends Nav Item.

Right Click Navigation Bar --> Add Element: Navigation Bar Item.

Rename the new item to: Public Tweets Nav Item. Your Navigation Bar should look similar to this:

Modeling Top Trends Nav Item:

In the model editor, zoom into <iPhone View>/Navigation Bar/Top Trends Nav Item.
Rename the label Title to: Top Trends.
Zoom into Image and from the Constant sections of the palette drag and drop a Text constant with following value: Top.png.
Create a flow from the "Top.png" text constant to <Path>.
Modeling the <On Click>:
- Zoom out of Image and zoom into <On Click>.
- Right click <On Click> --> Add Ancestor Reference: choose <iPhone View>.
- Connect the "Yes" boolean constant to <iPhone View>/Body/Top Trends Screen/<Visible>.
- Connect the "No" boolean constant to <iPhone View>/Body/Public Timeline Screen/<Visible>. The <On Click> should look similar to this:

Modeling Public Tweets Nav Item:

This modeling is very similar to the modeling of Top Trends Nav Item.
In the model editor, zoom into <iPhone View>/Navigation Bar/Public Tweets Nav Item. Rename the label to: Public.
Zoom into Image and from the palette Constants section drag and drop a Text constant with following value: Timeline.png.
Create a flow from the "Timeline.png" text constant to <Path>.
Modeling The <On Click>:
- Zoom out of Image and zoom into <On Click>.
- Right Click --> Add Ancestor Reference: <iPhone View>.
- Connect the "Yes" constant to <iPhone View>/Body/Public Timeline Screen/<Visible>.
- Connect the "No" constant to <iPhone View>/Body/Top Trends Screen/<Visible>.

Adding Navbar icons to the project:

Download the image from http://downloads.tersus.com/Top.png and save it in [Project Root]/web.
Same for http://downloads.tersus.com/Timeline.png.

Warning: both images are white with transparent background, which means if you enter the URLs of the images in your web browser, you will not see them. Yet, when right clicking the top left corner of the page, you will see “Save Image As” in the context menu. Alternatively, double click anywhere in the blank looking page and notice that something is selected in the top left corner.Save the model and launch the application (

Download Model: Stage 4 (version 1.3.43) Next: Public Tweets ScreenSee Also:

To use the full functionality of this web site, JavaScript needs to be turned on.

For best results, use the Firefox browser..

Loading ...