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

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

### Independence, Reusable and Embeddable

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.