XUI: Extensible User Interface Framework

XUI Component Overview

The XUI component library contains the main building blocks for creating all of your application screens. This library contains an array of components to cover the breadth of tools necessary to create a rich user experience. As used in previous examples, the xmenubar and xtoolbar are just the beginning of the components necessary to build a rich client environment.

XUI and Java Swing/AWT

XUI includes systems, methods, and conventions which allow the creation of GUIs that have a close consistency with existing GUI development environments and tools such as Java Swing and AWT. In order to bring consistency between the development of the web application’s user interface and the traditional software user interface, and so that the same efficiency, flexibility and ease of development is achieved, “deliberate kinship” is applied to emulate the techniques, patterns, conventions and standards found in the conventional development environment for Java Swing and AWT components.

This means that XUI closely mimic and emulate, for example, the creation of a Menu Tree component in Java Swing. XUI’s extensible GUI components thus include familiar windows, split-pane windows, menu bars, tree menus and toolbars, etc., as used in standard windowing systems which gives the ability for the given web application to be rendered with the look-and-feel familiar to a broad base of users. Not to mention that developers who are familiar with Java and Swing development will appreciate the familiar pattern starting with the XUI Class Hierarchy and naming standards. For example, the Object Class is extended by the Component Class, which is extended by the Xcomponent Class. In Java, the pattern is closely the same.

The Java Swing and AWT package naming convention is also closely followed in XUI. For example, the JInternalFrame, JPanel, JTree, and JMenuBar classes in Java are represented as XInternalFrame, XPanel, XTree and XMenuBar classes in XUI.

XUI also supports polymorphism where one component can morph into many other components. One example implementation is the HTML.Tag which can be implemented as any other HTML tag such as html.img and html.span.

XUI is Extensible!

The XUI Framework is extensible and having said so, pre-built UI components are extensible and can be used to create custom components. XUI Classes are represented as Schema complex types (xs:complexType) and can be extended by other elements (xs:element). An element in turn becomes a representation of an object or sometimes more appropriately, an interface.
For example, a new component called “mymenubar” can be created by extending the existing XMenuBar Class. The new “mymenubar” inherits all the attributes and properties of XMenuBar.

The following image is an example of an XUI page created using the different built-in UI components:

In the example above, several different XUI components are shown to provide a comprehensive interface for the application. A page that produce an XUI screen is created in JSP and embedded with a <xui:view> custom tag based on the Custom Tag Library facility of JSP 1.1. This custom tag is designed to handle all of the XUI tags written in pure XML as defined in the XUI Schema. XUI tags are not individual custom tags. They are simply a definition of elements written in XML that is further transformed by XUI's GUI Factory on the server.

As with a typical application, the example above utilizes the <xmenubar> component to produce a menubar on top of the screen. This builds out the standard drop-down, menu-driven behavior standard in most desktop applications. The <xtoolbar> is just below the <xmenubar> and serves as a shortcut bar for the various menu items. The text boxes are <xinput> components which are wrapped inside the <xfieldset>.

Next: Getting Started: Creating your first XUI Page.
Back to: Application Guide