TWI477997B - Web page dynamic linkage method - Google Patents

Description

網頁元件動態連動方法

本發明係一種方便、快速且可即時的透過修改資料庫中的設定記錄來變更網頁元件連動功能的網頁元件動態連動方法。

中華民國第099133949號專利申請案「彈性化網頁表單之設計方法」，其僅能建立網頁元件與資料表資料的mapping關係，並無法更進一步針對網頁元件做連動關係的設定，因此，當網頁元件動態連動關係有變動時，開發者必須新建或修改網頁程式；而中華民國第093113031號專利申請案「網頁架構系統之三維立體式使用權限管理系統」，是將權限管理功能由系統中抽出，並將權限設定記錄於設定檔中，當系統功能有所增刪時，只需要修改設定檔即可套用權限設定，而不需修改系統程式，然而，網頁維護人員並無法即時修改資料庫中的連動屬性記錄，且修改時必需重新部屬、啟動網頁伺服器，此外，當多套系統同時部屬時，會產生各設定檔彼此不同步的問題。

本發明之主要目的在於提供一種方便、快速且可即時的透過修改資料庫中的設定記錄來變更網頁元件連動功能的網頁元件動態連動方法。

本發明之次要目的在於提供一種在網頁元件動態連動關係 有變動時，能免除因修改程式而須重新編譯程式及啟動伺服器的時間成本之網頁元件動態連動方法。

本發明之再一目的係在於提供一種減少撰寫網頁元件連動Java Script的時間成本，並增加系統安全性的網頁元件動態連動方法。

為達上述目的，本發明之網頁元件動態連動方法，是當系統開始初始化頁面時，UI連動設定程式模組去連動規則資料庫讀取連動規則，接下來檢查連動規則的頁面名稱、元件ID是否存在網頁中，若存在則把連動規則轉為網頁屬性並添加至網頁中，若不存在，則跳過此規則，當添加連動規則至網頁中之後，執行規則解析器決定是否執行動態連動行為，規則解析器可以執行簡單的判斷式，例如#{bean.name eq empty}，此規則用來bean物件中的name變數是否等於空字串或null，若規則解析器執行結果為true，則執行規則中設定的動態連動行為，若執行結果為false，則不動作。

11‧‧‧網頁工程師

12‧‧‧連動規則資料庫

13‧‧‧一般使用者

14‧‧‧網頁伺服器

21‧‧‧步驟一

22‧‧‧步驟二

23‧‧‧步驟三

24‧‧‧步驟四

25‧‧‧步驟五

26‧‧‧步驟六

27‧‧‧步驟七

第1圖 為本發明之系統架構圖；第2圖 為本發明之流程圖。

請參閱第1圖，本發明之網頁元件動態連動方法，係在網頁開發時，由網頁工程師11針對個別的網頁名稱及其中的網頁元件ID來設定連動關係，並將這些連動關係表示為各類屬性且記錄於連動規則資料庫12，而當一般使用者13瀏覽網頁時，網頁伺服器14初始化網頁UI畫面，UI連動設定程式模組會以該網頁的名稱及其中的網頁元件ID來取得連動資料 庫12中的連動相關屬性記錄，並以此記錄來設定網頁元件的連動屬性。

請參閱第2圖，本發明之網頁元件動態連動方法，其流程步驟包括：步驟一、網頁伺服器開始初始化網頁UI畫面21；步驟二、UI連動設定程式模組由連動規則資料庫讀取連動規則22，該連動規則包括網頁元件ID、網頁元件類型、元件預設值、元件標籤名稱、元件監聽類型、元件可視規則、元件可編輯規則、元件必填規則、元件驗證器設定、元件AJAX設定、元件初始值設定及元件資料來源設定；步驟三、UI連動設定程式模組檢查連動規則的頁面名稱、元件ID是否存在網頁中23，若存在則進入步驟四，若不存在則進入步驟七；步驟四、UI連動設定程式模組將連動規則轉為網頁屬性並添加至網頁之中24；步驟五、透過規則解析器執行動態連動行為25，若規則解析器執行結果為true，則進行步驟六，若執行結果為false，則進入步驟七；步驟六、UI連動設定程式模組執行連動規則中設定的動態連動行為26，進入步驟七；步驟七、結束27。

