ZK实际应用：样式和布局

在之前的ZK in Action帖子中，我们使用ZK MVVM实现了CRUD功能。我们还快速浏览了一些样式代码，可能需要更多的解释。

在本文中，我们将讨论如何在ZK小部件上附加新CSS样式规则，以及如何覆盖现有样式。我们还将介绍ZK中UI布局的一些基础知识。

目的

使用ZK的布局和容器小部件来托管我们在先前文章中构建的清单CRUD功能。
设置ZK小部件的样式

ZK实战功能

边界布局
布置图
标签框
包括
同级
zclass

使用布局和容器 Borderlayout和Hlayout

Borderlayout将窗口分为5个部分，如下所示：

事不宜迟，让我们剖析标记并查看其工作原理：

<window ...'><borderlayout width='100%' height='100%'><north size='15%'><hlayout width='100%' height='100%'><label hflex='9' value='Alpha Dental' /><label hflex='1' value='Sign Out' ></label></hlayout></north><east size='10%'></east><center><tabbox width='100%' height='100%' orient='vertical'><tabs width='15%'><tab label='Inventory' /><tab label='TBD' /><tab label='TBD'/></tabs><tabpanels><tabpanel><include src='inventory.zul'/></tabpanel><tabpanel></tabpanel><tabpanel></tabpanel></tabpanels></tabbox></center><west size='10%' ></west><south size='10%'></south></borderlayout>

第3和27行，可以调整北和南窗口小部件的高度，但不能调整宽度
第9和26行，可以调整东西的小部件的宽度，但不能调整高度
第10行，中心小部件的尺寸取决于为北，西，南和东小部件输入的尺寸
从第4行到第7行，我们用Hlayout包裹了两个标签，因此它们将相对于我们指定的'hflex'属性并排显示。也就是说，分配给hflex ='9'的Label的宽度是分配给hflex ='1'的Label的9倍。
每个内部小部件（北，西等）只能接受一个子组件，因此，在放置到Borderlayout内部小部件（北，西等）中之前，多个小部件必须由单个容器小部件（如Hlayout）包装。
第11行，我们放置了一个Tabbox元素并将其方向设置为垂直，以期望将库存CRUD功能嵌入其中
第12到16行，我们将每个标签的标题
第18行，Tabpanel是一个保存标签内容的容器
第19行，我们将清单CRUD功能嵌入到Include标签内。库存.zul上的小部件将附加到此页面

覆盖现有的ZK样式规则

ZK默认字体属性和背景颜色已修改，因此标题将更加突出。让我们快速解释一下这是如何完成的。
使用Chrome Developer Tool或Firebug扩展，我们可以轻松地检查Borderlayout的源代码，并为ZK小部件找到ZK样式类，如下所示：

从这里我们了解到，突出显示区域的命名模式是z-north-body。同样，我们可以对所有感兴趣的标记执行相同的操作，然后继续覆盖其CSS样式规则：

<zk>
<style>.z-tab-ver .z-tab-ver-text { font-size: 18px; } .z-north-body, .z-south-body { background:#A3D1F0 }.z-east-body, .z-west-body { background:#F8F9FB }
</style>
<window border='none' width='100%' height='100%'><borderlayout width='100%' height='100%'><north size='15%'>...</north><east size='10%'></east><center>...</center><west size='10%'></west><south size='10%'></south></borderlayout>
</window>
</zk>

通过样式属性附加其他样式规则

在这里，我们正在修改North小部件中包含的Label的样式。由于我们只希望这两个标签（而不是全部标签）受我们新样式的影响，因此像我们以前那样覆盖原始样式是没有意义的。对于这些孤立的修改，只需将样式规则分配给ZK小部件随附的'style'属性就足够了：

<north size='15%'><hlayout width='100%' height='100%'><label value='Alpha Dental' style='font-size: 32px; font-style: italic; font-weight:bold; color:white; margin-left:8px;'/><label value='Sign Out' style='font-size: 14px; font-weight:bold; color:grey; line-height:26px'></label></hlayout></north>...

通过Sclass附加其他样式规则

直接在标记中分配样式规则并污染代码的另一种方法是声明一个样式类，缩写为'sclass'，然后将规则分配给'sclass'属性，如下所示：

<zk>
<style>.company-heading {font-size: 32px; font-style: italic; font-weight:bold; color:white; margin-left:8px;}
</style>
<window ...><borderlayout ...><north ...> <label value='Alpha Dental' sclass='company-heading'/></north>...</borderlayout>
</window>
</zk>

简而言之

本文介绍了三种修改默认ZK样式的方法：覆盖现有的ZK样式类，直接将样式规则分配给小部件的style属性，或者在CSS文件或Style标记内定义CSS类，然后将该类分配给小部件的sclass属性
使用开发人员工具（例如Firebug）检查ZK小部件并找出要覆盖的ZK样式类
hlex属性允许开发人员相对于彼此成比例地定义小部件的宽度
布局小部件可帮助开发人员将演示窗口划分为多个部分

相关链接：

ZK样式指南
边界布局
布置图海福克斯

参考： ZK in Action [4]：来自JCG合作伙伴 Lance Lu的样式和布局，位于Tech Dojo博客上。