|
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
- First, make sure the Drag and Drop bean suite is properly
installed as described in the documentation provided with
this package.
- 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.

Figure 1 - The Drag and Drop
Demo.
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:
- Create a new class with the Frame superclass (set its title as Drag&Drop
Demo)
- Place Frame (titled as Simple Color Table)
on the design surface
- Place two TextFields (TextField1, TextField2) onto Drag&Drop
Demo Frame. Add Labels as needed. Place two TextFields (TextField3,TextField4)
onto Simple Color Table Frame
- Customize the TextField1 editable property as false
- Customize the TextField3.background property as java.awt.Color.green and the editable property as false
- Customize the TextField4.background property as java.awt.Color.cyan and the editable property as false
- 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)
- Make the text property of the TextField2 able to drag:
- Connect the TextField2.this property to the TextDragBean.component property (conn1)
- Connect the TextDragBean.dragStart event to the TextDragBean.inputObject property (conn2)
- Connect the
TextField2.text property to the value parameter of the
conn2 (conn3)
- Connect the TextDragBean.dragDropEndOk event to the TextField2.text property (conn4)
- Make the background property of Result TextField able to accept the
dragging data of the java.awt.Color type:
- Connect the Result
TextField.this property to the BackgroundDropBean.component
property (conn5)
- Connect the BackgroundDropBean.dropEnd event to the Result
TextField.background property (conn6)
- Connect the BackgroundDropBean.outputDropObject property to the value parameter of the conn6 (conn7)
- Customize the BackgroundDropBean.dataFlavor property as java.awt.Color
- Make the text property of Result TextField able to accept the
dragging data of the java.lang.String type:
- Connect the Result
TextField.this property to the TextDropBean.component property
(conn8)
- Connect the TextDropBean.dropEnd event to the Result
TextField.text property (conn9)
- Connect the TextDropBean.outputDropObject property to the value parameter of conn9 (conn10)
- Make the background property of the TextField3 able to drag:
- Connect the TextField3.this property to the DragBean1.component property (conn11)
- Connect the TextField3.background property to the DragBean1.inputObject property (conn12)
- Make the background property of TextField4 able to drag:
- Connect the TextField4.this property to the DragBean2.component property (conn13)
- Connect the TextField4.background property to the DragBean2.inputObject property (conn14)
- 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)

Figure 2 - The wiring diagram