GWT Html Layout Conventions

Question

Я только начал работать с GWT и уже осознаю необычайную силу, которой он обладает. Я из внешнего мира, так что Java - это большая кривая обучения, но я думаю, что это действительно поможет мне создать правильно спроектированное приложение (html-мудрое) вместо того, чтобы просто полагаться на стандартные панели GWT, которые часто заканчиваются использованием таблицы для разметки, или лишние, абсолютно позиционированные div.

Самая большая вещь, которая меня сейчас тормозит, - это решить, как правильно оформить дизайн моего сайта. У меня есть довольно стандартный 2-колонный сайт заголовка / фута (фиксированная ширина), который я хочу создать, но я не фанат всех дополнительных div-ов / стилей и т. Д., Которые идут, например, с DockLayoutPanel.

Я думаю, что мне просто нужно написать свой собственный виджет Layout, расширяющий Composite, который имеет HTMLPanels для общего макета сайта
(я думаю ... до сих пор еще не полностью понял это, т.е. как мне добавить идентификаторы к этим div'ам панели "#header", "#nav" и т. Д ...)
тогда я могу добавить другие виджеты в этот макет

Но другое, что я вижу, это то, что я мог бы написать класс Layout, расширяющий UiBuilder, и иметь прямые div в файле ui.xml.

Мне просто интересно, какой метод размещения сайта предпочтителен для GWT? Он не будет использоваться повторно в смысле других виджетов, он будет использован один раз, и мои элементы управления и т. Д. Будут размещены внутри.

Любые советы или рекомендации приветствуются! И если я полностью пропустил лодку о том, как это сделать, дайте мне знать

Answer 1

Комбинация UI Binder и HTML Panel работает лучше всего для нас.

В вашем .ui.xml поместите код, подобный -

<gwt:HTMLPanel ui:field="container">



    <gwt:FlowPanel ui:field="header"></gwt:FlowPanel>



        <gwt:HTMLPanel styleName="secondarynav">

            <gwt:FlowPanel ui:field="menuWidget"></gwt:FlowPanel>

            <gwt:FlowPanel ui:field="someOtherWidget"></gwt:FlowPanel>

        </gwt:HTMLPanel>



        <gwt:FlowPanel styleName="secondarycontent">

            <gwt:FlowPanel ui:field="faqWidget"></gwt:FlowPanel>

            <gwt:FlowPanel ui:field="advertisingWidget"></gwt:FlowPanel>

        </gwt:FlowPanel>



        <div class="content">
        <gwt:FlowPanel ui:field="mainContentWidget"/>

        </div>


        <div class="clearingDiv"/>

    </div>



    <gwt:FlowPanel ui:field="footer"></gwt:FlowPanel>

</gwt:HTMLPanel>

В соответствующем классе .java у вас будут такие методы, как setHeader (), setSecondaryNav (), setMenu (), setFooter () и т. Д.

Таким образом, ваш макет полностью определен в вашем ui.xml. Также вы можете использовать абстракции виджетов. Это означает, что вы можете создать виджет заголовка, а затем вызвать метод setHeader () в макете, чтобы правильно разместить его.

Answer 2

Если вы просто хотите создать страницу, используя свои собственные div, самый простой способ - использовать div в XML-файле UiBinder. Там вы также можете установить атрибут id как обычно:

<g:HTML>
  <div id="header">...</div>
  ...
</g:HTML>

Панели макетов, предоставляемые GWT, также могут быть полезны - возможно, вы захотите поиграть с ними немного больше и посмотреть, предоставляют ли они какое-либо значение (например, избегание некоторых кросс-браузерных проблем) или нет .

Answer 3

Продолжайте использовать свой макет. GWT очень адаптируется.

Опция, которую вы, возможно, захотите попробовать, - это сохранить существующий статический макет HTML / CSS. Вы можете использовать RootPanel.get ("id"), чтобы получить ссылку на элемент (по id), как Panel, в которую вы можете добавить виджеты GWT (включая другие панели).

Вы также можете переместить макет в шаблон UiBinder. Преимущества здесь - минимизация и обфускация CSS (несколько UiBinders могут совместно использовать один ресурс CSS)