论坛首页 → Web前端技术论坛 →

代码更加精简. 漂亮 GWT 2.0 UiBinder 研究.如此强大.

浏览 13342 次
锁定老帖子 主题：代码更加精简. 漂亮 GWT 2.0 UiBinder 研究.如此强大.
精华帖 (0) :: 良好帖 (1) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • toeo
  • 等级: 一星会员
  • 性别:
  • 文章: 144
  • 积分: 130
  • 来自: 北京
   发表时间：2009-12-17  
GWT

以前曾写了一个用 GWT 1.7 的一个 全部的组建的测试.

 

现在花了 2 天时间将这些代码 改成了 UiBinder 的格式.

 

代码更加 精简.而且更加的漂亮.可以做很复杂的应用.

 

将布局 组建和业务逻辑 分开.

 

UiBinderTest01.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:g="urn:import:com.google.gwt.user.client.ui">
	<g:HTMLPanel>
		PushButton测试.
		<br></br>
		<g:PushButton text="PushButton测试." width="150px" height="25px"
			ui:field="button_0" />

		Button测试.
		<br></br>
		<g:Button text="Button测试." width="150px" height="25px"
			ui:field="button1" />
		<g:Button text="Button测试." width="150px" height="25px"
			ui:field="button2" />

		CheckBox测试
		<br></br>
		<g:CheckBox text="CheckBox测试" ui:field="checkBox_0" />
		<g:CheckBox text="CheckBox测试" ui:field="checkBox_1" />

		RadioButton测试
		<br></br>
		<g:RadioButton name="abc" text="CheckBox测试" ui:field="radioButton_0" />
		<g:RadioButton name="abc" text="CheckBox测试" ui:field="radioButton_1" />
		<g:RadioButton name="abc" text="CheckBox测试" ui:field="radioButton_2" />

		<br></br>
		TextBox测试
		<br></br>
		<g:TextBox text="TextBox测试" ui:field="textBox_0" />
		<g:Label ui:field="label_0" />

		<br></br>
		ListBox测试
		<br></br>
		<g:ListBox ui:field="listBox_0" width="150px" />
		<g:ListBox ui:field="listBox_1" width="150px" />

		<br></br>
		ListBox测试
		<br></br>
		<g:Frame url="http://www.google.com" ui:field="frame_0" width="300px"
			height="100px" />

		<br></br>
		RichTextArea测试
		<br></br>
		<g:RichTextArea ui:field="richTextArea_0" width="300px"
			height="100px" />

		<br></br>
		MenuBar测试
		<br></br>
		<g:MenuBar ui:field="menuBar_0" width="500px" />

		<br></br>
		TabBar测试
		<br></br>
		<g:TabBar ui:field="tabBar_0" width="300px" />
		<g:Label text="请点击TabBar." ui:field="tabBarLabel_0" width="300px" />

		<br></br>
		Grid测试
		<br></br>
		<g:Grid borderWidth="1" cellPadding="1" cellSpacing="1"
			ui:field="grid_0" width="300px" height="200px">
		</g:Grid>

		<br></br>
		FlexTable测试
		<br></br>
		<g:FlexTable borderWidth="1" cellPadding="1" cellSpacing="1"
			ui:field="flexTable_0" width="100%" height="100px" />

		<br></br>
		Tree测试
		<br></br>
		<g:Tree ui:field="tree_0" width="300px" height="200px" />

		<br></br>
		Image测试
		<br></br>
		<g:Image url="googleapple.jpg" width="300px" height="100px" />

		<br></br>
		ScrollPanel测试
		<br></br>
		<g:ScrollPanel ui:field="scrollPanel_0" width="300px"
			height="100px" />

		<br></br>
		PopupPanel测试
		<br></br>
		<g:Button text="PopupPanel测试" ui:field="popupPanelButton"
			width="150px" height="25px" />

		<br></br>
		DialogBox测试
		<br></br>
		<g:Button text="DialogBox测试" ui:field="dialogBoxButton"
			width="150px" height="25px" />

		<br></br>
		DockPanel测试
		<br></br>
		<g:DockPanel ui:field="dockPanel_0" width="300px" height="200px">
		</g:DockPanel>


		<br></br>
		HorizontalPanel测试
		<br></br>
		<g:HorizontalPanel borderWidth="1">
			<g:Button text="DialogBox测试" width="150px" height="25px" />
			<g:Button text="DialogBox测试" width="150px" height="25px" />
			<g:Button text="DialogBox测试" width="150px" height="25px" />
			<g:Button text="DialogBox测试" width="150px" height="25px" />
		</g:HorizontalPanel>

		<br></br>
		VerticalPanel测试
		<br></br>
		<g:VerticalPanel borderWidth="1">
			<g:Button text="DialogBox测试" width="150px" height="25px" />
			<g:Button text="DialogBox测试" width="150px" height="25px" />
			<g:Button text="DialogBox测试" width="150px" height="25px" />
			<g:Button text="DialogBox测试" width="150px" height="25px" />
		</g:VerticalPanel>

		<br></br>
		FlowPanel测试
		<br></br>
		<g:FlowPanel >
			<g:Button text="DialogBox测试" width="150px" height="25px" />
			<g:Button text="DialogBox测试" width="150px" height="25px" />
			<g:Button text="DialogBox测试" width="150px" height="25px" />
		</g:FlowPanel>

		<br></br>
		StackPanel测试
		<br></br>
		<g:StackPanel ui:field="stackPanel_0">
			<g:HTML>测试001</g:HTML>
			<g:HTML>测试002</g:HTML>
			<g:HTML>测试003</g:HTML>
			<g:HTML>测试004</g:HTML>
		</g:StackPanel>
		
		<br></br>
		DeckPanel测试
		<br></br>
		<g:DeckPanel ui:field="deckPanel_0" width="300px" height="200px">
			<g:HTML><font color='red'>testDeck001</font></g:HTML>
			<g:HTML><font color='blue'>testDeck001</font></g:HTML>
			<g:HTML><font color='yellow'>testDeck001</font></g:HTML>
			<g:HTML><font color='green'>testDeck001</font></g:HTML>
		</g:DeckPanel>
		<g:Button ui:field="deckPanelButton_0" text="DeckPanel测试" width="150px" height="25px" />
		
		<br></br>
		DisclosurePanel测试
		<br></br>
		[<g:DisclosurePanel>
			<g:HTML>测试001</g:HTML>
		</g:DisclosurePanel>]
		
		<br></br>
		TabPanel测试
		<br></br>
		<g:TabPanel ui:field="tabPanel_0" width="300px" height="200px">	 
		</g:TabPanel>
		
		<br></br>
		MultiWordSuggestOracle测试
		<br></br>
		<g:SuggestBox ui:field="suggestBox_0"></g:SuggestBox>
		
		<br></br>
		HorizontalSplitPanel测试
		<br></br>
		<g:HorizontalSplitPanel width="300px" height="200px">
			<g:HTML>测试左侧</g:HTML>
			<g:HTML>测试右侧</g:HTML>
		</g:HorizontalSplitPanel>
		
		<br></br>
		VerticalSplitPanel测试
		<br></br>
		<g:VerticalSplitPanel width="300px" height="200px">
			<g:HTML>测试上面</g:HTML>
			<g:HTML>测试下面</g:HTML>
		</g:VerticalSplitPanel>


	</g:HTMLPanel>

