在本文中，我們將討論如何在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博客上。
翻譯自: https://www.javacodegeeks.com/2012/08/zk-in-action-styling-and-layout.html
)
