[ABAP] Bilder und Icons von einem Webserver (URL) anzeigen

Variante 1 (load_picture_from_url_async)

* Docking-Container für Bilddarstellung
DATA: o_dock TYPE REF TO cl_gui_docking_container.

PARAMETERS: p_url TYPE char255 DEFAULT 'http://url.de/1234.jpg' LOWER CASE.

AT SELECTION-SCREEN OUTPUT.

  IF NOT o_dock IS BOUND.
* Dockingcontainer erzeugen
    o_dock = NEW #( repid = sy-repid
                    dynnr = sy-dynnr
                    side  = cl_gui_docking_container=>dock_at_bottom
                    ratio = 30 ).

* Bild über die URL laden und anzeigen
    DATA(o_pic) = NEW cl_gui_picture( parent = o_dock ).
    o_pic->set_display_mode( display_mode = cl_gui_picture=>display_mode_fit_center ).

    TRY.
        o_pic->load_picture_from_url_async( p_url ).
      CATCH cx_root INTO DATA(e).
        MESSAGE e->get_text( ) TYPE 'S' DISPLAY LIKE 'E'.
    ENDTRY.
  ENDIF.

Variante 2 (load_picture_from_url mit Fehlerbehandlung)

* Docking-Container für Bilddarstellung
DATA: o_dock TYPE REF TO cl_gui_docking_container.

PARAMETERS: p_url TYPE char255 DEFAULT 'http://url.de/1234.jpg' LOWER CASE.

AT SELECTION-SCREEN OUTPUT.

  IF NOT o_dock IS BOUND.
* Dockingcontainer erzeugen
    o_dock = NEW #( repid = sy-repid
                    dynnr = sy-dynnr
                    side  = cl_gui_docking_container=>dock_at_bottom
                    ratio = 30 ).

* Bild über die URL laden und anzeigen
    DATA(o_pic) = NEW cl_gui_picture( parent = o_dock ).
    o_pic->set_display_mode( display_mode = cl_gui_picture=>display_mode_fit_center ).
    TRY.
        DATA(lv_load_ok) = 0.

* Bild laden
        o_pic->load_picture_from_url( EXPORTING url = p_url IMPORTING result = lv_load_ok ).

* Flush ist wichtig für die Abarbeitung des GUI-Queues, sonst gibt es einen Core-Dump -> "SYSTEM_POINTER_PENDING"
        cl_gui_cfw=>flush( ).

        CASE lv_load_ok.
          WHEN 0.
* Fehler
            MESSAGE 'Bild nicht vorhanden.' TYPE 'S' DISPLAY LIKE 'E'.
          WHEN 1.
* Ok
            MESSAGE 'Bild konnte geladen werden.' TYPE 'S' DISPLAY LIKE 'I'.
        ENDCASE.
      CATCH cx_root INTO DATA(e).
        MESSAGE e->get_text( ) TYPE 'S' DISPLAY LIKE 'E'.
    ENDTRY.

  ENDIF.

Variante 3 (load_picture_from_sap_icons)

* Docking-Container für Bilddarstellung
DATA: o_dock TYPE REF TO cl_gui_docking_container.

PARAMETERS: p_url TYPE char255 DEFAULT 'http://url.de/1234.jpg' LOWER CASE.

AT SELECTION-SCREEN OUTPUT.

  IF NOT o_dock IS BOUND.
* Dockingcontainer erzeugen
    o_dock = NEW #( repid = sy-repid
                    dynnr = sy-dynnr
                    side  = cl_gui_docking_container=>dock_at_bottom
                    ratio = 30 ).

* Bild über die URL laden und anzeigen
    DATA(o_pic) = NEW cl_gui_picture( parent = o_dock ).
    o_pic->set_display_mode( display_mode = cl_gui_picture=>display_mode_fit_center ).

    TRY.
        o_pic->load_picture_from_sap_icons( icon_annotation ).
      CATCH cx_root INTO DATA(e).
        MESSAGE e->get_text( ) TYPE 'S' DISPLAY LIKE 'E'.
    ENDTRY.
  ENDIF.

[AJAX] $.post()

Allgemein

$.post(URL, data, callback); 

Beispiel

// https://www.w3schools.com/jquery/jquery_ajax_get_post.asp
$("btn1").click(function(){
    // url
    $.post("btn1_post.php",
    // data
    {
        data1: "some data1",
        data2: "some data2"
    },
    // callback
    function(data, status){
        console.log("Data: " + data);
        console.log("Status: " + status);
    });
}); 

[AJAX] $.get()

Allgemein

$.get(URL, callback); 

Beispiel

// https://www.w3schools.com/jquery/jquery_ajax_get_post.asp
$("btn1").click(function(){
    // url
    $.get("btn1_get.php",
    // callback
    function(data, status){
        console.log("Data: " + data);
        console.log("Status: " + status);
    });
}); 

[jQuery] Eventhandler entfernen

// https://api.jquery.com/click/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>jQuery Button-Klick</title>
</head>
<body>
  <button id="btn1">Klick mich!</button>
</body>
</html>

// Button mit id="btn1": Eventhandler registrieren
$("#btn1").on("click", function(evt){
  console.log(evt.target);
  $(this).fadeOut();
});

// Button mit id="btn1": Eventhandler deregistrieren
$("#btn1").off("click");