</ui:UiBinder>

 

UiBinderTest01.java

代码:

 

package com.toeoso.uibinder.test.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.event.logical.shared.CloseEvent;
import com.google.gwt.event.logical.shared.OpenEvent;
import com.google.gwt.event.logical.shared.SelectionEvent;
import com.google.gwt.event.logical.shared.SelectionHandler;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiFactory;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.Random;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.DeckPanel;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.Frame;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.ListBox;
import com.google.gwt.user.client.ui.MenuBar;
import com.google.gwt.user.client.ui.MultiWordSuggestOracle;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.PushButton;
import com.google.gwt.user.client.ui.RichTextArea;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.ScrollPanel;
import com.google.gwt.user.client.ui.StackPanel;
import com.google.gwt.user.client.ui.SuggestBox;
import com.google.gwt.user.client.ui.TabBar;
import com.google.gwt.user.client.ui.TabPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Tree;
import com.google.gwt.user.client.ui.TreeItem;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;

public class UiBinderTest01 extends Composite {

	private static UiBinderTest01UiBinder uiBinder = GWT
			.create(UiBinderTest01UiBinder.class);

	interface UiBinderTest01UiBinder extends UiBinder<Widget, UiBinderTest01> {
	}

	public interface Resources extends ClientBundle {
		@Source("googleapple.jpg")
		ImageResource googleApple();
	}

