Back to Programmer's Guide

Lists and Tabs

 

View Tabs - an easy way to show mulitple views within a single site

View tabs make it very easy to show multiple aspects of your domain model within your application (a single site).  For example, suppose you have created a main view in your application and you wish to have a tab strip at the top that will show two other views as well.  It might look something like this:

viewMain

|e|
e := WebElement newId: #content.
e addTextH1: self 'My Application Title - Main View'.
e addBreak.
e add: self viewTabComponent.
e addBreak.
e addText: 'Main View'.  "Main view composition goes here"
self pageFrameWith: e title: 'My Application'
 
Where we display the tab using the ViewTabs component (Found in the category Aida-Components) by coding something like:
 
viewTabComponent
 
|e|
e := WebElement new.
e := ViewTabs new.
e addView: #main description: 'Main'.
e addView: #second description: 'Second View'.
e addView: #third description: 'Third View'.
^e
 
This is the "tricky" part.  Like other parts of Aida that use naming conventions, the names of the methods you must create to use these views are: 
 
#viewMain     (which we have already created)
#viewSecond  (to display the second view)
#viewThird     (to display the third view)
 
Note that Aida will assume the "view" prefix in front of your method names.
 
Then, it is possible to create:
 
secondMain
 
|e|
e := WebElement newId: #content.
e addTextH1: self 'My Application Title - Second View'.
e addBreak.
e add: self viewTabComponent.
e addBreak.
e addText: 'Second View'.  "Second view composition goes here"
self pageFrameWith: e title: 'My Application'
 

thirdMain

|e|
e := WebElement newId: #content.
e addTextH1: self 'My Application Title - Third View'.
e addBreak.
e add: self viewTabComponent.
e addBreak.
e addText: 'Third View'.  "Third view composition goes here"
self pageFrameWith: e title: 'My Application'
  
Which are identical in this case to #viewMain, but could do anything in the context of your application.  Note that we have added the viewTabComponent we created earlier in each of these methods so we will always see the tab strip at the top of the page.