...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<xal xmlns="http://openxal.org/ui/java"> |
...
<window title="New Window" width="300px" height="300px"> |
...
<freePane> |
...
<comboBox height="25px" text="Account Type" width="100px" x="45px" y="24px"> |
...
<listBox> <listItem text="New Account"/> |
...
<listItem text="Existing Account"/> |
...
<listItem text="Search"/> </listBox> |
...
</comboBox> |
...
<button height="25px" text="Go" width="100px" x="45px" y="60px"/> |
...
<radioButton height="25px" text="Button On/Off" width="100px" x="170px" y="220px" selected="true"/> |
...
</freePane> |
...
</window> |
...
</xal> |
borderPane
A borderPane places components in up to five areas: north, south, west, east, and center. Components placed in north and south stretch horizontally. Components placed in the west and the east stretch vertically. Components placed in the center stretch in both directions, so that the remaining space fills with the center component. You place child components in these areas by specifying borderPosition
when adding the component to the borderPane. The following example xml represents the window shown above:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<xal xmlns="http://openxal.org/ui/java"> |
...
<window title="New Window" width="300px" height="300px"> |
...
<borderPane> |
...
<button height="25px" text="North" width="100px" borderPosition="north"/> |
...
<button height="25px" text="South" width="100px" borderPosition="south"/> |
...
<button height="25px" text="East" width="100px" borderPosition="east"/> |
...
<button height="25px" text="West" width="100px" borderPosition="west"/> |
...
<button height="25px" text="Center" width="100px" borderPosition="center"/> |
...
</borderPane> |
...
</window> |
...
</xal> |
As this example shows, child components expand themselves to fill the area in which they reside. If you resize the window, the components resize themselves as well to fill the area. borderPane ignores the size of a component placed in the center area so that the component can fill any available space. Components placed in north and south maintain their height and components placed in west and east maintain their width.
...
cardPane (available in Java applications only) allows you to put different components to a common container, while showing only one of them at a time. You specify which one to show using the show attribute. The displayed component occupies the entire space of its parent container. The best example
of a cardPane is a slideshow. As shown in the windows above, clicking prev or next button sets the show attribute of cardLayout and makes the corresponding component in the deck show up. The following example xml represents the windows shown above:
cardPane - UI Example
| Code Block | ||||
|---|---|---|---|---|
| ||||
<xal xmlns="http://openxal.org/ui/java"> |
...
<mco:declarations xmlns:mco="http://openxal.org/core/mco"> |
...
<mco:mco id="cardPaneMco" src="CardPaneMco"/> |
...
</mco: |
...
declarations> <window title="New Window" width="300" height="300"> |
...
<borderPane> <cardPane id="cardPane" borderPosition="center" show="1"> |
...
<button id="button1" text="Button 1" name="1"/> |
...
<button id="button2" text="Button 2" name="2"/> |
...
<button id="button3" text="Button 3" name="3"/> |
...
<borderPane id="panel" name="4"> |
...
<button borderPosition="center" id="button4" text="Button 4"/> |
...
</borderPane> </cardPane> <horizontalFlowPane borderPosition="south" align="center"> |
...
<button id="prev" text="prev" onCommand="mco://cardPaneMco.prev( cardPane )"/> |
...
<button id="next" text="next" onCommand="mco://cardPaneMco.next( cardPane )"/> |
...
</horizontalFlowPane> </borderPane> </window> </xal> |
cardPane - MCO Example
| Code Block | ||||
|---|---|---|---|---|
| ||||
import com.nexaweb.client.mco.AbstractMco;
import com.nexaweb.xml.Element;
public class CardPaneMco extends AbstractMco{
// first card by default is the first card
int currPage = 0;
public void next( Element cardPane) {
// increment the current card index
// if last card is reached, set to first card
currPage++;
if( currPage == cardPane.getChildCount() )
{
currPage = 0;
}
// get the name of the new card to show, and set it on the card pane
String cardName = ( (Element) cardPane.getChildAt(currPage) ).getAttribute("name");
cardPane.setAttribute("show", cardName );
}
public void prev( Element cardPane )
{
// decrement the current card index
// if first card is reached, set to last card
currPage--;
if( currPage < 0 )
{
currPage = cardPane.getChildCount()-1;
}
// get the name of the new card to show, and set it on the card pane
String cardName = ( (Element) cardPane.getChildAt(currPage) ).getAttribute("name");
cardPane.setAttribute("show", cardName );
}
} |
...
gridPane arranges components row by row in a uniform grid, based on the order in which you add components to the parent container. gridPane sizes each component the same and the overall grid will exactly fit the parent container. You specify the number of columns in the grid through the columns attribute. In addition to the gridPane attributes, you can use child component attributes to help sizing
and placing child components in the grid. The following example xml represents the window shown above:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<xal xmlns="http://openxal.org/ui/java"> <window title="New Window" width="300px" height="300px"> <gridPane evenlySpace="true" columns="3"> <button height="25px" text="Button" width="100px"/> <link height="20px" text="link"/> <comboBox height="25px" text="ComboBox" width="100px"> <listBox> <listItem text="listItem #1"/> <listItem text="listItem #2"/> <listItem text="listItem #3"/> </listBox> </comboBox> <radioButton height="25px" text="radioButton" width="100px"/> <textField height="25px" text="TextField" width="200px"/> <button height="25px" text="Button" width="100px"/> <listBox height="100px" width="100px"> <listItem text="listItem #1"/> <listItem text="listItem #2"/> <listItem text="listItem #3"/> </listBox> <button height="25px" text="Button" width="100px"/> </gridPane> </window> </xal> |
...
gridPane is patterned after the SWT grid layout. - http://www.eclipse.org/articles/Understanding%20Layouts/Understanding%20Layouts.htm
...
The horizontalBoxPane places components in a single row along the horizontal orientation of the container. It does not wrap components to the next row, as the horizontalFlowPane does, when the size of the total width of the components exceeds the width of the container. By default, horizontalBoxPane honors a component's size and the component does not resize if the container's size changes. The following example xml represents the window shown above.
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<xal xmlns="http://openxal.org/ui/java"> <window title="New Window" width="300px" height="300px" x="5" y="5"> <horizonatlBoxPane> <button height="25px" text="Button" width="100px"/> <button height="25px" text="Button" width="100px"/> <textField height="25px" text="TextField" width="200px"/> <label height="20px" text="Label" width="100px"/> <comboBox height="25px" text="ComboBox" width="100px"> <listBox> <listItem text="listItem #1"/> <listItem text="listItem #2"/> <listItem text="listItem #3"/> </listBox> </comboBox> </horizontalBoxPane> </window> </xal> |
The following table lists and provides brief descriptions of horizontalBoxPane specific attributes:
...
The verticalBoxPane places components in a single column in a vertical orientation. It does not wrap a component to the next row or column if the component's size is over the container's size, where as verticalFlowPane does wrap the component to available space. By default, verticalBoxPane honors a component's size and the component does not resize if the container's size changes. The following example xml represents the window shown
above:
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<xal xmlns="http://openxal.org/ui/java"> <window title="New Window" width="300px" height="300px" x="5" y="5" |
...
> <verticalBoxPane> <button height="25px" text="Button" width="100px"/> <button height="25px" text="Button" width="100px"/> <textField height="25px" text="TextField" width="200px"/> <label height="20px" text="Label" width="100px"/> <comboBox height="25px" text="ComboBox" width="100px"> <listBox> <listItem text="listItem #1"/> <listItem text="listItem #2"/> <listItem text="listItem #3"/> </listBox> </comboBox> </verticalBoxPane> </window> </xal> |
The following table lists and provides brief descriptions of verticalBoxPane specific attributes:
...
horizontalFlowPane lays out components in rows that span the horizontal width of the container. horizontalFlowPane separates components within a row by a horizontal gap that you can specify. horizontalFlowPane places each component in the same row until the total of the width of components in the row and the horizontal gap between them exceeds the width of the container, then begins a new row and places components across that. You can specify the amount of space between rows by indicating a value for the vertical gap. The following example xml represents the window shown above:
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<xal xmlns="http://openxal.org/ui/java" |
...
> <window title="New Window" width="300px" height="300px"> <horizontalFlowPane gapHorizontal="25" gapVertical="25"> <button height="25px" text="Button" width="100px" x="100px" y="10px"/> <button height="25px" text="Button" width="100px" x="164px" y="53px"/> <radioButton height="25px" text="radioButton" width="100px"/> <comboBox height="25px" text="ComboBox" width="100px"> <listBox> <listItem text="listItem #1"/> <listItem text="listItem #2"/> <listItem text="listItem #3"/> </listBox> </comboBox> <textField height="25px" text="TextField" width="200px"/> </horizontalFlowPane> </window> </xal> |
The following table lists and provides brief descriptions of horizontalFlowPane specific attributes:
...
verticalFlowPane lays out components in a single column, aligned from the left, and centering the components to the largest component in the column. It starts a new column when components fill the vertical space of the container. The following example xml represents the window shown above:
...
xml represents the window shown above:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<xal xmlns="http://openxal.org/ui/java"> <window title="New Window" width="300px" height="300px"> <verticalFlowPane> <button height="25px" text="Button" width="100px"/> <button height="25px" text="Button" width="100px"/> <radioButton height="25px" text="radioButton" width="100px"/> <comboBox height="25px" text="ComboBox" width="100px"> <listBox> <listItem text="listItem #1"/> <listItem text="listItem #2"/> <listItem text="listItem #3"/> </listBox> </comboBox> <textField height="25px" text="TextField" width="200px"/> </verticalFlowPane> </window> </xal> |
The following table lists and provides brief descriptions of verticalFlowPane specific attributes:
...