[ABAP] HTML-basierte Anzeige: Ausklappbarer Dockingcontainer im Selektionsbild, Eventhandling

* http://www.tricktresor.de/blog/fly-out-menu/
TYPES: ty_it_events TYPE STANDARD TABLE OF cntl_simple_event WITH DEFAULT KEY.

CONSTANTS c_dock_open TYPE i VALUE 400.
CONSTANTS c_dock_close TYPE i VALUE 150.
CONSTANTS c_cmd_open TYPE string VALUE 'OPEN'.
CONSTANTS c_cmd_close TYPE string VALUE 'CLOSE'.
CONSTANTS c_cmd_click TYPE string VALUE 'CLICK'.

DATA: o_docker TYPE REF TO cl_gui_docking_container.

PARAMETERS: p_field TYPE char10 DEFAULT '####'.

CLASS lcl_events DEFINITION.
  PUBLIC SECTION.

    CLASS-METHODS:
      on_sapevent FOR EVENT sapevent OF cl_gui_html_viewer
        IMPORTING
            action
            frame
            getdata
            postdata
            query_table.
ENDCLASS.

CLASS lcl_events IMPLEMENTATION.
  METHOD on_sapevent.

    IF o_docker IS BOUND.
      CASE action.
* Container ausklappen
        WHEN c_cmd_open.
          o_docker->set_extension( EXPORTING
                                     extension = c_dock_open ).
* Container einklappen
        WHEN c_cmd_close.
          o_docker->set_extension( EXPORTING
                                     extension = c_dock_close ).
      ENDCASE.
    ENDIF.

* Action im Parameterfeld ausgeben
    p_field = action.

  ENDMETHOD.

ENDCLASS.

INITIALIZATION.
* Docking-Container für HTML-Viewer-Element
  o_docker = NEW #( extension               = c_dock_close
                    side                    = cl_gui_docking_container=>dock_at_right
                    no_autodef_progid_dynnr = abap_true ).

* HTML-Viewer
  DATA(o_html) = NEW cl_gui_html_viewer( parent = o_docker ).

* SAP-Events registrieren
  DATA(it_events) = VALUE ty_it_events( ( eventid = cl_gui_html_viewer=>m_id_sapevent
                                          appl_event = abap_true ) ).

  o_html->set_registered_events( events = it_events ).

  SET HANDLER lcl_events=>on_sapevent FOR o_html.

* HTML-Code
  DATA(it_html) = VALUE html_table( ( |<html>| )
                                    ( |  <meta http-equiv="content-type" content="text/html" charset="ISO-8859-1">| )
                                    ( |  <head>| )
                                    ( |  <title>Test</title>| )
                                    ( |  <script type="text/javascript">| )
                                    ( |    function open_close(element)| )
                                    ( |    \{| )
                                    ( |      location.href = "SAPEVENT:" + element;| )
                                    ( |    \}| )
                                    ( |    function mouse_click(element)| )
                                    ( |    \{| )
                                    ( |      location.href = "SAPEVENT:" + element;| )
                                    ( |    \}| )
                                    ( |  </script>| )
                                    ( |  </head>| )
                                    ( |  <body style="overflow:auto">| )
                                    ( |    <table border="0" width="300px">| )
                                    ( |      <tr>| )
                                    ( |        <td><button onmouseover="open_close('{ c_cmd_open }')">&laquo; Show</button></td>| )
                                    ( |      </tr>| )
                                    ( |      <tr>| )
                                    ( |        <td>--------------------&raquo; <a href="#" onclick="mouse_click('{ c_cmd_click }')">Klick</a></td>| )
                                    ( |      </tr>| )
                                    ( |      <tr>| )
                                    ( |        <td><button onmouseover="open_close('{ c_cmd_close }')">&raquo; Hide</button></td>| )
                                    ( |      </tr>| )
                                    ( |    </table>| )
                                    ( |  </body>| )
                                    ( |</html>| ) ).

* HTML anzeigen
  DATA: lv_url TYPE swk_url.

  o_html->load_data( IMPORTING
                       assigned_url = lv_url
                     CHANGING
                       data_table   = it_html ).

  o_html->show_url( url = lv_url ).

[ABAP] Textausgabe mit cl_dd_document (Dynamische Dokumente) in einem cl_gui_docking_container

DATA: it_spfli TYPE STANDARD TABLE OF spfli.

DATA: o_cnt TYPE REF TO cl_gui_docking_container.
DATA: o_doc TYPE REF TO cl_dd_document.

PARAMETERS: p_carr TYPE spfli-carrid DEFAULT '%'.

