Creating some basic pages

Introduction tutorial - Creating some basic pages - Creating a frameset file

SUMMARY This step gets you started with creating some basic pages for your XUI application. XUI applications can consist of a single page or multiple pages within a frameset. The framesets can be in a number of different layouts. In this example the frameset will consist of three pages within a banner frame, a navigation frame and a main content frame

FURTHER READING The kalideoscope editor will allow you to create and layout your pages visually. This is covered in the kalideoscope editor tutorial.

The first thing that needs to be done is to create the frames file which is referred to from the startup.properties file. Create the file frames.xml in the pages directory. The contents of the file are shown in listing 1.

Listing 1 - frames.xml

<FrameSet>
    <Frame name="banner" constraint="NORTH" content="banner" width="640" 
		height="96"/>
    <Frame name="content" constraint="CENTER" content="welcome" width="640" 
		height="288"/>  
    <Frame name="navpanel" constraint="SOUTH" content="navpanel" width="640" 
		height="96"/>
</FrameSet>

This application will have a title panel at the top with a height of 96 pixels and a navigation panel at the bottom also with a height of 96 pixels. The content attribute specifies the file which will make up the content of the panel. The banner file which is referred to from the banner frame of the frames.xml file is shown in listing 2.

Listing 2 - banner.xml

<XPage style="Heading">
  <Components>
    <Label x="106" y="27" w="425" h="31" style="Progress" 
	content="ABC Bank Mortgage Application" alignment="Center" opaque="true"/>  
    <Panel x="0" y="72" w="640" h="24" style="Stripe">
      <Button x="592" y="3" w="40" h="20" content="X" alignment="Center"/>
      <Label x="480" y="3" w="100" h="20" style="Stripe" 
		content="Close Application" alignment="Left" opaque="true"/>
    </Panel>
  </Components>
</XPage>

The banner page contains a label with a welcome message. Note the style attribute which references the progress style and also the style attribute within the XPage node. It also contains a panel which in turn contains a button and a label.

The page which is referred to with the StartClass property within the startup.properties file is shown in listing 3. It will appear within the main content frame of the application.

Listing 3 - welcome.xml

<XPage>
  <Components>
    <Label x="146" y="84" w="322" h="80" style="Heading" 
	content="Welcome to ABC Bank's mortgage application. 
		Before we proceed please note the following..." 
	alignment="Left" opaque="true"/>
  </Components>
</XPage>

The navpanel page shown in listing 4 will handle the navigation of the application and contains two image components to handle backwards and forwards navigation. The image to be displayed by the component is specified by the content attribute. The 2 images in the example (left.gif and right.gif) are stored in the images folder.

Listing 4 - navpanel.xml

<XPage style="Heading">
  <Components>
    <Image x="564" y="51" w="19" h="18" content="right.gif"/>
    <Image x="60" y="54" w="19" h="18" content="left.gif"/>
  </Components>
</XPage>

Execute the run.bat file and the application will appear as in the screenshot.

The application does not do anything as yet apart from displaying the XML defined pages but an important aspect of XUI is illustrated here. That is the fact that a Java based application can be created with some simple pages and run without writing a single line of Java code.