Thursday October 28, 2004

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 operation.)

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.