Abeans Visual Composition with NetBeans

Tutorial

Project:Demo 
Status:Draft
Availability::Demo//TUT-Abeans_Visual_Composition_with_NetBeans.xml
Creation:2003-10-29 (Jernej Kamenik)
Last Modification:2003-11-04 (Jernej Kamenik)
Copyright © 2003 by Cosylab d.o.o. All Rights Reserved.

Scope

This is a tutorial that shows how to visually assemble BACI model based Abeans applications in the NetBeans IDE with only a few mouse clicks. The application (Power Supply Panel) allows a user to control one power supply device at a time by means of Abeans components. It is intended for users who are not familiar with the Java programming language and for the ones who want to build applications visually.

Audience

The audience of this document are all users of Abeans application framework.

Table of Contents

1. Introduction

2. The Abeans BACI Application template

3. Creating the GUI

3.1. Application layout

3.2. Adding GUI Components

4. The Power Supply Bean

5. Adding application logic

5.1. Connecting Power Supply Bean to GUI Components

5.2. Handling events

6. Creating the application for a specific device

7. Running the application from within the IDE

8. Conclusion


References

Document History

1. Introduction

This document provides a step-by-step procedure on how to create a simple ACS based Abeans application in the NetBeans IDE just by dragging a few componnents on the canvas and connecting them via menu selections. The showcase application Power Supply Panel (PSPanel) allows a user to control one power supply device at a time by means of Abeans components. See the Abeans NetBeans installation document on how to install Abeans and how to compile and run ACS based Abeans applications with NetBeans IDE. The application discussed in this document is com.cosylab.demo.PSPanel, its source code can be found in the acsabeans/src module.

2. The Abeans BACI Application template

The procedure for creating visual Abeans applications involves using the prepared Abeans Application templates installed with the Abeans module in NetBeans IDE. This section outlines the steps needed to start visually composing an ACS based Abeans visual application.

  1. In the system bar on top of the IDE click on the first (New...) icon.
  2. A wizard pops up. Select the template:   Java GUI forms  ,   Abeans Forms  ,   VisualACSApplication  . You should see something like this:

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/newWizard.png

    Figure 1: The wizard for creating a new visual application.

  3. Press the   Next>   button.
  4. Select the name of the application - PSPanel and press the   Finish   button.

With this steps the application layout is created and NetBeans switches to GUI Editing mode [Form Editor].

3. Creating the GUI

In this section, we will make the GUI of our application.

3.1. Application layout

In this section we set up the layout in which GUI component will be placed inside the PSPanel.

  1. First we want to choose a suitable layout for our application. Expand the component tree in the top right corner of the visual composition editor (VCE). Expand the   JPanel   node and right-click on the   FlowLayout   subnode. Select   Set Layout   and choose the   GridLayout   menu item.

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/layout.png

    Figure 2: Selecting the layout manager for the PSPanel.

  2. Next we modify the layout to display the contents in rows instead of columns (the default setting). This is done by selecting the   GridLayout   node in the [Component Tree]. In the property table below click on the   Columns   item and type in 1 instead of 0. Similary in the   Rows   column change the value from 1 to 0.

3.2. Adding GUI Components

Now we can start adding the Abeans components to the panel by choosing them from the [Component Pallete].

  1. From the [Component Pallete] select the tab   Abeans Components   and the SingleAbeanSelector icon from it:

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/selectora.png

    Figure 3: Click on the SingleAbeanSelector icon.

    Then, click somewhere on the empty form and the selector will appear on it. From the [Component Pallete] select the tab   Abeans Displayers (Single)   and add Gauger, Slider and Ledder to the form. The application should now look like this:

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/pspanel1a.png

    Figure 4: PSPanel layout.

  2. We also need some other swing components to control the application. From the   Swing   tab select the JPanel and add it to the form. From the [Component Tree] expand the   jPanel1   node and set the   GridBagLayout   layout manager. Then add three buttons to the added JPanel by selecting JButton from the   Swing   tab and clicking somewhere within the jPanel's space, repeating the procedure three times. You may need to resize the form so that all the components are not squeezed together two much. This is done by mouse dragging the lower-right edge of the form. In the [Component Tree] click on the first button   jButton1   with the right mouse button. In the popup dialog select   Rename...  .

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/rename.png

    Figure 5: Renaming components.

    Another dialog shows up. In the text field enter onButton and press   OK  . Again select the first button now named   onButton   and in the properties tab set the   Text   to ON. Repeat the whole procedure with the second button (jButton2), renaming it to offButton and setting its text to OFF and the third button (jButton3) to resetButton with text RESET. The application should now finally look like this:

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/pspanel2.png

    Figure 6: PSPanel layout.

4. The Power Supply Bean

In this section we lookup the invisible device bean representing a power supply and add it to the component palette and then to our application.

  1. Click with the right mouse button just above the [Component Palette] tabs. A menu dialog shows up. Select   Create New Category  .

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/category.png

    Figure 7: Adding new component palette category.

    Another dialog pops up. Enter ACS Components in the text field and press   OK   to close the dialog. A new empty tab named   ACS Components   should appear in the [Component Palette].
  2. In the Explorer [Filesystems] tree lookup the   acsexmplPowerSupplyAbeans.jar   and expand it. Expand   alma  /  PS  /  abeans   nodes and right-click on the   PowerSupply   node. Select   Tools   menu item and click on   Add to Component Palette   in the submenu. A wizard pops up. Select the   ACS Components   item and press   OK  .

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/powersupply.png

    Figure 8: Adding power supply bean to the component palette.

  3. A new icon should appear in the   ACS Components   tab. Select it, then click somewhere on the form.

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/ps.png

    Figure 9: Adding Power Supply bean to the PSPanel.

    The bean should appear in the [Component Tree] under   Other Components  .

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/componenttree.png

    Figure 10: The complete PSPanel component tree.

