Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

Introduction


In this example, we’ll show you how to use BLOB fields in Profound UI. This particular example will explain how to convert a BLOB field into an image, so that you can display this image in Profound UI. For this example, we will be making use of the pui.downloadURL() API and the PUIDNLEXIT program.

 

The PUIDNLEXIT Program


Below is the PUIDNLEXIT we set up for this example in its entirety:

     H DFTACTGRP(*NO) ACTGRP(*CALLER)
     D InputData_t     ds                  qualified
     D                                     based(Template)
     D   fileid                     640a   varying
     D   userid                      10a
     D   ipAddr                      15a
     D   inline                       1n
 
     D Main            PR                  ExtPgm('PUIDNLEXIT')
     D   timingFlag                  10i 0 const
     D   inputData                         likeds(InputData_t) const
     D   stmfDir                    640a   varying
     D   stmfName                   256a   varying
     D   attName                    256a   varying
     D   contentType                255a   varying
     D   allow                        5i 0
 
       dcl-pr unlink      int(10) ExtProc('unlink');
         path      pointer value options(*string);
       END-PR;

     D Main            PI
     D   timingFlag                  10i 0 const
     D   inputData                         likeds(InputData_t) const
     D   stmfDir                    640a   varying
     D   stmfName                   256a   varying
     D   attName                    256a   varying
     D   contentType                255a   varying
     D   allow                        5i 0

       dcl-s myPic SQLTYPE(BLOB_FILE);
       dcl-s filename varchar(255) inz('/tmp/myTestImage.jpg');
       dcl-s myid int(5);

      /free
       allow = 1;

       if timingFlag = 0;
         myid  =  %int(%trim(InputData.fileid));
         myPic_fo = SQFCRT;
         myPic_name = filename;
         myPic_nl = %Len(%trim(filename));

         Exec SQL
         select myBlob into :myPic from myLibrary.myTable where fileid = :myid;

         stmfDir = '/tmp/';
         stmfName = 'myTestImage.jpg';
         attName = 'elephant';
       ENDIF;

       if timingFlag = 1;
         unlink(%trim(filename));
       ENDIF;

       *inlr = *on;
      /end-free                                             

We won’t go into detail about the parameters set in this exit program. You can learn more about the different parameters for the PUIDNLEXIT program in the documentation. It’s also important to note that we did not change any of the parameters in the PUIDNLEXIT program we used for this, we kept them the same as they were in the sample PUIDNLEXIT program that is shipped with Profound UI.

This PUIDNLEXIT program is called twice. The first time it is called before the download, timingFlag = 0.  This is where you will actually write the image to the IFS in the program. IBM has more detailed information about LOB files here on their website that will also help you with understanding parts of this program. A few important notes about this section of the program:

  • Fileid is the ID value supplied to the pui.downloadURL() API. This will be your file’s key value.
  • myPic_name is used in order to tell the program where to put the file. Notice in our program this is equal to “filename”, which has a value of “/tmp/myTestImage.jpg”. So, it will create a file named “myTestImage.jpg” in the “/tmp” folder. Instead of hardcoding this in your program, you could add columns to your table, read the values from those fields, and create the file based on those values.

The second time the PUIDNLEXIT program is called is after the download occurs, in which case timingFlag = 1. This is where you will want to delete the file from the IFS. To do this, we used the “unlink()” API. This API is simply used to delete a link. You can find more detailed information about this API here.

 

Using pui.downloadURL()


The display file that we used for this example is quite simple. Below you can see how this is set up in the Visual Designer:

 

We placed an image widget onto the screen and changed the "visibility" property of this image to "hidden", since we don’t want to see the default image. The “Download” button is where we use the pui.downloadURL() API. In the onclick event of this button, we have the following:

var imageSrc =  pui.downloadURL({ "id":  "1", "contentType": "image/jpeg" });
applyProperty('Image1', 'image source', imageSrc);
applyProperty('Image1', 'visibility', 'visible');

Here, we download the image using pui.downloadURL() by setting the “id” to “1”. This comes from ‘fileid’ in your PUIDNLEXIT program, as mentioned earlier.

After downloading the image and setting this to a variable, “imageSrc”, we then use the applyProperty() API to change the "image source" property of our image to our downloaded image and change the visibility to “visible”, so that we can see the downloaded image. Now, when we click the download button, the image will download and appear in place of the image widget.

 

Final Result


After setting up our display file for our RPG program, and creating our PUIDNLEXIT program, we get the following result.

Initial screen:

    

After pressing the “Download” button:                         

 

  • No labels