XUI: Extensible User Interface Framework

Embedding XUI into JSP Pages

XUI-framework provides the flexibility to embed XUI components in a typical JSP page. This feature of XUI allows combining XUI components with regular JSP content. To embed XUI in the existing JSP page, the <xpanel> element is required as the root element. The following figure is an example of embedded XUI.

Figure 1. An example of embedded XUI

In Figure 1, two xbuttons are embedded in a JSP page. Below are step-by-step instructions to embed XUI into JSP pages:

1. On the top of the JSP page, define the XUI Tag Library with the XUI namespace as defined below. The content type is set to “text/html” and “UTF8”.

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

2. Next, add the <xui:view> tag in the desired area to embed XUI. To embed XUI in other area in the page, <xui:view> tag should be repeated.

<%@ taglib uri="http://www.jway.com/xui" prefix="xui" %>
<%@ page contentType="text/html; charset=UTF8" %>
<html>
    <head>
          <title>Embedded XUI</title>
    </head>
    <body style="background-color:#FFFFCC; font-size:10pt; font-family: arial">
        <p> In this page, XUI is embedded in a certain area.</p>
		<xui:view validation="true">
			  ...
		</xui:view>
   </body>
</html>

3. Next, add the <xpanel> element to embed XUI component(s). The <xpanel> element is the root element for embedded XUI.

<%@ taglib uri="http://www.jway.com/xui" prefix="xui" %>
<%@ page contentType="text/html; charset=UTF8" %>
<html>
    <head>
          <title>Embedded XUI</title>
    </head>
    <body style="background-color:#FFFFCC; font-size:10pt; font-family: arial">
        <p> In this page, XUI is embedded in a certain area.</p>
        <xui:view validation="true">
	<xpanel style="padding:5px;width:160px;height:85px;">
		...
	  </xpanel>
        </xui:view>
    </body>
</html>

4. Just as any XUI page, XUI components can be added to XPanel and be arranged using Layout Manager. In the following code example, an xbutton is added to an xpanel and Flow Layout is used as the default layout.

<%@ taglib uri="http://www.jway.com/xui" prefix="xui" %>
<%@ page contentType="text/html; charset=UTF8" %>
<html>
    <head>
          <title>Embedded XUI</title>
    </head>
    <body style="background-color:#FFFFCC; font-size:10pt; font-family: arial">
        <p> In this page, XUI is embedded in a certain area.</p>
        <xui:view validation="true">
		<xpanel style="padding:5px;width:160px;height:85px;">
			<xbutton style="width:150px;height:75px;font-size:12pt;" 
				text="Embedded XUI 1"/>
		   </xpanel>
        </xui:view>
    </body>
</html>

5. To embed XUI in other areas in the page, the <xui:view> tag should be repeated.

<%@ taglib uri="http://www.jway.com/xui" prefix="xui" %>
<%@ page contentType="text/html; charset=UTF8" %>
<html>
    <head>
          <title>Embedded XUI</title>
    </head>
    <body style="background-color:#FFFFCC; font-size:10pt; font-family: arial">
        <p> In this page, XUI is embedded in a certain area.</p>
        <xui:view validation="true">
		<xpanel style="padding:5px;width:160px;height:85px;">
					<xbutton style="width:150px;height:75px;font-size:12pt;" 
			text="Embedded XUI 1"/>
		</xpanel>
        </xui:view>
        <p> To embed XUI in another area of the page, repeat XUI view tag.</p>
        <xui:view validation="true">
			<xpanel style="padding:5px;width:160px;height:85px;">
				<xbutton style="width:150px;height:75px;font-size:12pt;" 
					text="Embedded XUI 2"/>
			</xpanel>
	  </xui:view>
    </body>
</html>

Next: Setting encoding and other output properties
Back to: Application Guide