跳到主要內容

ZK 教學 - 常見錯誤用法 02 - 存取別的 Desktop 中的元件

ZK 中 Desktop 的概念約略等同一個 browser tab,每個元件都會歸屬某個特定的 Desktop,而 ZK 的一個元件在實作上其實是由前端的 widget 加上後端的 Java 物件兩兩一組構成。我們是透過操作後端 Java 元件來操作前端 widget。這個從屬關係不能被打亂,否則 操作 Java 物件若找不到對應的前端 widget 就會產生錯誤。

所以,如果你存取到另一個 Desktop 的元件,例如呼叫該元件的 setter ,這時候理當元件要透過 HTTP response 去控制前端的 widget,但 如果 ZK 發現現在的 Destkop 跟元件的原所屬的 Desktop 不相同,就會拋出以下例外

java.lang.IllegalStateException: Access denied: component, <Listcell z_27_b53>, belongs to another desktop: [Desktop g272]

這種情形可能發生在:

  • 你將指向某個元件的變數透過 event queue 傳到 Desktop scope 以外,例如 session or application scope,並且在另一個 Desktop 存取該元件

解決方法:
傳遞資料本身,而不要傳元件。例如我要把 page1.zul 中的 Textbox 輸入值,傳到另一個 page2.zul 中做處理,這時就不應該把 Textbox 直接當參數傳出去,而是把 Textbox.getValue() 傳出去。

  • Composer 中有一個指向元件的變數是 static

解決方法:
不要將指向元件的變數宣告成 static

留言

這個網誌中的熱門文章

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

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 範例專案 線上展示