INITIALIZATION.
* Containerobjekt für die Einbettung des cl_dd_document
  o_cnt = NEW #( no_autodef_progid_dynnr = abap_true
                 side  = cl_gui_docking_container=>dock_at_bottom
                 ratio = 85 ).

* cl_dd_document für die formatierte Darstellung des Ausgabetextes
  o_doc = NEW #( background_color = cl_dd_area=>col_textarea ).
* Dokument im Container darstellen
  o_doc->display_document( parent = o_cnt ).

AT SELECTION-SCREEN OUTPUT.

  IF o_cnt IS BOUND.
* SELECT mit LIKE, für % als Wildcard
    SELECT * FROM spfli
      INTO TABLE @it_spfli
      WHERE carrid LIKE @p_carr.

* Dokument initialisieren, alten Inhalt löschen, Hintergrundfarbe weiß
    o_doc->initialize_document( background_color = cl_dd_area=>col_textarea ).
* Text vom Stil Überschrift
    o_doc->add_text( text      = 'Flugverbindungen'
                     sap_style = cl_dd_document=>heading ).

* Trennlinie
    o_doc->underline( ).

    LOOP AT it_spfli ASSIGNING FIELD-SYMBOL(<fs_line>).
* Zeilen im Standardformat
      o_doc->add_text( text      = |{ <fs_line>-carrid } { <fs_line>-connid } { <fs_line>-airpfrom } { <fs_line>-cityfrom } { <fs_line>-airpto } { <fs_line>-cityto }|
                       sap_style = cl_dd_document=>standard ).

      o_doc->new_line( ).
    ENDLOOP.

* Dokument zusammenbauen
    o_doc->merge_document( ).
* Dokument anzeigen, bisherige Controls, Ereignisbehandler und Container beibehalten
    o_doc->display_document( reuse_control = abap_true
                             reuse_registration = abap_true
                             parent = o_cnt ).
  ENDIF.

[ABAP] TextEdit Control (cl_gui_textedit) in einem cl_gui_docking_container verwenden, variable Zeilenlänge

DATA: o_dock TYPE REF TO cl_gui_docking_container.
DATA: o_edit TYPE REF TO cl_gui_textedit.

PARAMETERS: p_text TYPE string.

START-OF-SELECTION.

* Container-Objekt erzeugen
  o_dock = NEW #( no_autodef_progid_dynnr = abap_true
                  side = cl_gui_docking_container=>dock_at_bottom
                  ratio = 50 ).

* Editorobjekt erzeugen, Zeilenumbruch am rechten Fensterrand
  o_edit = NEW #( wordwrap_mode = cl_gui_textedit=>wordwrap_at_windowborder
                  wordwrap_to_linebreak_mode = cl_gui_textedit=>true
                  parent = o_dock ).

* feste Zeichenbreite
  o_edit->set_font_fixed( mode = cl_gui_textedit=>true ).
  
* Text setzen
  o_edit->set_textstream( p_text ).

  WRITE space.

[ABAP] TextEdit Control (cl_gui_textedit) in einem cl_gui_docking_container verwenden

Variante 1 (feste Zeilenlänge)

* Textlänge 1024 Zeichen
CONSTANTS: c_textlength TYPE i VALUE 1024.

TYPES: ty_edit_text TYPE c LENGTH c_textlength.

DATA: o_edit TYPE REF TO cl_gui_textedit.
DATA: o_dock TYPE REF TO cl_gui_docking_container.

DATA: it_tab TYPE STANDARD TABLE OF ty_edit_text.

START-OF-SELECTION.

* Testtext
  WRITE: / 'Zeile 1'.
  WRITE: / 'Zeile 2'.
  WRITE: / 'Zeile 3'.

* Container-Objekt erzeugen
  o_dock = NEW #( no_autodef_progid_dynnr = abap_true
                  side = cl_gui_docking_container=>dock_at_bottom
                  ratio = 50 ).

* Editorobjekt erzeugen wordwrap an fester Position
  o_edit = NEW #( wordwrap_mode = cl_gui_textedit=>wordwrap_at_fixed_position
                  wordwrap_position = c_textlength
                  parent = o_dock ).

* feste Zeichenbreite
  o_edit->set_font_fixed( mode = cl_gui_textedit=>true ).

AT LINE-SELECTION.
* bei Doppelklick auf Zeile
  IF o_edit IS BOUND.
* Text aus dem Editor holen
    o_edit->get_text_as_r3table( IMPORTING table = it_tab ).
* akt. gewählte Zeile anfügen
    APPEND sy-lisel TO it_tab.
* Text wieder im Editor anzeigen
    o_edit->set_text_as_r3table( table = it_tab ).
  ENDIF.

