...
This section describes the basic containers available for developing a Nexaweb Java application UI. In addition to these containers, see also Floating Containers and Root Elements.
desktopPane
desktopPane is a panel that also hosts windows and dialogs.
...
<desktopPane height="300px" width="300px" x="0px" y="0px"/>
scrollPane
A component used to fit large areas of content that automatically shows scrollbars when a component inside of it is larger than the scrollPane itself. Can have only one child component that always takes up at least the entire space of the scroll pane. (The child component is at least as large as the viewable area of the scrollPane.)
...
| Attribute | Description |
| horizontalScrollBarPolicy | Specifies policy for when the component displays a horizontal scrollbar. always - horizontal scrollBar always visible. never - horizontal scrollBar never visible. automatic - horizontal scrollbar displays if needed. Default=automatic. |
| horizontalScrollPosition | Specifies the horizontal position of the scrolled component. For example, setting the value to 100 scrolls the component 100 pixels to the right. DOM Accuracy: The value of this attribute in the DOM always reflects the current value in the UI. |
| verticalScrollBarPolicy | Specifies policy for when the component displays a vertical scrollbar. always - vertical scrollBar always visible. never - vertical scrollBar never visible. automatic - vertical scrollbar displays if needed. Default=automatic. |
| verticalScrollPosition | Specifies the vertical position of the scrolled component. For example, setting the value to 100 scrolls the component 100 pixels down. DOM Accuracy: The value of this attribute in the DOM always reflects the current value in the UI. |
horizontalSplitPane
A panel divided into two sections, horizontally, with a draggable bar between them by which a user can resize each section within the total space of the panel.
...
| Attribute | Description |
| splitPosition | Specifies the location of the dividing bar from 0 (left) to 100 (right). |
verticalSplitPane
A panel divided into two sections, vertically, with a draggable bar between them by which a user can resize each section within the total space of the panel.
...
| Attribute | Description |
| splitPosition | Specifies the location of the dividing bar from 0 (top) to 100 (bottom). |
tabPane
A panel with a clickable tab at the top. Keyboard navigation: Tabbing into a tab box focuses on a tab. Once focused on a tab, left or right arrow keys navigate between tabs, or pressing the tab key focuses on the first component inside the tab.
...
The following figure shows a tabPane with two tabs:
The following figure shows a tabPane with tabPlacement set to left and tabOverlap set to -5:
Layout Panes
This section describes the layout panes available for developing a Nexaweb Java application UI. Use layout panes to quickly organize components in application user interfaces.
freePane
| 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:
...
| Attribute | Description |
| borderPosition | Specify this attribute for components you add to a borderPane layout. Specifies the location of a component within the borderPane. You cannot change this attribute for a component after adding that component to the borderPane. Values=north, south, east, west, center. |
| horizontalGap | Specifies the horizontal gap between components in pane. |
| verticalGap | Specifies the vertical gap between components in pane. |
cardPane
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:
...
| Attribute | Description |
| cardName | Specifies a string indicating the type of component which, when supplied in the cardPane's show attribute causes this component to become the active component in the card pane. The active component takes up the entire area of the cardPane, and can receive input events. You cannot change this attribute for a component after adding that component to the cardPane. |
gridPane
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:
...
Note: You cannot change these attributes for a component after adding that component to the gridPane.
horizontalBoxPane
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.
...
| Attribute | Description |
| alignment | Specifies where to align components along vertical axis in layout. Values: start, center, end, stretch. start= top or left of component; center=center left; end=bottom left; stretch=align the component to cover the entire area. |
| boxFlex | Specify this attribute for components you add to a horizontalBoxPane layout. Specifies whether the component grows or shrinks to fit the available space in the parent container. If more than one component in the layout has a flex value, each component grows or shrinks in proportion to its flex value. Components with no flex value remain at their specified size. |
| pack | Specifies where to align components along horizontal axis in layout. If the pane has extra space, the pack attribute specifies where to anchor the child components. Values=start, center, end. start= top or left of component; center=center top; end=top left; stretch=align the component to cover the entire area. |
verticalBoxPane
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:
...
| Attribute | Description |
| alignment | Specifies where to align components along horizontal axis in layout. Values: start, center, end, stretch. start= top or left of component; end= the right or bottom; stretch=align the component to cover the entire area. |
| boxFlex | Specify this attribute for components you add to a verticalBoxPane layout. Specifies whether the component grows or shrinks to fit the available space in the parent container. If more than one component in the layout has a flex value, each component grows or shrinks in proportion to its flex value. Components with no flex value remain at their specified size. |
| pack | Specifies where to align components along vertical axis in layout. If the pane has extra space, the pack attribute specifies where to anchor the child components. Values=start, center, end. |
horizontalFlowPane
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:
...
| Attribute | Description |
| alignment | Specifies horizontal alignment of components in pane. |
| horizontalGap | Specifies horizontal (left to right) gap between components as components fill the vertical axis and spread horizontally across the pane. |
| verticalGap | Specifies vertical (top to bottom) gap between components. |
verticalFlowPane
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:
...