UI - HTML pages

Improve this page

This doc covers page creation, html rendering and event handling.


GUI components

abapGit UI is based on HTML and CL_GUI_HTML_VIEWER. Main parts are:

Rendering content

An example of RENDER_CONTENT (or any other helper method with HTML output)

METHOD render_content.

    CREATE OBJECT ro_html.

    ro_html->add( '<div>' ).
    ro_html->add( '<h1>My content</h1>' ).
    ro_html->add_icon( 'star/error' ).
        iv_txt = 'click me'
        iv_act = 'some_event_handled_in_abap' ).
    ro_html->add( render_some_complex_stuff( ) ).
    ro_html->add( '</div>' ).


Html helper

ro_html which is the instance of ZCL_ABAPGIT_HTML is helper tool for html rendering. It accumulates html content and then can output it with render method. It has a couple of important methods:


Sub-classing ZCL_ABAPGIT_GUI_PAGE is not the only way to render the content. You may want to separate some visual component which is not a page e.g. ZCL_ABAPGIT_GUI_VIEW_REPO is a class like that. In essence you have to implement ZIF_ABAPGIT_GUI_RENDERABLE and it’s method - render. Then you can reuse it or even pass directly to GUI class as a page to render.

It makes sense to also subclass your component from ZCL_ABAPGIT_GUI_COMPONENT. This class has a protected gui_services method returning the singleton instance of ZIF_ABAPGIT_GUI_SERVICES. The gui services are good for:

Postponed HTML parts

Components may have postponed parts, e.g. scripts or hidden forms. These chunks may need to be rendered in another location of the page (e.g. scripts are rendered at the end). There is a mechanism to enable it:

    " ... somewhere within render
    gui_services( )->get_html_parts( )->add_part(
      iv_collection = c_html_parts-scripts
      ii_part       = render_my_scripts( ) ).

where render_my_scripts( ) must return an instance of ZCL_ABAPGIT_HTML.

Currently 2 collections are supported out of the box - scripts and hidden_forms (see definition of zcl_abapgit_gui_component). Scripts rendered after the page body. Hidden forms right before end of the body. But this does not limit you to these categories only - you may register own collections to exchange postponed parts between components supported by you. Collection is just a named list of ZCL_ABAPGIT_HTML instances.

Router and event handlers

To process sapevents in abap the component (page) must implement ZIF_ABAPGIT_GUI_EVENT_HANDLER=>on_event. It imports ii_event instance which represents sapevent handler of cl_gui_html_viewer. In particular:

Events can be processed on 2 levels - in page/component or in the router. On new event:

Router (ZCL_ABAPGIT_GUI_ROUTER) is the class which handle global abapGit commands like opening specific pages and actions like repo installation/deletion.

In order to indicate the result of event handling an on_event implementation must return rs_handled-state (element of zcl_abapgit_gui=>c_event_state) and, optionally, rs_handled-page:



In a nutshell:

  " somewhere within render
  gui_services( )->get_hotkeys_ctl( )->register_hotkeys( me ).

The component must implement zif_abapgit_gui_hotkeys and return list of keys, their human readable meaning and corresponding event to invoke.

  METHOD zif_abapgit_gui_hotkeys~get_hotkey_actions.

    DATA ls_hotkey_action LIKE LINE OF rt_hotkey_actions.

    ls_hotkey_action-ui_component = 'Stage'. " <<< This is to define origin of hotkeys

    ls_hotkey_action-description  = |Patch|. " <<< Human readable description
    ls_hotkey_action-action       = zif_abapgit_definitions=>c_action-go_patch. " <<< abapgit-wide action to open patch page
    ls_hotkey_action-hotkey       = |p|.     " <<< Key
    INSERT ls_hotkey_action INTO TABLE rt_hotkey_actions.

    ls_hotkey_action-description  = |Diff|.
    ls_hotkey_action-action       = zif_abapgit_definitions=>c_action-go_diff.
    ls_hotkey_action-hotkey       = |d|.
    INSERT ls_hotkey_action INTO TABLE rt_hotkey_actions.