Question

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.

Answer 1

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: