3

SimpleChart Bean Tutorial

Introduction to JavaBeans  SimpleChart Bean Tutorial

---

3.1 Introduction to JavaBeans

JClass Chart components are JavaBean-compliant. The JavaBeans specification makes it very easy for a Java Integrated Development Environment (IDE) to "discover" the set of properties belonging to an object. The developer can then manipulate the properties of the object easily through the graphical interface of the IDE when constructing a program.

The three main characteristics of a Bean are:

• the set of properties it exposes
• the set of methods it allows other components to call; and
• the set of events it fires

Properties control the appearance and behavior of the Bean. Bean methods can also be called from other components. Beans fire events to notify other components that an action has happened.

3.1.1 Properties

"Properties" are the named method attributes of a class that can affect its appearance or behavior. Properties that are readable have a "get" (or "is" for booleans) method, which enables the developer to read a property's value, and those properties that are writable have a "set" method, which enables a property's value to be changed.

For example, the JCAxis object in JClass Chart has a property called AnnotationMethod. This property is used to control how an axis is labelled. To set the property value, the setAnnotationMethod() method is used. To get the property value, the getAnnotationMethod() method is used.

For complete details on how JClass Chart's object properties are organized, see JClass Chart Object Containment and Setting and Getting Object Properties, in Chapter 1.

Setting Bean Properties at Design-Time

One of the features of any JavaBean component is that it can be manipulated interactively in a visual design tool (such as a commercial Java IDE) to set the initial property values when the application starts. Consult the IDE documentation for details on how to load third-party Bean components into the IDE.

You can also refer to the JClass and Your IDE chapter in the JClass DesktopViews Installation Guide.

Most IDEs list a component's properties in a property sheet or dialog. Simply find the property you want to set in this list and edit its value. Again, consult the IDE's documentation for complete details.

---

3.2 SimpleChart Bean Tutorial

This tutorial guides you through the development of an application that uses SimpleChart to chart the financial information of "Michelle's Microchips". It is a good starting point for learning basic JClass Chart features. To explore more advanced features of JClass Chart, however, we recommend that you use the MultiChart Bean.

The tutorial does not cover all of the properties available in SimpleChart. For a complete reference, see Bean Reference, in Chapter 4. The screen captures have all been taken from Sun's BeanBox and will differ slightly from your IDE's appearance.

3.2.1 Steps in this Tutorial

This tutorial has eight steps:

1. Create a new application in your IDE and add a container.
2. Put a SimpleChart object into the container.
3. Load the data for Michelle's Microchips.
4. Add a header, footer, and legend.
5. Add point labels to the X-axis.
6. Change the background color to white.
7. Set the chart type to bar, and add 3D effects.
8. Compile and run the application.

Step 1: Create the `Michelle' Application

Create a new application in your IDE and add a container to hold a SimpleChart object. In most IDEs this will be a panel. See your IDE's documentation for instructions on creating a basic application and adding a container.

Step 2: Put a Chart Object into the Container

With the container displayed in design mode, click the SimpleChart icon and place a SimpleChart object into the container's area. See your IDE's documentation for details on placing objects into a container. The SimpleChart icon looks like this:

In your container object, you should now see a basic chart area with an X- and
Y-axis, like this:

If you open your property list (the window that displays the Bean's properties) with the SimpleChart area selected, you should see the property editors that are available in SimpleChart.

Step 3: Load Data from a File

This tutorial uses data from a file named chart2.dat contained in the JCLASS_HOME/examples/chart/intro/chart2.dat directory. To load chart2.dat into SimpleChart, bring up the custom data source editor by clicking on the data property:

The data source editor provides two methods for loading data: editing data in the text area, or loading data from a file. For Michelle's Microchips, click the Load data from a file radio button. Then, enter the full path name of chart2.dat in the File Location field. After you click Done, you should see the data displayed in the chart area as follows:

What's in chart2.dat?

chart2.dat has financial information for Michelle's Microchips, formatted for the file data source method of data loading. SimpleChart accepts only .dat files, or modifications to the default data in the editor. For more information on creating a file data source, see Loading Data from a File, in Chapter 8.

The content of chart2.dat is:

ARRAY '' 2 4 'Q1' 'Q2' 'Q3' 'Q4' '' 1.0 2.0 3.0 4.0 'Expenses' 150.0 175.0 160.0 170.0 'Revenue' 125.0 100.0 225.0 300.0

JClass Chart also has other Beans which allow you to chart data from a database easily. See Bean Reference, in Chapter 4, for more information.

Step 4: Add a Header, Footer, and Legend

Enter "Michelle's Microchips" in the headerText property editor and "1963 Quarterly Results" in the footerText property editor:

To add the legend, set the legendVisible property to true. The legend text is taken from information in the data source. Notice how the plot area is resized to accommodate the legend. You may have to resize your chart area to accommodate the changes:

For more information on legend properties, see Legends, in Chapter 4.

Step 5: Add Point Labels to the X-axis

By default, SimpleChart annotates the axes with values. You can change the annotation to show point labels or time labels.

For Michelle's Microchips, change the X-axis annotation from values to point labels. Do this by setting the xAxisAnnotationMethod property to Point_Labels:

You should now see "Q1", "Q2", "Q3", and "Q4" on the X-axis. These labels are contained in the chart2.dat file, and come up automatically when Point_Labels is selected. For more information on axis annotation, see Axis Properties, in Chapter 4.

Step 6: Change the Background Color

To change the background color to white, click the background property to bring up your color editor:

The custom color editor used by your IDE will differ from the BeanBox. Select pure white from the options on your color editor:

Step 7: Change to Bar Chart and add 3D Effects

You can select from 13 chart types using the chartType property editor (see Chart Types, in Chapter 4, for a complete list). For Michelle's Microchips, select the BAR type:

To add three-dimensional visuals to your chart, click the view3D property to bring up the View3DEditor:

There are two main settings in the View3DEditor (below): depth, and combined elevation and rotation. They are both set either by dragging the box in the editor with a mouse or by typing in the value in the editable box next to these settings.

First, drag the square with your mouse until you have an Elevation of 45 and a Rotation of 45, or simply type "45" in the editable box next to these settings. Second, check the Change Depth box, and drag the red square until it has a depth of 31, or simply type "31" in the editable box next to Depth. Click Done to set the changes:

Step 8: Compile and Run the Application

For the last step, compile and run the application. See your IDE's documentation for details. When you run the application, you should have a window with a chart, displaying Michelle's Microchips' financial information.

The following example illustrates how the application appears when run: