HTMLB- TRAY

Functionality

Use this BSP to define a framework around an internal element. You can switch the visibility of the internal element using an expand symbol in the element's header.

The tray element is similar to the group element, although it offers additional functionality. In its 'compressed' status, it is displayed as a narrow horizontal bar with a title and an expand symbol in the upper right hand corner. If you click on this symbol, the contents of the element is expanded and is therefore visible. This status is known as 'expanded'. When you click again on the symbol, the element returns to its compressed status.

Since the content of the element can be any embedded element, a tray can be very useful if you want to include a lot of information in a small space. Note, however, thattrays increase the complexity of your page and therefore decrease their usability.

The element triggers two different events for expaning and collapsing the body element, onExpand and onCollapse.

The tray element is an element with a very complex optical screen. It offers three different designs that are optimized for the most common applications.

The inner element structure consists of a element.

Attributes

Name	Mandatory	Description
id	x	Unique name that clearly identifies the BSP element. This attribute is used in event handling and in data handling.
title		Use this attribute to determine the title for the tray.
tooltip		Use this attribute to determine the quick info text that is displayed when the user moves the cursor over the tray.
width		Use this attribute to determine the width of the tray.
design		Use this attribute to determine the current design for rendering the tray. Possible values are BORDER (default value), BORDERLESS, FORM and TEXT.
onCollapse		Use this attribute to define the event handler that is called when the tray content is not visible.
isCollapsed		Use this attribute to determine the initial, collapsed status of the tray.
onExpand		Use this attribute to define an event handler that is called when the content of the tray is visible.
onEdit		Use this attribute to define an event handler that is called when the user clicks on the edit symbol in the header bar.
onRemove		Use this attribute to define an event handler that is called when the user clicks on the delete symbol in the header bar.

Example

<%@ page language="abap"%>
<%@ extension name="htmlb" prefix="htmlb"%>


  
     

                                 title       = "Title of Tray"
                         design      = "text"
                         width       = "350"
                         isCollapsed = "<%=tray1_collapsed%>"
                         tooltip     = "Tray Tooltip."
                         onCollapse  = "MyOnCollapse"
                         onExpand    = "MyOnExpand"
                         onEdit      = "MyOnEdit"
                         onRemove    = "MyOnRemove"
          >
           
            
            
         

                                 title       = "Title of Tray"
                         design      = "text"
                         width       = "350"
                         isCollapsed = "<%=tray2_collapsed%>"
          >
           
            
            
          

    
  

Note
See also BSP application SBSPEXT_HTMLB, page tray.bsp

Event handling

A BSP element can have several events. The BSP element tray has four event handlers, onCollapse, onExpand, onEdit and onRemove.

You usually implement your user interface elements using a

element in the layout of your BSP, which points to the same page. In this default case, you generate the coding for the event handling in the OnInputProcessing section. Within the OnInputProcessing event handler, events can be recognized and assessed by the HTMLB BSP extension using the Event ID variable. For all HTMLB events, this variable has the value CL_HTMLB_MANAGER=>event_id. Events are usually handled according to this framework:

  IF event_id = CL_HTMLB_MANAGER=>event_id.
    ... handle HTMLB event...
  ENDIF.

You can implement event handling in two ways. The first way involves retrieving the event data and then processing the data (usually in a large case statement). The alternative is to 'trigger' the event against an event class that was instantiated by the user.

• Scenario 1: Gets the event and processes the data

In this case, the HTMLB manager is called in order to obtain a reference to a generic event object of type CL_HTMLB_EVENT. You can use the attribute name and event_type on this event object to determine which type of event is available. If the element supports the attribute id, you can use the attribute id to find out which element triggered the event. To display detailed information, display the object event on an object event with the correct type, in this case a tray event. You can find more information about the tray event in class CL_HTMLB_EVENT_TRAY.

  DATA: event TYPE REF TO CL_HTMLB_EVENT.
  event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ).
  IF event->name = 'tray' AND event->id = 'tray1'.
     DATA: tray_event TYPE REF TO CL_HTMLB_EVENT_TRAY.
     tray_event ?= event.
     IF tray_event->event_type = 'collapse'.
        tray1_collapsed = 'X'.
      ELSEIF tray_event->event_type = 'expand'.
        tray1_collapsed = ' '.
      ENDIF.
   ENDIF.

Note
Note that for the BSP element and its events, the event class is CL_HTMLB_EVENT_TRAY.

• Scenario 2:

The interface is available for event handling. This interface contains methods for all of the BSP elements that are used in the BSP extension HTMLB and which use events.

The event can be triggered by a user-instantiated event handler class. In this case, the event handling class can be any user-defined class that must implement and have already instantiated the interface IF_HTMLB_EVENT. You can usually use the application class, for example, to handle specific events. If you do this, the only prerequisite is that the application class must implement interface IF_HTMLB_EVENT.

The following example uses a separate class named CL_HTMLB_EVENT_EXAMPLE for event handling:

  DATA: event_handler TYPE REF TO CL_HTMLB_EVENT_EXAMPLE.
  CREATE OBJECT event_handler.
  CL_HTMLB_MANAGER=>dispatch_event(
                            request       = runtime->server->request
                            event_handler = event_handler
                            page_context  = page_context
                                    ).

The tray element triggers events IF_HTMLB_EVENT~TRAY_EXPAND_CLICK, IF_HTMLB_EVENT~TRAY_COLLAPSE_CLICK,IF_HTMLB_EVENT~TRAY_EDIT_CLICK and IF_HTMLB_EVENT~TRAY_REMOVE_CLICK, which each contain the following additional parameters:

• ID

ID of the element used

• ON_CLICK

Name of the event handler specified by the user

For all of the events that are triggered, there is the onClick attribute. This is the name specified by the user for the event handler method.

Caution
This one method triggers all tray click events for all trays on the page. As a developer, ensure that you select the correct ID to decide which tray is triggered.

Data Extraction for Inbound Requests

If you want to read the status of a tray, this happens in the event handling phase in OnInputProcessing. The event handler OnInputProcessing could look as follows, for example:

DATA: tray TYPE REF TO CL_HTMLB_TRAY.
tray ?= CL_HTMLB_MANAGER=>GET_DATA(
                          request      = runtime->server->request
                          name         = 'tray'
                          id           = 'tray2' ).

IF tray IS NOT INITIAL.
  tray2_collapsed = tray->iscollapsed.
ENDIF.

Ensure that all recovered data for an element is expressly written to the element class. With the tray element, class CL_HTMLB_TRAY is used for this. The HTMLB manager returns an instance of this class.

The following attributes are recovered or set:

• ID

• NAME

Tips and Tricks

• Note that the height of a tray can change considerably when you switch the visibility of the body area. In this case it is possible that this completely rearranges your page.

• If neither an onExpand nor an onCollapse event handler is defined, expanding and collapsing the tray element is completely handled by the browser. No contact is made with the server. Note, however, that this local switch mode is not available for Netscape 4.x due to technical restrictions. By default, tray elements are always displayed as expanded on this platform. If you want to support switching, you must therefore define suitable onExpand and onCollapse event handlers.

Further information

You can find additional information about BSP extensions in the SAP Library under .

You can find general information about BSP applications in the SAP Library under mySAP Technology Components -> SAP Web Application Server -> Web Applications (BC-MAS) -> SAP Web Application Server -> .