Friday, August 9, 2013

Morphic Update: Scroll Bar, Scroll Area and List Box

In the last week, I implemented the AthensListBoxMorph. A list box is a rectangular container that has several list items as submorphs. A list item can be selected or unselected. The list box clips its content if it contains more list items than it can display. It provides scroll bars instead.

The image shows the demo application (Athens Tutorial) at step 39. Don't forget to execute step 33 before to create the surface and the world.

I implemented the list box by subclassing AthensScrollableArea. This is a morph that contains two scroll bars (horizontal and vertical) and a container morph called "outerContainer". The outer container contains another container called "innerContainer". The inner container's size is the bounding box of all morphs that are added to the scrollable area. We can scroll the content by moving the inner container inside the outer container. We need the outer container only for minor display reasons: the scroll area has a small rectangle in the bottom right corner that should be blank. If we had no outer container that clips the content, we might see content from the submorphs at this position. Furthermore, we do not have bother with z indices: scroll bars are always visible because they can never be overlayed by submorphs.

List items are instances of AthensListItemMorph. We can add arbitrary objects to a list box. They are automatically wrapped inside an AthensListItemMorph. The list item displays the item's string representation ("item asString").

There are only vertical scroll bars. We can generate horizontal scroll bars by rotating them by 90 degrees. Scroll bars have three important properties:

  • value: the position of the scroll bar slider (between 0 and 1)

  • buttonStepSize: defines how the value changes when clicking the up/down buttons. For example, a button step size of 0.1 increases the value by 0.1 when clicking the down button once.

  • sliderRange: the size of the slider

No comments:

Post a Comment