[Apache Click快速开发]Panel和Tree -

dyyaries

浏览: 80745 次
性别:
来自: 上海

最近访客更多访客>>

toly815

逍遥bxf飞雪

summerwaves

niujunwei

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

[Apache Click快速开发]Panel和Tree

Click中的Panel表示网页上一个区域，或者说是一种数据的展现格式，我们使用模板可以定义数据的具体展现格式，比如显示一个表格，或者显示成一个个的图文框等。

Click的API中还有ListPanel和TabbedPanel两种变相的Panel，实际上只是多个Panel的集合而已。

创建一个Panel

创建一个ListPanel，来装载多个Panel

把多个Panel添加到ListPanel，并添加数据

header.htm只是用来显示一个标题的模板

panel_item1.htm和panel_item2.htm只是数据2种不同展示模板

我想到的ListPanel所带来的好处就是将一个也没模块化，从而提高各模块的重用。当然，这其中也包含了设计的灵活性。

最终，我顺利的得到了效果。

接着，我又做了一个Tree的小例子。如果大家不觉得烦，那就继续看吧。。

Tree是一个相对复杂的组件，如果不是得益于Apache，我们可能要做得更多。

创建一个Tree（为了尽量和Panel的界面风格相似，我重用了header.htm来渲染我的标题，我所要做的就是在网页上边添加一个panel而已）

下面我创建了一个购物网站的关于手机的分类

private Tree createCategoryTree(){
	tree = new Tree("category_tree");
	TreeNode rootNode = (TreeNode)getContext().getSession().getAttribute("treeNodes");
	if(rootNode != null){
		tree.setRootNode(rootNode);
		tree.expand(rootNode);
		return tree;
	}
	rootNode = new TreeNode("root");
	TreeNode phone = new TreeNode("手机", "1");
	rootNode.add(phone);
		
	phone.add(new TreeNode("HTC", "101", false));
	phone.add(new TreeNode("三星", "102"));
	phone.add(new TreeNode("摩托罗拉", "103"));
	phone.add(new TreeNode("诺基亚", "104"));
	phone.add(new TreeNode("索尼爱立信", "105"));
	phone.add(new TreeNode("LG", "106"));
	phone.add(new TreeNode("飞利浦", "107"));
		
	TreeNode phone_accessories = new TreeNode("手机配件","2");
	rootNode.add(phone_accessories);
		
	phone_accessories.add(new TreeNode("电池", "201"));
	phone_accessories.add(new TreeNode("充电器", "202"));
	phone_accessories.add(new TreeNode("贴膜", "203"));
	phone_accessories.add(new TreeNode("保护套", "204"));
	phone_accessories.add(new TreeNode("耳机", "205"));
	phone_accessories.add(new TreeNode("存储卡", "206"));
	
	tree.setRootNode(rootNode);
	tree.expand(rootNode);
		
	if(tree.getRootNode()!=null){
		getContext().getSession().setAttribute("treeNodes",rootNode);
	}
	return tree;
}

然后我在htm中写入刚刚创建的Tree的名字$category_tree，它就显示出来了，虽然外貌不佳，但是我看到API中有可以设置图标的地方。

之后，我发现，Click的Tree组件的节点时可以多选的，并且可以通过API来获取所中的所有节点和展开的节点。首先这需要处理页面的请求，官方是通过重写Page中的onGet方法来完成的。下面的代码，我稍微扩展了一些。我将每次点击的节点名字放入到一个ArrayList ，并判断是选中还是非选中，分别进行添加和移除操作，最后把这个ArrayList放入到session中，以保持状态到下次点击时。

@Override
public void onGet() {
	String selectedId = getContext().getRequestParameter(Tree.SELECT_TREE_NODE_PARAM);
	String expandedId = getContext().getRequestParameter(Tree.EXPAND_TREE_NODE_PARAM);
	ArrayList<Object> selected = (ArrayList<Object>)getContext().getSession().getAttribute("selected");
	ArrayList<Object> expanded = (ArrayList<Object>)getContext().getSession().getAttribute("expanded");
	if(selected == null){
		selected = new ArrayList<Object>(0);
	}
	if(expanded == null){
		expanded = new ArrayList<Object>(0);
	}
	if(selectedId!=null){
		TreeNode selectedNode = tree.find(selectedId);
		Object val = selectedNode.getValue();
		if(selectedNode.isSelected()){
			selected.add(val);
		}else{
			selected.remove(val);
		}
		getContext().getSession().setAttribute("selected", selected);
	}
	if(expandedId!=null){
		TreeNode expandedNode = tree.find(expandedId);
		Object val = expandedNode.getValue();
		if(expandedNode.isExpanded()){
			expanded.add(val);
		}else{
			expanded.remove(val);
		}
		getContext().getSession().setAttribute("expanded", expanded);
	}
	addModel("selected", selected);
	addModel("expanded", expanded);
}

最后，我对treeDemo.htm进行简单布局，目的就是让所有的选项都干净地列举出来。

treeDemo.htm:

最终的效果有点原始~

不知不觉，快要下班了，今天周五，周末愉快~