Rich UI Handler part

Here is an example of a Rich UI Handler part:

import com.ibm.egl.rui.widgets.Box; 
import com.ibm.egl.rui.widgets.Button;
import com.ibm.egl.rui.widgets.TextField;
import egl.ui.rui.Event;

handler ButtonTest01 type RUIhandler {initialUI = [ myTopBox ],
                          onConstructionFunction = initialization}

   myHelloField TextField
      { readOnly = true, text = "Hello" };
   myInTextField TextField{};
   myButton Button{ text = "Input to Output", onClick ::= click };
   myOutTextField TextField{};
	
   myBox03 Box{ padding=8, columns = 3, 
                children = [ myInTextField,  myButton, myOutTextField ],
                backgroundColor = "CadetBlue" };
	
   myBox02 Box{ padding=8,	columns = 2, children = [myHelloField],
                backgroundColor = "DarkGray"};
	
   myTopBox Box{ padding=8, children = [ myBox02,  myBox03 ],
                columns = 1, backgroundColor = "Aqua" };
	
   function initialization()
   end	
	
   function click(e EVENT in)
      myOutTextField.text = myHelloField.text + " " + myInTextField.text;	
   end	
end

The properties in a Rich UI Handler part are used only when the part is used as the topmost handler in the Rich UI application. The properties are optional and are as follows:

cssFile

Specifies a cascading style sheet (a CSS file), which sets display characteristics of an individual widget or of a category of widgets. The property accepts a path relative to the WebContent directory. At deployment, the CSS file is referenced in a <link> entry that is added to the HTML file.

Here is an example setting:

Handler ButtonTest Type RUIHandler 
   { children = [ui], cssFile = "buttontest/coolblue.css" }

Here is an example CSS file:

.EglRuiGridTable 
  { border: 3px solid black; }  

  .EglRuiGridHeader 
  { color:yellow; 	
    background-color:red;	 }  

  .EglRuiGridCell 
  { color:black; 	
    background-color:aqua; } 

If both the cssFile and includeFile properties are specified, the CSS content referenced by the cssFile property takes precedence. That content takes precedence because in the deployed HTML file, the <link> entry is embedded after the content referenced by the includeFile property.

For additional details about Rich UI support for styles, see Widget styles.

includeFile

Specifies a file for inclusion in the deployed HTML. file. Like the cssFile property, the includeFile property accepts a path relative to the WebContent directory.

Here is an example setting:

Handler ButtonTest Type RUIHandler 
   { children = [ui], includeFile = "buttontest/coolblue.css" }

Here are details about file types:

• A file that has an extension other than css or html is included in a <script> element:

  <script>
     <!-- file contents here -->
  </script>

• A file that has an extension of html or css is included as is. If the file extension is css, the style directives must be within a <style> element:

  <style type="text/css">  
     .EglRuiGridTable 
     { 	border: 3px solid black; }  
  
     .EglRuiGridHeader 
     {  color:yellow; 	
        background-color:red;	 }  
  
     .EglRuiGridCell 
     { 	color:black; 	
        background-color:aqua; } 
  </style>

  If the file extension is html, the following statements apply:

  • If you are working in a Rich UI project, the product might show a warning message when you view a file that includes an xref attribute. For example, here is the content of the MyIncludeFile.html file, which is in the WebContent/MyFolder folder at development time:

    <link REL="STYLESHEET" TYPE="text/css" href="css/dashboard.css">

    In this example, a warning message indicates that the href value does not refer to an existing file. The warning exists because the development-time editor seeks the WebContent/MyFolder/css/dashboard.css file rather than the actual file, which is WebContent/css/dashboard.css. Ensure that the value of the <href> tag includes a path relative to the WebContent directory and ignore warning messages that indicate a need for a different path.

  • The inclusion of an HTML file (such that an <html> element is placed inside the deployed HTML file) is valid, at least in some browsers. If you use the includeFile property, test your application on multiple browsers.

initialUI

Specifies which widgets are children of the initial, DOM tree document element. If the array references a named widget multiple times, only the last reference is used, and the others are ignored.

onConstructionFunction

Specifies the on-construction function, which is a handler function that is invoked when the handler starts running. You can reset the value of initialUI in the on-construction function or in a function invoked (directly or indirectly) from this function. However, after the on-construction function ends, the value of initialUI is constant.

theme

Makes the appearance of widgets consistent throughout an application. You can specify either the Claro or Tundra theme. The default value is Claro. If you are coding an application that includes Dojo widgets, the Nihilo and Soria themes are also available, but that specification affects only the Dojo widgets. If a widget has no theme, the style is specific to the widget.

At run time, you can set a new theme by invoking ruiLib.setTheme() and can retrieve the name of the theme in use by invoking ruiLib.getTheme().

To use a theme, you must code statements that import the necessary CSS files into your CSS file. For details, see Themes to use in your application.

title

Specifies the value of the HTML <title> element. The default is the handler name.

At run time, you can set a new title by invoking ruiLib.setTitle() and can retrieve the name of the title in use by invoking ruiLib.getTitle().