Welcome!

Java IoT Authors: Liz McMillan, Zakia Bouachraoui, Yeshim Deniz, Elizabeth White, Pat Romanski

Related Topics: Java IoT

Java IoT: Article

ArrayListModel with Swing's JList and JComboBox

A convenient way to use a simple collection

This article presents a data model based on a Collection implementation that can be used with Swing components JList and JComboBox. It also discusses a method to use these same concepts in constructing the user interface of an application.

Overview
Java Collections are indispensable for building any application, whether GUI or non-GUI. And the ArrayList class is a heavyweight in the java.util package. In a GUI application, the user often must choose items from a list, which can be presented in a variety of forms (drop down combo, list box, etc.). For example, the Java Swing components JList and JComboBox each have list data models - ListModel and ComboBoxListModel, respectively. Both components will react to changes in these models in keeping with the Model-View-Controller paradigm. However, neither of these models are based on a Collection, and therefore lack many of the convenient methods that the Collection interface provides. In addition, lists shown in an application are often populated from external sources (like a database) that return a Collection. Unfortunately, none of the Collection classes in Java broadcast changes to their contents, which is necessary for a user interface component to react to a true MVC data model.

The solution presented in this article to this dichotomy is simple - a subclass of the ArrayList Collection class that implements the ListModel Swing interface, the ArrayListModel class. A subclass, ArrayListComboBoxModel, which extends ArrayListModel implementing the ComboBoxModel model (which is itself a subclass of ListModel), is also presented.

Details
The ArrayListModel class implementation is very straightforward. You can probably already imagine what the methods look like. All ArrayList methods that modify the underlying collection are augmented. The superclass ArrayList method is invoked, and then the ArrayListModel publishes the underlying collection changes to all ListDataListeners that have been added (as part of satisfying the ListModel interface contract). Listing 1 shows the implementation of the add(), remove() and set() ArrayListModel methods.

Each method calls a corresponding fire method, which notifies any ListDataListeners what exactly in the collection has changed (see Listing 2).

Other methods in ArrayListModel work very similarly. For example, the clear() method calls the superclass method, and then fires a ListDataEvent signaling that all items from the collection (model) were removed. The ListDataEvent that is sent to each ListDataListener completely describes the collection elements (actually the indices) that have been added, removed, or modified. Because ArrayListModel implements the ListModel interface, the collection can be directly assigned as the data model of a JList. The ArrayListComboBoxModel class extends ArrayListModel implementing the two additional methods in the ComboBoxModel interface: getSelectedItem() and setSelectedItem().

To see these two classes in action, download the provided code and run the ArrayListModelTest class (see Figure 1). This is a Swing application consisting of a JToolBar, a JComboBox, and a JList. There are two data models used. One is an ArrayListModel that holds all of the data items, and the other is an empty ArrayListComboBoxModel used by both the JComboBox and JList components as their data models.

Figure 1 shows the contents of the combo and list boxes after the red, blue, magenta, and orange toolbar toggle buttons, respectively, have been pressed. Pressing a toggle button on the toolbar adds an item to the data model, while un-pressing it removes the corresponding data item from the model. The data model items are each an instance of a ColorItem, an internally defined class that consists of a name and an icon property (see Listing 3).

Listing 4 shows the method in the test program that constructs the JToolBar. The method has two arguments - an Iterator of ColorItem objects and the list to manipulate on toggle button press/un-press. The list parameter is actually the ArrayListComboBoxModel, but this method simply knows it as a generic List. Note that the ActionListener that is added to each toggle button is very trivial: it simply adds or removes the data item from the list as appropriate. The visual components (JList and JComboBox) attached to the single ArrayListComboBoxModel are automatically updated. A ListCellRenderer is used to render the ColorItem icon in the JList.

You can probably think of other uses for a Collection that announces changes to itself, and not necessarily in a GUI scenario. In that case, you might object to the fact that ArrayListModel and ArrayListComboBoxModel are connected to Java Swing, both in the interfaces they implement and the ListDataEvent/ListDataListener classes they consume. One possible solution to this would be to extend ArrayList as I have done but define your own event model and listener interface that would be more generic and not Swing biased. You could then use this class in a GUI application as I've shown by writing the necessary adapters to implement the ListModel and ComboBoxModel interfaces.

ListModels in Your UI
Have you ever considered all of the list-like elements in a GUI application? Many of the user interface constructs in your application can be thought of as lists of user interface elements that potentially have to be manipulated (items are added, ordered, and removed). Examples are menus, toolbars (their buttons), tabbed panes, internal frames of an MDI application, and potentially other custom components. And quite often you need to associate an icon, a tool tip, and some other visual component with each element.

Listing 5 shows an interface, UIElement, which defines these properties. Run the UIElementTest application that is provided as part of the code for this article. The application looks similar to ArrayListModelTest and has many of the same concepts (see Figures 2 and 3). The data model consists of UIElement objects that are obtained from a UIElementFactory. (The factory returns instances of an inner class, our ColorItem object from before that now implements the UIElement interface.) The application knows nothing about the underlying visuals, just that they implement the UIElement interface. The JList knows it can show icons from the elements and a tool tip for each element. The JList is populated by selecting toggle buttons on the toolbar as above (see Figure 2).