	public UiBinderTest01() {
		initWidget(uiBinder.createAndBindUi(this));
		/* 设置输入框右对齐. */
		textBox_0.setTextAlignment(TextBox.ALIGN_RIGHT);
		/** 这个函数不可以放类体里面. */
		textBox_0.addKeyUpHandler(new KeyUpHandler() {
			public void onKeyUp(KeyUpEvent event) {
				// 说明.用changeListener的时候.在光标未移出的时候不会改变.
				String temp = textBox_0.getText();
				System.out.println(temp);
				label_0.setText(temp);
			}
		});

		listBox_0.setVisibleItemCount(6);// 设置成可选数目是6.
		listBox_1.setVisibleItemCount(6);// 设置成可选数目是6.
		listBox_0.addItem("001");
		listBox_0.addItem("002");
		listBox_0.addItem("003");
		listBox_0.addItem("004");

		richTextArea_0.setHTML("<font color='red'>abc</font>");

		Command cmd = new Command() {
			public void execute() {
				Window.alert("点击Menu.");
			}
		};
		MenuBar bar01 = new MenuBar(true);
		// 设置true的时候.显示竖向菜单.
		bar01.addItem("001", cmd);
		bar01.addItem("002", cmd);
		bar01.addItem("003", (new MenuBar(true).addItem("子菜单.", cmd)
				.getParentMenu()));

		// 主菜单显示.
		menuBar_0.addItem("File", bar01);
		menuBar_0.addItem("Save", bar01);
		menuBar_0.addItem("Exit", bar01);

		final String[] tabBarLabelText = { "这个是第1个TabBar.", "这个是第2个TabBar.",
				"这个是第3个TabBar.", "这个是新添加的第1个TabBar.", "这个是新添加的第2个TabBar." };
		tabBar_0.addTab("这个是第1个TabBar.");
		tabBar_0.addTab("这个是第2个TabBar.");
		tabBar_0.addTab("这个是第3个TabBar.");
		// 设置一个数组变量存储值.这里不可以是一个int型.这样会改变不了值.
		tabBar_0.addSelectionHandler(new SelectionHandler<Integer>() {
			public void onSelection(SelectionEvent<Integer> event) {
				System.out.println(tabBar_0.getSelectedTab());
				tabBarLabel_0
						.setText(tabBarLabelText[tabBar_0.getSelectedTab()]);
			}
		});

		// 设置网格的数量.3X3的网格.
		grid_0.setWidget(0, 0, new HTML("hello!"));
		grid_0.setWidget(1, 1, new HTML("hello!"));
		grid_0.setWidget(2, 2, new HTML("hello!"));
		grid_0.setWidget(1, 2, new HTML("hello!"));
		// 插入测试数据.数据是从(0,0)开始到(2,2)结束.
		// Grid测试结束.

		/** 对flexTable进行数据添加. */
		for (int i = 0; i < 16; i++) {
			flexTable_0.setText(i / 4, i % 4, "id:" + i);
		}

		TreeItem treeItem1 = new TreeItem("01");
		treeItem1.addItem(new TreeItem("sub01"));
		TreeItem treeItem2 = new TreeItem("02");
		treeItem2.addItem(new TreeItem("sub02"));

		TreeItem treeItem3 = new TreeItem("03");
		TreeItem treeItem3_1 = new TreeItem("03_1");
		treeItem3.addItem(treeItem3_1);
		TreeItem treeItem3_2 = new TreeItem("03_2");
		treeItem3_1.addItem(treeItem3_2);
		TreeItem treeItem3_3 = new TreeItem("03_3");
		treeItem3_2.addItem(treeItem3_3);

		tree_0.addItem(treeItem1);
		tree_0.addItem(treeItem2);
		tree_0.addItem(treeItem3);

		// Resources res = GWT.create(Resources.class);
		// image_0.setResource(res.googleApple());

		String strText = "";
		for (int i = 0; i < 100; i++) {
			strText += "ABCDEFGHI";
		}
		// scrollPanel_0.setSize("100px", "100px");
		scrollPanel_0.setWidget(new HTML(strText));
		scrollPanel_0.setVisible(true);
		
		dockPanel_0.add(new HTML("NORTH"), DockPanel.NORTH);
		dockPanel_0.add(new HTML("SOUTH"), DockPanel.SOUTH);
		dockPanel_0.add(new HTML("WEST"), DockPanel.WEST);
		dockPanel_0.add(new HTML("EAST"), DockPanel.EAST);
		dockPanel_0.add(new HTML("CENTER"), DockPanel.CENTER);
		dockPanel_0.setBorderWidth(1);
		
		stackPanel_0.setStackText(0, "stackPanel 0");
		stackPanel_0.setStackText(1, "stackPanel 1");
		stackPanel_0.setStackText(2, "stackPanel 2");
		stackPanel_0.setStackText(3, "stackPanel 3");
		
		deckPanel_0.showWidget(0);
		
		tabPanel_0.add(new HTML("TabPanel001Content"), "001");
		tabPanel_0.add(new HTML("TabPanel002Content"), "002");
		tabPanel_0.add(new HTML("TabPanel003Content"), "003");
		tabPanel_0.selectTab(0);
		
		
	}

