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: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%;
        }
    </ui:style>

    <g:HTMLPanel>
        <m:HeaderPanel ui:field="header" leftButton="Back">
            <m:OnlyDesktopLabel>Date Spinner</m:OnlyDesktopLabel>
        </m:HeaderPanel>
        <ms:ScrollPanel hasTextBox="true">
            <m:ListPanel selectable="false" styleName="ListPanel {style.flex}">
                <m:ListItem>
                    <g:Label>Date/Time:</g:Label>
                    <md:DateTextBox dateStyle='DATETIME'/>
                </m:ListItem>
                <m:ListItem>
                    <g:Label>Date:</g:Label>
                    <md:DateTextBox ui:field="dateBox" dateStyle='DATE'/>
                </m:ListItem>
                <m:ListItem>
                    <g:Label>Time:</g:Label>
                    <md:DateTextBox dateStyle='TIME'/>
                </m:ListItem>
            </m:ListPanel>
        </ms:ScrollPanel>
    </g:HTMLPanel>
</ui:UiBinder>