在gwt树型菜单基础上动态加载视图
经常有这样的需求，类似gwt showcase，左边是树型菜单，右边是动态的视图。
但是gwt showcase是为了展示功能，代码看上去很复杂，比如包括样式的处理、延时加载等等。
这里写了一个最简单的gwt应用，示意性的实现类似功能。
这个示例不包含样式方面的东西，比较丑陋。而且右边的widget也比较简单，就是一个html。
代码十分简单，因此不给出源代码了。
以下说明实现的步骤。
首先，在eclipse下创建一个gwt项目。然后在html页面中加入一个div：
…
<table align="center">
<tr>
<td colspan="2" style="font-weight:bold;">Please enter your name:</td>
</tr>
<tr>
<td id="nameFieldContainer"></td>
<td id="sendButtonContainer"></td>
</tr>
</table>
<div id="treeDemo"></div>
</body>
</html>
然后，在client中的EntryPoint代码中加入：
…
// Add a handler to send the name to the server
MyHandler handler = new MyHandler();
sendButton.addClickHandler(handler);
nameField.addKeyUpHandler(handler);this.initTreeDemo();
}private Map<TreeItem, Widget> treeItems = new HashMap<TreeItem, Widget>();
private void initTreeDemo() {
HorizontalPanel treeDemoPanel = new HorizontalPanel();
RootPanel.get("treeDemo").add(treeDemoPanel);Tree mainMenu = new Tree();
treeDemoPanel.add(mainMenu);TreeItem item = mainMenu.addItem("统计");
treeItems.put(item.addItem("根据地域统计"), new HTML("》》根据地域统计"));
treeItems.put(item.addItem("根据产品统计"), new HTML("》》根据产品统计"));final SimplePanel panel = new SimplePanel();
panel.add(treeItems.get(mainMenu.getItem(0).getChild(0)));mainMenu.addSelectionHandler(new SelectionHandler<TreeItem>() {
@Override
public void onSelection(SelectionEvent<TreeItem> event) {
if (treeItems.get(event.getSelectedItem()) != null) {
panel.clear();
panel.add(treeItems.get(event.getSelectedItem()));
}
}
});treeDemoPanel.add(panel);
}
}
日志引用
相关日志
这篇文章上的评论 RSS feed TrackBack URI