Creating a GUI to manipulate image references

As with table and list support, to create and manipulate image references a graphical user interface (GUI) is needed. Class ImageDialog is created for this purpose.

Class ImageDialog

Class ImageDialog is used to insert image references and to set all relevant attributes for these references. As well it provides a repository from which images can be selected, added and removed. An ImageDialog is divided into three panels from left to right. The left panel has a list which shows all files present in the image directory of the given document as well as buttons to add and remove images from the list. The middle panel is used as a preview region for any image selected from the image list. In the right panel all attributes of a selected image are shown and can be set.

Image list maintenance

When an ImageDialog is created, it is passed a directory which is to be used as the image repository. The image list is filled with the names of all files found in this directory by calls to method updateFileList (the method has only one line setting the JList content to the the current result of a directory listing of the directory referenced by imgDir).

Method handleAddImage

When button 'Add' is pressed, a file chooser is opened to allow selection of an image file to be placed into the repository. If a file is picked in the file chooser it is copied to the image repository with the help of method Util.copyFile and method updateFileList is called to reflect the new file in the file list.

Method handleDeleteImage

When button 'Delete' is pressed, an option dialog asks the user whether or not to delete the image file currently selected in the image list (if any). If the user chooses to really delete the selected file, it is deleted and the image list and preview are updated accordingly.

Image attribute manipulation

Once an image is selected from the list of images, all attributes of the selected image are displayed in the panel on the right of an ImageDialog. From there all attributes of the image can be set accordingly. Changes to image attributes such as size or scale are reflected in the preview immediately. In addition, attributes such as border width or distance to the surrounding text can be set and will be effective on the image in the document once applied (see below).

In class ImageDialog a set of listeners is used to synchronize all parts of the dialog to user changes of particular attributes. Section 'event handling' in the source code of class ImageDialog has the mentioned listeners which are applied to respective components in the constructor of the dialog. Each listener calls helper methods such as applyPreviewHeight, applyPreviewWidth or applyPreviewScale in case an event occurs which a listener is bound to.

Returning image reference and image attributes

Once an image is selected and all attributes settings meet the desired display in the document, method getImageHTML returns the HTML code representing an image reference with all attributes according to the selection in the ImageDialog. Method getImageHTML uses class SHTMLWriter to create an image tag and attributes from the settings on the ImageDialog.

The components on the ImageDialog used for setting image attributes are implementing the AttributeComponent interface so each of them returns its value in an AttributeSet object. All such settings are brought together in an instance of SimpleAttributeSet and passed to method startTag of class SHTMLWriter along with the actual image reference returned by method getImageSrc .

Setting an initial image reference and attributes

Besides creating new image references class ImageDialog can be used to display and manipulate an existing image reference too. The same functionality is used as described above after the ImageDialog has been set to an existing image reference with method setImageAttributes.

Method setImageAttributes iterates through the Vector of AttributeComponents and applies attributes from a given AttributeSet to the components. As well it sets the ImagePreview to the image reference found in the AttributeSet.

Image preview

When an image is selected from the list of images or when attributes af a selected image are changed, the resulting image as it would appear in the document is shown in the preview section of class ImageDialog. The preview is produced by class ImagePreview which is an extension to class JComponent.

Class ImagePreview takes care of displaying any image and has methods to apply a given scale percentage to that image. It implements the Scrollable interface so it can be embedded in a JScrollPane for cases where an image is to be viewed in a region being smaller than respective image.

You can refer to the source code of ImagePreview for more details about how the preview of images is achieved.