Web Dynpro ABAP: Display tiff images

[bjorn-henrik_zink]

In 2007 Thomas Jung wrote a blog ABAP Bitmap Image Processing Class. Thomas' blog contains a lot of excellent information regarding how to fetch, convert, cache and display an image in Web Dynpro ABAP. However, looking into the  Web Dynpro ABAP forum it seems that the information has bypassed several ABAP developers. This blog focuses on one image processing only and should be considered a simple step-by-step guide of how to display a tiff image in Web Dynpro ABAP. The image format could be any other format supported by the Internet Graphics Server (IGS).

Displaying a tiff image in Web Dynpro ABAP includes (1) fetching a tiff image, (2) converting it into a browser supported content type using the IGS, (3) caching it on the server, and (4) binding the URL to an image element.

Prerequisite

Make sure that your IGS is up and running, for example by executing program GRAPHICS_IGS_IMGCONV_DEMO. More information can be found on help.sap.com. If your IGS is not up and running, then contact your basis team.  

1. Fetch

Fetching, converting, and caching an image is not a typical Web Dynpro component task and should therefore be placed in an assistance class.  

The ZCL_ASSISTANCE class contains four methods, but there could be many more methods. For example, instead of fetching the image via a URL or MIME, the image could be read directly from a Document Management System (DMS).

Method FETCH_IMAGE_URL

The FETCH_IMAGE_URL method gets a tiff image from an URL and returns a binary string.

Implementation of method FETCH_IMAGE_URL.

METHOD fetch_image_url.

  "

  " References

  DATA: lo_client TYPE REF TO if_http_client.

  "

  " Variables

  DATA lv_img_xstring TYPE xstring.

  DATA lv_img_string TYPE string.

  DATA lv_return_code TYPE i.

  DATA lv_error_text TYPE string.



  TRY.

      " Create the HTTP client

      CALL METHOD cl_http_client=>create_by_url

        EXPORTING

          url                = iv_url

        IMPORTING

          client             = lo_client

        EXCEPTIONS

          argument_not_found = 1

          plugin_not_active  = 2

          internal_error     = 3.



      IF sy-subrc = 0.

        " Set header fields.

        CALL METHOD lo_client->request->set_header_field

          EXPORTING

            name  = '~request_method'

            value = 'GET'.



        CALL METHOD lo_client->request->set_header_field

          EXPORTING

            name  = '~server_protocol'

            value = 'HTTP/1.1'.



        CALL METHOD lo_client->request->set_header_field

          EXPORTING

            name  = 'Content-Type'

            value = 'image/tiff'.



        lo_client->send( ).

        lo_client->receive( ).



        lo_client->response->get_status( IMPORTING code = lv_return_code ).



        "get the response as binary data

        lv_img_xstring = lo_client->response->get_data( ).



        "close connection

        lo_client->close( ).

      ENDIF. "sy-subrc = 0

    CATCH cx_root.

  ENDTRY.



  rv_xstring = lv_img_xstring.



ENDMETHOD.

Method FETCH_IMAGE_MIME

The FETCH_IMAGE_MIME is very similar to the FETCH_IMAGE_URL method. It gets a tiff image from the MIME repository and returns a binary string.

Implementation of method FETCH_IMAGE_MIME. 

METHOD fetch_image_mime.

  "

  " References

  DATA lr_mime_repository TYPE REF TO if_mr_api.

  "

  " Variables

  DATA lv_img_xstring TYPE xstring.



  TRY.

      "MIME repository reference

      lr_mime_repository = cl_mime_repository_api=>get_api( ).



      "Get file from MIME

      CALL METHOD lr_mime_repository->get

        EXPORTING

          i_url     = iv_path

        IMPORTING

          e_content = lv_img_xstring.



    CATCH cx_root.

  ENDTRY.



  "Return binary representation of file

  rv_xstring = lv_img_xstring.

ENDMETHOD.

2. Convert

After fetching the tiff image it should be converted into a browser supported format, as for example jpeg. Method CONVERT_IMAGE uses the fetched image together with the input (tiff) and output (jpeg) format to return a binary representation of the converted image.

Implementation of method CONVERT_IMAGE.

