[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所带来的好处就是将一个也没模块化,从而提高各模块的重用。当然,这其中也包含了设计的灵活性。

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

[Apache Click快速开发]Panel和Tree_第1张图片
接着,我又做了一个Tree的小例子。如果大家不觉得烦,那就继续看吧。。

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

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

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

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

[Apache Click快速开发]Panel和Tree_第2张图片

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

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

treeDemo.htm:

最终的效果有点原始~

[Apache Click快速开发]Panel和Tree_第3张图片
不知不觉,快要下班了,今天周五,周末愉快~












你可能感兴趣的:(apache)