Variante 2 (variable Zeilenlänge)

DATA: o_edit TYPE REF TO cl_gui_textedit.
DATA: o_dock TYPE REF TO cl_gui_docking_container.

DATA: it_tab TYPE STANDARD TABLE OF char1024.

START-OF-SELECTION.

* Testtext
  WRITE: / 'Zeile 1'.
  WRITE: / 'Zeile 2'.
  WRITE: / 'Zeile 3'.

* Container-Objekt erzeugen
  o_dock = NEW #( no_autodef_progid_dynnr = abap_true
                  side = cl_gui_docking_container=>dock_at_bottom
                  ratio = 50 ).

* Editorobjekt erzeugen wordwrap an fester Position
  o_edit = NEW #( wordwrap_mode = cl_gui_textedit=>wordwrap_at_windowborder
                  wordwrap_to_linebreak_mode = cl_gui_textedit=>true
                  parent = o_dock ).

* feste Zeichenbreite
  o_edit->set_font_fixed( mode = cl_gui_textedit=>true ).

AT LINE-SELECTION.
* bei Doppelklick auf Zeile
  IF o_edit IS BOUND.
* Text aus dem Editor holen
    o_edit->get_text_as_stream( IMPORTING text = it_tab ).
* akt. gewählte Zeile anfügen
    APPEND sy-lisel TO it_tab.
* Text wieder im Editor anzeigen
    o_edit->set_text_as_stream( text = it_tab ).
  ENDIF.

[ABAP] TextEdit Control (cl_gui_textedit) Text löschen und neu setzen

DATA: o_edit TYPE REF TO cl_gui_textedit.
DATA: o_dock TYPE REF TO cl_gui_docking_container.

START-OF-SELECTION.

  WRITE: / 'Zeile 1'.
  WRITE: / 'Zeile 2'.
  WRITE: / 'Zeile 3'.
  
* Container-Objekt erzeugen
  o_dock = NEW #( no_autodef_progid_dynnr = abap_true
                  side = cl_gui_docking_container=>dock_at_bottom
                  ratio = 50 ).

* Editorobjekt erzeugen wordwrap an fester Position
  o_edit = NEW #( wordwrap_mode = cl_gui_textedit=>wordwrap_at_windowborder
                  wordwrap_to_linebreak_mode = cl_gui_textedit=>true
                  parent = o_dock ).

* feste Zeichenbreite
  o_edit->set_font_fixed( mode = cl_gui_textedit=>true ).

AT LINE-SELECTION.
* bei Doppelklick auf Zeile
  IF o_edit IS BOUND.
* Inhalt des TextEdit löschen
    o_edit->delete_text( ).
* Neuen text einfügen
    o_edit->set_textstream( |{ sy-lisel }| ).
  ENDIF.

[ABAP] Baumstruktur mit Hilfe des cl_gui_list_tree anzeigen, Events abfangen

TYPES: ty_it_events TYPE STANDARD TABLE OF cntl_simple_event WITH DEFAULT KEY.

DATA: it_nodes TYPE treev_ntab.
DATA: it_items TYPE STANDARD TABLE OF mtreeitm WITH DEFAULT KEY.

CLASS lcl_event DEFINITION.
  PUBLIC SECTION.
    CLASS-METHODS: on_node_double_click FOR EVENT node_double_click OF cl_gui_list_tree
      IMPORTING
          node_key.
    CLASS-METHODS: on_expand_no_children FOR EVENT expand_no_children OF cl_gui_list_tree
      IMPORTING
          node_key.
    CLASS-METHODS: on_item_double_click FOR EVENT item_double_click OF cl_gui_list_tree
      IMPORTING
          node_key
          item_name.
    CLASS-METHODS: on_button_click FOR EVENT button_click OF cl_gui_list_tree
      IMPORTING
          node_key
          item_name.
    CLASS-METHODS: on_link_click FOR EVENT link_click OF cl_gui_list_tree
      IMPORTING
          node_key
          item_name.
    CLASS-METHODS: on_checkbox_change FOR EVENT checkbox_change OF cl_gui_list_tree
      IMPORTING
          node_key
          item_name
          checked.
ENDCLASS.

CLASS lcl_event IMPLEMENTATION.
  METHOD on_node_double_click.
    WRITE: / |Node double click on node: { node_key }|.
  ENDMETHOD.

  METHOD on_item_double_click.
    WRITE: / |Item double click on node: { node_key }, item: { item_name }|.
  ENDMETHOD.

  METHOD on_link_click.
    WRITE: / |Link click on node: { node_key }, item: { item_name }|.
  ENDMETHOD.

  METHOD on_button_click.
    WRITE: / |Button click on node: { node_key }, item: { item_name }|.
  ENDMETHOD.

  METHOD on_checkbox_change.
    WRITE: / |Checkbox change on node: { node_key }, item: { item_name }|.
  ENDMETHOD.

  METHOD on_expand_no_children.
    WRITE: / |Expand no children on node: { node_key }|.
  ENDMETHOD.