亦即，網頁伺服器在產生使用者要求的網頁時，若該網頁中有動態連動元件，則從資料庫中讀出該動態連動元件之連動相關屬性，並根據該連動相關屬性在網頁中添加連動關係程式碼，其中，添加連動關係程式碼是先檢查網頁名稱(VIEWID)及網頁元件ID(COMPID)是否存在， 若不存在則不添加連動關係程式碼，若存在連動相關屬性，則開始將連動規則轉為網頁屬性並添加至網頁中，可視規則(VISIBLERULE)轉為網頁元件rendered屬性，可編輯規則(EDITABLERULE)轉為網頁元件disabled屬性，元件必填規則(REQUIRED)轉為網頁元件required屬性，然後將元件監聽類型(LISTENERTYPE)轉為網頁屬性，若元件監聽類型為ValueChangeListener，則添加ValueChangeListener屬性至網頁元件，若元件監聽類行為AjaxListener，則添加ajax標籤至網頁元件底下，並設定ajax屬性render及execute為@this及AJAXUPDATETARGET中的值，再將元件驗證器設定轉為網頁屬性，若VALIDATED為true，則添加validator屬性值為VALIDATORTYPE中的值，最後處理元件初始值部分，根據設定去資料庫讀取TARGETDATASOURCE中設定的資料表名稱，以TARGETDATAKEY中設定的欄位名稱當做value，以TARGETDATAVALUE中設定的欄位名稱當做label設定成一筆SelectItem，之後將這些SelectItem設定至網頁元件中作為選單內容。

如此，即可方便的藉由修改連動規則資料庫中的連動相關屬性記錄進而可快速的、即時的變更網頁上的元件連動關係，而不需修改網頁程式或暫時停止系統服務來更新網頁版本，且本發明之網頁元件動態連動方法可以設定網頁元件的預設值設定、必填欄位設定、可編輯化設定、可視化設定、驗證器設定、Ajax行為設定、作用行為設定及初始值來源設定。

以下特舉一實施例進行說明：

表一為該網頁內容程式碼，該頁面名稱為user.xhtml，頁面包含一個下拉式選單元件ID為userType及一個文字輸入框元件ID為userData，在此實施例中，userType下拉單的內容值是由Table CODE_USERTYPE所讀入，當userType下拉單選擇『一般』時，後面的文字輸入框是不能輸入的，當userType下拉單選擇『管理者』時，後面的文字輸入框會改為可以輸入且為必填屬性。

表二為資料庫UI連動設定屬性表UI_COMPINFO範例資料之一，該筆資料用來表示頁面名稱為user.xhtml且網頁元件ID為userType的連動屬性。當頁面名稱為user.xhtml的網頁被初始化時，UI連動程式模組會去資 料庫UI_COMPINFO表格撈取所有VIEWID為user.xhtml的資料，並檢查COMPID欄位值userType是否存在於頁面上，若不存在則略過此筆連動屬性設定，反之則開始自動將連動屬性設定於該網頁元件。以表二資料所示，UI連動程式模組會去設定網頁元件ID為userType的連動屬性，因為DEFAULTVALUE欄位值為1，所以該網頁元件會有預設值設為1。因為VISIBLERULE欄位值為true，所以該網頁元件會顯示於頁面上。因為EDITABLERULE欄位值為true，所以該網頁元件會是可以編輯修改的狀態。因為REQUIRED欄位值為false，所以該網頁元件不是必填欄位。因為VALIDATED欄位值為false，所以該網頁元件不會執行驗證器檢查。因為LISTENERTYPE欄位值為AjaxListener、AJAXEVENT欄位值為change且AJAXUPDATETARGET欄位值為userData，所以當此網頁元件被修改內容時會去發動ajax，更新的網頁目標元件ID為userData。

表三

表三為資料庫UI連動設定屬性表UI_COMPINFO範例資料之二，該筆資料用來表示頁面名稱為user.xhtml且網頁元件ID為userData的連動屬性。當頁面名稱為user.xhtml的網頁被初始化時，UI連動程式模組會去資料庫UI_COMPINFO表格撈取所有VIEWID為user.xhtml的資料，並檢查COMPID欄位值userData是否存在於頁面上，若不存在則略過此筆連動屬性設定，反之則開始自動將連動屬性設定於該網頁元件。以表三資料所示，UI連動程式模組會去設定網頁元件ID為userData的連動屬性，因為DEFAULTVALUE欄位值為空，所以該網頁元件不會有預設值。因為VISIBLERULE欄位值為true，所以該網頁元件會顯示於頁面上。因為EDITABLERULE欄位值為#{bean.userType==’2’}，所以當網頁元件ID為userType的值是2時，該網頁元件會是可以編輯修改的狀態，反之則否。因為REQUIRED欄位值為false，所以該網頁元件不是必填欄位。因為VALIDATED欄位值為false，所以該網頁元件不會執行驗證器檢查。

