Last updated at 6:46 pm UTC on 8 November 2008
Here we present some code examples so you can start using this widget toolkit for the web.
Creating a new widget is pretty straightforward, you just configure the name and content if necessary and you're done. Let's see a basic example:
items: #( one two three );
selectItem: #twoUsually you will need the widget respond to some user event. Event configuration is one of the most important task a GUI programmer will need, so are explained in a separate page.
You can send message to a widget to set the visual aspect. Most often you (or your designer) can find the common visual properties for your site or a single document, but sometimes you will need to set the visual property of a particular widget, then you will use CSS objects along with a SmallFaces widget, then:
In the following ListBox, we configure visual properties like color, border, size and font using the Phantasia CSS framework.
| listBox |
listBox := SFListBox new.
items: #( oneOneOneOneOneOneOneOneOneOne two three );
color: Color blue;
borderStyle: CSSBorder ridge;
borderColor: Color red;
extent: 150 @ 40;
For example, in the next TextField we set a #losingFocus event; this event will be triggered when the TextField losses its focus (internally configures the corresponding Scriptaculous object)
pane := SFTextField new.
label: 'last name: ';