ENDCLASS.

START-OF-SELECTION.

* Container-Objekt erzeugen
  DATA(o_dock) = NEW cl_gui_docking_container( no_autodef_progid_dynnr = abap_true
                                               side = cl_gui_docking_container=>dock_at_left
                                               ratio = 20
                                               caption = 'Datenausgabe' ).

* Tree-Objekt erzeugen
  DATA(o_tree) = NEW cl_gui_list_tree( parent = o_dock
                                       node_selection_mode = cl_gui_list_tree=>node_sel_mode_single
                                       item_selection = abap_true
                                       with_headers = abap_false ).

* Eventtypten müssen gesondert registriert werden
  DATA(it_events) = VALUE ty_it_events( ( eventid    = cl_gui_list_tree=>eventid_node_double_click
                                          appl_event = abap_true )
                                        ( eventid    = cl_gui_list_tree=>eventid_item_double_click
                                          appl_event = abap_true )
                                        ( eventid    = cl_gui_list_tree=>eventid_expand_no_children
                                          appl_event = abap_true )
                                        ( eventid    = cl_gui_list_tree=>eventid_link_click
                                          appl_event = abap_true )
                                        ( eventid    = cl_gui_list_tree=>eventid_button_click
                                          appl_event = abap_true )
                                        ( eventid    = cl_gui_list_tree=>eventid_checkbox_change
                                          appl_event = abap_true ) ).

  o_tree->set_registered_events( events = it_events ).

  SET HANDLER lcl_event=>on_node_double_click FOR o_tree.
  SET HANDLER lcl_event=>on_item_double_click FOR o_tree.
  SET HANDLER lcl_event=>on_expand_no_children FOR o_tree.
  SET HANDLER lcl_event=>on_link_click FOR o_tree.
  SET HANDLER lcl_event=>on_button_click FOR o_tree.
  SET HANDLER lcl_event=>on_checkbox_change FOR o_tree.

* Tree-Nodes einfügen -> die Bezeichner müssen eindeutig sein
  it_nodes = VALUE #( ( node_key  = 'ROOT'
                        hidden    = abap_false
                        disabled  = abap_false
                        isfolder  = abap_true )

                      ( node_key  = 'NODE1'
                        relatkey  = 'ROOT'
                        relatship = cl_gui_list_tree=>relat_last_child
                        hidden    = abap_false
                        disabled  = abap_false
                        isfolder  = abap_true )

                      ( node_key  = 'NODE1_1'
                        relatkey  = 'NODE1'
                        relatship = cl_gui_list_tree=>relat_last_child
                        hidden    = abap_false
                        disabled  = abap_false
                        isfolder  = abap_false )

                      ( node_key  = 'NODE1_2'
                        relatkey  = 'NODE1'
                        relatship = cl_gui_list_tree=>relat_last_child
                        hidden    = abap_false
                        disabled  = abap_false
                        isfolder  = abap_false )

                      ( node_key  = 'NODE1_3'
                        relatkey  = 'NODE1'
                        relatship = cl_gui_list_tree=>relat_last_child
                        hidden    = abap_false
                        disabled  = abap_false
                        isfolder  = abap_false )

                      ( node_key  = 'NODE2'
                        relatkey  = 'ROOT'
                        relatship = cl_gui_list_tree=>relat_last_child
                        hidden    = abap_false
                        disabled  = abap_false
                        isfolder  = abap_false )

                      ( node_key  = 'NODE3'
                        relatkey  = 'ROOT'
                        relatship = cl_gui_list_tree=>relat_last_child
                        hidden    = abap_false
                        disabled  = abap_false
                        isfolder  = abap_false ) ).

* Items für die Nodes definieren
  it_items = VALUE #( ( node_key  = 'ROOT'
                        item_name = '1'
                        style     = cl_gui_list_tree=>style_default
                        class     = cl_gui_list_tree=>item_class_text
                        alignment = cl_gui_list_tree=>align_auto
                        font      = cl_gui_list_tree=>item_font_fixed
                        text      = 'Root'
                        t_image   = icon_led_green )