	@UiField
	PushButton button_0;

	@UiHandler("button_0")
	void onClick_0(ClickEvent e) {
		Window.alert("Push It !");
	}

	@UiField
	CheckBox checkBox_0;

	@UiHandler( { "checkBox_0", "checkBox_0" })
	void onClick_00(ClickEvent e) {
		Window.alert("Checked It 1!");
		if (checkBox_0.getValue()) {
			checkBox_1.setValue(false);
		} else {
			checkBox_1.setValue(true);
		}
		if (checkBox_1.getValue()) {
			checkBox_0.setValue(false);
		} else {
			checkBox_0.setValue(true);
		}
	}

	@UiField
	CheckBox checkBox_1;

	/** 测试多重绑定. */
	@UiHandler("checkBox_1")
	void onClick_11(ClickEvent e) {
		Window.alert("CheckBox It 2!");
	}

	@UiField
	CheckBox radioButton_0;
	@UiField
	CheckBox radioButton_1;
	@UiField
	CheckBox radioButton_2;

	/** 测试一个函数绑两个组件. */
	@UiHandler( { "radioButton_0", "radioButton_1", "radioButton_2" })
	void onClick_2(ClickEvent e) {
		Window.alert("CheckBox It 2!");
	}

	@UiField
	TextBox textBox_0;
	@UiField
	Label label_0;

	@UiField
	ListBox listBox_0;
	@UiField
	ListBox listBox_1;

	@UiHandler("listBox_0")
	void listBoxOnClick(ClickEvent event) {
		int id = listBox_0.getSelectedIndex();
		listBox_1.clear();// 清除所有选项.
		for (int i = 0; i < 4; i++) {
			listBox_1.addItem(id + "city:\t" + i);
		}
	}

	@UiField
	Frame frame_0;

	@UiField
	RichTextArea richTextArea_0;

	@UiField
	MenuBar menuBar_0;

	@UiField
	TabBar tabBar_0;

	@UiField
	Label tabBarLabel_0;

	@UiField
	Grid grid_0;

	@UiFactory
	public Grid initGrid() {
		return new Grid(3, 3);
	}

