Конвенции расположения HTML GWT
Я только что начал работать с GWT, и я уже распознаю экстраординарное питание, которым он обладает. Я приезжаю из frontend мира, таким образом, Java является большой кривой обучения, но я думаю, что это на самом деле поможет мне создать, правильно разметил приложение (мудрое HTML) вместо того, чтобы просто полагаться на панели GWT по умолчанию, которые часто заканчивают тем, что использовали таблицы для расположения, или лишний, абсолютно расположенные отделения.
Самая большая вещь, замедляющая меня прямо сейчас однако, решает, как правильно разметить дизайн моего сайта. У меня есть довольно стандартный сайт заголовка/нога с 2 седлами (зафиксированная ширина), что я хочу разработать, но я не поклонник всех дополнительных отделений/моделирования и т.д., которые идут с DockLayoutPanel, например.
Я думаю, что должен просто записать свой собственный Составной объект расширения виджета Расположения, который имеет HTMLPanels для общего расположения сайта
(Я думаю..., все еще еще не полностью поняли это, т.е. как я добавляю идентификатор к этим отделениям панели "#header", "#nav" и т.д....),
затем я могу добавить другие виджеты в это расположение
Но другая вещь, которую я вижу, состоит в том, что я мог записать расширению Класса макета UiBuilder и иметь прямо отделения в файле ui.xml.
Я просто задаюсь вопросом, каков предпочтительный метод для расположения сайта с GWT? Это не будет снова использованным в смысле других виджетов, это будет использоваться однажды, и мои средства управления и т.д. будут помещены внутри.
Любые подсказки или приемы значительно ценятся! И если я полностью упустил возможность о том, как сделать это, сообщить мне
3 ответа
Лучше всего нам подходит сочетание 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 () в своем макете, чтобы правильно его разместить.
Если вы просто хотите создать страницу, используя свои собственные блоки div, самый простой способ - использовать блоки в XML-файле UiBinder. Здесь вы также можете установить атрибут id как обычно:
<g:HTML>
<div id="header">...</div>
...
</g:HTML>
Панели макета, предоставляемые GWT, тоже могут быть полезны - возможно, вы захотите немного поиграть с ними и посмотреть, предоставляют ли они какое-либо значение (например, избегая некоторых проблем с кроссбраузерностью) для вас, или нет.
Продолжайте использовать макет. GWT очень адаптируемый.
Вариант, который вы, возможно, захотите попробовать, - это сохранение существующего статического макета HTML / CSS. С помощью RootPanel.get("id" можно получить ссылку на элемент (по id) в виде панели, в которую можно добавлять виджеты GWT (включая другие панели).
Вы также можете переместить макет в шаблон UiBinder. Преимущества здесь заключаются в минификации и обфускации CSS (несколько UiBinders могут совместно использовать один ресурс CSS)