* Ordner
                      ( node_key  = 'NODE1'
                        item_name = '1'
                        style     = cl_gui_list_tree=>style_default
                        class     = cl_gui_list_tree=>item_class_text
                        alignment = cl_gui_list_tree=>align_auto
                        font      = cl_gui_list_tree=>item_font_fixed
                        text      = 'Node 1'
                        t_image   = icon_led_yellow )
* Item Button
                      ( node_key  = 'NODE1_1'
                        item_name = '1'
                        style     = cl_gui_list_tree=>style_default
                        class     = cl_gui_list_tree=>item_class_button
                        alignment = cl_gui_list_tree=>align_auto
                        font      = cl_gui_list_tree=>item_font_fixed
                        text      = 'Node 1_1'
                        t_image   = icon_led_green )
* Item Checkbox
                      ( node_key  = 'NODE1_2'
                        item_name = '1'
                        style     = cl_gui_list_tree=>style_default
                        class     = cl_gui_list_tree=>item_class_checkbox
                        alignment = cl_gui_list_tree=>align_auto
                        font      = cl_gui_list_tree=>item_font_fixed
                        text      = 'Node 1_2'
                        t_image   = icon_led_green
                        editable  = abap_true )
* Item Link
                      ( node_key  = 'NODE1_3'
                        item_name = '1'
                        style     = cl_gui_list_tree=>style_default
                        class     = cl_gui_list_tree=>item_class_link
                        alignment = cl_gui_list_tree=>align_auto
                        font      = cl_gui_list_tree=>item_font_fixed
                        text      = 'Node 1_3'
                        t_image   = icon_led_green )
* Item mit 4 Spalten
                      ( node_key   = 'NODE2'
                        item_name  = '1'
                        style      = cl_gui_list_tree=>style_default
                        class      = cl_gui_list_tree=>item_class_text
                        alignment  = cl_gui_list_tree=>align_auto
                        font       = cl_gui_list_tree=>item_font_fixed
                        text       = ''
                        t_image    = icon_led_green
                        usebgcolor = abap_true )

                      ( node_key   = 'NODE2'
                        item_name  = '2'
                        style      = cl_gui_list_tree=>style_default
                        class      = cl_gui_list_tree=>item_class_text
                        alignment  = cl_gui_list_tree=>align_left
                        font       = cl_gui_list_tree=>item_font_fixed
                        length     = 4
                        text       = '1000'
                        usebgcolor = abap_true )

                      ( node_key   = 'NODE2'
                        item_name  = '3'
                        style      = cl_gui_list_tree=>style_default
                        class      = cl_gui_list_tree=>item_class_text
                        alignment  = cl_gui_list_tree=>align_left
                        font       = cl_gui_list_tree=>item_font_fixed
                        length     = 10
                        text       = 'Liter'
                        usebgcolor = abap_true )

                      ( node_key   = 'NODE2'
                        item_name  = '4'
                        style      = cl_gui_list_tree=>style_default
                        class      = cl_gui_list_tree=>item_class_text
                        alignment  = cl_gui_list_tree=>align_auto
                        font       = cl_gui_list_tree=>item_font_prop
                        text       = 'Testeintrag 1' )
* Item mit 4 Spalten
                      ( node_key   = 'NODE3'
                        item_name  = '1'
                        style      = cl_gui_list_tree=>style_default
                        class      = cl_gui_list_tree=>item_class_text
                        alignment  = cl_gui_list_tree=>align_auto
                        font       = cl_gui_list_tree=>item_font_fixed
                        text       = ''
                        t_image    = icon_led_green
                        usebgcolor = abap_true )

                      ( node_key   = 'NODE3'
                        item_name  = '2'
                        style      = cl_gui_list_tree=>style_default
                        class      = cl_gui_list_tree=>item_class_text
                        alignment  = cl_gui_list_tree=>align_left
                        font       = cl_gui_list_tree=>item_font_fixed
                        length     = 4
                        text       = '0100'
                        usebgcolor = abap_true )

                      ( node_key   = 'NODE3'
                        item_name  = '3'
                        style      = cl_gui_list_tree=>style_default
                        class      = cl_gui_list_tree=>item_class_text
                        alignment  = cl_gui_list_tree=>align_left
                        font       = cl_gui_list_tree=>item_font_fixed
                        length     = 10
                        text       = 'mm'
                        usebgcolor = abap_true )

                      ( node_key   = 'NODE3'
                        item_name  = '4'
                        style      = cl_gui_list_tree=>style_default
                        class      = cl_gui_list_tree=>item_class_text
                        alignment  = cl_gui_list_tree=>align_auto
                        font       = cl_gui_list_tree=>item_font_prop
                        text       = 'Testeintrag 2' ) ).

  o_tree->add_nodes_and_items( node_table                = it_nodes
                               item_table                = it_items
                               item_table_structure_name = 'MTREEITM' ). " Typ muss gleich mit Zeilentyp von it_items sein

