Demo Readme

 

 

 

Drag and Drop Bean Suite Version 2.0

About This Demo

This demo shows how you can easily match a background for a GUI component by using the Drag and Drop mechanism provided by this suite.

For information on how to create this application by using visual programming, see Wiring Instructions.

To see the wiring and run the application in VisualAge for Java 2.0, import the Bean Suite jar files (in the lib directory) and the demo dat file (in the demo directory) into VisualAge for Java 2.0. The dat file contains a demo package that you can add to any project in your VisualAge workspace. If you add this package to a project other than where the associated jar file(s) was (were) imported, use VisualAge's "Check Class Path..." option to compute the correct CLASSPATH setting before you run the demo application. This will ensure that VisualAge can locate all the classes needed to run the application.

How to Run This Demo

  1. First, make sure the Drag and Drop bean suite is properly installed as described in the documentation provided with this package.
  2. Change to the demo directory, and type java runDemo at the command prompt. This starts the demo.

What the Demo Does

When the demo starts up, you can see two Frames: Drag&Drop Demo and SimpleColorTable (refer to Figure 1).

You can drag any color from TextFields of SimpleColorTable Frame and drop it on Result TextField. Therefore, the background color of Result TextField changes.

You can drag a text from the bottom TextField and drop it on Result TextField. Therefore, the text in Result TextField changes.

DND Demo

Figure 1 - The Drag and Drop Demo.

Wiring Instructions

This demo is shown on Figure 2

The Drag&Drop Demo and Simple Color Table components shown on Figure 2 are created visually by using VisualAge for Java 2.0.

Wiring is done in the following way:

  1. Create a new class with the Frame superclass (set its title as Drag&Drop Demo)
  2. Place Frame (titled as Simple Color Table) on the design surface
  3. Place two TextFields (TextField1, TextField2) onto Drag&Drop Demo Frame. Add Labels as needed. Place two TextFields (TextField3,TextField4) onto Simple Color Table Frame
    1. Customize the TextField1 editable property as false
    2. Customize the TextField3.background property as java.awt.Color.green  and the editable property as false
    3. Customize the TextField4.background property as java.awt.Color.cyan  and the editable property as false
  4. Place three DragBeans (DragBean1, DragBean2, and DragBean3 (customize its name as TextDragBean) and two DropBeans (customize their names as BackgroundDropBean and TextDropBean in accordance with the functions, for which they are intended)
  5. Make the text property of the TextField2 able to drag:
    1. Connect the TextField2.this property to the TextDragBean.component property (conn1)
    2. Connect the TextDragBean.dragStart event to the TextDragBean.inputObject property (conn2)
    3. Connect the TextField2.text property to the value parameter of the conn2 (conn3) 
    4. Connect the TextDragBean.dragDropEndOk event to the TextField2.text property (conn4)
  6. Make the background property of Result TextField able to accept the dragging data of the java.awt.Color type:
    1. Connect the Result TextField.this property to the BackgroundDropBean.component property (conn5)
    2. Connect the BackgroundDropBean.dropEnd event to the Result TextField.background property (conn6)
    3. Connect the BackgroundDropBean.outputDropObject property to the value parameter of the conn6 (conn7)
    4. Customize the BackgroundDropBean.dataFlavor property as java.awt.Color
  7. Make the text property of Result TextField able to accept the dragging data of the java.lang.String type:
    1. Connect the Result TextField.this property to the TextDropBean.component property (conn8)
    2. Connect the TextDropBean.dropEnd event to the Result TextField.text property (conn9)
    3. Connect the TextDropBean.outputDropObject property to the value parameter of conn9 (conn10)
  8. Make the background property of the TextField3 able to drag:
    1. Connect the TextField3.this property to the DragBean1.component property (conn11)
    2. Connect the TextField3.background property to the DragBean1.inputObject property (conn12)
  9. Make the background property of TextField4 able to drag:
    1. Connect the TextField4.this property to the DragBean2.component property (conn13)
    2. Connect the TextField4.background property to the DragBean2.inputObject property (conn14)
  10. During the run time, locate the Simple Color Table component in the following way:
    Connect the Drag&Drop Demo Frame.windowOpened event to the show() method of the Simple Color Table frame (conn15)

DND Wiring Diagram

Figure 2 - The wiring diagram