Use JIcon to decorate your interface

 

If the Swing Icon interface is simple, its powerful functions are even more surprising. With it, you can create icons in a program or perform various operations on the icons, merge icons in different ways, or easily display icons in existing components. Let's develop a component that allows you to display a group of icons and loops in various statuses of the icon list. This component is particularly useful when you need to manage user interfaces with many elements (for the purpose of editing or providing information, these elements need to visually reflect the status. We can provide many examples, including: a log file entry list, we can use a color icon to reflect the importance of each entry; or a table, we can use a column to reflect the status of each row, including editable status, normal status, included or excluded status.

We don't have to spend time explaining how to use JIcon as a table, list, cell renderer, or editor. It can be said that it is not difficult to implement this function. If we want to implement many functions, the length of this Article may not allow us to talk too much. Therefore, we will focus on how to build a simple component that can be cyclically in the Icon element, how to use a mode that you can easily listen to view event changes or Process Unit Editor and Paster components.

During the development of this project, I implemented several Icon tools (utility class). You can download them. The CompondIcon class allows you to merge any two icons in the form of side-by-side, or one icon on the other. DecoratorIcon allows you to use one icon to overwrite another, as we did in the quick decoration example (see figure 1 ). FilterIcon allows you to use an image filter before creating an icon. Before proceeding, let's take a brief look at the functions of each class. The Icon interface (part of the Swing set) is very simple: public interface Icon
{
Public int getIconHeight ();
Public int getIconWidth ();
Public void paintIcon (
Component c, Graphics g,
Int x, int y );
}

You only need to call the component to know the width and height of the icon, and it can manage the layout well. We call the paintIcon () method when drawing the icon. In most cases, you need to use the graphic context to draw images on the specified x and y coordinates, and control the images in the getIconWidth () and getIconHeight () the width and height returned by the method. Sometimes it is very useful to access the components where the icons are located. For example, we can use the getBackground () method of Component to obtain the background color.

Through this interface, we can easily build icons from images. In fact, Swing provides ImageIcon for this purpose. We can also easily draw icons in an instant. I provide a CheckBoxIcon to illustrate this. It can draw a box that can be empty, contain a check mark, or contain an X mark. We will use these icons to show multiple statuses. You can see its actual application in the box at the bottom left of figure 1. If you click this icon, it will switch to every possible status. Each status uses a separate CheckBoxIcon instance. The JIcon component can manage the status.

Decoration icon
Let's take a quick look at the implementation of these three icons similar to the container. They allow you to combine, overwrite, or adjust icons and treat them as independent Icon instances. For example, you can use CompoundIcon to place multiple icons in a Swing component that normally processes only one icon (such as Jlabel or Jbutton.

The DecoratedIcon class allows you to overwrite another icon with one icon. This feature allows you to use a small icon to decorate a large icon in nine possible positions: TOP, BOTTOM, or CENTER in the vertical direction, and LEFT, RIGHT, or CENTER in the horizontal direction. The constructor requires two icon instances and vertical and horizontal alignment. We will check whether alignment is valid. If alignment is poor or the decoration icon is larger than the decorated icon, you will get an IllegalArgumentException exception. We use GetIconWidth () and getIconHeight () to return the width and height of the decorated icon (the larger one of the two icons. Then, use the paintIcon () method to draw the decorated icon first, and then draw the decorated icon at the specified position.

The FilterIcon class can use an ImageFilter for a specified Icon instance. This is implemented in the constructor. In addition, it caches the result image for use in plotting. I chose ImageFilter, which is part of the old AWT. because of it, we can also use BufferedImageFiler (bufferedimagefilter implements the ImageFilter Interface) recently provided by Java 2D ). The next step is to return the width and height of the created image, and draw a picture at the position x and y when calling the paintIcon () method.
The three classes I just talked about allow you to display merged, decorated, and filtered icons in the existing Swing components. We can nest the implementation forms of these icons to combine or adjust the icons according to your needs. Unfortunately, no Swing component can provide multiple state views, so let's take a look at how to implement such a component, it allows you to process multiple icons to display the status related to your application.

Let's take a look at the two important classes in the implemented JIcon. The IconListModel and the JIcon class itself IconListModel are interfaces that can store multiple icons for JIcon. It can manage a certain number of icon instances and the selected status in the form of the current index in the list. To implement an IconListModel interface, we must also send the event to any registered ChangeListener to reflect changes in the status or Icon list, so that the view (such as JIcon) can immediately reflect these changes. Note: IconListModel extends the Icon interface: public interface IconListModel
Extends Icon
{
Public int getIconCount ();
Public int getCurrentIndex ();
Public Icon getIcon (int index );
Public void setIcons (
Icon [] icon );
Public void addIcon (Icon );
Public void removeIcon (
Icon );
Public void setCurrentIcon (
Int index );
Public void addChangeListener (
ChangeListener listener );
Public void removeChangeListener (
ChangeListener listener );
}

Through this interface, we can easily see the steps required to implement it, that is, the role of IconList (see list 1 ). We use two ArrayList instances: one for managing the list of ChangeListener instances and the other for managing the list of Icon instances. We cache the width and height values. These values are returned when the getIconWidth () and getIconHeight () Methods of the Icon are called. The width and height are calculated using the calculateSize () method as the maximum value of the icon list. This method is called when the list content changes.

We also keep the current icon and index value to reflect the selected status. When the paintIcon () method is called on the Icon interface, the selected Icon is drawn. If necessary, we also provide a setIcons () method to set the content of the entire list. The second constructor of the two constructor uses this method to set the list during the preliminary test. The other constructor is empty and needs to fill in the list in a separate step. When you call the addIcon () or removeIcon () methods, the calculateSize () and fireChangeEvent () methods are also called. We use a practical method (capIndex () to ensure that the current index value never exceeds the size of the list. The FireChangeEvent (), addChangeListener (), and removeChangeListener () Methods manage the list of registered ChangeListener.

Highlights
By default, In the JIcon class, we use a separate pixel EmptyBorder to surround the icon, so that we can use a blue LineBorder to focus on the icon. You can call setFocusable () to activate this behavior. By default, we can handle mouse events, but do not accept focus display. With three constructors, we can create an empty JIcon, A JIcon with a separate Icon, or a JIcon with an initial Icon list. In each case, we use the initComponent () method to set optional aesthetic effects and listeners (listener ).

JIcon implements four listeners: ChangeListener, FocusListener, MouseListener, and KeyListener. You can re-draw the view by triggering the ChangeListener event. We use a method called resetSize (), because changes in the pattern will affect the preferred and smallest size returned by the component. The actual size is cached by IconList. When an icon is added or deleted, IconList calculates the actual size. Therefore, the preferred and minimum size is used.