Problems with GWT panel types

Question

Hi Everyone, thanks in advance for your help.

I'm currently trying to create a w3c standards compliant HTML/CSS interface for a GWT app, much of this rests on using the right types of panel in the right place rather than using nested horizontal and vertical panels which write out tables in the UI.

I'm a total n00b at GWT and cannot figure out why replacing the top Vertical Panel in the code below causes the app to stop working. Any UI coding resources, advice of any kind would be very much appreciated.

<g:VerticalPanel>
    <g:FormPanel ui:field="loginFormPanel" action="/cms/j_acegi_security_check.rpc" >
      <g:HTMLPanel>     

          <g:Label ui:field="signinLabel" styleName="{style.signinStyle}">
            <ui:msg key="signInText">Welcome to Perform CMS</ui:msg>
          </g:Label> 



          <g:Label ui:field="emailLabel" styleName="{style.loginFontStyle}">
            <ui:msg key="emailAddress">Email adress</ui:msg>
            address
          </g:Label>  

            <g:TextBox ui:field="email" name="j_username" styleName="{style.loginTextBoxStyle}"/>

            <g:Label styleName="{style.fontStyle}" ui:field="usernameError"/>

          <g:Label ui:field="passwordLabel" styleName="{style.loginFontStyle}">
            <ui:msg key="password">Password</ui:msg>
          </g:Label>         

            <g:PasswordTextBox ui:field="password" name="j_password" styleName="{style.loginTextBoxStyle}"/>

            <g:Label styleName="{style.fontStyle}" ui:field="passwordError"/>


        <g:HTMLPanel ui:field="submitPanel">
            <g:HTMLPanel ui:field="submitButtonPanel" styleName="{style.buttonPanelStyle}">
              <g:Image url="/cms/images/new_button_search_left.png" styleName="{style.image}"></g:Image>
              <g:Label ui:field="signIn" styleName="{style.submitLabelStyle}">
                <ui:msg key="signIn">Sign in</ui:msg>
              </g:Label>
              <g:SubmitButton styleName="{style.hide}">Submit</g:SubmitButton> 
              <g:Image url="/cms/images/new_button_search_right.png" styleName="{style.image}"></g:Image>
            </g:HTMLPanel>
        </g:HTMLPanel>


        <g:HTMLPanel ui:field="submitErrorsPanel" styleName="{style.submitErrorPanel}">

          <g:Label styleName="{style.fontStyle}" ui:field="submitErrorMessages"/>
        </g:HTMLPanel>


      </g:HTMLPanel>
    </g:FormPanel> 
    <g:HTMLPanel ui:field="loginSuccessPanel" styleName="{style.hide}">
      <g:Label styleName="{style.fontStyle}" ui:field="loginSuccessMessageLabel"/>
   </g:HTMLPanel>
  </g:VerticalPanel>

Answer 1

You don't say how your app stops working, but the GWT compiler generates different JS for every user agent specified in your project's gwt.xml. By default there may be 5 or 6 different versions of your program and the right one is decided in at runtime. These versions exist because there is no such thing as W3C compliance in browsers. One browser might get closer than others but all have their quirks that GWT tries to hide you from.

The GWT vertical panel at your root usually gets turned into a table with each child being a cell in a row. Note you still need a root element in the XML, but it could be a flow or html panel. Changing from a vertical panel will probably cause the child elements to flow sideways or do other weird things. If you wanted them to stay vertical you could throw a <br> between them, or style the enclosing <div>.

The best thing to do for layout issues is to install a tool into your browser which allows you to inspect the DOM. For example, Firefox has Firebug, IE has the IE Developer Toolbar, Opera has a developer console etc. You can select the errant element and see its place in the hierarchy as well as which styles apply to that element. Firebug even let you tweak styles in real time which can be handy for on the spot experimentation.