uibinder

gistfile1.html

<!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:e="urn:import:com.engonyx.applications.guisuite.client.widgets">

    <ui:style>
        .main {
            overflow-y: scroll;
            width: 100%;
            height: 100%;
        }
        
        .main label {
            width: 50px; /*Change this to your liking for the label size. That's also make sure that everything is well aligned.*/
        }

        .important {  /*Is this unused?*/
            font-weight: bold;
        }

        .red {
            color: red;
        }

        .hideablePanel input[type="text"] {
            width: 88px;
        }

        .hideablePanel select {
            width: 70px;
            float: right;
        }
    </ui:style>

    <e:Context ui:field="context">
        <g:HTMLPanel styleName="{style.main} formLayout">
            <label>Name</label>
            <g:TextBox ui:field="name"></g:TextBox>
            <br/>

            <label>Serial</label>
            <g:TextBox ui:field="serial"></g:TextBox>
            <br/>

            <g:Label ui:field="positionLabel">Position</g:Label>
            <g:TextBox ui:field="position" readOnly="true"></g:TextBox>

            <!-- hide the panel instead of each field and if you were using uifield in label to hide them, change 
            <g:Label> by <label> and remove the ui:field.-->
            <g:HTMLPanel styleName="{style.hideablePanel}" ui:field="hidablePanel"> 
                <g:Label ui:field="xValueLabel">X position</g:Label>
                <g:TextBox ui:field="xValue" readOnly="true"></g:TextBox>
                <g:ListBox ui:field="xValueUnit"></g:ListBox>
                <br/>

                <g:Label ui:field="xAngleLabel">X angle</g:Label>
                <g:TextBox ui:field="xAngle" readOnly="true"></g:TextBox>
                <g:ListBox ui:field="xAngleUnit"></g:ListBox>
                <br/>

                <g:Label ui:field="yValueLabel">Y position</g:Label>
                <g:TextBox ui:field="yValue" readOnly="true"></g:TextBox>
                <g:ListBox ui:field="yValueUnit"></g:ListBox>
                <br/>

                <g:Label ui:field="yAngleLabel">Y angle</g:Label>
                <g:TextBox ui:field="yAngle" readOnly="true"></g:TextBox>
                <g:ListBox ui:field="yAngleUnit"></g:ListBox>
                <br/>

                <g:Label ui:field="zValueLabel">Z position</g:Label>
                <g:TextBox ui:field="zValue" readOnly="true"></g:TextBox>
                <g:ListBox ui:field="zValueUnit"></g:ListBox>
                <br/>

                <g:Label ui:field="zAngleLabel">Z angle</g:Label>
                <g:TextBox ui:field="zAngle" readOnly="true"></g:TextBox>
                <g:ListBox ui:field="zAngleUnit"></g:ListBox>
            </g:HTMLPanel>

            <g:Button text="test" ui:field="testButton"
                      title="Hard coded data for device defined in DevicePropertiesContextPresenter.java. Please configure data to match inofrmation in your database."></g:Button>
            <br/>
            <g:Label ui:field="message" styleName="{style.red}">
            </g:Label>
        </g:HTMLPanel>
    </e:Context>
</ui:UiBinder>