* Root-Nodes des Trees expandieren
  o_tree->expand_root_nodes( ).

* leere Toolbar ausblenden
  cl_abap_list_layout=>suppress_toolbar( ).

  WRITE space. " wichtig für Erzwingung der Listenausgabe und Anzeige des Trees

Weiterführende Infos: Link und Link

[ABAP] HTML-Code im cl_gui_html_viewer anzeigen, Eventhandling

* Demoprogramme:
* SAPHTML_EVENTS_DEMO
* SAPHTML_SCRIPT_DEMO
* DEMO_TABLE_EXPRESSIONS

TYPES: ty_it_events TYPE STANDARD TABLE OF cntl_simple_event WITH DEFAULT KEY.

PARAMETERS: p_url TYPE string.

CLASS lcl_events DEFINITION.
  PUBLIC SECTION.

    CLASS-METHODS:
      on_navigate_complete FOR EVENT navigate_complete OF cl_gui_html_viewer
        IMPORTING
            url
            sender.

    CLASS-METHODS:
      on_sapevent FOR EVENT sapevent OF cl_gui_html_viewer
        IMPORTING
            action
            frame
            getdata
            postdata
            query_table
            sender.
ENDCLASS.

CLASS lcl_events IMPLEMENTATION.

* nach Aufbau des Dokuments
  METHOD on_navigate_complete.
    p_url = url.
  ENDMETHOD.

* Link- oder Button-Klick
  METHOD on_sapevent.
    MESSAGE |Action: { action }, get: { getdata }| TYPE 'S'.
  ENDMETHOD.
ENDCLASS.

INITIALIZATION.

  DATA(o_dock) = NEW cl_gui_docking_container( ratio = 50
                                               side = cl_gui_docking_container=>dock_at_bottom
                                               no_autodef_progid_dynnr = 'X' ).

* HTML-Viewer
  DATA(o_html) = NEW cl_gui_html_viewer( parent = o_dock ).

* Eventtypten müssen gesondert registriert werden
  DATA(it_events) = VALUE ty_it_events( ( eventid = cl_gui_html_viewer=>m_id_navigate_complete
                                          appl_event = abap_true )
                                        ( eventid = cl_gui_html_viewer=>m_id_sapevent
                                          appl_event = abap_true ) ).

  o_html->set_registered_events( events = it_events ).

* Eventhandler registrieren
  SET HANDLER lcl_events=>on_navigate_complete FOR o_html.
  SET HANDLER lcl_events=>on_sapevent FOR o_html.

* HTML-Code mit Buttons und Forms
  DATA(it_html) = VALUE html_table( ( |<html>| )
                                    ( |  <head>| )
                                    ( |    <title>Drag & Drop Test</title>| )
                                    ( |  </head>| )
                                    ( |  <script type="text/javascript">| )
                                    ( |    function mouse_click(element)| )
                                    ( |    \{| )
                                    ( |      location.href = "SAPEVENT:" + element;| )
                                    ( |    \}| )
                                    ( |  </script>| )
                                    ( |  <body bgcolor="#AABBCC">| )
                                    ( |    <p><font size=30>Dateien mit der Maus hierher ziehen!</font></p>| )
                                    ( |    <form method="post" action="SAPEVENT:SHOW_INFO?PARAMETER1">| )
                                    ( |      <p><input type="submit" value="Klick!"></p>| )
                                    ( |    </form>| )
                                    ( |    <form method="post" action="">| )
                                    ( |      <a href="SAPEVENT:LINK_KLICK?PARAMETER2">Link</a>| )
                                    ( |    </form>| )
                                    ( |    <button onclick="mouse_click('BTN_CLICK')">Show</button>| )
                                    ( |  </body>| )
                                    ( |</html>| ) ).

* URL zu HTML holen
  DATA: lv_url TYPE swk_url.

  o_html->load_data( IMPORTING
                       assigned_url = lv_url
                     CHANGING
                       data_table   = it_html ).

* HTML anzeigen
  o_html->show_url( url = lv_url ).

[ABAP] GUI Containertypen

cl_gui_container

* cl_gui_container=>default_screen
* cl_gui_container=>screen0 ... cl_gui_container=>screen9
  • Fullscreen-Container der Listenausgabe
  • Erzeugung erfolgt z.B. bei WRITE (Bsp.: WRITE space.)
  • können als Basis für weitere Container genommen werden

Beispiel für cl_gui_container: Link