表四為資料庫UI連動設定屬性表UI_COMPRULEINFO範例資料，該筆資料用來表示頁面名稱為user.xhtml且網頁元件ID為userType的連動屬性，當頁面名稱為user.xhtml的網頁被初始化時，UI連動程式模組會去資料庫UI_COMPRULEINFO表格撈取所有VIEWID為user.xhtml的資料，並檢查COMPID欄位值userType是否存在於頁面上，若不存在則略過此筆連動屬性設定，反之則開始自動將連動屬性設定於該網頁元件。以表四資料所示，因為RULETYPE欄位值為RuleInitial，所以該筆連動資料是用於設定網頁元件內容值初始化。因為RULEDESCRIPTION欄位值為#{true}，所以此筆連動設定一定會執行。因為TARGETID欄位值為#{bean.userTypeItems}，所以此筆連動設定取得的初始值會填入bean.userTypeItems。因為此網頁元件為下拉式選單元件，所以TARGETTYPE欄位值為java.util.List，表示初始值是一串List內容。因為ACTIONMETHOD欄位值為setValueFromTable、TARGETDATASOURCE欄位值為CODE_USERTYPE、TARGETDATAKEY欄位值為CODE且TARGETDATAVALUE欄位值為NAME，所以UI連動程式模組會去資料庫讀取名稱為CODE_USERTYPE的表格，並且以該表格的CODE欄位作為VALUE，NAME欄位做為選項名稱來設定該下拉式選單元件的初始值。

表五為資料庫資料表CODE_USERTYPE的內容範例，該資料表的內容會被用於設定網頁下拉式選單元件ID為userType的初始值內容。

上列詳細說明係針對本發明之一可行實施例之具體說明，惟該實施例並非用以限制本發明之專利範圍，凡未脫離本發明技藝精神所為之等效實施或變更，均應包含於本案之專利範圍中。

21‧‧‧步驟一

22‧‧‧步驟二

23‧‧‧步驟三

24‧‧‧步驟四

25‧‧‧步驟五

26‧‧‧步驟六

27‧‧‧步驟七

Claims (8)

1. 一種網頁元件動態連動方法，主要係當網頁伺服器初始化網頁UI畫面時，UI連動設定程式模組以該網頁的名稱及其中的網頁元件ID來取得連動資料庫中的連動規則，設定網頁元件的連動屬性，其流程步驟包括：步驟一、網頁伺服器開始初始化網頁UI畫面；步驟二、UI連動設定程式模組由連動規則資料庫讀取連動規則；步驟三、UI連動設定程式模組檢查連動規則的頁面名稱、網頁元件ID是否存在網頁中，若存在則進入步驟四，若不存在則進入步驟七；步驟四、UI連動設定程式模組將連動規則轉為網頁屬性並添加至網頁之中；步驟五、透過規則解析器執行動態連動行為，若規則解析器執行結果為true，則進行步驟六，若執行結果為false，則進入步驟七；步驟六、UI連動設定程式模組執行連動規則中設定的動態連動行為，進入步驟七；步驟七、結束。
2. 如請求項1所述之網頁元件動態連動方法，其中該連動資料庫中的連動規則包括網頁元件ID、網頁元件類型、元件預設值、元件標籤名稱、元件監聽類型、元件可視規則、元件可編輯規則、元件必填規則、元件驗證器設定、元件AJAX設定、元件初始值設定及元件資料來源設定。
3. 如請求項1或2所述之網頁元件動態連動方法，其中將連動規則轉為網頁屬性為將元件可視規則轉為網頁元件rendered屬性。
4. 請求項1或2所述之網頁元件動態連動方法，其中將連動規則轉為網頁屬 性為將元件可編輯規則轉為網頁元件disabled屬性。
5. 請求項1或2所述之網頁元件動態連動方法，其中將連動規則轉為網頁屬性是將元件必填規則(REQUIRED)轉為網頁元件required屬性。
6. 如請求項1或2所述之網頁元件動態連動方法，其中將連動規則轉為網頁屬性時，若元件監聽類型為ValueChangeListener，則添加ValueChangeListener屬性至網頁元件，若元件監聽類行為AjaxListener，則添加ajax標籤至網頁元件底下，並設定ajax屬性render及execute為@this及AJAXUPDATETARGET中的值。
7. 如請求項1或2所述之網頁元件動態連動方法，其中將元件驗證器設定轉為網頁屬性，若VALIDATED為true，則添加validator屬性值為VALIDATORTYPE中的值。
8. 如請求項1所述之網頁元件動態連動方法，其中該UI連動設定程式模組執行連動規則中設定的動態連動行為，係根據連動規則中之設定去連動規則資料庫讀取TARGETDATASOURCE中設定的資料表名稱，以TARGETDATAKEY中設定的欄位名稱當做value，以TARGETDATAVALUE中設定的欄位名稱當做label設定成一筆SelectItem，之後將這些SelectItem設定至網頁元件中作為選單內容。