Why does eclipse GWT designer for uibinder generate exception because of uifield

Question

I'm fairly new to GWT App development, so the learning curve hasn't really straightened out a whole lot yet; however, it seems to me the following shouldn't be causing a problem.

I'm working from example code off the net to learn more. I'm using Eclipse Kepler and GWT designer 3.1.2.

The App works, minus a small error in the styling references in the Login.ui.xml which I had fixed but reversed out trying to find how I broke this.

I'm getting the following error when I use design mode on Login.ui.xml.

Unable to create @UiField(provided=true).
You are attempting to use @UiField(provided=true) for (com.learn.client.LoginResources) res, however GWT Designer was not able to create instance of requested object. This can be caused by one of the following reasons: 

Type is interface and you've not provided *.wbp-component.xml description with UiBinder.createInstance script. 
GWT Designer attempted to use shortest constructor of type (such as default constructor), but it caused exception. 


Show stack trace. 
Hide stack trace. 

Stack trace:
org.eclipse.wb.internal.core.utils.exception.DesignerException: 4508 (Unable to create @UiField(provided=true).). com.learn.client.LoginResources res
    at com.google.gdt.eclipse.designer.uibinder.parser.UiBinderParser.createProvidedField(UiBinderParser.java:291)
    at com.google.gdt.eclipse.designer.uibinder.parser.UiBinderParser$2.invoke(UiBinderParser.java:182)
    at com.sun.proxy.$Proxy670.provideField(Unknown Source)

My sources are as follows:

Login.ui.xml
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:gwt="urn:import:com.google.gwt.user.client.ui"
    xmlns:res="urn:with:com.learn.client.LoginResources">
    <ui:with field="res" type="com.learn.client.LoginResources" />
   <gwt:HTMLPanel>
      <div align="center">
         <gwt:VerticalPanel res:styleName="style.background">
            <gwt:Label text="Login" res:styleName="style.blackText" />
            <gwt:TextBox ui:field="loginBox" res:styleName="style.box" />
            <gwt:Label text="Password" res:styleName="style.blackText" />
            <gwt:PasswordTextBox ui:field="passwordBox"  res:styleName="style.box" />
            <gwt:HorizontalPanel verticalAlignment="middle">
               <gwt:Button ui:field="buttonSubmit" text="Submit" res:styleName="style.loginButton" />
               <gwt:CheckBox ui:field="myCheckBox" />
               <gwt:Label ui:field="myLabel" text="Remember me" res:styleName="style.blackText" />
            </gwt:HorizontalPanel>
            <gwt:Label ui:field="completionLabel1" res:styleName="style.blackText" />
            <gwt:Label ui:field="completionLabel2" res:styleName="style.blackText" />
         </gwt:VerticalPanel>
      </div>
   </gwt:HTMLPanel>
</ui:UiBinder> 

Login.java
public class Login extends Composite {
       private static LoginUiBinder uiBinder = GWT.create(LoginUiBinder.class);
       private Boolean tooShort = false;

       @UiField(provided=true) TextBox loginBox;
       @UiField TextBox passwordBox;
       @UiField Label completionLabel1;
       @UiField Label completionLabel2;
       @UiField(provided=true) final LoginResources res;

       /*
       * @UiTemplate is not mandatory but allows multiple XML templates
       * to be used for the same widget. 
       * Default file loaded will be <class-name>.ui.xml
       */
       @UiTemplate("Login.ui.xml")
        interface LoginUiBinder extends UiBinder<Widget, Login> {
       }

       public Login() {
           loginBox = new TextBox();
          this.res = GWT.create(LoginResources.class);
          res.style().ensureInjected();
          initWidget(uiBinder.createAndBindUi(this));
       }
        :
        :
        Handlers
        :
        :
    }

nResources.java
public interface LoginResources extends ClientBundle {
       /**
       * Sample CssResource.
       */
       public interface MyCss extends CssResource {
          String blackText();

          String redText();

          String loginButton();

          String box();

          String background();
       }

       @Source("LoginStyle.css")
       MyCss style();
}

LoginStyle.css
.blackText {
   font-family: Arial, Sans-serif;
   color: #000000;
   font-size: 11px;
   text-align: left;
}

.redText {
   font-family: Arial, Sans-serif;
   color: #ff0000;
   font-size: 11px;
   text-align: left;
}

.loginButton {
   border: 1px solid #3399DD;
   color: #FFFFFF;
   background: #555555;
   font-size: 11px;
   font-weight: bold;
   margin: 0 5px 0 0;
   padding: 4px 10px 5px;
   text-shadow: 0 -1px 0 #3399DD;
}

.box {
   border: 1px solid #AACCEE;
   display: block;
   font-size: 12px;
   margin: 0 0 5px;
   padding: 3px;
   width: 203px;
}

.background {
   background-color: #999999;
   border: 1px none transparent;
   color: #000000;
   font-size: 11px;
   margin-left: -8px;
   margin-top: 5px;
   padding: 6px;
}

Answer 1

It seems designer does not support provided fields when they need a generator.

I would include the LoginStyle.css stuff in the Login.ui.xml

Something like this:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'> 
    <ui:style>
          .container {
          }
        </ui:style>
    <g:FlowPanel ui:field="container" addStyleNames="{style.container}">
    </g:FlowPanel>
</ui:UiBinder>