GWT UIBinder 通过配置xml 进行设计.

有些地方也是摸索着前进.

 

 新建立一个uiBinderTest的工程

 

新建立一个UiBinder 这个是在最新的eclipse google 插件上面才有的.如果没有.

请自己更新eclipse 插件.

 

 

 添加一个名字.

!说明这个输入这个名字后会生成两个文件.

1,XXX.ui.xml

2,XXX.java

 

 

一个 xml 文件和一个java类. xml负责页面的布局.里面可以混写 html 和 GWT 组建代码.

有点像flex .

 

 

运行程序的时候有个问题.button 太小了.不过不是什么大问题接下来就要熟悉下这个ui

 

内部都有什么组件什么属性了..

 

文档不全..之间从gwt jar里面找到了一个.

 

com.google.gwt.user.client.ui.xsd 和 一个

UiBinder.xsd 见附件下载. xsd.zip

两个文件就是定义UiBinder 的xml 文件..

 

如:

 

 

<xs:element
        name="HTMLPanel">

        <!-- Allow mixed content -->
        <xs:complexType
            mixed="true">

            <!--  Allow any children (HTML elements) -->
            <xs:choice
                minOccurs="0"
                maxOccurs="unbounded">
                <xs:any
                    processContents="lax" />
            </xs:choice>

            <xs:attribute
                name="tag"
                type="xs:string" />

            <xs:anyAttribute
                processContents="lax" />
        </xs:complexType>
    </xs:element>

 

 
 这个说的是一个HTMLPanel 面板. 里面有一个属性 tag 是字符的. 并且是一个混合型.可以组合.可以内嵌入其他组件.

 

如:

 

<g:HTMLPanel tag='1111'>
		Hello,
		<g:Button styleName="{style.important}" ui:field="button"/>
	</g:HTMLPanel>

 

 

对于g:Button来说:

 

可以修改成PushButton.

 

 

 

<g:HTMLPanel>
		Hello,
		<g:PushButton  ui:field="button" />
	</g:HTMLPanel>

 

 

 

@UiField
	PushButton button;

 

 

同时也吧java 代码里面的修改了. 

 

插件会同时对xml 和java 类进行校验修改保存的时候比较慢.

 

如果运行错误也会报错

 

 

10:53:32.312 [ERROR] [uibindertest] Unable to load module entry point class com.toeoso.uibinder.test.client.UiBinderTest (see associated exception for details)
com.google.gwt.core.client.JavaScriptException: (TypeError): this.replaceChild is not a function
 fileName: http://localhost:8888
 lineNumber: 56
 stack: ([object HTMLButtonElement],[object HTMLSpanElement])@http://localhost:8888:56
connect("http://localhost:8888/UiBinderTest.html?gwt.codesvr=127.0.0.1:9997","&3@Z%W(re9sz[UUx","127.0.0.1:9997","uibindertest","2.0")@:0
((void 0),"uibindertest","http://localhost:8888/uibindertest/")@http://localhost:8888/uibindertest/hosted.html?uibindertest:264
z()@http://localhost:8888/uibindertest/uibindertest.nocache.js:2
(-10)@http://localhost:8888/uibindertest/uibindertest.nocache.js:9
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:195)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:120)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:507)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:264)
    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
    at com.google.gwt.dom.client.Node$.replaceChild$(Node.java)
    at com.google.gwt.user.client.ui.HTMLPanel.addAndReplaceElement(HTMLPanel.java:120)
    at com.toeoso.uibinder.test.client.UiBinderTest01_UiBinderTest01UiBinderImpl.createAndBindUi(UiBinderTest01_UiBinderTest01UiBinderImpl.java:23)
    at com.toeoso.uibinder.test.client.UiBinderTest01_UiBinderTest01UiBinderImpl.createAndBindUi(UiBinderTest01_UiBinderTest01UiBinderImpl.java:1)
    at com.toeoso.uibinder.test.client.UiBinderTest01.<init>(UiBinderTest01.java:25)
    at com.toeoso.uibinder.test.client.UiBinderTest.onModuleLoad(UiBinderTest.java:9)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)
    at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:369)
    at com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:185)
    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:380)
    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:222)
    at java.lang.Thread.run(Unknown Source)

 

 

绑不上.检查 xml 和java 类. 然后刷新浏览器.这个时候不用重新启动服务器.

 

 

点击 刷新按钮就行.

 

 

 

总之代码是非常少了...继续关注..