Implementing a Custom Insert Image Dialog for the HTML Edit Control

How to write a dialog for selecting an image and insert that image in an HTML Edit Control.

About this technique	Details
Category	Java Client Techniques> General techniques for controls
Description	You'll learn about: Hiding and showing controls Using the FileAttachment control to get an image file from disk Passing the image information back to the HTMLEditControl
	You can run this technique code from: Database: Examples3_Java Form: frmImagePicker NOTE   First make sure that database is running on your localhost SilverStream Server
Related reading	See the chapter on the Form Designer in the Tools Guide and the Image Dialog property in the Property and Event Reference

The frmImagePicker example displays an AgcHTMLEditControl, which has a custom image selection dialog called frmInsertImage. You specify the custom dialog in the Property Inspector for the HTML Edit Control. The Image property is under the Dialogs heading (Image Dialog property).

The interesting code for this example is in dlgInsertImage. It provides three ways to select an image:

• From the image repository in the SilverStream database. A table called Images lists the URL and description of images in the database. The table is the data source for the view vwInsertImages. When the user selects a row in the view, the image is displayed in the preview pane.

• Via the system's Choose File dialog. An AgcFileAttachment control displays the system dialog and reads the file from disk. The binary file is converted to an image and displayed in the preview pane.

• From an URL that the user types. The user can click a Preview button to display the file in the preview pane.

When the user clicks OK, the code builds a URL which it passes back to frmImagePicker. If the user selected a file, the image is also uploaded to the database.

Hiding and showing controls   

Each of the three radio buttons (Database, File, and URL) on dlgInsertImage executes code that shows some of the controls and hides the rest. This code for the actionPerformed event of jrbDatabase sets the selected row in the view and makes it visible. It hides the controls for selecting a file or URL.

  private void handle_jrbDatabase_actionPerformed(ActionEvent evt) 
    { 
     try 
      { 
        // Make the database/url frame and view visible  
        vwInsertImages.setVisible(true); 
        lblFilename.setVisible(false); 
        fldFileName.setVisible(false); 
        fldFileURL.setVisible(false);       
        jbtnBrowse.setVisible(false); 
        btnPreview.setVisible(false); 
        // Get a pointer to the currently-selected row in the view 
        AgiRowCursor rowCursor = 
           vwInsertImages.getSelectedRowCursor(); 
        if (rowCursor == null)  
           { 
            rowCursor = vwInsertImages.getRootRowCursor(); 
            rowCursor.gotoFirst(); 
           } 
        // Display the image from the currently-selected row 
        imgDisplay.setImage(m_sbaseURL + (String) 
          rowCursor.getProperty("URL")); 
       } 
      catch (AgoApiException e) 
       { 
      } 
    } 

When the selected row in the view changes, this code for the viewSelectionChange event displays the selected image in the Preview pane.

  private void handle_vwInsertImages_viewSelectionChange(AgoEvent 
    evt) 
    { 
      AgiRowCursor rowCursor = 
         vwInsertImages.getSelectedRowCursor(); 
      if (rowCursor != null) 
      { 
        String sImageSpec = m_sbaseURL + (String)  
         rowCursor.getProperty("URL"); 
       imgDisplay.setImage(sImageSpec); 
      } 
    } 

Notes on the code

• The URL column in the view has the name of the image in the image repository of the current database. getProperty("URL") gets the value.

• sImageSpec holds the base URL of the image. Code to set sTemp is omitted here.

• In the live example, setImage() is in a try/catch block because an exception can occur if the image isn't valid.

• When the actionPerformed event of the jrbDatabase button sets the selection, the viewSelectionChange code that displays the image gets triggered.

Using the FileAttachment control to get an image file from disk   

This code for the actionPerformed event of jtbnBrowse uses AgcFileAttachment to read the selected file from disk.

  private void handle_jbtnBrowse_actionPerformed(ActionEvent evt) 
  { 
     File fileSelected; 
     try 
     { 
        fileSelected = attachFile.chooseFile( 
           "Please select a file to upload", null, false); 
        if (fileSelected != null) 
        { 
           jfldFileName.setText(fileSelected.getPath()); 
           String sName = new String(jfldFileName.getText()); 
           jfldURL2.setText("labels/" + 
              sName.substring(sName.lastIndexOf("\\") + 1)); 
            
          // Code to read a file and view in a image control 
           InputStream is = attachFile.readFile(fileSelected); 
           DataInputStream dis = new DataInputStream(is);    
           gbyteContents = new byte[(int)fileSelected.length()]; 
           dis.readFully(gbyteContents); 
           dis.close(); 
           
           Image imgTemp = Toolkit.getDefaultToolkit(). 
              createImage(gbyteContents); 
           imgDisplay.setImage(imgTemp); 
           imgDisplay.setVisible(true); 
        } 
     } 
     catch (Exception e) 
     { 
        agDialog.displayError(e); 
     } 
  } 

Notes on the code

• The chooseFile() method displays the system's file selection dialog.

• The DataInputStream converts the InputStream to a byte array. createImage(), a static method from the Toolkit class, converts the byte array to an image.

Passing the image information back to the HTMLEditControl   

When the Insert Image dialog closes, it must return a string to the HTMLEditControl. The string is the URL of the selected image. For images that are in the same database as the form, the relative URL is:

  images/filename.ext 

To build an absolute URL that includes the current server and database, use code like this, where filename is the file the user selected:

  URL baseURL = agGeneral.getDatabaseURL(); 
  String sURL = baseURL.toString() + "images/" + filename; 

This code closes the dialog and returns the URL to the HTMLEditControl. It is at the end of actionPerformed event for the OK button.

  closeDialog(sURL);