Add sample for image_editor_popup_close frontend action (01/02) (#681)

Add a self-contained demo (z2ui5_cl_demo_app_383) in the "framework -
action" package that showcases the IMAGE_EDITOR_POPUP_CLOSE frontend
action directly, without the z2ui5_cl_pop_image_editor helper class.

The Save button binds client->_event_client( cs_event-image_editor_popup_close ),
which reads the edited image from the ImageEditor control on the client
(getImagePngDataURL), closes the popup and returns the PNG data URL to
the server as the SAVE event argument.

Regenerate the src/01 overview catalog for the new tile.


Claude-Session: https://claude.ai/code/session_01HbhPYiga7hfH54P1U4Y4ou

Co-authored-by: Claude <noreply@anthropic.com>

Author: oblomov-dev

src/01/02/z2ui5_cl_demo_app_383.clas.abap

@@ -0,0 +1,114 @@
+CLASS z2ui5_cl_demo_app_383 DEFINITION PUBLIC.
+
+  PUBLIC SECTION.
+    INTERFACES z2ui5_if_app.
+
+    DATA image TYPE string.
+
+  PROTECTED SECTION.
+    DATA client TYPE REF TO z2ui5_if_client.
+
+    METHODS view_display.
+    METHODS popup_display.
+    METHODS on_event.
+
+  PRIVATE SECTION.
+ENDCLASS.
+
+
+
+CLASS z2ui5_cl_demo_app_383 IMPLEMENTATION.
+
+
+  METHOD z2ui5_if_app~main.
+
+    me->client = client.
+
+    IF client->check_on_init( ).
+
+      image = `https://raw.githubusercontent.com/abap2UI5/abap2UI5/main/docs/images/logo.png`.
+      view_display( ).
+
+    ELSEIF client->check_on_event( ).
+      on_event( ).
+    ENDIF.
+
+  ENDMETHOD.
+
+
+  METHOD view_display.
+
+    DATA(view) = z2ui5_cl_xml_view=>factory( ).
+
+    view->shell(
+        )->page(
+            title          = `abap2UI5 - Frontend Action - Image Editor Popup Close`
+            navbuttonpress = client->_event_nav_app_leave( )
+            shownavbutton  = client->check_app_prev_stack( )
+            )->vbox( `sapUiSmallMargin`
+                )->image(
+                    src   = client->_bind( image )
+                    width = `20rem`
+                )->button(
+                    text  = `Edit Image...`
+                    icon  = `sap-icon://edit`
+                    press = client->_event( `EDIT` ) ).
+
+    client->view_display( view->stringify( ) ).
+
+  ENDMETHOD.
+
+
+  METHOD popup_display.
+
+    DATA(popup) = z2ui5_cl_xml_view=>factory_popup(
+        )->dialog(
+            title               = `Edit Image`
+            icon                = `sap-icon://edit`
+            contentheight       = `80%`
+            contentwidth        = `80%`
+            verticalscrolling   = abap_false
+            horizontalscrolling = abap_false ).
+
+    popup->image_editor_container(
+        )->image_editor(
+            id  = `imageEditor`
+            src = image ).
+
+    popup->buttons(
+        )->button(
+            text  = `Cancel`
+            type  = `Reject`
+            press = client->_event( `CANCEL` )
+        )->button(
+            text  = `Save`
+            type  = `Emphasized`
+            press = client->_event_client( client->cs_event-image_editor_popup_close ) ).
+
+    client->popup_display( popup->stringify( ) ).
+
+  ENDMETHOD.
+
+
+  METHOD on_event.
+
+    CASE client->get( )-event.
+
+      WHEN `EDIT`.
+        popup_display( ).
+
+      WHEN `SAVE`.
+
+        image = client->get_event_arg( 1 ).
+        client->popup_destroy( ).
+        client->view_model_update( ).
+        client->message_toast_display( `Image saved` ).
+
+      WHEN `CANCEL`.
+        client->popup_destroy( ).
+
+    ENDCASE.
+
+  ENDMETHOD.
+
+ENDCLASS.

src/01/02/z2ui5_cl_demo_app_383.clas.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<abapGit version="v1.0.0" serializer="LCL_OBJECT_CLAS" serializer_version="v1.0.0">
+ <asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
+  <asx:values>
+   <VSEOCLASS>
+    <CLSNAME>Z2UI5_CL_DEMO_APP_383</CLSNAME>
+    <LANGU>E</LANGU>
+    <DESCRIPT>Image Editor - Edit in Popup and return PNG</DESCRIPT>
+    <STATE>1</STATE>
+    <CLSCCINCL>X</CLSCCINCL>
+    <FIXPT>X</FIXPT>
+    <UNICODE>X</UNICODE>
+   </VSEOCLASS>
+  </asx:values>
+ </asx:abap>
+</abapGit>

src/01/z2ui5_cl_sample_app_001.clas.abap

@@ -245,6 +245,7 @@ CLASS z2ui5_cl_sample_app_001 IMPLEMENTATION.
       ( group = `framework - action` header = `Browser` sub = `Title` app = `z2ui5_cl_demo_app_125` )
       ( group = `framework - action` header = `Focus I` sub = `Set Focus in Textfield` app = `z2ui5_cl_demo_app_133` )
       ( group = `framework - action` header = `Focus II` sub = `Jump with the focus` app = `z2ui5_cl_demo_app_189` )
+      ( group = `framework - action` header = `Image Editor` sub = `Edit in Popup and return PNG` app = `z2ui5_cl_demo_app_383` )
       ( group = `framework - action` header = `Input` sub = `Clipboard` app = `z2ui5_cl_demo_app_325` )
       ( group = `framework - action` header = `Input` sub = `Hide/show Soft Keyboard` app = `z2ui5_cl_demo_app_352` )
       ( group = `framework - action` header = `Scroll I` sub = `Scroll to position` app = `z2ui5_cl_demo_app_362` )