Sample: BookmarkList
Objectives
This sample illustrates how to build an application using visual composition.
Before you begin
The Link to URL Button only works if BookmarkList is run in a web browser
that supports JDK 1.1.
Description
This sample illustrates using features of visual composition for the following
tasks:
This sample lets you create a non-persistent list of URL bookmarks.
The BookmarkList class in this package subclasses java.applet.Applet.
It uses a BorderLayout as its layout manager. Its North component is a
Panel, which contains a Label and a TextField. A GridLayout is used
to manage the layout of this nested Panel. The Center component of the
BorderLayout is a List, and the East component is another Panel. This nested
Panel contains a set of Buttons and uses a GridLayout as its layout manager.
The Buttons enable users to add URL bookmark entries to the List and
to link to and delete selected entries. These Buttons are dynamically
enabled/disabled. For example, the Button labeled, "Add URL to list",
is only enabled when the URL address field contains text.
In addition to showing typical button-driven list manipulation it shows
how to use the appletContext property of an applet. Once you add
a bookmark to the list, you can select it and press the Link button.
The link is made by calling showDocument on the applet context. If
an exception occurs on the link, then showStatus is called on the applet
context to display a message in the status area of the browser.
Running the BookmarkList Sample
To run the sample:
-
Select the BookmarkList class from the Projects page
-
Select the Run button on the tool bar
To run the sample in a browser that supports JDK 1.1:
-
Select the BookmarkList from the Projects page
-
Click mouse button 2
-
Select Export
-
Select Directory
-
Click Next
-
Select the .class check box to export the class file
-
Select the .html check box to generate html
-
Execute the generated html in your browser
To build the BookmarkList sample:
There is only one bean in the BookmarkList sample, and it is called BookmarkList.
Follow the instructions below.
Building the BookmarkList class
-
Create the BookmarkList class as follows:
-
From the Projects page of the Workbench
-
Select the package where you will save this sample
-
Select the Create Class button on the tool bar
-
Class name = BookmarkList
-
Superclass = java.applet.Applet
-
Select the Compose the class visually check box
-
Click Finish
-
The Visual Composition page of the class browser
will be displayed, where you can build the user interface as follows:
-
Open the property sheet for BookmarkList
-
Select the BookmarkList applet
-
Click mouse button 2
-
Select Properties and set properties for BookmarkList
-
layout = BorderLayout -> hgap = 15, vgap
= 15
-
background = LightGray
-
constraints -> x = 20, y = 20, width = 400, height = 400
-
Change the category on the palette to AWT
-
Drop a Panel on the free-form surface. Set these properties for Panel1
-
layout = GridLayout -> rows = 2, columns
= 1
-
Drop a Label in Panel1. Set these properties for Label1
-
text = Enter a URL address:
-
Drop a TextField in Panel1 beside Label1. To do this
-
Select the Beans List button on the tool bar
-
Select a TextField from the palette
-
Move the crosshairs over Panel1 in the Beans List and click mouse button
1
Set this property for TextField1
-
In the Beans List, move Panel1 into BookmarkList. Set this property
for Panel1
-
Drop a Panel on the free-form surface. Set these properties for Panel2
-
layout = GridLayout -> rows = 3, columns = 1, vgap = 10.
-
Drop a Button in Panel2. Set these properties for Button1
-
label = Add URL to list
-
beanName = AddButton
-
Drop a Button below Button1. Set these properties for Button2
-
label = Delete URL
-
beanName = DeleteButton
-
Drop a Button in Panel2. Set these properties for Button3
-
label = Link to URL
-
beanName = LinkButton
-
Move Panel2 to the East portion of BookmarkList
-
(make sure the constraints = East)
-
Drop a List in the center portion of BookmarkList. Set this property
for List1
-
Create a tear-off property
Now you are going to tear off the "appletContext"
property. You create a tear-off property to gain access to the encapsulated
features of a bean. This can be necessary when a property is in itself
a bean and you want to connect to one of its features. The torn-off property
is a variable that represents the property itself or points to it.
-
Place the cursor in an empty area over the free-form surface
-
Click mouse button 2
-
Select Tear-Off Property
-
Select appletContext
-
Click OK
-
Place the appletContext tear-off below BookmarkList
-
Save the bean and generate code for it:
-
Select Bean from the menu bar
-
Select Save Bean
-
Create a method:
To initialize URLList, create a new method named initializeURLList.
-
Select the Methods page
-
Select the Create Method or Constructor button on the tool bar
-
Select Create a new method
-
Method name = void initializeURLList(java.awt.List URLList)
-
Click Next
-
Modifiers: protected and static
-
Click Finish
-
Locate the BookmarkList class in the samples
-
Copy the code from the sample initializeURLList method
-
In your method, delete the existing source code
-
Paste the copied code
-
Save the method
-
Add some code:
You will insert some code into the
generated getURLList method to call the initialization method you just
created.
-
Select the getURLList() method
-
Find the first area where user code can be inserted, and add a call to
the initialization method as shown here:
// user code
begin {1}
initializeURLList(ivjURLList);
// user code
end
-
Make connections to set properties and invoke methods as follows (see Connection
Syntax ):
-
The following connections identify actions to be taken when certain events
occur.
-
Event-to-method connection
-
Source: AddButton actionPerformed/event
-
Target: URLList add/method
-
Method Parameter: java.lang.String
-
Parameter source: item
-
Parameter target: URLEntry text/property
When AddButton is pressed, the string in the URLEntry textfield will
be added to URLList.
-
Event-to-method connection
-
Source: DeleteButton actionPerformed/event
-
Target: URLList remove/method
-
Method parameter: int
-
Parameter source: position
-
Parameter target: URLList selectedIndex/property
When DeleteButton is pressed, the selected item in URLList is deleted.
-
Event-to-method connection
-
Source: LinkButton actionPerformed/event
-
Target: appletContext1 showDocument/method
-
Method parameter: java.net.URL
-
Parameter source: arg1
-
Parameter target: URLList selectedItem/property
-
Exception
-
Exception source: exceptionOccurred
-
Exception target: appletContext showStatus/method
This connection will appear as a dashed line. Open the property
sheet for the connection and check the Pass Event Data box to make the
exception text appear in the browser status area.
When LinkButton is pressed, you will be taken to the document identified
by the selected string in URLList.
-
Event-to-method connection
-
Source: URLList itemStateChanged/event
-
Target: URLEntry text/property
-
(Method parameter: java.lang.String)
-
Parameter source: value
-
Parameter target: URLList selectedItem/property
When an item is selected in URLList it will be displayed as the text
in URLEntry.
-
Event-to-method connection
-
Source: URLEntry actionPerformed/event
-
Target: appletContext1 showDocument/method
-
Method parameter: java.net.URL
-
Parameter source: arg1
-
Parameter target: URLEntry text/property
-
Exception
-
Exception source: exceptionOccurred
-
Exception target: appletContext showStatus/method
This exception connection will appear as a dashed line. Open
the property sheet for the connection and check the Pass Event Data box
to make the exception text appear in the browser status area.
When the text in URLEntry is changed, you will be taken to the document
identified by the string in URLEntry.
-
The next series of connections will create and use a setButtonState method
that will enable or disable AddButton, DeleteButton, and LinkButton as
appropriate based on the state of List1.
-
Event-to-Code connection
-
Source: URLEntry textValueChanged/event
-
Target: CODE setButtonState/method
In the Event-to-Code window
-
Leave textValueChanged as the event and <new method> selected
as the Method name
-
Deselect the Pass event data check box
-
Locate the BookmarkList class in the samples
-
Copy the code from the sample setButtonState method
-
In your method, delete the existing source code
-
Paste the copied code
-
Click OK
-
Event-to-Code connection
-
Source: URLList itemStateChanged/event
-
Target: CODE setButtonState/method
In the Event-to-Code window
-
Leave textValueChanged as the event
-
Select setButtonState as the Method name
-
Click OK
-
Event-to-Code connection
-
Source: AddButton actionPerformed/event
-
Target: CODE setButtonState/method
In the Event-to-Code window
-
Leave textValueChanged as the event
-
Select setButtonState as the Method name
-
Click OK
-
Event-to-Code connection
-
Source: DeleteButton actionPerformed/event
-
Target: CODE setButtonState/method
In the Event-to-Code window
-
Leave textValueChanged as the event
-
Select setButtonState as the Method name
-
Click OK
-
Event-to-Code connection
-
Source: LinkButton actionPerformed/event
-
Target: CODE setButtonState/method
In the Event-to-Code window
-
Leave textValueChanged as the event
-
Select setButtonState as the Method name
-
Click OK
-
Event-to-Code connection
-
Source: BookmarkList init/event
-
Target: CODE setButtonState/method
To make the connection to the init event
-
Select Connectable Features from the BookmarkList connection window
-
Select Event
-
Select the Show expert features check box
-
Select init() from the list
-
Click OK
In the Event-to-Code window
-
Leave init as the event
-
Select setButtonState as the Method name
-
Click OK
-
Reorder some connections:
The connections for LinkButton need to be reordered. The setButtonState
method should be invoked before the showDocument method. This is
necessary because setButtonState will clear the status area. To reorder
the connections:
-
Place the cursor over LinkButton
-
Click mouse button 2
-
Select Reorder connections from
-
Press and hold mouse button1 over the second connection (actionPerformed->setButtonState)
-
Move the connection ahead of the first connection (actionPerformed->showDocument)
You're now ready to run the application. Have fun!