zk 布局

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

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

目的

• 使用ZK的布局和容器小部件來托管我們在先前文章中構建的清單CRUD功能。
• 設置ZK小部件的樣式

ZK實戰(zhàn)功能

• 邊界布局
• 布置圖
• 標簽框
• 包括
• 同級
• 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上的小部件將附加到此頁面

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

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

從這里我們了解到，突出顯示區(qū)域的命名模式是z-north-body。 同樣，我們可以對所有感興趣的標記執(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的樣式。 由于我們只希望這兩個標簽（而不是全部標簽）受到我們新樣式的影響，因此像我們以前那樣覆蓋原始樣式是沒有意義的。 對于這些孤立的修改，只需將樣式規(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ī)則

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

簡而言之

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

相關鏈接：

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

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

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

zk 布局

總結

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

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