Charlie Hunt's Weblog Charlie Hunt's Weblog

Matisse Generated UI integrated with NetBeans as plugin

NetBeans Matisse, NetBeans plug-ins and NetBeans Rich Client Platform are gaining a lot of interest, (and use). Thought I would take the opportunity to tie these together. In this blog I show how to integrate a NetBeans Matisse generated user interface into NetBeans as a NetBeans plugin.

I welcome you to follow along and go through the steps with me to see how easy it is. I think you will agree NetBeans Matisse and NetBeans plugin creation ease of development is second to none. I think your reaction will be like mine ... you will want to try it out too.

For this blog, I am going to use a NetBeans project I started that has a Matisse created UI in it which you can download and use yourself. I started this NetBeans project so you too could go through the exercise of creating the same NetBeans plug-in in a matter minutes. Click here to download a zipped version of my NetBeans Spell Check Plugin project. Using this NetBeans project will save you a little time creating a UI. I could have told you to create the UI yourself. But, that's not the point of this blog. I want you to see how easy it is to create a plug-in for NetBeans that uses a NetBeans Matisse created UI. But, if you are interested, you could re-create the UI I am using here in your own NetBeans project. FWIW, it took me less than 10 minutes to create that UI with Matisse.

The UI I created in the Spell Check Plugin NetBeans project is the UI you see if you run the Mozilla mailer's or Thunderbird's spell checker. Here's a screen shot of the UI I created using Matisse.

Now, on to how to take a Mozilla-like UI I created with NetBeans Matisse and integrate it into a NetBeans plug-in.

On to the fun

Download the zipped Spell Check Plugin project. Extract the zip file to a location on your disk. The zipped file will extract into a directory structure called "SpellCheckPlugin".

Start NetBeans IDE 5.0 (Beta 2) or later. If you don't have a copy available, go download a version from http://www.netbeans.org

Open the "SpellCheckPlugin" NetBeans project.

After you open the "SpellCheckPlugin" NetBeans project, expand the "SpellCheckPlugin" project so that you can see the source file name and package names.

If you'd like to refactor the package name, go ahead. Just right click on the package name in the projects window in select Refactor | Rename. If you refactor the name of the source class, you will need to update a couple lines of code later. I think it will be obvious what you'll need to modify a little later.

Load the CheckSpellingUI.java source file in the NetBeans editor. You will see a Matisse UI I created that looks like the Mozilla spell checker. Here's a screen shot of what you will see:

If you press the button on the NetBeans Matisse GUI designer you can see a preview of the form. Go ahead and do so to see how the form looks on your system. Although it may not be obvious, all NetBeans Matisse generated UIs automatically adjust to the target platform's look and feel guidelines. For example, if you have just opened this project on Windows, you would never know that I created the UI on Linux.

Suppose what I want to do with this UI is add it to the NetBeans IDE so I can see it from an Edit | Spell Check menu item. I can do that by creating an "action" in NetBeans in a NetBeans module plugin project. Hence, to create an action in the "SpellCheckPlugin" project, right click on the "SpellCheckPlugin" project and select "New | Action". This launches the "New Action Wizard" in NetBeans.

On the first page of the Action wizard, accept the "Always Enabled" (use CallableSystemAction) default and press the "Next" button. On the next page of the new Action wizard, GUI Registration screen, specify:

Category: Edit
This is the category where you want the action to be displayed in the Keymap section of the NetBeans IDE Options Window.
Global Menu Item:
Menu: Edit
Position: <eparator>-HERE-<separator> ( Right after the Find Previous-HERE-<separator> )
This is where the action will be displayed as a menu item.

To add a separator before and/or after the menu item, check the appropriate box. For this example, I put a separator before and after the new menu item.

For this example, I won't use the Global Toolbar Button or Global Keyboard Shortcut. I would use these if I wanted to add this action to a toolbar and assign an icon to it. Feel free to add a Global Toolbar Button and Global Keyboard Shortcut if like. You can also click on Help for additional information.

Press the "Next" button to go to the "Name, Icon, and Location" page of the Action wizard. On this page, specify:

Class Name: CheckSpellingAction
The name given to the Action class which will be generated by NetBeans.
Display Name: Spell Check
The text shown on the Edit menu, i.e. Edit | Spell Check

For this example I will leave the Icon as none. But, if I wanted an icon to be displayed on the Edit | Spell Check menu item, I could add one here. If you are following along and would like to add an icon, go ahead and add one.

Accept the defaults for Project and Package.

Press the "Finish" button.

After pressing the "Finish" button, the NetBeans IDE will generate a CheckSpellingAction.java source file and place it in the NetBeans editor.

There's just 7 lines of code to write in CheckSpellingAction.java. Go the CheckSpellingAction.java source file and add the following lines of code to the performAction() method:

Frame aFrame = WindowManager.getDefault().getMainWindow();
JDialog aJDialog = new JDialog(aFrame);
aJDialog.add(new CheckSpellingUI());
aJDialog.setTitle("Check Spelling");
aJDialog.pack();
aJDialog.setLocationRelativeTo(null);
aJDialog.setVisible(true);

Inserting the above code will generate a couple errors in the NetBeans editor. Both of these can be fixed by using Fix Imports (Alt-Shift-F). But, before doing Fix Imports, we need to tell NetBeans where to find the WindowManager class. You may have notice the WindowManager in the 7 lines code and recognized it is not part of the Swing API. The WindowManager class is part of the NetBeans API. The JDialog is part of Swing which is included in the JDK.

To tell NetBeans where to find the WindowManager class, we need to add the library that contains that class to this project. To do that, right click on the "SpellCheckPlugin" project name in the Projects window and select "Properties".

Select the "Libraries" category from the "Categories" on the left hand side of the Project Properties window. Then, click on the "Add" button in "Module Dependencies". This will launch a dialog where you can enter the class name "WindowManager". As you begin to type "WindowManager" in the "Filter" text field, you will see NetBeans is filtering the module API names, (see screen shot below where I have typed 'WindowM').

Press the OK button when the "Window System API" is shown as the selected module.

Your "SpellCheckPlugin" project properties window should look like the following:

Press the OK button on the project properties page.

Click in the editor window and press Alt-Shift-F to Fix Imports. The NetBeans IDE will ask you specify the class name to use for Frame. Select the java.awt.Frame as that package/class name and press "OK".

The errors in the NetBeans editor will go away after performing Fix Imports.

You are now ready to run the project. Select Run | Project, or press F6. This will build the project, create a new NetBeans plug-in, launch a second copy of NetBeans IDE with the new NetBeans plug-in installed and loaded in it.

When the second copy of the NetBeans IDE is launched, select the "Edit | Check Spelling" menu item to display the Matisse generated form you previewed at the beginning of this blog.

Click on the 'X' in the upper right corner of the display Check Spelling UI to kill the window. Sorry, I didn't implement the close window action in the Matisse generated Check Spelling UI. That's an exercise for you

How's that for creating a NetBeans plug-in by writing just seven lines of code? It also gives you a good feel of how quickly and easily you can build practical, compelling and usable NetBeans plug-ins.

Enjoy!

Posted at 11:12PM Dec 26, 2005 by charliebrown in Java  |  Comments[2]