User Interface Basics7:Stretching Graphical Objects

[kino]

Wouldn't it be easy if everyone had the same size monitor and same resolution? Fortunately, Curl makes it easy to build applications that stretch and compress. It is common to have fixed graphical elements in your applet, as well as elements that stretch and compress with the browser window.


When Curl displays a page, it negotiates the layout of each element to determine the final size of each graphic. For graphics that do not have a height or width specified, Curl will look to the dimensions of the child objects.


Common Applet Scenario
It is common in Web design to have the following scenario:


•One area of the page set as the navigation portion. This layout object will have a static width.

•Another area of the page able to expand and compress in order to display the selected content


In Curl Cues up until now, we have always specified a fixed width or height, e.g. height = 1in. Extra stretchiness can be added to specific objects in your graphical hierarchy using the add-stretch procedure. This example demonstrates how a child object can specify its stretchiness using {add-stretch} for the value of either the width or height option of the object. Select the Show View button to view the example. Try resizing the window that pops up, to compare how the stretchy and non-stretchy objects behave.

Code:

{curl 6.0, 7.0 applet}
{curl-file-attributes character-encoding = "utf8"}


{value
let stretch-box:HBox = {HBox
height = {add-stretch},
{VBox
background="teal",
width=1in,
{bold This is a fixed-width column of text},
{Fill}
},
{VBox background="silver",
width = {add-stretch},
{bold This is the stretchable content area. Using the mouse, resize the window making it larger and smaller},
{Fill}
}
}

{CommandButton
label = "Show View",
{on Action do
let v:View = {View stretch-box}
{v.show}
}
}
}

So what is actually happening? When the View is initially displayed:


•The left VBox initializes with a width of 1in

•The right VBox initializes using the preferred width of the text that it contains. The preferred width is automatically calculated by the TextFlowBox that is implicitly created to hold the text in the VBox. When sized according to this preferred width, the TextFlowBox will be able to display its contained text on one line.


Notice that when you expand and compress the View, the left VBox maintains a constant width of 1in. Curl will adjust the width accordingly as long as the minimum size of each object can be obtained. The minimum sizes in our example are:


•1in for the left VBox

•The longest word contained within the TextFlowBox for the right VBox. In our example, this word (amusingly!) is the word "stretchable".


Now, if you resize the window so its width is smaller than the sum of the minimum sizes, both VBoxes will compress proportionately. This is demonstrated in the picture below.

Of course, there are many scenarios that we can think of for stretching and compressing Curl graphics. For common cases, it is easiest to add elasticity using add-stretch. Alternatively, there are other ways to control stretchiness in Curl. Some containers have vstretch? and/or hstretch? options, and comprehensive control over the stretchiness, compressibility, and size properties of objects is available through the make-elastic procedure. (These features are beyond the scope of this Curl Cue.)




For more information regarding elastics, please refer to the following section in the Curl Documentation:Curl Developer's Guide > Graphical User Interface > Elastics and Page Layout



Filling Space
You can use the Fill object to provide a form of stretchy spacing in your applications. A Fill object provides padding to fill empty spaces in graphical displays. These objects are intended to stretch easily to fill excess space, avoiding the stretching of other objects next to which the Fill may be placed. In other words, a Fill object creates highly stretchy Graphic that is typically used for setting the spacing between less stretchy objects.

Code:

{curl 6.0, 7.0 applet}
{curl-file-attributes character-encoding = "utf8"}

{HBox
width = 5in,
{Frame
width = 1in,
height = 1in,
background = "green",
{bold Green}
},
{Fill},
{Frame
width = 1in,
height = 1in,
background = "blue",
{bold Blue}
},
{Fill},
{Frame
width = 1in,
height = 1in,
background = "red",
{bold Red}
}
}

Each Fill object in a container represents one unit of fill space. That is, if object A and object B are separated by one Fill, and object B and object C are separated by two Fills, then the space between B and C is twice as large as the space between A and B.

Code:

{curl 6.0, 7.0 applet}
{curl-file-attributes character-encoding = "utf8"}

{HBox
width = 5in,
{Frame
width = 1in,
height = 1in,
background = "green",
{bold Green {br} (Object A)}
},
{Fill},
{Frame
width = 1in,
height = 1in,
background = "blue",
{bold Blue {br} (Object B)}
},
{Fill},
{Fill},
{Frame
width = 1in,
height = 1in,
background = "red",
{bold Red {br} (Object C)}
}
}

For more information regarding Fills, please refer to the following section in the Curl Documentation:Curl Developer's Guide > Graphical User Interface > Graphical Shapes> Rule and Fill > Fill