如何实现GXT外观？

Question

我想在Sencha中使用外观模式。 我创建了 TestApp 类：

public class TestApp implements EntryPoint {
    public void onModuleLoad() {
        AppearancePushButton button = new AppearancePushButton("Hi");
        button.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                Info.display("Title", "Message");
            }
        });

        RootPanel.get().add(button);
    }
}

AppearancePushButton 类是：

public class AppearancePushButton extends Component {
    private final Appearance appearance;

    public AppearancePushButton(String text) {
        this(text, (Appearance) GWT.create(DefaultAppearance.class));
    }

    @SuppressWarnings("deprecation")
    public AppearancePushButton(String text, Appearance appearance) {
        this.appearance = appearance;
        SafeHtmlBuilder sb = new SafeHtmlBuilder();

        this.appearance.render(sb);

        setElement(XDOM.create(sb.toSafeHtml()));
        setText(text);
        sinkEvents(Event.ONCLICK);
    }

    public HandlerRegistration addClickHandler (ClickHandler handler) {
        return addDomHandler(handler, ClickEvent.getType());
    }

    public void setText(String text) {
        appearance.onUpdateText(getElement(), text);
    }

    public void setImage(Image icon) {
        appearance.onUpdateIcon(getElement(), icon);
    }
}

DefaultAppearance 类是：

public class DefaultAppearance implements Appearance {
    public interface Template extends XTemplates {
        @XTemplate(source = "DefaultAppearance.html")
        SafeHtml template(Style style);
    }

    public interface Style extends CssResource {
        String testButton();
        String testButtonImage();
        String testButtonText();
    }

    private final Style style;
    private final Template template;

    public interface Resources extends ClientBundle {
        @Source("TestApp.css")
        Style style();
    }

    public DefaultAppearance() {
        this((Resources) GWT.create(Resources.class));
    }

    public DefaultAppearance(Resources resources) {
        this.style = resources.style();
        this.style.ensureInjected();
        this.template = GWT.create(Template.class);
    }

    @Override
    public void render(SafeHtmlBuilder sb) {
        sb.append(template.template(style));
    }

    @Override
    public void onUpdateText(XElement parent, String text) {
        XElement element = parent.selectNode("." + style.testButtonText());
        element.setInnerText(text);
    }

    @Override
    public void onUpdateIcon(XElement parent, Image icon) {
        XElement element = parent.selectNode("." + style.testButtonImage());
        element.removeChildren();
        element.appendChild(icon.getElement());
    }
}

和外观界面是：

public interface Appearance {
    void render(SafeHtmlBuilder sb);
    void onUpdateText(XElement parent, String text);
    void onUpdateIcon(XElement parent, Image icon);
}

和 CSS 文件是：

.testButton {
    border: 1px solid navy;
    font-size: 12px;
    padding: 4px;
}

.testButtonImage {
    float: left;
}

.testButtonText {
    text-align: center;
}

如何修复它才能开始工作？