	@UiHandler("grid_0")
	void onClick_3(ClickEvent e) {
		// 获得行.// 获得列.
		String temp = "点击了:[" + grid_0.getCellForEvent(e).getRowIndex() + ","
				+ grid_0.getCellForEvent(e).getCellIndex() + "]";
		System.out.println(temp);
	}

	@UiField
	FlexTable flexTable_0;

	@UiHandler("flexTable_0")
	void onClick_4(ClickEvent e) {
		// 获得行.// 获得列.
		String temp = "点击了:[" + flexTable_0.getCellForEvent(e).getRowIndex()
				+ "," + flexTable_0.getCellForEvent(e).getCellIndex() + "]";
		System.out.println(temp);
		Window.alert(temp);
	}

	@UiField
	Tree tree_0;

	@UiHandler("tree_0")
	void treeOnOpen(OpenEvent<TreeItem> event) {
		System.out.println("tree onOpen:\t" + event.getTarget().getHTML());
	}

	@UiHandler("tree_0")
	public void treeOnClose(CloseEvent<TreeItem> event) {
		System.out.println("tree onClose:\t" + event.getTarget().getHTML());
	}

	@UiHandler("tree_0")
	public void treeOnSelection(SelectionEvent<TreeItem> event) {
		System.out.println("tree onSelection:\t"
				+ tree_0.getSelectedItem().getHTML());
	}

	@UiField
	ScrollPanel scrollPanel_0;

	@UiField
	Button popupPanelButton;

	@UiHandler("popupPanelButton")
	public void popupPanelButtonOnClick(ClickEvent e) {
		
		final PopupPanel popupPanel = new PopupPanel();
		Button closeButton = new Button("close");
		closeButton.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				popupPanel.hide();
			}
		});
		VerticalPanel verticalPanel = new VerticalPanel();
		verticalPanel.add(new HTML("test Popup."));
		verticalPanel.add(closeButton);
		popupPanel.add(verticalPanel);
		popupPanel.center();
	}
	
	@UiField
	Button dialogBoxButton;
	
	@UiHandler("dialogBoxButton")
	public void dialogBoxButtonOnClick(ClickEvent e) {
		TestDialogBox_01 testDialogBox_01 = new TestDialogBox_01();
		testDialogBox_01.center();
		testDialogBox_01.show();
	}
	
	@UiField
	DockPanel dockPanel_0;
	
	@UiField
	StackPanel stackPanel_0;
	
	@UiField
	DeckPanel deckPanel_0;
	
	@UiField
	Button deckPanelButton_0;
	
	@UiHandler("deckPanelButton_0")
	public void onClick_5(ClickEvent event) {
		int showId = (deckPanel_0.getVisibleWidget() +1 ) % 4;
		deckPanel_0.showWidget(showId);
	}
	
	@UiField
	TabPanel tabPanel_0;
	
	@UiField
	SuggestBox suggestBox_0;
	
	@UiFactory
	public SuggestBox initSuggestBox() {
		MultiWordSuggestOracle multiWordSuggestOracle = new MultiWordSuggestOracle();
		for (int i = 0; i < 100; i++) {
			// com.google.gwt.user.client.Random静态方法.
			multiWordSuggestOracle.add(Random.nextInt() + "");
		}
		return new SuggestBox(multiWordSuggestOracle);
	}
	
}

 

 

界面效果:






 

工程源代码见附件.

 

 

遇到的错误:

19:30:41.703 [ERROR] [uibindertest] In <g:ListBox text='TextBox测试' ui:field='listBox_0'>, class ListBox has no appropriate setText() method
 <g:ListBox 没有 text 属性.
只要在组件里面有set方法的都可以进行标签的配置.

这个是动态的.配置.如:

setUrl有的话,就可以写.

<g:Frame url="http://www.google.com" ui:field="frame_0" width="300px" height="100px"/>


