如何设计美观的GWT应用程序?

发布于 2024-11-06 10:40:36 字数 507 浏览 1 评论 0原文

我正在使用纯 GWT(没有 GXT 等包装器)创建一个 Web 应用程序。问题是好看的外观和漂亮的外观。仅使用 UiBinder 很难实现 GWT 应用程序的感觉。我现在的工作流程是:

  1. 使用 Dreamweaver/Photoshop 创建 HTML 和 CSS
  2. 将 HTML 资源放在服务器上并使用 GWT 的 Client Bundle 获取它们。
  3. 将小部件“注入”到 HTMLPanel 中,该 HTMLPanel 使用服务器中的资源 HTML 文件进行初始化。

正如您所看到的,它更像是一种“模板”做事方式。我的 UiBinders 几乎是空文件。

我的工作方式很担心 XSS 漏洞。所以我正在考虑最终将每个 HTML 文件放入其 UIBinder xml 文件中。有必要这么复杂(长)吗???谁能告诉我他们是如何仅使用 UiBinder 获得美观的 GWT 应用程序的?

我对包括任何 GXT、SmartGWT 解决方案在内的回复不感兴趣。

谢谢。

I'm creating a Web app using plain GWT (no wrappers such as GXT). The problem is that a good look & feel for a GWT app is very hard to achieve using only UiBinder. My workflow for now is:

  1. Create HTML and CSS with Dreamweaver/Photoshop
  2. Put the HTML resources on the server and fetch them using GWT's Client Bundle.
  3. "Inject" widgets into HTMLPanels who where initialized with the resource HTML files from the server.

As you can see it's more of a "template" way of doing things. My UiBinders are almost empty files though.

I'm concerned about XSS holes by working as I do. So I was thinking of eventually putting each HTML file into it's UIBinder xml file. Does it have to be so complicated (long)??? Can anyone tell me how they managed to get good looking GWT apps using only UiBinder?

I'm not interested in responses including any GXT, SmartGWT solutions.

Thank you.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

梦亿 2024-11-13 10:40:36

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

  1. Photoshop -> Html + CSS + 图片
  2. Html -> UiBinder; CSS + 图片 -> ClientBundle

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

我们在这个过程之外做的唯一一件事就是弄清楚我们将要使用的小部件会生成什么样的 html。例如,MenuBars 制作 ,所以我们说,“嘿,用表格制作原型。” FlowPanel 生成

,所以我们说,“嘿,请用 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> 

创建:

在此处输入图像描述

Our process, which works great (activegrade.com):

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

Your third step sounds like it's re-inventing what UiBinder already does for you.

The only thing we do outside this process is figure out what kind of html is produced by the widgets we're going to use. For instance, MenuBars make <table>s, so we say, "Hey, make the prototype out of tables." FlowPanels make <div>s, so we say, "Hey, please make the prototype out of divs." We got burned once and had to re-do the html.

Addendum example:

<!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> 

Creates:

enter image description here

独行侠 2024-11-13 10:40:36

为什么要跳过这么多圈?编写 GWT 界面,查看它生成的标记,然后编写 CSS 使其看起来像您想要的那样。您可以将完成的 CSS 集成到活页夹模板中,也可以将其链接为外部文件。

Why jump through so many hoops? Write the GWT interface, look at the markup it produces, then write CSS to make it look the way you want. You can either integrate the finished CSS into the binder templates or just link it as an external file.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文