XUI: Extensible User Interface Framework

Creating an XUI Page Step-by-Step

When we look closer into the creation of an XUI page, there are a few essential parts that are necessary for every XUI page created. Heres how to create an XUI page step by step:

1. On top of your JSP page, define the XUI Tag Library with the XUI namespace as defined below. Since we will be primarily be working with HTML page, define the contentType as "text/html" with a charset of UTF8:

<%@ taglib uri="http://www.jway.com/xui" prefix="xui" %>
<%@ page contentType="text/html; charset=UTF8" %>

2. Next, add the <xui:view> tag. All XUI screens start with the main taglib <xui:view> where the definition of the screen will be created. XUI's component tags or elements are defined in a Schema and can be optionally tested for validity. You can set the validation attribute to "true" for real-time validation; by default, this attribute is set to "false".

<%@ taglib uri="http://www.jway.com/xui" prefix="xui" %>
<%@ page contentType="text/html; charset=UTF8" %>
<xui:view validation="true">
   ...
</xui:view>

3. Next, add the <xframe> element to start the XUI screen. This element is similar to the <html> element in HTML 4.0.

<%@ taglib uri="http://www.jway.com/xui" prefix="xui" %>
<%@ page contentType="text/html; charset=UTF8" %>
<xui:view validation="true">
	<xframe>

	</xframe>
</xui:view>

4. Next, let's add some properties to our page by using the <properties> element under <xframe>. You can add a title and other <meta> tags within this element. The META tags are any of those supported by HTML. In this example, let's add a title to our screen.

<%@ taglib uri="http://www.jway.com/xui" prefix="xui" %>
<%@ page contentType="text/html; charset=UTF8" %>
<xui:view validation="true">
	<xframe>
		<properties>
			    <title>My First XUI</title>
			    <meta name="language" content="en"/>
		 </properties>
	</xframe>
</xui:view>

5. Next, let's insert the <xcontentpane> after the <properties> element. The <xcontentpane> element is similar to the <body> tag in HTML. In fact, when this page is transformed into an HTML page, this XUI element is literally translated into a <body> tag. It supports native HTML attributes such as "style".

<%@ taglib uri="http://www.jway.com/xui" prefix="xui" %>
<%@ page contentType="text/html; charset=UTF8" %>
<xui:view validation="true">
	<xframe>
		<properties>
			<title>My First XUI</title>
			<meta name="language" content="en"/>
		</properties>
		<xcontentpane>

		 </xcontentpane>
	</xframe>
</xui:view>

6. Like Java Swing, XUI screens are created using panels that can be arranged using the different layout-managers. The <xcontentpane> element can also have the different XUI components such as xbutton, xtree, etc. as direct children. Without a wrapping <xpanel>, the default layout is flow-layout. In our example, we will wrap an <xbutton> component with an <xpanel> element.

<%@ taglib uri="http://www.jway.com/xui" prefix="xui" %>
<%@ page contentType="text/html; charset=UTF8" %>
<xui:view validation="true">
   <xframe>
      <properties>
         <title>My First XUI</title>
	     <meta name="language" content="en"/>
      </properties>
      <xcontentpane>			
      <xpanel style="padding:50px;">
         <xbutton style="width:150px;height:75px;font-size:12pt;" text="Hello XUI!"/>
      </xpanel>
      </xcontentpane>
   </xframe>
</xui:view>

As you could see in the above example, we can add an inline style to the <xpanel> element. This is similar to the HTML style attribute where you can apply different styles to your panel. In this case, we have added padding to the panel.

Once again, save this file as a JSP file within your XUI application. Viewin it in a browser such as Mozilla Firefox 1.0 or Microsoft Internet Explorer 6.0 will produce the following screen.

In this example, an <xbutton> component is used to produce the text "Hello XUI!" which is wrapped inside an <xpanel> element. (The Containers and Managers are described in more detail in the Appendix/Reference section of this on-line manual.) In the case of the <xpanel> container, you can use a combination of any of the XUI component to build your application. (For a detailed list of XUI components, go to the XUI Component List section)

The methodology we've just created for developing the previous example screen can be repeated for all XUI components in the library. However, to create a fully functional web application, different techniques and ways in managing the layout and style of multiple components on a page is critical. In other words, the creation of different screens in XUI relies heavily in it's Layout Managers and tradition CSS stylesheet. We will answer these questions in the next section.

Next: Embedding XUI into JSP Pages
Back to: Application Guide