Startseite Beiträge getaggt mit "cl_gui_html_viewer" (Seite 2)

Schlagwort: cl_gui_html_viewer

[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] 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] Nutzung der Google-Chart-API zur Anzeige von Charts 

* Beispiel adaptiert von:
* http://www.tricktresor.de/blog/sap-und-bunte-bilder-cl_gui_html_viewer/

DATA: lv_s032 TYPE s032.
SELECT-OPTIONS: so_werks FOR lv_s032-werks.

START-OF-SELECTION.

* Alle Bestände je Werk aus der S032 summieren
  SELECT werks,                    " Werk
         SUM( wbwbest ) AS wbwbest " Summe Wert Bewerteter Bestand
    INTO TABLE @DATA(it_data)
    FROM s032
      WHERE werks IN @so_werks
        AND vrsio = '000'
      GROUP BY werks.

* HTML-Code erzeugen
  DATA(it_html) = VALUE html_table(
                                    ( |<html>| )
                                    ( |  <head>| )
                                    ( |    <script type="text/javascript" src="https://www.google.com/jsapi"></script>| )
                                    ( |    <script type="text/javascript">| )
                                    ( |      google.load("visualization", "1", \{packages:["corechart"]\});| )
                                    ( |      google.setOnLoadCallback(drawChart);| )
                                    ( |      function drawChart() \{| )
                                    ( |        var data = google.visualization.arrayToDataTable([ ['Werk', 'Bestand'],| )
                                  ).

* Daten aus der iTab in den Code einfügen
  DATA(lv_html) = ||.

  LOOP AT it_data ASSIGNING FIELD-SYMBOL(<d>).
    IF lv_html IS INITIAL.
      lv_html = |        ['{ <d>-werks }', { <d>-wbwbest }]|.
    ELSE.
      lv_html = |        ,['{ <d>-werks }', { <d>-wbwbest }]|.
    ENDIF.

    APPEND lv_html TO it_html.
  ENDLOOP.

* Code abschließen
  it_html = VALUE html_table( BASE it_html
                              ( |        ]);| )
                              ( |        var options = \{title: 'Summe bewertete Bestände pro Werk'\};| )
                              ( |        var chart = new google.visualization.PieChart(document.getElementById('piechart'));| )
                              ( |        chart.draw(data, options);| )
                              ( |      \};| )
                              ( |    </script>| )
                              ( |  </head>| )
                              ( |  <body>| )
                              ( |    <div id="piechart" style="width: 900px; height: 500px;"></div>| )
                              ( |  </body>| )
                              ( |</html>| )
                            ).

* HTML-Viewer
  DATA(o_html) = NEW cl_gui_html_viewer( parent = cl_gui_container=>default_screen ).

* 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 ).

* leere Standard-Toolbar ausblenden
  cl_abap_list_layout=>suppress_toolbar( ).

* Ausgabe von cl_gui_container=>default_screen erzwingen
  WRITE: space.