Как создавать красивые приложения GWT?

Question

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

1. Создание HTML и CSS с Dreamweaver / Photoshop
2. Поместите ресурсы HTML на сервер и получите их, используя GWT Client Bundle.
3. «Внедрить» виджеты в HTMLPanels, которые были инициализированы с помощью HTML-файлов ресурса с сервера.

Как видите, это скорее шаблонный способ ведения дел. Мои UiBinder - почти пустые файлы.

Я обеспокоен дырами в XSS, работая так, как я. Поэтому я подумывал о том, чтобы в конечном итоге поместить каждый HTML-файл в его XML-файл UIBinder. Это должно быть так сложно (долго) ??? Может кто-нибудь сказать мне, как им удалось получить хорошо выглядящие приложения GWT, используя только UiBinder?

Меня не интересуют ответы, включая любые решения GXT, SmartGWT.

Спасибо.

Answer 1

Наш процесс, который прекрасно работает (activegrade.com):

1. Photoshop -> Html + Css + Images
2. Html -> UiBinder;Css + Images -> ClientBundle

Ваш третий шаг звучит так, как будто он заново изобретает то, что UiBinder уже делает для вас.

Единственное, что мы делаем вне этого процесса, это выясним, какого родаhtml создается виджетами, которые мы собираемся использовать.Например, MenuBars делают <table> s, поэтому мы говорим: «Эй, сделайте прототип из таблиц».FlowPanel s делают <div> s, поэтому мы говорим: «Эй, пожалуйста, сделайте прототип из div».Один раз нас обожгли, и нам пришлось заново выполнить 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">
    <ui:with field="resources"
        type="com.activegrade.client.teacher.dialogfillers.standarddetails.StandardDetail.StandardDetailResources" />
    <ui:with field="dialogresources"
        type="com.activegrade.client.resources.DialogResources" />
    <ui:style>

    </ui:style>
    <g:HTMLPanel
        styleName="{resources.css.aNameIChose} {dialogresources.css.agwForm}">
        <div class="{dialogresources.css.agwFormBlock}">
            <label>Name</label>
            <g:TextBox ui:field="nameText" />
        </div>
        <div class="{dialogresources.css.agwFormBlock}">
            <label>Description</label>
            <g:TextArea ui:field="descriptionText" />
        </div>
        <div class="{dialogresources.css.agwFormBlockLeft}">
            <label>Grading Scale</label>
            <g:ListBox ui:field="scaleSelector" />
        </div>
        <div class="{dialogresources.css.agwFormBlockRight}">
            <label>Calculation Method</label>
            <g:ListBox ui:field="calculationMethodSelector" />
        </div>
        <div class="{dialogresources.css.agwFormBlock}">
            <label>Tags</label>
            <div class="{resources.css.tagdiv}">
                <g:FlowPanel ui:field="panelForTags" />
            </div>
        </div>
        <g:Button ui:field="addTagsButton">Add Tags</g:Button>
    </g:HTMLPanel>
</ui:UiBinder> 

Создает:

Answer 2

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