An advanced component of the Eclipse forms design Beautiful UI

Eclipse Forms provides 4 advanced components so you can build beautiful ui:expandable composite,section,image hyperlink and form text. Let's take a closer look at each of them in turn.

Expandable composite

One common feature in Web pages is that you have the ability to scale a portion of the Web content with a single button, and Eclipse forms provides such a component: Expandablecomposite.

ExpandableComposite ec = toolkit.createExpandableComposite(form.getBody(),
ExpandableComposite.TREE_NODE|
ExpandableComposite.CLIENT_INDENT);
ec.setText("Expandable Composite title");
String ctext = "We will now create a somewhat long text so that "+
"we can use it as content for the expandable composite. "+
"Expandable composite is used to hide or show the text using the "
"toggle control";
Label client = toolkit.createLabel(ec, ctext, SWT.WRAP);
ec.setClient(client);
td = new TableWrapData();
td.colspan = 2;
ec.setLayoutData(td);
ec.addExpansionListener(new ExpansionAdapter() {
public void expansionStateChanged(ExpansionEvent e) {
form.reflow(true);
}
});

This composite accepts some style parameters to control its behavior. The TreeNode style uses buttons in the tree component to stretch or shrink content, and Twistie style creates a button for a square line. When you use expanded, the initial state is stretched. If you use compact style, the component will report the width of the title width appropriately and render the contraction state. , Client_indent aligns the content with the title (otherwise, the content is based on the width of the component).

Expandablecomposite has the responsibility to handle button components and headers. The customer component that expands and shrinks must be a direct child of expandablecomposite. We need to add a extension listener to the component and "Notify (Reflow)" form when the state changes. This is because stretching changes the size of the expandable composite, but it has no effect on parent before the next layout of parent (so it needs to be forced to tell it). In general, every time you make a layout change in form, you need to " Reflow "This form." Reflowing "This form will allow all components to follow the new dimension layout and update the scroll bars.

Our view now looks like this:

Figure 11: Expandable Composite example of a shrinking state

When you click on the title "+", composite stretches out and shows the customer:

Figure 12:expandable Composite stretching state