Root Elements

rootPane

The rootPane is a Nexaweb application's implied top-level container. 

<rootpane> 
</rootpane>

You specify the root pane in your application's client XAL file if you want to change the values of any of the rootPane attributes from their defaults. For example, to set the rootPane border and color.

You might also specify the rootPane in your application's client XAL file to create a mutliple document interface (MDI) style application.

The following shows the XAL syntax for an MDI-style application with a tree on the left and some windows in the center of the container:

<rootPane>
  <borderPane>
   <tree borderPosition="west"/>
   <desktopPane borderPosition="center">
     <window>...</window>
   </desktopPane>
  </borderPane>
</rootPane> 

This example includes:

• rootPane, a top-level container.
• borderPane, a layout container that manages the layout of the containers and components within the rootPane.
• tree, a component that provides a hierachical representation of data, situated in the west coordinate of the borderPane layout.
• desktop, a panel that can contain windows and dialogs, situated in the center coordinate of the borderPane layout.
• window, a window component contained in the desktopPane.

In this example, another window component added to the rootPane could move anywhere in the application; however, a window added to the desktopPane can inhabit only the center of the application and not the west portion of the container where the tree is drawn.

Visually, with some additional display attributes specified, this example appears as follows:

defs

You specify items in defs tag that other components can refer to by using the syntax: #ID (pound symbol+component ID). Items under the defs tag must be declared before components that refer to them or an error occurs.

Components you can place in a defs tag include:

• popupMenu
• textField
• comboBox
• linearGradient
• popup

You can use the defs section to define a version of any of these components so that you can use it multiple times in your UI without having to define the component each time you want to use it.

The following example shows the syntax for a defs section in a Nexaweb Java application UI file including definitions for popup and popupMenu components.

<xal xmlns="http://openxal.org/ui/java">
  <defs>
   <popup id="myPopup">
    <borderPane>
     <label text="south" borderPosition="south"/>
     <label text="east" borderPosition="east"/>
     <label text="north" borderPosition="north"/>
     <label text="west" borderPosition="west"/>
     <label text="center" borderPosition="center"/>
    </borderPane>
   </popup>
   <popupMenu id="myPopupMenu">
    <menuItem text="A menu item"/>
    <menuItem text="Another menu item"/>
   </popupMenu>
  </defs>
  <rootPane>
   <borderPane>
    <desktopPane borderPosition="center">
     <horizontalFlowPane>
      <borderPane width="300px" height="500px">
       <button text="A button with a popup" popup="#myPopup" borderPosition="north"/>
       <button text="MyPopup Used Here" popup="#myPopupMenu" borderPosition="south"/>
       <button height="25px" text="MyPopup Used Here" width="200px" popup="#myPopupMenu" borderPosition="west"/>
      </borderPane>
     </horizontalFlowPane>
    </desktopPane>
   </borderPane>
  </rootPane>
</xal>

The following figures shows the UI displaying the popupMenu, MyPopup, from the middle button, and then the bottom button.

The following example shows the syntax for a defs section in a Nexaweb Java application UI file including a linearGradient:

<xal xmlns="http://openxal.org/ui/java">
  <defs>
   <linearGradient id="button_gradient_xal" x1="0%" y1="0%" y2="100%">
    <stop offset="30%" stop-color="blue"/>
    <stop offset="100%" stop-color="#D5DEE3"/>
   </linearGradient>
  </defs>
  <rootPane>
   <borderPane>
    <desktopPane borderPosition="center"> 
     <horizontalFlowPane>
      <borderPane>
       <button text="OK" borderPosition="north"/>
       <button text="Apply" borderPosition="center"/>
       <button text="linearGradient" borderPosition="south" backgroundColor="gradient(button_gradient_xal)"/>
      </borderPane>
     </horizontalFlowPane>
    </desktopPane>
   </borderPane>
  </rootPane>
</xal>

The following figure shows the UI displaying a button using the linearGradient defined in the defs section: