View this PageEdit this PageAttachments to this PageHistory of this PageHomeRecent ChangesSearch the SwikiHelp Guide
Hotspots: Admin Pages | Turn-in Site |
Current Links: Cases Final Project Summer 2007

How to make Tabs in smalltalk (requires a bit of GUI and a bit of coding knowledge!)

How to make Tabs in smalltalk (requires a bit of GUI and a bit of coding knowledge!)

(This short tutorial assumes that you know a bit of GUI and a bit of coding..Other than that its very easy and straight forward..)

Tabbing and Tab controls in Smalltalk

In order to create tabs in Smalltalk you must first create a windowSpec from the painter and add to it a tabbed widget. Do not forget to name the MainWindow, naming the tabs widget and giving it an ID. It is favored to make the tabs widget as large as the entire window, yet it could be resized and repositioned with respect to your needs. It is also accustomed to add an ‘accept’ and ‘cancel’ buttons to the bottom of the window beneath the tabs widget.
Than ‘install’ and ‘define’ the window creating a new class inside your package, make sure that the class is not private and must have ‘tabs’ as an instance variable.
Now, you could create your more detailed specs that actually have the UI for the users. Please note that they must be installed on the class that the previous/main window spec has been installed on (you supposedly created a new class for this.)

One more time, for tabs to work you must have a ‘tabs’ instance variable that supposedly must have automatically created when you defined the windowSpec.

As for the methods you must have: (1) labelArray ; (2) postOpenWith ; (3)specArray ; (4) tabs ; (5) tabsChanged .
Description and an Example source code is provided below for each in order to show what each should do and look like.
(1)LabelArray: this method should return an Array with the names of all the subUI specs that you created within the tabs class. “LabelArray” Uses the given names in order to name the tabs of the main window.

Example code:
labelArray
"Comment goes here"

^Array
with: ‘spec1’
with: ‘spec2’
with: ‘spec3’

(2) postOpenWith: this methods helps choose which tab the user is currently accessing and changes tabs accordingly.
(Note: this method should be automatically created when you install the main windowSpec)

Exact code:
postOpenWith: aBuilder
super postOpenWith: aBuilder.
self tabsChanged

(3) specArray: Just like “labelArray” is also will create an Array of the names of the Spec you are trying to import into each tab accordingly. The main difference between the 2 is that “labelArray” will use the given names to label the tabs, and “specArray” will actually import each single Spec, so if you don’t include it here you might have the tab named but it will not have anything it!

Example code:
specArray
"Comments go here"

^#(#Spec1 #Spec2 #Spec3)

(4) tabs: this method is designed to recognize which tabs the user would like to be on and changes the tabbing index accordingly.
(Note: this method should be automatically created when you install the main windowSpec)

Exact code:
tabs
tabs isNil
ifTrue:
[(tabs := SelectionInList with: self labelArray) selectionIndex: 1.
tabs selectionIndexHolder onChangeSend: #tabsChanged to: self].
^tabs

(5) tabsChanged: this method is designed to install the selected onto the main windowSpec for the user to view and interact with.
(Note: this method should be automatically created when you install the main windowSpec)

Exact code:
tabsChanged
"Comments go here"

| index |
index := self tabs selectionIndex.
(self builder componentAt: #tabbing) widget client: self spec: (self specArray at: index)


Done!
Now you have a functional tabbing canvas..

For a full Smalltalk example that is coded into a package, please refer to your “pracelManager” under “Directories” tab, and “Examples” folder, Load the “TabControlExample”. It provides a simple example for the tab control widget. After loading see the class side method, #example1 for an example. (Note: this example also includes ways to load pictures, and icons.)

Link to this Page