Styling the Component View in Talend Open Studio

When you build a custom component in Talend Open Studio, you add UI controls in the component's XML descriptor. The controls can be positioned, grouped, and labeled to help with usability.

The XML descriptor for a custom component defines PARAMETER elements that render text fields, checkboxes, and other UI controls.  There are several styling attributes in the PARAMETER elements that can position, group, and label the Component View.

A Component Styled with GROUP and LABEL Elements

GROUP

The GROUP attribute can be added to a PARAMETER element to provide a border and a label for a set of related controls.  Give the same GROUP name to the PARAMETER names.

LABEL

A LABEL PARAMETER can be added to the XML descriptor to add explanatory text or an additional label to a UI control.  Additionally, the LABEL can include a COLOR attribute.  The COLOR attribute is an RGB value in decimal, separated by a semi-colon.  "255;0;0" is red.

NUM_ROW

NUM_ROW is an attribute added to a PARAMETER that will position the UI control in the Component View.  More than one PARAMETER can have the same NUM_ROW.  In that case, the PARAMETER will render UI controls on the same row.  In the above screenshot, PARAMETER P1 has a NUM_ROW of 1, the label has a NUM_ROW of 2, and P2 has a NUM_ROW of 3.

The following screenshot shows an XML descriptor fragment configuring several parameters.

XML Descriptor with Grouping, Positioning, and an Extra Label

These are the related message definitions

PARAM1.NAME=P 1
PARAM2.NAME=P 2
MESSAGE.NAME=Fill this in for additional configuration
PARAM_GROUP.NAME=Parameters

If you have a lot of UI controls in the Component View, you can arrange the controls in a bordered and labeled box.  Labels -- in addition to those associated with the controls themselves -- can be added too.