ZK 教學 - 常見錯誤用法 01 - 操作元件而不是其 model

好幾個 ZK 元件都支援以一個 model 物件為基礎來繪製其內容，例如 Listbox, Grid, Tree, Tabbox, Combobox。這種情況下，必須要以控制該 model 來控制元件的 rendering、選擇模式 (single or multiple choice)、被選定的項目 (selected items)，而不是直接透過元件的 API 。

以下是常見的例子：

要將 Listbox 設定成多選，應該要用 ListModel.setMultiple(true) 而不是 Listbox.setMultiple(true)。
要刪掉某一個 Listitem，應該是刪掉 ListModel 中對應的資料物件，而不是直接呼叫Listitem.detach()。
點選 Tabbox \ Tab 上的關閉按鈕時，不會關掉 Tab，因為其移除是要由 Model 控制。
使用 TreeModel 時，要展開 Tree 上某個節點，要透過 TreeOpenableModel.addOpenPath() (or DefaultTreeModel.()) 而不是 Treeitem.setOpen()

什麼時候可以直接呼叫元件 API 來控制呢？就是你沒有給 Model 物件的時候。

留言

這個網誌中的熱門文章

iframe DOM 被移動造成重新載入

如果用 javascript 去搬動 iframe DOM 的位置, 瀏覽器會將其內容重新載入，這是現有 HTML 規格 > When an iframe element is inserted into a document that has a browsing context, the user agent must create a nested browsing context, and then process the iframe attributes for the "first time". 範例： http://jsfiddle.net/pZ23B/ 測試結果： * Safari 3.1 / Win: reload * Opera 9.5 / Win: reload * IE10: reload * IE7 / IE8: not reload (部份摘自 https://bugzilla.mozilla.org/show_bug.cgi?id=254144 ) 參考： * https://bugzilla.mozilla.org/show_bug.cgi?id=254144

閱讀完整內容

Web Dynpro 前後端資料流動機制 (Dataflow)

在Web Dynpro中提供3種資料流機制[1]，只要適當地設定，可以不用寫程式就將畫面、中間層控制器(controller)到後端模型物件的資料自動化地、牢靠地綁在一起，使得不管前後端某一方有資料變動，變動部份都會自動地流動來保持一致性，使得前後端都能存取到同一份資料。 context 關鍵元件是 context，每個controller都有一份屬於自己的context，它扮演MVC架構中的M (model)，web dynpro的實做方式比較像是該controller的「資料空間」，它由node(資料節點）與attribute（資料屬性）組成，controller可以透過wdContext這個預先產生好的 shortcut variable（捷徑變數）去取得context的資料內容。 context中必須要建立node才可以儲存資料，一個node代表一個collection(集合物件)裡面仍可以含有node, attribute，node裡面的一份資料實體就是一個element，一個node可以有一個或多個element（這部份可以透過cardinality property設定），其結構就是該node所包含的結構。 data binding 此種機制可以將UI元件的資料跟context中的某個node或attribute綁定在一起，context中的改變會自動更新到UI元件上，UI元件的改變也會自動寫入到綁定的context node(or attribute)中。通常UI元件所綁定的node（attribute)是由component controller對應過來的。 context mapping 每一個controller都有屬於自己的context(資料空間)如果要達到彼此共享資料，則要透過context mapping機制，一旦mapping設定好，則會在另一個context產生一個同樣的結構的node，兩邊的controller會存取到的是同一分資料，任何一邊的資料更動都會散佈到設定好mapping的node。不過在web dynpro裡，只允許將custom controller or component controller的node對應到view controller去，不允許從view controller對應回來，主因是嚴格遵守MVC...

閱讀完整內容

ZK 與響應式網頁設計（RWD）

響應式網頁設計 (RWD) 就現今而言應該是許多網站必備的條件之一，ZK 框架可以幫你從一個抽象層次較高的角度滿足 RWD，不需要了解 CSS Media Query 的細節。元件層級元件層級的 RWD 是由元件內部自動完成的。每個 ZK 元件都能區分瀏覽器的種類，因此會自動依據桌上型或行動裝置瀏覽器來自動調整元件的外觀，不需開發者介入，例如 datebox 在桌面瀏覽器會跳出小月曆：在手機瀏覽器就會自動變成下方滾動條：頁面層級頁面層級的 RWD 因為牽涉到版面設計，因此無法靠元件自動完成，因為畢竟每個頁面需要的版面設計皆不相同，這通常不是一個技術性的決定，而是政策性或設計性上的決定，因此 ZK 提供一些工具讓你實現 RWD。以下根據你想要達成的效果，概述你可用的工具。寬度、版面自動調整如果你想要做出的效果是，畫面內各區域自動調整寬度，較窄時調整位置，我非常推薦搭配 Bootstrap Grid 與 ZK 一同使用，因為易於整合。使用 Grid system 只要在 div 套上 CSS class，如 col-md-4 ，因此跟 ZK 整合很容易，不需要特別的設定與程式。元件變換如果你希望畫面寬、窄時，各用不同的元件來顯示，例如側邊欄在畫面變窄時消失並換成小的選單圖示，這時元件本身當然無法得知要做這樣的轉換，你可以透過 onClientInfo 事件或 @MatchMedia 來偵測畫面寬度變化，並針對該變化調整畫面元件。更多細節可以參考以下資源： Use Bootstrap with ZK: Responsive Admin Template 範例專案線上展示

閱讀完整內容

無垠天際

搜尋此網誌