cl_gui_splitter_container

  • Splitter mit Subcontainern
  • benötigt Parent (z.B. cl_gui_container=>screen0, cl_gui_docking_container, cl_gui_custom_container)

Beispiel für cl_gui_splitter_container: Link

cl_gui_docking_container

  • Dock-Seite kann angegeben werden
  • Breite / Höhe kann absolut (extension) oder relativ (ratio) angegeben werden

Beispiel für cl_gui_docking_container: Link

cl_gui_dialogbox_container

  • erzeugt ein neues eigenständiges Fenster
  • Event „on_close“ sollte behandelt werden, damit auf das Schließen-Kreuz reagiert werden kann

Beispiel für cl_gui_dialogbox_container: Link

cl_gui_custom_container

  • Containerobjekt zur Verwendung auf Dynpros
  • ein Name muss vergeben werden

Beispiel für cl_gui_custom_container: Link

cl_gui_gos_container

  • Containerobjekt für Anzeige von Generic Object Services (GOS) in der Titlebar
  • beliebige Untercontainer können eingebettet werden

Beispiel für cl_gui_gos_container: Link

cl_gui_container_bar

  • vertikales Tabstrip mit Auswahl-Buttons

Beispiel für cl_gui_container_bar: Link

cl_gui_container_bar_2

  • vertikales Tabstrip mit Auswahl-Buttons und Schließen-Kreuz
  • drei Anzeigemodi (fix (Feste Anordnung), tile (Menü), outlook (Anordnung klappt))

Beispiel für cl_gui_container_bar_2: Link

cl_gui_container_bar_xt

  • vertikales Tabstrip mit Auswahl-Buttons und Schließen-Kreuz
  • zwei Anzeigemodi (fix (Feste Anordnung), outlook (Anordnung klappt))

Beispiel für cl_gui_container_bar_xt: Link

[ABAP] Baumstruktur mit Hilfe des cl_gui_simple_tree anzeigen, Events abfangen

* Demoprogramme
* RSDEMO_DRAG_DROP_EDIT_TREE
* RSDEMO_DRAG_DROP_TREE_MULTI
* SAPSIMPLE_TREE_CONTROL_DEMO

TYPES: ty_it_events TYPE STANDARD TABLE OF cntl_simple_event WITH DEFAULT KEY.
TYPES: ty_it_nodes TYPE STANDARD TABLE OF mtreesnode WITH DEFAULT KEY.

DATA: it_nodes TYPE ty_it_nodes.

CLASS lcl_event DEFINITION.
  PUBLIC SECTION.
    CLASS-METHODS: on_keypress FOR EVENT node_keypress OF cl_gui_simple_tree
      IMPORTING
          node_key
          key
          sender.
    CLASS-METHODS: on_double_click FOR EVENT node_double_click OF cl_gui_simple_tree
      IMPORTING
          node_key
          sender.
    CLASS-METHODS: on_selection_changed FOR EVENT selection_changed OF cl_gui_simple_tree
      IMPORTING
          node_key
          sender.
    CLASS-METHODS: on_expand_no_children FOR EVENT expand_no_children OF cl_gui_simple_tree
      IMPORTING
          node_key
          sender.
ENDCLASS.

CLASS lcl_event IMPLEMENTATION.
* Tastendruck, die Tasten müssen mit add_key_stroke( ) registriert worden sein
  METHOD on_keypress.
    WRITE: / |Node: { node_key } Taste: { key }|.
  ENDMETHOD.
* Doppelklick auf ein aktives Baumelement
  METHOD on_double_click.
* Text in der Nodes-Tabelle anpassen
    ASSIGN it_nodes[ node_key = node_key ] TO FIELD-SYMBOL(<fs_node>).
    <fs_node>-text = 'Schonmal geklickt.'.

* Text in der Node anpassen
    sender->node_set_text( node_key = node_key text = <fs_node>-text ).

    WRITE: / |Node: { node_key }, Text: { <fs_node>-text }|.
  ENDMETHOD.
* Klick auf ein aktives Baumelement
  METHOD on_selection_changed.
    WRITE: / |Node: { node_key }|.
  ENDMETHOD.
* bei Expandierung eines Baumelements ohne Unterelemente
  METHOD on_expand_no_children.
    WRITE: / |Node: { node_key }|.
  ENDMETHOD.
ENDCLASS.

START-OF-SELECTION.

* Container-Objekt erzeugen
  DATA(o_dock) = NEW cl_gui_docking_container( no_autodef_progid_dynnr = abap_true
                                               side = cl_gui_docking_container=>dock_at_left
                                               ratio = 15
                                               caption = 'Datenausgabe' ).