20:44:52.640 [ERROR] [uibindertest] Unable to load module entry point class com.toeoso.uibinder.test.client.UiBinderTest (see associated exception for details)
java.lang.IndexOutOfBoundsException: Row index: 0, Row size: 0
    at com.google.gwt.user.client.ui.Grid.prepareRow(Grid.java:306)
    at com.google.gwt.user.client.ui.Grid.prepareCell(Grid.java:251)
    at com.google.gwt.user.client.ui.HTMLTable.setWidget(HTMLTable.java:1056)
    at com.toeoso.uibinder.test.client.UiBinderTest01.<init>(UiBinderTest01.java:111)
    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)
	




Marks a constructor that may be used as an alternative to a widget's zero args construtor in a UiBinder template. The parameter names of the constructor may be filled as xml element attribute values.


08:13:31.250 [ERROR] [uibindertest] In <g:DockPanel height='25px' text='DialogBox测试' ui:field='dockPanel_0' width='150px'>, class DockPanel has no appropriate setText() method
<g:north size='5'>
				<g:Label>Top</g:Label>
			</g:north>
			<g:center>
				<g:Label>Body</g:Label>
			</g:center>
			<g:west size='192'>
				<g:HTML>
					<ul>
						<li>Sidebar</li>
						<li>Sidebar</li>
						<li>Sidebar</li>
					</ul>
				</g:HTML>
			</g:west>

08:14:51.328 [ERROR] [uibindertest] Uncaught exception escaped
com.google.gwt.core.client.JavaScriptException: (TypeError): boolean is not a function
 stack: TypeError: boolean is not a function
    at [object Object].CALL_NON_FUNCTION (native)
    at unknown source
    at unknown source
    at __gwt_jsInvoke (http://localhost:8888/uibindertest/hosted.html?uibindertest:70:34)
    at eval at eval (native)
    at unknown source
    at __gwt_jsInvoke (http://localhost:8888/uibindertest/hosted.html?uibindertest:70:34)
    at eval at eval (native)
    at unknown source
    at eval at eval (native)
 type: called_non_callable
 arguments: boolean
 __gwt_ObjectId: 580
    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.core.client.impl.Impl.apply(Impl.java)
    at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:188)
    at sun.reflect.GeneratedMethodAccessor9.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:157)
    at com.google.gwt.dev.shell.BrowserChannel.reactToMessagesWhileWaitingForReturn(BrowserChannel.java:1713)
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:165)
    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.core.client.impl.Impl.apply(Impl.java)
    at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:188)
    at sun.reflect.GeneratedMethodAccessor9.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:157)
    at com.google.gwt.dev.shell.BrowserChannel.reactToMessagesWhileWaitingForReturn(BrowserChannel.java:1713)
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:165)
    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.core.client.impl.Impl.apply(Impl.java)
    at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:188)
    at sun.reflect.GeneratedMethodAccessor9.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:157)
    at com.google.gwt.dev.shell.BrowserChannel.reactToMessages(BrowserChannel.java:1668)
    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:401)
    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:222)
    at java.lang.Thread.run(Unknown Source)
	
	
10:46:53.421 [ERROR] [uibindertest] In <g:FlowPanel borderWidth='1'>, class FlowPanel has no appropriate setBorderWidth() method
10:50:07.843 [ERROR] [uibindertest] Ambiguous setter requested: StackPanel.stackText


11:05:24.687 [ERROR] [uibindertest] Field 'deckPanel_0' does not have an 'addClickHandler' method associate


11:10:24.203 [ERROR] [uibindertest] Invalid TabPanel child element: HTML

 

都是些很好理解的错误.

一般都是  ui.xml 文件定义的 属性使用错误.

 

说明:

绑定是过很好的方法.以前写一个匿名接口实现.

现在只用写一个实现的方法.根据方法里面传入的是什么类型的事件.进行绑定.而不一定是clickEvent事件.

如:

@UiHandler("tree_0")
	void treeOnOpen(OpenEvent<TreeItem> event) {
		System.out.println("tree onOpen:\t" + event.getTarget().getHTML());
	}

	@UiHandler("tree_0")
	public void treeOnClose(CloseEvent<TreeItem> event) {
		System.out.println("tree onClose:\t" + event.getTarget().getHTML());
	}

	@UiHandler("tree_0")
	public void treeOnSelection(SelectionEvent<TreeItem> event) {
		System.out.println("tree onSelection:\t"
				+ tree_0.getSelectedItem().getHTML());
	}

 对树的事件绑定的时候就是 分别绑定了 3 过事件.OpenEvent,CloseEvent,SelectionEvent