5. Adding application logic

In this section we add logic to the application by connecting beans nad handling events.

5.1. Connecting Power Supply Bean to GUI Components

First we want to connect the power supply bean to the abeans GUI components and dispalyers.

  1. First select the singleAbeanSelector1 from the [Component Tree] (or by clicking on it in the form). From the property sheet click the   abean   property and click on the   ...   button that appears next to the default   null   value.

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/abean1.png

    Figure 11: Connecting the power supply bean the single abean selector.

    A dialog pops up. Select the   Bean:   option and in the combo box select   powerSupply1  .

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/abeanselect1.png

    Figure 12: Setting the power supply bean to single abean selector.

  2. Next select   gauger1   from the [Component Tree] and in the property sheet click on   doubleProperty  . Again click on the   ...   button on the right and again a popup dialog appears. This time select the   Property:   option and click on the   ...   button that becomes enabled on the right side of the dialog.

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/gaugerselect1.png

    Figure 13: Setting the double property of the gauger.

    Another dialog appears. In the combo box select   powerSupply1  .

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/gaugerselect2.png

    Figure 14: Setting the double property of the gauger.

    A list of two properties appears in the lower area of the dialog. Select the   readback   property and close both dialogs by pressing   OK   on both.

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/gaugerselect3.png

    Figure 15: Setting the power supply readback to the gauger.

  3. Repeat the upper procedure for   doubleProperty   of   slider1   only select the   current   property from   powerSupply1   bean. Also apply same procedure for the   patternProperty   of   ledder1   and use the   status   property from   powerSupply1   bean.

5.2. Handling events

In this section we will add control of the power supply bean through the buttons in the PSPanel. And inversely, we will add visual indications to internal state changes of the power supply by adding handlers to its link events.

  1. First we want to be able to turn the power supply on by pressing   onButton  . Select   onButton   in the [Component Tree]. From the tabs below the [Component Tree] select the   Events   tab. Select the   actionPerformed   item, click inside the text field and press   Enter  .

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/action.png

    Figure 16: Adding functionality to the onButton.

    The view changes to the actual java code of the PSPanel and at this point we cannot avoid typing in a few lines of code. In the newly created onButtonActionPerformed method type in the following: 
    		try {
			powerSupply1.on();
		} catch (Exception ex) {
			ex.printStackTrace();
		}
    Listing 1: The code to be executed when onButton (ON) is pressed.
    Switch back to the [Form Editor] view by selecting the   Window   menu in the main IDE menu bar and clicking on   Form Editor  .
  2. Repeat the upper procedure for   offButton   and execute powerSupply1.off() inside the offButtonActionPerformed method. The same for   resetButton   with handler resetButtonActionPerformed and powerSupply1.reset() method invocation.
  3. Finally we want to enable or disable the three buttons when the power supply bean successfully connects to the underlying modeling layer. Select   powerSupply1   from the [Component Tree] and the   Events   tab. Click on the   linkEstablished   item and inside the text field.

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/link.png

    Figure 17: Adding functionality when the power supply link is established.

    Press   Enter   to bring up the java code of the PSPanel and in the powersupply1LinkEstablished method enter: 
    		onButton.setEnabled(true);
		offButton.setEnabled(true);
		resetButton.setEnabled(true);
    Listing 2: The code to be executed when powerSupply1 becomes linked to the modeling layer.
    Again bring back the [Form Editor] view through the   Window   menu in the main menu bar.
  4. Repeat the upper procedure for the   linkLost   event and disable all the PSPanel buttons in the handler method.

6. Creating the application for a specific device

If you want a PSPanel that controls only one device, you do not need a SingleAbeanSelectorBean. To create such application just follow the steps outlined above, but remember to exclude the Selector Bean. Create all the connections and logic explained with one exception. Instead of setting the powerSupply1 as the abean of the selector (which is now missing) set the   remoteName   of the   powerSupply1   to the name of the device you wish to control.

  1. Select   powerSupply1   from the [Component Tree].
  2. In the property sheet click on the   remoteName   property and in the textField to the right enter the name of the device you wish to control.

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/pscustom.png

    Figure 18: Setting remote name of a specific device you wish to control with the PSPanel.

  3. Press   Enter   to confirm your entry.

7. Running the application from within the IDE

The easiest way to run the PSPanel application is from within the NetBeans IDE.

  1. Select the   Build   menu from the main menu bar and select the   Set Arguments...   item.
  2. A dialog shows up. In the text field enter the JVM arguments you normally use for running ACS based Abeans applications and press   OK  .

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/arguments.png

    Figure 19: Enter JVM arguments for running the PSPanel.

  3. Press F6 or click the Run icon to run the application.

    Image: TUT-Abeans_Visual_Composition_with_NetBeans/runsunone.png

    Figure 20: Click the Run icon to run the application.

notice By default the first two steps are not necessary since default Abeans configuration has been already put in your classpath by the installation procedure.

8. Conclusion

With same grips we can visually build a lot of different but functional applications in very short time using the integration of Abeans libraries and the NetBeans IDE.

Document History

RevisionDateAuthorSectionModification
1.02003-10-29Jernej KamenikallCreated.
1.012003-11-03Matej SekoranjaallComments added.
1.022003-11-04Jernej KamenikallCorrections from comments.

References

IDAuthorReferenceRevisionDatePublisher
1Matej SekoranjaAbeans NetBeans Installation1.02003Cosylab
Image: ../../images/Cosylab.png