XML Template (GWT UI Binder)

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
	xmlns:g="urn:import:com.google.gwt.user.client.ui"
    xmlns:b="urn:import:org.gwtbootstrap3.client.ui"
	xmlns:m="urn:import:de.swm.commons.mobile.client.widgets"
    xmlns:md="urn:import:de.swm.commons.mobile.client.widgets.date"
    xmlns:ms="urn:import:de.swm.commons.mobile.client.widgets.scroll">

	<ui:style>
		.flex > div {
		display: table;
		width: 100%;
		}
		.flex > div > * {
		vertical-align: middle;
		display: table-cell;
		}
		.flex > div >
		*:first-child {
		text-align: right;
		padding-right: 1em;
		width: 30%;
		}
		.flex
		> div > *:last-child {
		width: 90%;
		}
		.modify > div > div {
		-webkit-box-flex: 1;
		margin: 0 .5em 0 .5em;
		-ms-flex: 1;
		}
	</ui:style>

    <ui:with field='res' type='de.swm.mobile.kitchensink.client.theme.TestResources'/>
		
	<g:HTMLPanel>
		<m:HeaderPanel ui:field="header" leftButton="Back">
			<m:OnlyDesktopLabel>Editor</m:OnlyDesktopLabel>
		</m:HeaderPanel>
		<ms:ScrollPanel>
            <g:HTMLPanel>
                <m:ListPanel selectable="false">
                    <m:ListItem>
                        <g:Label>Name:</g:Label>
                        <m:TextBox ui:field="nameTextBox"/>
                    </m:ListItem>
                    <m:ListItem>
                        <g:Label>E-Mail:</g:Label>
                        <m:EmailTextBox ui:field="mailTextBox"/>
                    </m:ListItem>
                    <m:ListItem>
                        <g:Label>Geburtstag:</g:Label>
                        <md:DateTextBox ui:field="birthdateTextBox" dateStyle='DATE'/>
                    </m:ListItem>
                    <m:ListItem>
                        <g:Label>Uhrzeit:</g:Label>
                        <md:DateTextBox ui:field="timeTextBox" dateStyle='TIME'/>
                    </m:ListItem>
                    <m:ListItem>
                        <g:Label>Termin:</g:Label>
                        <md:DateTextBox ui:field="scheduleTextBox" dateStyle='DATETIME'/>
                    </m:ListItem>
                    <m:ListItem>
                        <g:Label>Beschreibung:</g:Label>
                        <m:TextArea ui:field="description"/>
                    </m:ListItem>
                    <m:ListItem>
                        <g:Label>Job:</g:Label>
                        <m:DropDownList ui:field="jobList">
                            <m:DropDownItem key="director">Direktor</m:DropDownItem>
                            <m:DropDownItem key="engineer">Ingenieur</m:DropDownItem>
                            <m:DropDownItem key="projectmanager">Projektmanager</m:DropDownItem>
                            <m:DropDownItem key="servicemanager">Servicemanager</m:DropDownItem>
                        </m:DropDownList>
                    </m:ListItem>
                </m:ListPanel>
                <m:ListPanel  selectable="false">
                    <m:ListItem>
                        <b:ButtonGroup ui:field="radioButtonGroup" dataToggle="BUTTONS">
                            <b:CheckBoxButton active="true">Option 1</b:CheckBoxButton>
                            <b:CheckBoxButton>Option 2</b:CheckBoxButton>
                            <b:CheckBoxButton>Option 3</b:CheckBoxButton>
                            <b:CheckBoxButton enabled="false">Option 4</b:CheckBoxButton>
                        </b:ButtonGroup>
                    </m:ListItem>
                    <m:ListItem>
                        <m:GenericRadioButtonGroup ui:field="radioButtonGroupGeneric" vertical="false" name="radiobuttonsGen"/>
                    </m:ListItem>
                </m:ListPanel>
                <m:ListPanel  selectable="false">
                    <m:ListItem>
                        <m:Button ui:field="saveButton">Save</m:Button>
                        <m:Button ui:field="cancelButton">Cancel</m:Button>
                    </m:ListItem>
                </m:ListPanel>
            </g:HTMLPanel>
		</ms:ScrollPanel>
	</g:HTMLPanel>	
</ui:UiBinder>