对三个事件进行绑定.至于方法的名称用什么都无所谓.只要是不重复的就行.

而以前要实现这个就需要:

tree.addOpenHandler(new OpenHandler<TreeItem>() {
			public void onOpen(OpenEvent<TreeItem> event) {
				System.out.println("tree onOpen:\t"
						+ event.getTarget().getHTML());
			}
		});
		tree.addCloseHandler(new CloseHandler<TreeItem>() {
			public void onClose(CloseEvent<TreeItem> event) {
				System.out.println("tree onClose:\t"
						+ event.getTarget().getHTML());
			}
		});
		tree.addSelectionHandler(new SelectionHandler<TreeItem>() {
			public void onSelection(SelectionEvent<TreeItem> event) {
				// TODO Auto-generated method stub
				System.out.println("tree onSelection:\t"
						+ tree.getSelectedItem().getHTML());
			}
		});

 需要定义 3个匿名内部类.去实现. 现在看代码就方便简单多了.

可以所完全不像是做web编程了哈...

 

对于要进行初始化参数的如Grid

写道
@UiField
Grid grid_0;

@UiFactory
public Grid initGrid() {
return new Grid(3, 3);
}

 使用UiFactory 进行绑定.说明其构造的时候带参数 是 3 行 3 列的表格.

 

在设置其他组件参数的时候,我就简单的都放在构造函数里面了.

 

在每次修改 ui.xml 和 .java 文件的时候 都要进校验.

这个时候比较慢..系统像卡死了似的.

你可以少保存几次.想好了在改动.

 

几乎所有的组件都有一个参数 width="300px" height="200px"

都要设置大小.尤其是button.如果不设置大小.就会成一个小方块.

 

在使用 ui.xml 的使用 就一个 ui:filed 这个是可以自动生成的 其他的参数都要查询

这个组件下面是否有 setXXX .如果有就有 XXX 属性.首字母小写.

一般 来说 text 是组件的标题.但并不是所以的组件都有标题的.

 

这个在运行的时候就知道了.如果报错.也是很明显的信息.

 

用过ff 和chrome 进行调试 都需要下载插件.

chrome 空指针报错 3 次.. ff 没有这样的问题.

而且 chrome 报错后页面会自动跳转到google的页面.

 

在ui.xml 里面可以混合写 html 和 组件代码.

 

一般不用重新启动. 除非改了点服务端代码 修改了web.xml

否则 就刷新下就可以了.

 

一般就是 ui.xml 写错误了.

uiBinder 很强大. 值得深入研究..感觉上以后还会有 flex 的组件.

 

欢迎大家多提意见. 和我一起研究.

  • 大小: 14.4 KB
  • 大小: 8.3 KB
  • 大小: 29.2 KB
  • 大小: 10.2 KB
  • 大小: 4.2 KB
返回顶楼
         
  • dellsoft
  • 等级: 一星会员
  • 性别:
  • 文章: 36
  • 积分: 169
  • 来自: 济南
   发表时间：2009-12-17  
感觉还是zk5，代码更少
http://zkoss.org/zkdemo/userguide/
返回顶楼
          回帖地址
0 请登录后投票
  • duker
  • 等级: 二星会员
  • 性别:
  • 文章: 78
  • 积分: 201
  • 来自: 北京
   发表时间：2009-12-23  
uibinder 有两个意义:
快速将html原型转化成为gwt组件,也就是美工整出原型来,基本直接copy过来改改就可以用了.另外就是配合layout panel进行应用级别的界面开发
返回顶楼
          回帖地址
0 请登录后投票
  • tempture
  • 等级: 初级会员
  • 文章: 22
  • 积分: 30
   发表时间：2010-01-20  
方向是对了 感觉有点像Flex了
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics