Show TOC

TrayLocate this document in the navigation structure

Definition

Similar to group the tray allows grouping of controls. The 'tray' allows additional functionality like collapsing/expanding - similar to the behavior of windows on your Microsoft Windows desktop. The tray control can be for client side eventing. See the EventValidationComponent description for more details.

Portal components are placed in a tray by the portal.

  • design

    The design of the tray can be:

    • BORDER

      The tray has a title bar and the panel has a frame that defines the size.

    • BORDERLESS

      The tray has only a title bar.

    • FORM

      The tray has a title bar. The panel is filled with a background color. The color is different from the title background color.

    • TEXT

      The tray has a title bar. The panel is filled with the same background color as the title bar.

  • enabled - inherited from EventValidationComponent .

    A boolean value that enables (=true) or disables (=false) the tray control. A disabled tray sends no event when clicked.

  • id

    Identification name of the tray.

  • isCollapsed

    A boolean value that if "true" shows only the title bar. To indicate that the tray is collapsed, collapsed symbol is displayed. When clicking on this symbol, the 'onExpand' event is fired.

  • jsObjectNeeded - inherited from Component .

    A boolean value that defines if a JavaScript object has to be generated for the tray component.

  • menu

    Set a hover menu for the tray.

  • onCollapse

    Defines the event handling method that will be processed when the user clicks Collapse.

    If the attribute is set to a <%=null %> string or the attribute is omitted the symbol is not displayed in the title bar.

  • onEdit - Deprecated

    Defines the event handling method that will be processed when the user clicks Edit.

    If the attribute is set to a <%=null %> string or the attribute is omitted the symbol is not displayed in the title bar.

  • onExpand

    Defines the event handling method that will be processed when the user clicks Expand.

    This symbol can be actives only when 'isCollapsed' is set to "true". If the attribute is set to a <%=null %> string or the attribute is omitted the symbol is not displayed in the title bar.

  • onRemove - Deprecated

    Defines the event handling method that will be processed when the user clicks Remove.

    If the attribute is set to a <%=null %> string or the attribute is omitted the symbol is not displayed in the title bar.

  • title

    Defines the string of text placed left aligned in the title bar. If no title should be displayed an empty string (null) can be used. The width of the tray is automatically adjusted to the length of the text when the 'width' attribute is set smaller than the title text width.

  • tooltip

    Defines the hint of the tray which is displayed as the mouse cursor passes over the tray, or as the mouse button is pressed but not released.

  • width

    Defines the width of the tray. The width of the button is automatically adjusted to the length of the 'title'. To see an effect of the 'width' attribute, 'width' has to be set higher as the width is defined by the length of the 'title' string. If an empty (null) 'title' string is set, no 'title' attribute is defined, so the width of the tray is set according to the 'width' attribute.

Attributes

M

Values

Usage

design

BORDER (d)

BORDERLESS

FORM

TEXT

Taglib

design="FORM"

Classlib

setDesign (TrayDesign.FORM)

enabled*

FALSE

TRUE (d)

Taglib

No tag available

Classlib

setEnabled(true)

id

*

String (cs)

Taglib

id="Intro_Text"

Classlib

Object id

isCollapsed

FALSE (d)

TRUE

Taglib

isCollapsed="TRUE"

Classlib

setCollapsed (true)

jsObjectNeeded**

FALSE (d)

TRUE

Taglib

No tag available

Classlib

setJsObjectNeeded(true)

menu

Component

Taglib

No tag available

Classlib

setMenu(HoverMenu hm)

title

String

Taglib

title="Headlines"

Classlib

setTitle("Headlines")

tooltip

String

Taglib

tooltip="latest news"

Classlib

setTooltip("latest news")

width

Unit (50%)

Taglib

width="300"

Classlib

setWidth("300")

Events

M

Values

Usage

onCollapse

String (cs)

Taglib

onCollapse="ev_col"

Classlib

setOnCollapse("ev_col")

onEdit

Deprecated

String (cs)

Taglib

onEdit="ev_ed"

Classlib

setOnEdit("ev_ed")

onExpand

String (cs)

Taglib

onExpand="ev_ex"

Classlib

setOnExpand("ev_ex")

onRemove

Deprecated

String (cs)

Taglib

onRemove="ev_re"

Classlib

setOnRemove("ev_re")

trayBody

Defines the items in the tray. A tray can be filled with any controls, such as checkbox, image, or textView.

Example

using the taglib 

  <hbj:tray
       id="HeadlineNews"
       design="BORDER"
       title="latest Headlines"
       tooltip="all the news you need"
       onEdit="ev_hd_edit"
       onRemove="ev_hd_rem"
       width="25%"
       >

       <hbj:trayBody>
          <hbj:textView
               encode="true"
               text="The NASDAQ on an upswing<br>Good news for homeowners"
          />
       </hbj:trayBody>
  </hbj:tray>

using the classlib 

    Form form = (Form)this.getForm();
    Tray tray = new Tray("HeadlineNews");
    tray.setDesign(TrayDesign.BORDER);
    tray.setTitle("latest Headlines");
    tray.setTooltip("all the news you need");
    tray.setOnEdit("ev_hd_edit");
    tray.setOnRemove("ev_hd_rem");
    tray.setWidth("25%");

    TextView ttv2 = new TextView("ttv2");
    ttv2.setText("The NASDAQ on an upswing<br>Good news for homeowners");
    ttv2.setEncode(false);
    tray.addComponent(ttv2);
    form.addComponent(tray);

Result