Exercise 1: Port the Anagram Swing Application to a NetBeans Platform Application
(20 minutes)
This exercise shows how to port an existing application to the NetBeans Platform.
The NetBeans Platform consists of many different modules that, together, form a complex application.
Therefore, you should always choose only those pieces that are necessary
for your application. By the end of this exercise,
attendees will understand the different parts
of the NetBeans Platform. They will integrate their own branding to the NetBeans
Platform, making their application unique.
Background Information
Introducing to the NetBeans Platform
NetBeans is an open source project that is mostly known because of the NetBeans IDE
that is built on top of it.
However, NetBeans is more then just an IDE. It is also a rich-client platform that
provides components for easy and fast development of new desktop applications. There is
also a vibrant community around the NetBeans project. The community uses
the NetBeans Platform in many projects that leverage the features
and spread the NetBeans framework into areas where you wouldn't expect it to be at all.
You can look at several
screenshots of applications based on the NetBeans Platform.
List of APIs Used in this Exercise
In this exercise, you will port a Swing application to an application based on
the NetBeans Platform. You will see that such a transition can
be relatively simple and fast.
It should be
quite an interesting experience as well, while in the next exercises you'll see even
more of the NetBeans Platform's features.
Steps to Follow
- If NetBeans IDE is not already running, start it.
- Either click NetBeans IDE icon on your desktop
- or choose NetBeans IDE from application menu
- or netbeans from command line.
-
When NetBeans has started, select File->Open Project (Ctrl-Shift-O)
and browse to the AnagramGame directory that is located in
<lab_root>/exercises/exercise1.
- Click the Open Project button.
-
After the project has opened, invoke Run->Run Project (F6).
You will see the Anagram Game running. This the Swing Application which we
would like to port to an application built on top of the NetBeans
Platform in the following exercises.
- You can close the Anagram Game application.
-
Invoke File->New Project (Crtl-Shift-N)
and choose the NetBeans Modules category, then select NetBeans Platform Application.
- Click Next button and type JavaOne 2009 Anagram Application into Project Name textfield.
-
Click Finish button to create the project.
-
When the project opens in IDE, select the JavaOne 2009 Anagram Application
node in the Projects tab. Invoke Properties from a pop-up menu on this node.
These Properties allows you to customize the new application.
If you select the Libraries node then you can specify what NetBeans modules will be available
in your NetBeans Platform application. These modules are divided in clusters e.g. platform10.
For example you can uncheck following modules under platform10 :
Command Line Parsing API
Common Annotations
JavaHelp Integration
JUnit 4
KeyMap Options
Output Window
Print
-
In the Project Properties - JavaOne 2009 Anagram Application dialog, select the Build node.
Now you can change the application's title and icon. Click Browse button and
choose anagram48.png icon <lab_root>/exercises/exercise1 directory.
This icon you will see in the application status bar when the application is running.
-
Now we would like to show a splash screen while the new Anagram application is launching. To change the default
NetBeans Platform splash screen to your splash window select Splash Screen node and browse to <lab_root>/exercises/exercise1/anagram.png.
Let's also refine color of text and progress bar on the splash screen.
- Click OK button to save changes.
-
Now we have branded the wrapper of the application. We can run empty NetBeans platform
but it has no content yet. We need to add a effective module that provides a functionality to the application.
Switch again into Projects tab and select a node Modules under
JavaOne 2009 Anagram Application. Invoke a pop-up menu by right click on this node.
Choose Add Existing and select
the Anagram project. However NetBeans IDE forbids to do this. Only NetBeans Application modules
are allowed to be a part of a NetBeans Platform Application.
-
We will have to create new module and add it to our application.
Then we will copy the sources from Anagram Swing
application into the new module because we want to modify the behavior and look of the Swing
application rapidly.
Invoke the same pop-up menu and choose Add New...
item. Type a name of Platform Module, e.g. Anagram JavaOne 2009.
-
On the next panel you have to provide a Code Name Base. The Code Name Base must be a unique
name which identifies the module among other modules or libraries in the NetBeans Platform
for NetBeans Module System which loads NetBeans modules.
Type Code Name Base org.javaone.anagram.
-
Click Finish button.
-
Switch the view on packages in Projects view to Tree view.
Right click to an empty space in the Project view and select View Java Packages as > Tree.
-
Now Copy the lib and ui packages from original Anagram
into org.javaone.anagram package in new Anagram Javaone 2009 project.
The NetBeans IDE will automatically refactor packages to make them compilable.
-
Let's try to launch the application now. The application should run but still without any
new content. We need to attach the new Anagram module to open new
Anagram Game when the application is started.
-
If you want you can switch back to View Java Package As List view.
Actually, it depends what view you like more. There is a plenty ways how you can
customize the NetBEans IDE to your needs or habbits.
-
We want to start a new game on each start of the application, the window with this game
should cover the whole size of the application, in the same
way as was done in the original Swing application.
To make that happen, we will use a template Window Component from
predefined templates suitable for building application on the NetBeans Platform.
The Window Component creates a new singleton Window integrated into
NetBeans Window System.
Invoke New > Window Component on org.javaone.anagram package
-
On the "Basic Settings" panel of New Window wizard dialog we can customize
behaviour of this UI component.
- First, we have to specify where the window will be placed in the NetBeans Platform application. The space of
NetBeans Window System is divided into modes.
The central area of application is an Editor area, in a common case.
- Then we can make the window to be opened when the application starts.
- User cannot close this window.(this option is available from NB 6.7)
- Leave default values for rest of options.
-
On the last panel just tell some prefix of classes which will be created
to handle behavior of this Window Component, e.g. AnagramGame.
-
Pres Finish button.
-
We have the Window Component (i.e. AnagramGameTopComponent) and UI component
of Anagram Game (i.e. Anagram.class frame). Now we need to place Anagram's UI into the new Window Component.
If it is not opened already then open the AnagramGameTopComponent source in UI designer, simply by double clicking on
AnagramGameTopComponent node in Projects tab.
In the UI designer place a new Panel by dragging the Panel from the Palette to the free space in AnagramGameTopComponent.
Make this panel to cover whole free area and set BorderLayer as layout of this component.
Change the name of the JPanel component to anagramPanel in Properties window Code > Variable Name.
-
Now, switch into editing source of AnagramGameTopComponent (use the Source button on
the top-left corner of editor area). There add new line to the constructor
public AnagramGameTopComponent() {
initComponents();
anagramPanel.add(new Anagrams().getContentPane(), BorderLayout.CENTER);//TODO:[add] place panel to the TC
setName(NbBundle.getMessage(AnagramGameTopComponent.class, "CTL_AnagramGameTopComponent"));
setToolTipText(NbBundle.getMessage(AnagramGameTopComponent.class, "HINT_AnagramGameTopComponent"));
...
Don't forget to fix imports if you copy&paste the line to the source code.
Applying these changes allows us to launch the
Anagram Game Application. We can play Anagram Game again
in the application built on the NetBeans Platform.
You can see that it was very easy to add your JFrame to the NetBeans Platform.
The application still looks almost the same as it did in the original one.
In next steps and exercises will we'll show you how to modify the application behaviour to use
the other features of NetBeans Platform.
-
How to remove the toolbar? It's obvious that the toolbar isn't necessary
for the Anagram application. NetBeans Platform allows to declare many of UI
components in particular layer.xml files. Each module can have such
layer.xml in which it declates own UI component. But at least but not last,
the module can also hide UI components of other modules.
In our case, we can delete the declaration of
Toolbar in the layer file.
Expand the Important Files in of Anagram JavaOne 2009 module, choose
node this layer in context under XML Layer node. Expland this node and find Toolbars sub-node. Then
delete it. It removes the toolbars from Anagram application.
In the same way you can modify the toolbars, icons, actions in toolbar.
But in our case we don't need the toolbar at all.
-
How to clear up menus? Find the node Menu Bar under
the this layer in context node. Delete all menu items with the exception of
Help > About and File > Exit. You can also move the Help menu to highest level out from Help submenu
-
Run the application.
Summary
In this exercise, you learned how to create a NetBeans Platform Application
from an existing Swing application.
You also learned how to brand your application, together with some basics
on how to extend the application with NetBeans IDE.
In the following exercises, we will learn about the basics
of building applications using the NetBeans Platform, visualizing
application data in a tree-like component, and how to add new
actions to our application.
At a later point, we will look at the modularization of applications built on
top of the NetBeans Platform and how to publish our module to
public or private locations.
Back to top
Next exercise
