CODEWITHSUNDEEP
javauser-interfacegwt
code-gijoe
code-gijoe

Reputation: 7244

How to design good looking GWT applications?

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.

Upvotes: 2

Views: 2075

Answers (2)

Riley Lark
Riley Lark

Reputation: 20890

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

Upvotes: 6

Isaac Truett
Isaac Truett

Reputation: 8874

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.

Upvotes: 5

Related Questions