UI Component in XWT is not a simple UI widget such as Button, Label or List. It is in fact a Presentation unit that manages the ways of data display and edition. A UI Component is flexible and connectable software element, which is characterized at least by following aspects:
Precisely, a UI component is composed of three elements: UI Views, Presentation Data and Java controllers.
Hence, a component has an implicit "data context" comparing traditional UI framework.
The following example is a custom UI component.
<j:PersonView xmlns="http://www.eclipse.org/xwt/presentation" xmlns:j="clr-namespace:ui"> <j:PersonView.layout> <GridLayout numColumns="2" /> </j:PersonView.layout> <Label Text="First name:" /> <Text /> <Label Text="Last name:" /> <Text /> </j:PersonView>
The component above defined two columns with each has a Label and a Text. It is a pure UI component. In XWT, the component can establish a connection with business logic using data binding. The contents of the Text can synchronized with binding target.
<Label Text="First name:" /> <Text Text="{Binding Path=firstName}" /> <Label Text="Last name:" /> <Text Text="{Binding Path=lastName}" />
Implicitly, the dataContext this view is Person. The first Text binds to the property "firstName" and the second to "lastName".
UI component in XWT are independence, reusable and embeddable. The characters are correlative with each other. Independence is the necessary condition of reusable and embeddable, reusable and embeddable decide the component is independence. A defined UI component is like an unit, it can be reused in other applications or be embedded as a child in a new component.
For example, we embed the above component into another View Component. First, create a new class named Company and then new a Person instance like the code below.
public class Company { ... protected String name; protected Person manager = new Person(); ... }
In XWT XML, put the PersonView component into a Group. Then put the Group on the place where you want.
<j:CompanyView xmlns="http://www.eclipse.org/xwt/presentation" xmlns:x="http://www.eclipse.org/xwt" xmlns:j="clr-namespace:org.eclipse.e4.xwt.tests.view"> <j:CompanyView.layout> <GridLayout numColumns="2"/> </j:CompanyView.layout> <Label Text="Company name:"/> <Text x:Style="BORDER" Text="{Binding Path=name}"/> <Label Text="Manager:"/> <Group text="Person View:"> <Group.layout> <FillLayout/> </Group.layout> <j:PersonView DataContext="{Binding Path=manager}"/> </Group> </j:CompanyView>
The UI views like below. The content in red pane is PersonView.