在之前的ZK in Action帖子中，我們使用ZK MVVM實(shí)現(xiàn)了CRUD功能 。 我們還快速瀏覽了一些樣式代碼，可能需要更多的解釋。

在本文中，我們將討論如何在ZK小部件上附加新CSS樣式規(guī)則，以及如何覆蓋現(xiàn)有樣式。 我們還將介紹ZK中UI布局的一些基礎(chǔ)知識(shí)。

目的

• 使用ZK的布局和容器小部件來托管我們?cè)谙惹拔恼轮袠?gòu)建的清單CRUD功能。
• 設(shè)置ZK小部件的樣式

ZK實(shí)戰(zhàn)功能

• 邊界布局
• 布置圖
• 標(biāo)簽框
• 包括
• 同級(jí)
• zclass

使用布局和容器 Borderlayout和Hlayout

Borderlayout將窗口分為5個(gè)部分，如下所示：

事不宜遲，讓我們剖析標(biāo)記并查看其工作原理：

<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行，可以調(diào)整北和南窗口小部件的高度，但不能調(diào)整寬度
• 第9和26行，可以調(diào)整東西的小部件的寬度，但不能調(diào)整高度
• 第10行，中心小部件的尺寸取決于為北，西，南和東小部件輸入的尺寸
• 從第4行到第7行，我們用Hlayout包裹了兩個(gè)標(biāo)簽，因此它們將相對(duì)于我們指定的'hflex'屬性并排顯示。 也就是說，分配給hflex ='9'的Label的寬度是分配給hflex ='1'的Label的9倍。
• 每個(gè)內(nèi)部小部件（北，西等）只能接受一個(gè)子組件，因此，在放置到Borderlayout內(nèi)部小部件（北，西等）中之前，多個(gè)小部件必須由單個(gè)容器小部件（如Hlayout）包裝。
• 第11行，我們放置了一個(gè)Tabbox元素并將其方向設(shè)置為垂直，以期望將庫存CRUD功能嵌入其中
• 第12到16行，我們將每個(gè)標(biāo)簽的標(biāo)題
• 第18行，Tabpanel是一個(gè)保存標(biāo)簽內(nèi)容的容器
• 第19行，我們將清單CRUD功能嵌入到Include標(biāo)簽內(nèi)。 庫存.zul上的小部件將附加到此頁面

覆蓋現(xiàn)有的ZK樣式規(guī)則

ZK默認(rèn)字體屬性和背景顏色已修改，因此標(biāo)題將更加突出。 讓我們快速解釋一下這是如何完成的。
使用Chrome Developer Tool或Firebug擴(kuò)展，我們可以輕松地檢查Borderlayout的源代碼，并為ZK小部件找到ZK樣式類，如下所示：

從這里我們了解到，突出顯示區(qū)域的命名模式是z-north-body。 同樣，我們可以對(duì)所有感興趣的標(biāo)記執(zhí)行相同的操作，然后繼續(xù)覆蓋其CSS樣式規(guī)則：

<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>

通過樣式屬性附加其他樣式規(guī)則

在這里，我們正在修改North小部件中包含的Label的樣式。 由于我們只希望這兩個(gè)標(biāo)簽（而不是全部標(biāo)簽）受我們新樣式的影響，因此像我們以前那樣覆蓋原始樣式是沒有意義的。 對(duì)于這些孤立的修改，只需將樣式規(guī)則分配給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附加其他樣式規(guī)則

直接在標(biāo)記中分配樣式規(guī)則并污染代碼的另一種方法是聲明一個(gè)樣式類，縮寫為'sclass'，然后將規(guī)則分配給'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>

簡而言之

• 本文介紹了三種修改默認(rèn)ZK樣式的方法：覆蓋現(xiàn)有的ZK樣式類，直接將樣式規(guī)則分配給小部件的style屬性，或者在CSS文件或Style標(biāo)記內(nèi)定義CSS類，然后將該類分配給小部件的sclass屬性
• 使用開發(fā)人員工具（例如Firebug）檢查ZK小部件并找出要覆蓋的ZK樣式類
• hlex屬性允許開發(fā)人員相對(duì)于彼此成比例地定義小部件的寬度
• 布局小部件可幫助開發(fā)人員將演示窗口劃分為多個(gè)部分

相關(guān)鏈接：

ZK樣式指南
邊界布局
布置圖 海福克斯

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

翻譯自: https://www.javacodegeeks.com/2012/08/zk-in-action-styling-and-layout.html

總結(jié)

以上是生活随笔為你收集整理的ZK实际应用：样式和布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。