Welcome!

Java IoT Authors: Elizabeth White, Yeshim Deniz, Pat Romanski, Liz McMillan, Chris Schwarz

Related Topics: Java IoT

Java IoT: Article

How To Build a Toolbar From a Menu

For better usability, versatility, and user friendliness

As users of software applications, we commonly deal with the Graphical User Interface, which, in most of cases, contains the following main elements:

  1. A menubar, which includes all the available commands and options (we'll call them functionalities)
  2. A toolbar, which is a container for a subset of the most common and useful functionalities (typically a subset of "shortcuts" for the above mentioned commands and options)
  3. A working space that is a kind of "container" panel, where the user can type, draw, or do any-thing related to the application
In this article I'll discuss the relationship between the menu and the toolbar from both sides: the application user and the application programmer.

In the role of developer of an application, I have to design a complete and efficient Graphical User Interface for the application function calls; a common choice is to provide the application with both a menubar and a toolbar.

First I'll start to design the menubar and then provide the GUI with a toolbar; however, I realize that part of the toolbar work was already done at the menubar design time. My question is: Can I save development time and work programming the GUI toolbar by using what it is already done for the menubar?

For example, suppose my text editor-like application supports clipboard operations. I have to insert the menu items "cut," "copy," and "paste" into the "Edit" menu, providing icon, accelerator key, and tooltips text for each of them. Then I have to associate what is commonly called "action," that is the code that implements the functionality (for "cut" it could be to delete the selected text and put it in the clipboard). Finally I have to manage the enabled or disabled status of each item (for example, disabling paste if clipboard is empty and enabling cut and copy if some text is selected). Of course, all these things are required for a complete and useful, user-friendly and good-looking menu.

Actually I would like to do something more, for instance, providing a toolbar for my application. First, I add three buttons with the same cut, copy, and paste icons (no text for them, according to the Look-and-Feel Design Guidelines), specifying the same tooltip text used for the menu items (note that I do exactly what I did before for the menubar). Then I link the buttons to the code that implements their functionalities (I repeat my actions again). At the end I write the code to disable and enable the buttons, following the same criteria used for the menu items. In conclusion, I do the same things twice! And everybody knows that doing something twice is not a matter of laziness; this may easily introduce unexpected errors and cause undesired effects (such as a menu item disabled and the corresponding button enabled), especially when the application grows up and new commands or options are added.

I concluded that my efforts could be better employed in designing and coding a good menubar, leaving the development of the corresponding toolbar to some automatic procedure.

This kind of utility can be very useful for applications that have many functionalities and require frequent maintenance. To my knowledge, even sophisticated GUI design editors (like form editors included in the most common IDEs such as Eclipse or NetBeans) don't offer enough support for this aspect and they don't provide anything that keeps linked menu items and buttons.

Solution
The idea for solving this problem comes from the Action class (which is included in the java.swing package); this class offers an interface that extends the ActionListener and can be used in cases where the same functionality could be accessed by several controls (just like menu items and buttons).

The Action interface allows you to define, in a single place:

  • The actionPerformed method defined by the ActionListener interface. This method is called when the user activates the control (for example, when he or she selects a menu item or presses a button). This method contains the code to implement the functionality.
  • The text describing each functionality; these strings can be used to set the text in a menu item or to display the flyover text for a button or a menu item (tooltip text).
  • The icon that depicts the functionality.
  • The enabled/disabled state of the functionality.
  • The accelerator key used to quickly access the functionality.
  • The mnemonic key used to "navigate" by keyboard through a set of Actions.
Certain containers, including menus and toolbars, know how to manage an Action object. In detail they can achieve information from the Action to:
  • Create the component appropriate for the container (a button for the tool bar, a menu item for the menu)
  • Get the suitable information to render the container (texts, icons, enabled/disabled state)
  • Notify the change of state
  • Activate the functionality
Implementation and Use
JToolBarMenu is an extension of the JToolBar from the javax.swing package (see sample use in Figures 1 and 2). It is initialized with a JMenuBar object, that is, the menubar the toolbar refers to.

There is no limitation on the way the menubar can be built: JToolBarMenu always shows a rational set of buttons derived from the menubar structure. Of course, if the menubar is built in a chaotic form, JToolBarMenu will be not so intuitive and tidy.

The set of buttons showed in the JToolBarMenu follows the same tree structure as the menubar. In fact, as root, there is a menubar, which has attached some menus (primary branches), and each of these branches contains next menu items (leaves) and/or some other submenu (other branches) and recursively going on.

It was developed as an algorithm to arrange, under all possible conditions and in the proper way, any input menubar. This algorithm consists of the following steps:

1.  It scans all menus present in the menubar. For each menu that is not empty, a separator is added to the toolbar.

2.  For each item present in the menu:

  • If the item is a separator, a separator is obviously added.
  • If the item is a submenu, the algorithm is recursively applied to the item again.
  • if the item is a JRadioButtonMenuItem (a menu item with exclusive selection), it's collected in a vector until there is no more contiguous JRadioButtonMenuItems. When the collection is ready, a set of JToggleButton, each one corresponding to the item in the vector, is added and preceded by a new separator.
  • If the item is a JCheckBox-MenuItem (menu item without an exclusive selection), a JToggleButton is added.
  • Otherwise the item is simply a JMenuItem, thus a JButton is added.
This mechanism ensures consistency with the menubar structure and an attractive display because the role of the separators, which are always put in a right and rational position, result in a user-friendly layout.

More Stories By Mauro Micalizzi

Mauro Micalizzi, a researcher, has been involved in software developing for 25 years, and the Java language for seven. He is currently working on GUI, signal processing, and printing framework. Mauro has a degree in computer science.

Comments (2) View Comments

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.


Most Recent Comments
Java Developer's Journal News Desk 11/10/05 12:45:57 PM EST

Java Developer's Journal Feature: Building a Toolbar From a Menu. Actually I would like to do something more, for instance, providing a toolbar for my application. First, I add three buttons with the same cut, copy, and paste icons (no text for them, according to the Look-and-Feel Design Guidelines), specifying the same tooltip text used for the menu items (note that I do exactly what I did before for the menubar). Then I link the buttons to the code that implements their functionalities (I repeat my actions again). At the end I write the code to disable and enable the buttons, following the same criteria used for the menu items.

JDJ News Desk 11/10/05 12:20:13 PM EST

Java Developer's Journal Feature: Building a Toolbar From a Menu. Actually I would like to do something more, for instance, providing a toolbar for my application. First, I add three buttons with the same cut, copy, and paste icons (no text for them, according to the Look-and-Feel Design Guidelines), specifying the same tooltip text used for the menu items (note that I do exactly what I did before for the menubar). Then I link the buttons to the code that implements their functionalities (I repeat my actions again). At the end I write the code to disable and enable the buttons, following the same criteria used for the menu items.

@ThingsExpo Stories
"DX encompasses the continuing technology revolution, and is addressing society's most important issues throughout the entire $78 trillion 21st-century global economy," said Roger Strukhoff, Conference Chair. "DX World Expo has organized these issues along 10 tracks with more than 150 of the world's top speakers coming to Istanbul to help change the world."
While the focus and objectives of IoT initiatives are many and diverse, they all share a few common attributes, and one of those is the network. Commonly, that network includes the Internet, over which there isn't any real control for performance and availability. Or is there? The current state of the art for Big Data analytics, as applied to network telemetry, offers new opportunities for improving and assuring operational integrity. In his session at @ThingsExpo, Jim Frey, Vice President of S...
"We provide IoT solutions. We provide the most compatible solutions for many applications. Our solutions are industry agnostic and also protocol agnostic," explained Richard Han, Head of Sales and Marketing and Engineering at Systena America, in this SYS-CON.tv interview at @ThingsExpo, held June 6-8, 2017, at the Javits Center in New York City, NY.
"We are focused on SAP running in the clouds, to make this super easy because we believe in the tremendous value of those powerful worlds - SAP and the cloud," explained Frank Stienhans, CTO of Ocean9, Inc., in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
DX World EXPO, LLC., a Lighthouse Point, Florida-based startup trade show producer and the creator of "DXWorldEXPO® - Digital Transformation Conference & Expo" has announced its executive management team. The team is headed by Levent Selamoglu, who has been named CEO. "Now is the time for a truly global DX event, to bring together the leading minds from the technology world in a conversation about Digital Transformation," he said in making the announcement.
"We've been engaging with a lot of customers including Panasonic, we've been involved with Cisco and now we're working with the U.S. government - the Department of Homeland Security," explained Peter Jung, Chief Product Officer at Pulzze Systems, in this SYS-CON.tv interview at @ThingsExpo, held June 6-8, 2017, at the Javits Center in New York City, NY.
The financial services market is one of the most data-driven industries in the world, yet it’s bogged down by legacy CPU technologies that simply can’t keep up with the task of querying and visualizing billions of records. In his session at 20th Cloud Expo, Karthik Lalithraj, a Principal Solutions Architect at Kinetica, discussed how the advent of advanced in-database analytics on the GPU makes it possible to run sophisticated data science workloads on the same database that is housing the rich...
SYS-CON Events announced today that Massive Networks will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Massive Networks mission is simple. To help your business operate seamlessly with fast, reliable, and secure internet and network solutions. Improve your customer's experience with outstanding connections to your cloud.
Everything run by electricity will eventually be connected to the Internet. Get ahead of the Internet of Things revolution and join Akvelon expert and IoT industry leader, Sergey Grebnov, in his session at @ThingsExpo, for an educational dive into the world of managing your home, workplace and all the devices they contain with the power of machine-based AI and intelligent Bot services for a completely streamlined experience.
Internet of @ThingsExpo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal and enterprise IT since the creation of the Worldwide Web more than 20 years ago. All major researchers estimate there will be tens of billions devic...
"The Striim platform is a full end-to-end streaming integration and analytics platform that is middleware that covers a lot of different use cases," explained Steve Wilkes, Founder and CTO at Striim, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
SYS-CON Events announced today that Calligo, an innovative cloud service provider offering mid-sized companies the highest levels of data privacy and security, has been named "Bronze Sponsor" of SYS-CON's 21st International Cloud Expo ®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Calligo offers unparalleled application performance guarantees, commercial flexibility and a personalised support service from its globally located cloud plat...
SYS-CON Events announced today that DXWorldExpo has been named “Global Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Digital Transformation is the key issue driving the global enterprise IT business. Digital Transformation is most prominent among Global 2000 enterprises and government institutions.
SYS-CON Events announced today that Datera, that offers a radically new data management architecture, has been named "Exhibitor" of SYS-CON's 21st International Cloud Expo ®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Datera is transforming the traditional datacenter model through modern cloud simplicity. The technology industry is at another major inflection point. The rise of mobile, the Internet of Things, data storage and Big...
"MobiDev is a Ukraine-based software development company. We do mobile development, and we're specialists in that. But we do full stack software development for entrepreneurs, for emerging companies, and for enterprise ventures," explained Alan Winters, U.S. Head of Business Development at MobiDev, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
SYS-CON Events announced today that DXWorldExpo has been named “Global Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Digital Transformation is the key issue driving the global enterprise IT business. Digital Transformation is most prominent among Global 2000 enterprises and government institutions.
In his opening keynote at 20th Cloud Expo, Michael Maximilien, Research Scientist, Architect, and Engineer at IBM, discussed the full potential of the cloud and social data requires artificial intelligence. By mixing Cloud Foundry and the rich set of Watson services, IBM's Bluemix is the best cloud operating system for enterprises today, providing rapid development and deployment of applications that can take advantage of the rich catalog of Watson services to help drive insights from the vast t...
SYS-CON Events announced today that EnterpriseTech has been named “Media Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. EnterpriseTech is a professional resource for news and intelligence covering the migration of high-end technologies into the enterprise and business-IT industry, with a special focus on high-tech solutions in new product development, workload management, increased effic...
SYS-CON Events announced today that Massive Networks, that helps your business operate seamlessly with fast, reliable, and secure internet and network solutions, has been named "Exhibitor" of SYS-CON's 21st International Cloud Expo ®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. As a premier telecommunications provider, Massive Networks is headquartered out of Louisville, Colorado. With years of experience under their belt, their team of...
SYS-CON Events announced today that Cloud Academy named "Bronze Sponsor" of 21st International Cloud Expo which will take place October 31 - November 2, 2017 at the Santa Clara Convention Center in Santa Clara, CA. Cloud Academy is the industry’s most innovative, vendor-neutral cloud technology training platform. Cloud Academy provides continuous learning solutions for individuals and enterprise teams for Amazon Web Services, Microsoft Azure, Google Cloud Platform, and the most popular cloud com...