The toolbar is constructed in a method that is nearly identical to the one shown in Listing 4, except the ColorItem parameterized type is replaced by UIElement. When an element in the list is selected, the associated visual component is obtained from the UIElement in the list and shown in the line-bordered JPanel on the right (see Figure 3).

Note the use of tool tips in both the list and panel, which are provided by the getDescription() method of the UIElement data items. The ListCellRenderer for the JList reacts to the state of the Use large icons check box, calling the appropriate UIElement get*Icon() method. A simple change to my UIElementFactory could be coded to return a completely different implementation, but the rest of the application code would not have to be touched.

As you can see, we've implemented a simple list selection method that populates another part of the application upon selection. I would bet that most Swing developers have done something very similar in one or more applications they've worked on. And we've implemented a fairly rich user interface, with icons and tool tips using a single data model, with minimal code.

In my next article, I will present more of this list-based/UIElement framework for constructing an application's user interface. We'll start with an AbstractUIElement that will serve as the base class for our user interface data model. I'll also introduce the UIElementListModel class and its view counterpart, the UIElementListView interface (with an AbstractListView base class implementation).

Conclusion
In this article I have described a convenient way to use a simple collection (List) as the data model for JList and JComboBox Swing components. These components react to changes in the underlying collection, remaining synchronized with the data in the model. I have also introduced the beginning of a small framework that can assist in constructing a Swing application.

More Stories By Phil Herold

Phil Herold is VP and CTO of PocketScience LLC in Research Triangle Park, NC. He has over 24 years of experience in software engineering, and has been working with Java client technologies since 1996.

Comments (4)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


IoT & Smart Cities Stories
When talking IoT we often focus on the devices, the sensors, the hardware itself. The new smart appliances, the new smart or self-driving cars (which are amalgamations of many ‘things'). When we are looking at the world of IoT, we should take a step back, look at the big picture. What value are these devices providing. IoT is not about the devices, its about the data consumed and generated. The devices are tools, mechanisms, conduits. This paper discusses the considerations when dealing with the...
Business professionals no longer wonder if they'll migrate to the cloud; it's now a matter of when. The cloud environment has proved to be a major force in transitioning to an agile business model that enables quick decisions and fast implementation that solidify customer relationships. And when the cloud is combined with the power of cognitive computing, it drives innovation and transformation that achieves astounding competitive advantage.
With 10 simultaneous tracks, keynotes, general sessions and targeted breakout classes, @CloudEXPO and DXWorldEXPO are two of the most important technology events of the year. Since its launch over eight years ago, @CloudEXPO and DXWorldEXPO have presented a rock star faculty as well as showcased hundreds of sponsors and exhibitors! In this blog post, we provide 7 tips on how, as part of our world-class faculty, you can deliver one of the most popular sessions at our events. But before reading...
If a machine can invent, does this mean the end of the patent system as we know it? The patent system, both in the US and Europe, allows companies to protect their inventions and helps foster innovation. However, Artificial Intelligence (AI) could be set to disrupt the patent system as we know it. This talk will examine how AI may change the patent landscape in the years to come. Furthermore, ways in which companies can best protect their AI related inventions will be examined from both a US and...
Poor data quality and analytics drive down business value. In fact, Gartner estimated that the average financial impact of poor data quality on organizations is $9.7 million per year. But bad data is much more than a cost center. By eroding trust in information, analytics and the business decisions based on these, it is a serious impediment to digital transformation.
Digital Transformation: Preparing Cloud & IoT Security for the Age of Artificial Intelligence. As automation and artificial intelligence (AI) power solution development and delivery, many businesses need to build backend cloud capabilities. Well-poised organizations, marketing smart devices with AI and BlockChain capabilities prepare to refine compliance and regulatory capabilities in 2018. Volumes of health, financial, technical and privacy data, along with tightening compliance requirements by...
DXWorldEXPO LLC, the producer of the world's most influential technology conferences and trade shows has announced the 22nd International CloudEXPO | DXWorldEXPO "Early Bird Registration" is now open. Register for Full Conference "Gold Pass" ▸ Here (Expo Hall ▸ Here)
@DevOpsSummit at Cloud Expo, taking place November 12-13 in New York City, NY, is co-located with 22nd international CloudEXPO | first international DXWorldEXPO and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time t...
CloudEXPO New York 2018, colocated with DXWorldEXPO New York 2018 will be held November 11-13, 2018, in New York City and will bring together Cloud Computing, FinTech and Blockchain, Digital Transformation, Big Data, Internet of Things, DevOps, AI, Machine Learning and WebRTC to one location.
The best way to leverage your Cloud Expo presence as a sponsor and exhibitor is to plan your news announcements around our events. The press covering Cloud Expo and @ThingsExpo will have access to these releases and will amplify your news announcements. More than two dozen Cloud companies either set deals at our shows or have announced their mergers and acquisitions at Cloud Expo. Product announcements during our show provide your company with the most reach through our targeted audiences.