* Tree-Objekt erzeugen
  DATA(o_tree) = NEW cl_gui_simple_tree( parent = o_dock
                                         node_selection_mode = cl_gui_simple_tree=>node_sel_mode_single ).

* Eventtypten müssen gesondert registriert werden
  DATA(it_events) = VALUE ty_it_events( ( eventid = cl_gui_simple_tree=>eventid_node_keypress )
*                                        ( eventid = cl_gui_simple_tree=>eventid_node_double_click )
                                        ( eventid = cl_gui_simple_tree=>eventid_selection_changed )
                                        ( eventid = cl_gui_simple_tree=>eventid_expand_no_children
                                          appl_event = abap_true ) ).

  o_tree->set_registered_events( events = it_events ).

* benötigte Tasten registrieren
*cl_gui_simple_tree=>key_f1: F1
*cl_gui_simple_tree=>key_f4: F4
*cl_gui_simple_tree=>key_insert: Einfügen
*cl_gui_simple_tree=>key_delete: Entfernen
*cl_gui_simple_tree=>key_enter: Enter
*cl_gui_simple_tree=>key_cut: Strg+X
*cl_gui_simple_tree=>key_copy: Strg+C
*cl_gui_simple_tree=>key_paste: Strg+V

  o_tree->add_key_stroke( cl_gui_simple_tree=>key_enter ).
  o_tree->add_key_stroke( cl_gui_simple_tree=>key_f1 ).
  o_tree->add_key_stroke( cl_gui_simple_tree=>key_delete ).

* Events registrieren, on_double_click und on_selection_changed
* dürfen nicht gleichzeitig registriert sein, sonst Exception
  SET HANDLER lcl_event=>on_keypress FOR o_tree.
*  SET HANDLER lcl_event=>on_double_click FOR o_tree.
  SET HANDLER lcl_event=>on_selection_changed FOR o_tree.
  SET HANDLER lcl_event=>on_expand_no_children FOR o_tree.

* Tree-Nodes einfügen -> die Bezeichner müssen eindeutig sein
  it_nodes = VALUE #( ( node_key  = 'FLDR1'
                        relatship = cl_gui_simple_tree=>relat_last_child
                        disabled  = abap_true
                        isfolder  = abap_true
                        n_image   = icon_folder
                        exp_image = icon_open_folder
                        style     = cl_gui_simple_tree=>style_default
                        text      = 'Ordner' )

                      ( node_key  = 'NODE1'
                        relatship = cl_gui_simple_tree=>relat_last_child
                        disabled  = abap_true
                        isfolder  = abap_true
                        relatkey  = 'FLDR1'
                        n_image   = icon_folder
                        exp_image = icon_open_folder
                        style     = cl_gui_simple_tree=>style_intensified
                        text      = 'Datensatz 1' )

                      ( node_key  = 'NODE1_1'
                        relatship = cl_gui_simple_tree=>relat_last_child
                        isfolder  = abap_false
                        relatkey  = 'NODE1'
                        n_image   = icon_led_yellow
                        style     = cl_gui_simple_tree=>style_intensified
                        text      = 'Datensatz 1_1' )

                      ( node_key  = 'NODE2'
                        relatship = cl_gui_simple_tree=>relat_last_child
                        isfolder  = abap_false
                        relatkey  = 'FLDR1'
                        n_image   = icon_led_green
                        style     = cl_gui_simple_tree=>style_default
                        text      = 'Datensatz 2' )

                      ( node_key  = 'NODE3'
                        relatship = cl_gui_simple_tree=>relat_last_child
                        isfolder  = abap_false
                        relatkey  = 'FLDR1'
                        disabled  = abap_true
                        n_image   = icon_led_inactive
                        style     = cl_gui_simple_tree=>style_inactive
                        text      = 'Datensatz 3 (inaktiv)' )

                      ( node_key  = 'NODE4'
                        relatship = cl_gui_simple_tree=>relat_last_child
                        isfolder  = abap_false
                        relatkey  = 'FLDR1'
                        disabled  = abap_false
                        n_image   = icon_led_red
                        style     = cl_gui_simple_tree=>style_intensifd_critical
                        text      = 'Datensatz 4' ) ).

  o_tree->add_nodes( table_structure_name = 'MTREESNODE' " Typ muss gleich mit Zeilentyp von ty_it_nodes sein
                     node_table           = it_nodes ).

* Root-Nodes des Trees expandieren
  o_tree->expand_root_nodes( ).

* leere Toolbar ausblenden
  cl_abap_list_layout=>suppress_toolbar( ).

  WRITE space. " wichtig für Erzwingung der Listenausgabe und Anzeige des Trees

Weiterführende Infos: Link und Link