METHOD convert_image.

  "Objects

  DATA lo_igs_imgconv TYPE REF TO cl_igs_image_converter.



  "Variables

  DATA lv_img_blob    TYPE w3mimetabtype.

  DATA lv_img_size    TYPE w3param-cont_len.

  DATA lv_img_xstring TYPE xstring.



  "Create IGS reference

  CREATE OBJECT lo_igs_imgconv.



  "input image/tiff, output image/jpeg

  lo_igs_imgconv->input = iv_input_content_type.

  lo_igs_imgconv->output  = iv_output_content_type.



  CALL FUNCTION 'SCMS_XSTRING_TO_BINARY'

    EXPORTING

      buffer        = iv_xstring

    IMPORTING

      output_length = lv_img_size

    TABLES

      binary_tab    = lv_img_blob.



  CALL METHOD lo_igs_imgconv->set_image

    EXPORTING

      blob      = lv_img_blob

      blob_size = lv_img_size.



  CALL METHOD lo_igs_imgconv->execute

    EXCEPTIONS

      OTHERS = 1.



  IF sy-subrc IS INITIAL.

    CALL METHOD lo_igs_imgconv->get_image

      IMPORTING

        blob      = lv_img_blob

        blob_size = lv_img_size.



    CALL FUNCTION 'SCMS_BINARY_TO_XSTRING'

      EXPORTING

        input_length = lv_img_size

      IMPORTING

        buffer       = lv_img_xstring

      TABLES

        binary_tab   = lv_img_blob

      EXCEPTIONS

        failed       = 1

        OTHERS       = 2.

  ENDIF.



  rv_xstring = lv_img_xstring.

ENDMETHOD. 

3. Cache

The following method returns a URL of the converted XSTRING. I found the implementation on SDN.

Implementation of CACHE_IMAGE

METHOD cache_image.

  DATA lv_url TYPE string.



  "Create the cached response object that we will insert our content into

  DATA: cached_response TYPE REF TO if_http_response.



  CREATE OBJECT cached_response

    TYPE

      cl_http_response

    EXPORTING

      add_c_msg        = 1.



  "cached_response->set_compression(

    options = cached_response->IF_HTTP_ENTITY~CO_COMPRESS_IN_ALL_CASES ).





  TRY. " ignore, if compression can not be switched on

      CALL METHOD cached_response->set_compression

        EXPORTING

          OPTIONS = cached_response->co_compress_based_on_mime_type

        EXCEPTIONS

          OTHERS  = 1.

    CATCH cx_root.

  ENDTRY.



  "set the data and the headers

  cached_response->set_data( iv_img_blob ).



  cached_response->set_header_field(

     name  = if_http_header_fields=>content_type

       value = iv_img_type ).



  "Set the Response Status

  cached_response->set_status( code = 200 reason = 'OK' ).



  "Set the Cache Timeout - 30 min

  cached_response->server_cache_expire_rel( expires_rel = 1800 ).



  "Create a unique URL for the object

  DATA: guid TYPE guid_32.



  CALL FUNCTION 'GUID_CREATE'

    IMPORTING

      ev_guid_32 = guid.



  CONCATENATE '/usr/sap/public' '/' guid '.' 'jpg' INTO lv_url.



  "Cache the URL

  cl_http_server=>server_cache_upload(

     url      = lv_url

     response = cached_response ).



  "Return URL

  rv_url = lv_url.

ENDMETHOD.

4. Display

This section covers how to diplay the converted tiff image in Web Dynpro ABAP. Start by adding the above described assistance class ZCL_ASSISTANCE to the Web Dynpro ABAP component.

Component

The Web Dynpro ABAP object tree will look as follows.

Context

Go to the Context tab and create an IMAGE node.

Create a SOURCE attribute in the IMAGE node.

Upon creating the IMAGE node and SOURCE attribute the Context should look as follows.

View

In the view create an image element under the root container.

Bind the image element to the above created context attribute.

Implement the WDDOINIT method.

METHOD wddoinit .

  "

  "Constants

  CONSTANTS lc_input_content_type TYPE string VALUE  'image/tiff'.

  CONSTANTS lc_output_content_type TYPE string VALUE 'image/jpeg'.

  CONSTANTS lc_path TYPE string

     VALUE '/SAP/BC/WebDynpro/SAP/Z_TIF_IMAGE_DISPLAY/TIFF.tif'.

  "

  "References

  DATA lr_node_image TYPE REF TO if_wd_context_node.

  "

  "Variables

  DATA lv_img_xstring TYPE xstring.

  DATA lv_img_cache_url TYPE string.



  "Fetch IMAGE

  lv_img_xstring = wd_assist->fetch_image_mime( lc_path ).



  "Convert image

  lv_img_xstring = wd_assist->convert_image(

      iv_xstring             = lv_img_xstring

      iv_input_content_type  = lc_input_content_type

      iv_output_content_type = lc_output_content_type

      ).



  "Cache image

  lv_img_cache_url = wd_assist->cache_image(

      iv_img_blob = lv_img_xstring

      iv_img_type = lc_output_content_type

      ).



  "Set context url

  lr_node_image = wd_context->get_child_node( wd_this->wdctx_image ).

  lr_node_image->set_attribute(

     name = 'SOURCE' 

     value = lv_img_cache_url ).

ENDMETHOD.

Application

Finally, create an application of the component and test it.

(Image source: wikipedia.org)