Getting Started:
Your First XUI Page
Creating rich clients using XUI is as simple as creating a typical JSP
with HTML tags. XUI, being an XML language, is created using the same
tagging mechanism found in traditional HTML development. It has full support
for native client scripting using JavaScript. Styles can also be applied
through the use of native CSS which can be applied inline or in-document.
To write our first XUI page, you will need the following:
- Jakarta Tomcat Environment
- XUI Environment
- A text editor such as notepad or Textpad
For our first XUI page, we will be creating a screen using the <xbutton>
component along with other non-visual components such as <xpanel>
and <xcontentpane> which will produce the following screen (using
Mozilla Firefox 1.0):
The actual code for this screen is as follows:
<%@ taglib uri="http://www.jway.com/xui" prefix="xui" %>
<%@ page contentType="text/html; charset=UTF8" %>
<xui:view>
<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>
- To replicate this example, let's do the following:
- Open your favorite text editor (Notepad or Textpad).
- Copy and paste the code above into a new file.
- Create a new directory named "test" under webapps/xui-framework/.
- Save this new file as helloxui.jsp inside this new directory.
- To test this page, make sure that Tomcat is running. Browse http://localhost:8080/xui-framework/test/helloxui.jsp
in Mozilla Firefox 1.0 or Microsoft Internet Explorer 6.0.
- If you see exactly the same screen as the above screen capture, congratulations!
You have successfully created your first XUI page.
- You can go ahead and play with the text attribute of <xbutton>
to change the value of the text that is displayed with the button. You
can also change the values of the style attribute if you are familiar
with standard CSS.
Next: Creating
an XUI Page: A Step-by-Step Guide.
Back to: Application Guide
|
