如何设计好看的GWT应用程序？

Question

我正在使用普通GWT创建一个Web应用程序(没有诸如GXT之类的包装器).问题是只使用UiBinder很难实现GWT应用程序的良好外观和感觉.我现在的工作流程是:

1. 使用Dreamweaver/Photoshop创建HTML和CSS
2. 将HTML资源放在服务器上并使用GWT的客户端捆绑包获取它们.
3. "将"窗口小部件"注入"HTMLPanel,其中使用服务器中的资源HTML文件初始化.

正如你所看到的,它更像是一种"模板"的做事方式.我的UiBinder几乎是空文件.

我像我一样工作,担心XSS漏洞.所以我想最终将每个HTML文件放入它的UIBinder xml文件中.它必须如此复杂(长)??? 谁能告诉我他们如何只使用UiBinder设法获得好看的GWT应用程序？

我对包括任何GXT,SmartGWT解决方案在内的回应都不感兴趣.

谢谢.

Answer 1

我们的流程非常有效(activegrade.com):

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

你的第三步听起来像是重新发明了UiBinder已经为你做的事情.

我们在这个过程之外做的唯一事情是弄清楚我们将要使用的小部件产生什么样的html.例如,MenuBars会生成<table>s,所以我们说,"嘿,用表格制作原型".FlowPanels <div>,所以我们说,"嘿,请用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集成到活页夹模板中,也可以将其作为外部文件链接.