How to change an image at runtime in Webdynpro java

[Former Member]

How to change images at runtime?

Note:  the following technique applies to JPG images only. So if you a have a gif or any other type of image you must change it. To do so, you can use any photo editor.

1. A while ago a colleague of mine, who was working in an HR project, told me he was 
    asked to design a button which will show the number people waiting to be approved by
    their manager. Once clicked, this button should take you to another view where certain
    activities on the part of the manager should take place. His first reaction was "No, it's
    impossible". Well, is it?

2. For demonstration purposes, I wrote a little application that uses the well-known 
    Bapi_Flight_Getlist. As city of departure I have put, hard-coded, "Frankfurt" and as city
    of arrival, I have put "New York". As airliner I used "LH", also hard-coded.

     When the application starts it immediately fetches all Lufthansa flights and writes their
     total number on the image I attach to the button. Once the user clicks on the button,
     the table is filled with all flights details.

Take a look at the following image (before pressing the button)

And after pressing the button:

Please also note that the header ("Get list of flights") is also created dynamically (watch  the date!!).

3. To be able to write on the button, I attach an image to it and then modify the image
    at runtime. To achieve this I resorted to a known technique often used in Java Swing
    and which I used a couple of years ago when I wrote a little Photo Manager which made
    it possible for the user to put a date on a digital photograph.

4.The programming process:

• Use the bapi to get the list of flights.
• In the context add a context attribute of type string, call it "Number_of_Flights".
• Add another context of type string and call it "Header".
• In your MIMES directory, add a new folder and use your component controller's name and package to rename it
• In wdDoInit set the images to the context attributes you created, call your bapi and then call the method drawCaption() to draw the strings on the images.

public void wdDoInit()

  {

    //@@begin wdDoInit()

    try

     {            
  wdContext.currentContextElement().setNumber_of_Flights("Blue_background_button.JPG"); 

wdContext.currentContextElement().setHeader("Caption.JPG");

wdThis.wdGetMyFlightCompController().executeBapi_Flight_Getlist_Input(); 

   drawCaption(); 

      }

catch (Exception e)

  {

      // TODO: handle exception

  }

    //@@end

}

Writing the method drawCaption()

1. When coming to write on an image file we face two obstacles. The first one: how to get
     a reference to the image file that is not located on our file system. The second
     obstacle is how to modify, at runtime,  the initial image file, so that it incorporates the
     text we wish to add to it.

2. To overcome the first obstacle I use the following code, which enables me to get a
    reference to image file "Blue_background_button.JPG" (located in my MIMES folder):

    public void drawCaption()

{

//@@begin drawCaption()

try

{

    WDDeployableObjectPart part =   
  wdThis.wdGetMyFlightCompController().wdGetAPI().getDeployableObjectPart();              
    String path = WDURLGenerator.getResourcePath(part, "Blue_background_button.JPG");

    FileInputStream file = new FileInputStream(new File(path));

// 3. To overcome the second obstacle of modifying the image itself, I use the following
// Java ImageIO API:

    BufferedImage bufferedImage = ImageIO.read(file);

    Graphics graphics = bufferedImage.getGraphics();

    int width = bufferedImage.getWidth();

    int height = bufferedImage.getHeight();

// 4. Now I take care of the secondary details such as setting font type, font color, image
//    size, text position etc. :

     g.setColor(Color.BLACK);

     g.setFont(new Font("ARIAL", Font.TRUETYPE_FONT, font_size));

     FontMetrics mterics = g.getFontMetrics(); 

     String str_size = wdContext.nodeFlight_List().size() + " Flights"; 

     Rectangle2D bounds = mterics.getStringBounds(str_size, null); 

     int m_width = (int) bounds.getWidth(); 

     int m_height = (int) bounds.getHeight(); 

     int left = (width - m_width) / 2; 

     int top = ((height - m_height) / 2) + m_height; 

     g.drawString(str_size, left, top); 

// 5. To write the on the image we shall use the following code

      ByteArrayOutputStream baos = new ByteArrayOutputStream(); 

      ImageIO.write(bufferedImage, "jpg", baos); 

      byte[] bytes = baos.toByteArray(); 

      IWDResource resource = WDResourceFactory.createCachedResource(bytes, "MyImage",
      WDWebResourceType.JPG_IMAGE); 

     String url = resource.getUrl(0); 

    wdContext.currentContextElement().setNumber_of_Flights(url);

}

catch (Exception exception)
{

// TODO: handle exception

}

 //@@end

}

 6. That's it .Enjoy.

   Yuval Peery