Проблемы с типами панелей GWT

Question

заранее спасибо за вашу помощь.

В настоящее время я пытаюсь создать интерфейс HTML / CSS, соответствующий стандартам w3c, для приложения GWT, большая часть которого основана на использовании правильных типов панелей в нужном месте, а не на вложенных горизонтальных и вертикальных панелях, которые выписывают таблицы в пользовательском интерфейсе.

Я всего лишь n00b в GWT и не могу понять, почему замена верхней вертикальной панели в приведенном ниже коде приводит к тому, что приложение перестает работать. Любые ресурсы кодирования пользовательского интерфейса, советы любого рода будут очень признательны.

<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

Вы не говорите, как ваше приложение перестает работать, но компилятор GWT генерирует разные JS для каждого пользовательского агента, указанного в gwt.xml вашего проекта. По умолчанию может быть 5 или 6 разных версий вашей программы, и правильная версия определяется во время выполнения. Эти версии существуют, потому что в браузерах нет такого понятия, как соответствие W3C. Один браузер может стать ближе, чем другие, но у всех есть свои причуды, от которых GWT пытается скрыть вас.

Вертикальная панель GWT в вашем корне обычно превращается в таблицу, где каждый ребенок является ячейкой в ​​ряду. Обратите внимание, что вам все еще нужен корневой элемент в XML, но это может быть панель потока или html. Изменение с вертикальной панели, вероятно, приведет к тому, что дочерние элементы будут перетекать в сторону или делать другие странные вещи. Если вы хотите, чтобы они оставались в вертикальном положении, вы можете добавить между ними <br> или задать стиль <div>.

Лучшее, что нужно сделать для решения проблем с макетом, - это установить в браузер инструмент, который позволяет вам проверять DOM. Например, Firefox имеет Firebug, IE имеет панель инструментов IE Developer, Opera имеет консоль разработчика и т. Д. Вы можете выбрать ошибочный элемент и увидеть его место в иерархии, а также то, какие стили применяются к этому элементу. Firebug даже позволяет настраивать стили в режиме реального времени, что может быть удобно для экспериментов на месте.