Overview > XUI Components & Layout Managers


View a glimpse of the various components, containers, objects and layout managers available in XUI.

More details about components and managers are available in our Technical Documentation.

XUI Components/Containers/Objects

The following is a list of pre-built XUI components/containers/objects. In XUI terminology, these elements are sometimes called objects or more appropriately, interfaces. The majority of these objects have been extended from the XUI Class Library and can be used according to the main XUI Schema.

xbutton xcombobox xcontentpane xdialog xfieldset xformsetbegin xformsetend xframe xhtmlblock xicon xiframe xinput

xinternalframe xlabel xmenubar xpanel xpopup xpopupmenu xscript xscrollbar xscrollpane xselect xslider xspinner

xsplitpane xstatusbar xstyle xtabbedpane xtable xtextarea xtextfield xtextpane xtoolbar xtree

Layout Managers

The following is a list of pre-built XUI Layout Managers.

Flowlayout Borderlayout Gridlayout

XUI Components/Containers/Objects
xbutton
Represents the typical push-button widget. It can have an icon, text, or both with specified positioning and orientation.
[Back to top]
xcombobox
Represents a widget that has a combination of text field and a pull-down list from which an item can be selected. The selected item is displayed in the text field. On the right is an example of xcombobox with the auto-complete feature turned on. With auto-complete, the dropdown menu automatically displays closest match(es) for each character typed. The menu is also resizable for optimal viewing of the selection.
[Back to top]
xcontentpane
Defines the main container for the screen being created. This object is the equivalent of the BODY tag in HTML. NOTE: The xuidata-src, localized-asset, and border-layout-region attributes are not applicable.
[Back to top]
xdialog
Used to create custom dialog boxes. Dialog boxes (also called dialogs) are windows that pop up over a parent window and are used to display feedback messages, confirm actions, receive inputs, display tools, etc.
[Back to top]
xfieldset
Represents the FIELDSET tag in HTML. It draws a box around the elements it contains. The title (legend) will be shown on the same line as the box around the contained element(s).
[Back to top]
xformsetbegin
Represents the HTML FORM beginning tag element.
[Back to top]
xformsetend
Represents the HTML FORM ending tag (does nothing but close the form tag).
[Back to top]
xframe
Represents the root element for a rendered view. It is the top-most container (below xroot) for the main application frame.
[Back to top]
xhtmlblock
Represents a UI component that provides the facility to insert a block of native HTML elements. NOTE: The current implementation of xhtmlblock is very similar to xtextpane. Both can contain marked-up content.
[Back to top]
xicon
Represents a lightweight and simple component to display an image and can be used within various components such as xlabel, xbutton, xtoolbaritem, etc. Localized-asset and xuidata-src attributes does not apply to this component. NOTE: The current implementation of xhtmlblock is very similar to xtextpane. Both can contain marked-up content.		(xicon represented inside the xbutton component)
[Back to top]
xiframe
Represents the IFRAME tag in HTML.
[Back to top]
xinput
Represents the native HTML INPUT form field. This element provides all the necessary attributes and sub-elements as defined in HTML 4.0 Standards.
[Back to top]
xinternalframe
Provides the ability to create lightweight frames that exists within an xframe. It provides complete control over iconification, maximization and minimization, resizing, etc. Despite looking like an actual window, the internal frame does not require to invoke a new instance of the browser.
[Back to top]
xlabel
Represents a lightweight component that can display a text string and/or an image. On the right is an example of a few xlabels used inside tabs of xtabbedpane. Although an xlabel can be used as a standalone component, it is widely reused within various components.
[Back to top]
xmenubar
Represents a menu bar where sub-menus can be added. When a selection is made from the bar, a drop-down list is provided.
[Back to top]
xpanel
Represents a basic container with the ability to hold components and other containers. The name and localized-asset attribute is not applicable to this container. On the right is an example of an xpanel (yellow background) containing a number of buttons laid out using the flowlayout manager. Normally, xpanel is closely related to the various layout managers which determine the layout of the chosen components within the panel.
[Back to top]
xpopup
Represents a container used to display messages or components to the user, typically on top of all the other Components in a particular containment hierarchy.
[Back to top]
xpopupmenu
Represents pop-up menus where menu items can be added and selected. This object is primarily used by xmenubar and toolbar.
[Back to top]
xscript
Represents a component that contains client-side script.
[Back to top]
xscrollbar
Represents a scrollbar component. Current implementation of XUI utilizes the default browser scrollbars.
[Back to top]
xscrollpane
Represents a component that offers a more flexible version of the xpanel component where automatic scrollbars can be made active. This is suitable for a tree as an example, where the panel can auto-scroll when the tree is expanded and part of the node set is not visible within the given area. The example on the right shows the xscrollpane (blue box) inside an xtabbedpane. The xscrollpane can be used inside any component that is a container type.
[Back to top]
xselect
Represents the SELECT form field in HTML. It supports all the functionalities and properties of the select tag as defined in HTML 4.0 specifications plus additional features provided by XUI.
[Back to top]
xslider
A component that lets the user graphically selects a value by sliding a knob within a bounded interval.
[Back to top]
xspinner
Represents a component that provides a single line input field that lets the user select a number or an object value from an ordered sequence.
[Back to top]
xsplitpane
Represents a container that allows the placement of two components side-by-side in a single pane. The split panes are used to graphically separate two child components in a container. Each component can be separated horizontally or vertically. Scrollbars can be turned on or off automatically for each pane.
[Back to top]
xstatusbar
Represents the bottom most part of a screen where additional information about application activities can be displayed.
[Back to top]
xstyle
Represents a component which is a hybrid between the STYLE and LINK tags in HTML. It supports all the functionalities and properties of the either the style or link tags as defined in HTML 4.0 specifications.
[Back to top]
xtabbedpane
Represents the tabbed pane widget wherein different tabs can be grouped together and can be toggled by selecting one of the tabs. The extended portion of the tab, where the selection is made, can have a title, an icon, or both. The tabbed pane is used to save space when grouping multiple components is desired.
[Back to top]
xtable
Represents a component that displays two-dimensional grid.
[Back to top]
xtextarea
Represents the TEXTAREA form element in HTML. It supports all the functionalities and properties of the textarea tag as defined in HTML 4.0 specifications.
[Back to top]
xtextfield
A lightweight component that allows the editing of a single line of text.
[Back to top]
xtextpane
Represents a UI component that can contain stylized text using HTML and CSS styling. It can also include images by refering to an external image. NOTE: The current implementation of xtextpane is very similar to xhtmlblock. Both can contain marked-up content.
[Back to top]
xtoolbar
Provides a container for series of selectable buttons/icons that give the user an easy way to select certain functions and quick links.
[Back to top]
xtree
Represents a component that displays a hierarchical or tree-like structure with the ability to expand and collapse specific branches to expose other branches and nodes. The most common use of xtree is to display a directory structure and its associated files.
[Back to top]
Layout Managers
FlowLayout
The FlowLayout manager places components inside a container from left to right as they are defined hierarchically within the document. On the right is an example of xbuttons inside an xpanel (yellow background) that is not wide enough to render all buttons in one line. Notice that the objects naturally flow to the next line when using flow-layout.
[Back to top]
BorderLayout
The BorderLayout manager defines five specific containers which are given distinct geographic identifiers such as NORTH, SOUTH, WEST, EAST, and CENTER. Each of these containers can container other containers and component by declaring their positions through such geographic identifiers. For instance, a button component can appear inside the NORTH container by setting its layout attribute to NORTH On the right is an example of five buttons arranged using the border-layout Layout Manager. Each button occupies a border-layout-region: NORTH, WEST, CENTER, and EAST. The positioning of these objects is not based on document order. Positions are determined by the region settings.
[Back to top]
GridLayout
The GridLayout manager places all components inside the spaces of a grid pattern within a container. On the right are two examples of how gridlayout can be used. The first example shows ten buttons arranged using two (2) rows and five (5) columns (2x5 grid). Each of the objects defined is automatically displayed inside a dynamically defined cell. NOTE: The borders are turned on for illustration purposes only. Example 2 shows the same set of buttons displayed using a 2x4 grid. Notice that "9" and "10" buttons automatically flowed into the next row.		Example 1: Example 2:
[Back to top]
For XUI inquiries and demonstration, please contact us.