Integrate Htmls into GWT

问题

We have a web application that its UI is based on GWT. We are pretty satisfied from the technology, but we have one major problem: We get html files from our designer, and it takes a lot of time to integrate them into our GWT code.

Is there a quick way or rules to do that?

For instance, I would like to take the html, put it almost "as is" in a ui.xml file, and then start binding the components to UiBinder fields. What is the quickest way to do that? What should I do with the CSS and JS files that I get?

I need some guidelines to make this conversion, so it will be quick & easy.

回答1:

We have the same problem. It might be hard for a designer to get used to GWT widgets. But he'll have to forget about making HTML proof-of-concepts and using GWT directly.

We didn't overcame the difficulty. As a result, many GWT features are under-used (like CSSResources, or GWT-Bootstrap layout capabilities).

I would advise to have him learn the xml of GWT widget libraries.

You can also start by using GWT Designer. This way he can still do the design, learn the XML bit by bit, and you can still work on wiring the components.

Of course it is a slow process. People don't change old habits instantly.

回答2:

Errai seems to fit your requirements.

Basically is uses regular HTML5 templates, binded to GWT logic.

"Create standard conform HTML5 templates or use existing HTML and CSS files to design your web and mobile applications."

http://errai.github.io/

Here is an example of a sign-in page:

<!DOCTYPE html>
<link rel=stylesheet href="css/TodoList.css">
<div data-field="main">
  <h1>Get it done with Errai.</h1>
  <div class=form>
    <p class=error data-field=loginError>
      Login failed. Please check that your email address and password were entered correctly.
    </p>
    <input type=text data-field=username placeholder="Email">
    <input type=password data-field=password placeholder="Password">
    <button data-field=loginButton>Sign In</button>
    <p>New here? <a href="SignupPage.html" data-field="signupLink">Sign up in seconds!</a></p>
  </div>
</div>

source

(p.s. I've never used it, yet)

来源：https://stackoverflow.com/questions/18749314/integrate-htmls-into-gwt

标签

gwt

uibinder

gwt2