Component

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:

• Independence
• Reusable
• Embeddable

Precisely, a UI component is composed of three elements: UI Views, Presentation Data and Java controllers.

• UI View
  UI View is UI controls defined in XWT XML, instead of low level SWT in Java. It corresponds with a XML file.
• Java controller
  It is a class associated to a UI View to handle UI events and it handles the relationship between the Presentation data and the business logic services.
• Presentation Data
  It is the main information to manage by users via UI View and Java controller.

Hence, a component has an implicit "data context" comparing traditional UI framework.

In the following example, we create a simple component of Person.

<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 Text="{Binding Path=firstName}" />
    <Label Text="Last name:" />
    <Text Text="{Binding Path=lastName}" />
</j:PersonView>

Implicitly, the dataContext this view is Person. Thet first Text binds to the property "firstName" and the second to "lastName".

In the next, we create another View Component for Company, which reuses the component above. The PersonView is bounds to the property "manager" of the Company.

<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>

Please see the screenshot below.