# Lab-5540: Save Time—Build Desktop Applications Quickly with the NetBeans Platform

Expected Duration: 100 minutes
Contacts: Jiri Rechtacek, Lukas Hasik

Introduction | Exercise 0 | Exercise 1 | Exercise 2 | Exercise 3 | Exercise 4 | Summary
4. Introduction Background Information Steps to Follow Summary ## 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 Module System API Windows System API 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 Step 1: Opening the Anagram Swing Application 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. Step 2: Creating a New NetBeans Platform 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
6. Step 3: Brand the application 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. Step 4: Creating a main module in a NetBeans Platform application 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. Step 5: Copy sources from Anagram Swing application into the NetBeans Platform application 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. Step 6: Attach existing Anagram frame into the NetBeans Platform application 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. Step 7: Customize face of the application 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