Thursday, October 28, 2004

Component Linking

WARNING: This blog entry was imported from my old blog on (which used different blogging software), so formatting and links may not be correct.

One of the new designer features that's available in patch 3
is "component linking". This lets you easily link two related components
together. If you've ever dropped a database table on a dropdown or
Data Table component, you've used component linking. When you dropped,
the rowset was linked to the JSF component (by becoming its data source
through value binding).

Component linking isn't specific to data binding. Take the "Inline
Message" component for example, which displays messages for other
components. The for property points to which component
it displays errors for. If it's tied to a text field for example, and
the text in the text field fails to validate, the validator error
message is displayed in the inline error message.

In 1.0, if you drop an Inline Message, it just displays the text
"msg-summary" (and if you enable the details property on the
component, it would display "msg-summary msg-details"). Not
particularly helpful. I got inspired to fix this when I deployed my application
several times without validation messages showing up, and I (too late) realized
that I had forgotten to associate the inline error message component with
its textfield!! This is now changed such that it will
instead display "Messages for id", where id is the name
of the component it's bound to. Therefore, you can immediately tell whether
your Inline Message is set up correctly, and which component it's associated with.

You change the component it's bound to
by editing the "for" property of the component.
As of patch 3, you can now easily link these components (an Inline
Message, and its associated component, such as a text field). Just
control-shift drag from the textfield to the inline message (or vice
versa), and the two components are linked! As you can see from the
screenshot, there is feedback while you drag; when a link connection
is possible the target is highlighted in blue and the status text area
describes the link. (The screenshot program I used inserted its own
mouse pointer here rather than the one used by Creator during the link

Other components allow links too; for example, you can connect
any visual component (other than self) to a Component Label component
using the same technique.

In addition, linking works in the application outline too.
You can now reorder components by simply dragging them around in
the application outline (see screenshot). Normally, if you drag
say a component label component to a Grid Panel, it's going to
move the label into the Grid Panel. How can you link the label
to the grid panel instead, such that it's a label for
the grid panel rather than in it? Hold down Control-Shift
during the drag. The Drag & Drop cursor will change to the
link cursor. Another modifier will cause the component to be
copied rather than linked or moved. The keyboard modifiers should
be the same as the drag & drop modifiers used for file manipulations
on the operating system you're running on.

No comments:

Post a Comment