Tuesday, December 10, 2013

UIBinder example

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:b="urn:import:com.github.gwtbootstrap.client.ui"
             xmlns:tabs="urn:import:com.db.syndicate.html.common.gxtcomponents.tabs">
    <ui:style>
        .header{
            text-align: center;
            background-color: bisque;
            width: 100%;
        }
    </ui:style>
    <g:FlowPanel>
        <b:FluidContainer>
            <b:FluidRow width="100%">
                <b:Column size="12">
                    <!--<g:HTMLPanel addStyleNames="{style.header}">Header</g:HTMLPanel>-->
                    <g:FlowPanel ui:field="headerPanel"/>
                </b:Column>
            </b:FluidRow>
            <b:FluidRow>
                <b:Column size="3">
                    <b:FluidRow>
                        <b:Column size="12">
                            <!--menu-->
                            <g:FlowPanel width="100%" ui:field="menuPanel"/>
                        </b:Column>
                    </b:FluidRow>
                    <b:FluidRow>
                        <b:Column width="100%" size="12">
                            <!--filter-->
                            <g:FlowPanel ui:field="filterPanel"/>
                        </b:Column>
                    </b:FluidRow>
                </b:Column>
                <b:Column size="9">
                    <!--content-->
                    <g:FlowPanel width="100%" ui:field="contentPanel">
                        <tabs:TabBar header="true" ui:field="tabBar"/>
                    </g:FlowPanel>
                </b:Column>
            </b:FluidRow>
            <b:FluidRow>
                <!--Footer-->
            </b:FluidRow>
        </b:FluidContainer>
    </g:FlowPanel>
</ui:UiBinder>

Consider Errai Framework