How to combine GWT and Material Design Library w/o Maven?

Question

I was trying to use the MD-Library from Central Maven Repo by just downloading the jar's and just using a normal Java-Project in Eclipse.

From the Central Maven Repo I used the jar gwt-material and since it said during compilation I need MD-jQuery-lib as well, I integrated that jar for gwt-material-jQuery, too.

So following you will find

• gwt.xml: where I inherit all the required libraries for the gwt-project
• the entryPoint-class (Addressbook2) with onModuleLoad()-method
• UIBinder-class, of which an instance should be added in the entryPoint-class
• UIBinder.ui.xml-file where the MatDes-Lib is integrated as resource-field

Sorry in advance for such a huge post. Did not know how to pack it more compact.

So running and compiling this in Eclipse does work now with GWT Development Mode with Jetty, after integrating MatDes-jQuery-Lib, but when I open the address at the local host http://127.0.0.1:8888/Addressbook.html I am just getting an white browser window without content and even can not open the Dev-Tools. Am I missing something in the configuration or is the code just not correct and I have to adjust it?

gwt.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.8.2//EN"
  "http://gwtproject.org/doctype/2.8.2/gwt-module.dtd">
<module rename-to='addressbook'>
  <inherits name='com.google.gwt.user.User'/>
  <inherits name='com.google.gwt.user.theme.clean.Clean'/>
  <inherits name='gwt.material.design.jquery.JQuery'/>
  <inherits name='gwt.material.design.GwtMaterialDesignBasic'/>

  <!-- Specify the paths for translatable code                    -->
  <source path='client'/>
  <source path='shared'/>
  <entry-point class='addressbook.client.Addressbook2'/>
  <!-- allow Super Dev Mode -->
  <add-linker name="xsiframe"/>
  <set-configuration-property name="CssResource.enableGss" value="true" />
  <extend-property name="locale" values="de, en"/>
  <set-property-fallback name="locale" value="en"/>
</module>

EntryPoint-Class

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootLayoutPanel;

import addressbook.client._2view.MainViewUIB;
public class Addressbook2 implements EntryPoint {

    @Override
    public void onModuleLoad() {
        Window.alert("Hello, World!");
        RootLayoutPanel.get().add(new MainViewUIB());
    }
}

MainViewUIB-Class

package addressbook.client._2view;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

import gwt.material.design.client.resources.MaterialResources;

public class MainViewUIB extends Composite {

    private static final MainViewUIBUiBinder uiBinder = GWT.create(MainViewUIBUiBinder.class);

    interface MainViewUIBUiBinder extends UiBinder<Widget, MainViewUIB> {
    }

    public MainViewUIB() {
        initWidget(uiBinder.createAndBindUi(this));
    }

    @UiField(provided = true)
    MaterialResources res;
}

MainViewUI.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:m="urn:import:gwt.material.design.client.ui">
    <ui:with type="gwt.material.design.client.resources.MaterialResources" field="res"></ui:with>
    <m:MaterialPanel>
        <m:MaterialIcon marginTop="120" iconType="POLYMER" iconSize="LARGE"/>
        <m:MaterialLabel text="Hello MD World" fontSize="2em"/>
        <m:MaterialLabel text="Start building now your gwt-material apps." fontSize="0.8em"/>
    </m:MaterialPanel>
</ui:UiBinder>

That is the result I am getting by inspecting the page in chrome I just get one Element on the page:

<iframe id="addressbook" tabindex="-1" style="position: absolute; width: 0px; height: 0px; border: none; left: -1000px; top: -1000px;">
<script src="http://127.0.0.1:9876/addressbook/0A7EA82001E95E9BED1D0ABA0EF89DEF.cache.js"></script>
</iframe>

Answer 1

@UiField(provided = true)
MaterialResources res;

The provided=true means that the .ui.xml doesn't need to create this resource, because you will provide it before calling createAndBind. Failing to do this may cause NullPointerExceptions to happen while trying to make the widget, which would result in no content being visible on this path. However, nothing in your .ui.xml actually seems to use res (except for being declared in the ui:with, which is like declaring it as a variable), so you can probably remove both the field and the ui:with pointing at it.