專利名稱：一種頁面布局動態(tài)切換方法及系統(tǒng)的制作方法
技術領域：
本發(fā)明涉及信息技術領域，具體涉及一種頁面布局動態(tài)切換方法及系統(tǒng)。
背景技術：
在不同的流程環(huán)節(jié)，業(yè)務處理人員關注的信息內(nèi)容有所不同，給不同 的業(yè)務處理人員展示時，需要展示的信息會有所區(qū)別，比如預算審批單， 在初級審批時，審批人員沒有權利看到本公司的預算、可用余額等信息， 因此，在不同的流程狀態(tài)環(huán)節(jié)要求采用不同的頁面布局，需要^^艮據(jù)流程狀 態(tài)環(huán)節(jié)進行頁面布局切換，以適應業(yè)務需求。
現(xiàn)有的頁面布局切換，通常是在某工作流活動狀態(tài)中，通過程序編碼， 重新制作頁面，達到頁面信息內(nèi)容的切換。通過此硬編碼方式制作的頁面， 只能用于該活動中，不能應用于其他工作流活動，且該活動頁面如需調(diào)整， 需重新制作頁面。
現(xiàn)有技術中的 一種實現(xiàn)頁面布局切換的方案中需要基于源代碼，在客 戶現(xiàn)場通過二次開發(fā)完成，通常需在頁面上提供二次開發(fā)接口，通過宏語 言硬編碼實現(xiàn)。
將不同的應用場景下的頁面元素放在不同的頁簽或容器上，根據(jù)預先
設定的業(yè)務規(guī)則進行加載顯示；再根據(jù)已經(jīng)定義的流程的環(huán)節(jié)，對布局元 素進行調(diào)整，得到不同頁面布局。
現(xiàn)有技術提供的技術方案需要源代碼，針對不同的客戶需要在客戶現(xiàn) 場二次開發(fā)，成本較高。
通過硬編碼實現(xiàn)頁面布局調(diào)整，需要專業(yè)程序開發(fā)人員，不便于用戶 操作使用。在業(yè)務流程的不同環(huán)節(jié)對頁面信息所需不同的業(yè)務場景的情況 下，無法通過簡單配置動態(tài)完成；流程活動的布局沒有形成方案級的存儲， 無法對不同流程環(huán)節(jié)進行動態(tài)配置重新組合，復用度低
發(fā)明內(nèi)容
本發(fā)明實施例提供了一種頁面布局動態(tài)切換方法及系統(tǒng)，實現(xiàn)在不同 的業(yè)務流程環(huán)節(jié)中的頁面布局的動態(tài)切換，便于操作使用。
本發(fā)明實施例提供的一種頁面布局動態(tài)切換方法，包括 設置至少兩個頁面布局方案，并保存各頁面布局方案配置信息，該配
置信息包括頁面布局中控件的位置及大小信息；
建立各業(yè)務流程環(huán)節(jié)與所述頁面布局方案的映射關系；
當業(yè)務流程進入下一環(huán)節(jié)，基于所述映射關系加載下一業(yè)務流程環(huán)節(jié)
對應的頁面布局方案配置信息，得到所需頁面布局。
本發(fā)明實施例提供的一種頁面布局動態(tài)切換系統(tǒng)，包括 頁面布局設置單元，用于設置至少兩個頁面布局方案，并保存各頁面
布局方案配置信息，該配置信息包括布局中控件的位置及大小信息；
映射單元，用于建立各業(yè)務流程環(huán)節(jié)與所述頁面布局方案的映射關
系；
頁面生成單元，用于基于所述映射關系加載將進入的業(yè)務流程下一環(huán) 節(jié)對應的頁面布局方案配置信息，得到所述下一業(yè)務流^f呈環(huán)節(jié)對應的頁面 布局。
本發(fā)明實施例提供的頁面布局動態(tài)切換方法及系統(tǒng)，根據(jù)需要預先配 置各種不同的頁面布局方案，將不同的流程環(huán)節(jié)與所配置的頁面布局方案
映射及靈活綁定，頁面定義靈活性和復用度高，實現(xiàn)在不同的業(yè)務流程環(huán) 節(jié)中的頁面布局的動態(tài)切換，便于業(yè)務操作人員完成業(yè)務流程中頁面布局 的定制，以較低的成本和高效率滿足在工作流處理中頁面布局控制個性化 需求。


圖1為本發(fā)明實施例提供的一種頁面布局動態(tài)切換方法流程圖； 圖2為本發(fā)明實施例中的一工作流程環(huán)節(jié)的頁面布局示意圖； 圖3為本發(fā)明實施例中的控件信息表格；
圖4為本發(fā)明實施例提供的一工作流程環(huán)節(jié)對應頁面中控件列表示意
圖5為本發(fā)明實施例提供的另一工作流程環(huán)節(jié)對應頁面中控件列表示意圖6為本發(fā)明實施例提供的頁面中控件列表與指定流程環(huán)節(jié)進行映射 關系示意圖7為本發(fā)明實施例中的流程環(huán)節(jié)與布局方案的映射關系示意圖； 圖8為本發(fā)明實施例中的另一工作流程環(huán)節(jié)的頁面布局示意圖 圖9為本發(fā)明實施例中提供的頁面布局動態(tài)切換系統(tǒng)架構圖。
具體實施例方式
鑒于現(xiàn)有技術中的不足，本發(fā)明提供一種基于業(yè)務流程驅(qū)動的頁面布 局動態(tài)切換方法，在進行頁面的工作流處理時，用戶可才艮據(jù)具體的業(yè)務流 程環(huán)節(jié)，可使用不同的頁面布局來加載不同的信息。在不改動源代碼的情 況下，實現(xiàn)頁面布局動態(tài)切換并才艮據(jù)流程的活動環(huán)節(jié)進^f亍自動裝載，頁面 布局配置的整個過程易于理解，便于操作使用。
為便于理解，首先簡要介紹頁面布局及其切換的實現(xiàn)原理。 實現(xiàn)頁面布局切換的系統(tǒng)，包括頁面布局平臺，頁面配置信息存儲 裝置，頁面布局生成器，以及頁面顯示裝置。
XML文件信息)，頁面布局平臺負責對頁面配置文件的維護4務改管理，比如， 將默認方案Y修改為方案Yl,存儲到服務端，通過布局生成器對頁面配置 文件各屬性進行解析識別，再根據(jù)轉(zhuǎn)換規(guī)則在布局展示容器中展現(xiàn)為可視 的頁面布局方案；其次，再將業(yè)務流程的活動環(huán)節(jié)屬性通過傳入^f直與頁面 布局的配置文件進行綁定，在運行期，工作流的活動環(huán)節(jié)首先判斷是否有 對應綁定的頁面布局方案Yl，如有則加載該方案Yl,如沒有則加載默i人 方案Y,通過布局生成器將對應方案可視化呈現(xiàn)為布局展示容器中。
頁面布局平臺用于獲取不同頁面容器(憑證，采購單，報銷單)頁 面的布局，并初始化各容器控件布局信息為初始化配置文件，維護存^f諸頁 面配置文件(包括初始化配置文件及通過表格布局設計器修改后的配置文 件)。維護管理頁面配置文件，可通過可視化的布局平臺修改控件的位置 和大小，比如將控件的〈constraints〉0， 0, 1013， 629</constraints> (其 中數(shù)字分別表示控件位置信息橫坐標x，縱坐標y，控件的寬度width (像素數(shù)量)及高度height (像素數(shù)量))修改為
<constraints>200， 200， 1026,1258</constraints>，以及其4也的用戶 界面，也稱人才幾界面(UI, User Interface)屬性如顯示名稱(name),編輯 屬性(herited)等，保存作為另一個頁面布局配置文件。頁面布局配置的 整個過程易于理解，便于用戶操作使用。
頁面布局配置信息存儲裝置用于存儲頁面布局的元數(shù)據(jù)配置文件， 元數(shù)據(jù)配置文件中描述了該頁面布局的各個元素的UI屬性和信息，是一 個元數(shù)據(jù)的片段信息文件。
頁面生成器根據(jù)工作流引擎對應活動環(huán)節(jié)所綁定的頁面布局方案去 加載對應的頁面布局文件，按指定的規(guī)則解析識別元數(shù)據(jù)文件，轉(zhuǎn)換到可 視化的布局展示容器，實現(xiàn)了根據(jù)不同流程環(huán)節(jié)動態(tài)切換頁面布局。
在系統(tǒng)中初始化建立業(yè)務流程環(huán)節(jié)與頁面布局方案的映射關系(一對 多)，系統(tǒng)通過所選的業(yè)務單元類型，通過映射關系，遍歷對應的布局方 案，過濾出該業(yè)務流程環(huán)節(jié)所映射的布局方案配置信息以供進一步選擇。 頁面表格布局設計器通常以表格的形式對頁面布局區(qū)域進行劃分，以 列表的形式進行展現(xiàn)，用戶只需要簡單的調(diào)整列表的順序，就可以完成頁 面的布局，修改控件的位置和大小信息。
頁面表格布局設計器根據(jù)頁面上控件相對于容器的位置信息(XY值)， 通過表格生成算法，把頁面布局區(qū)域劃分為一個包含多行多列的表格，每 個控件位于表格的格子區(qū)域，并根據(jù)大小信息，占據(jù)一個或多個格子。通 過從左到右、從上到下的順序，把表格的所有格子轉(zhuǎn)換成列表進行展示。 用戶可根據(jù)需要進行頁面布局，調(diào)整列表上控件的前后順序和所占的列 數(shù)，形成新的列表；在保存布局時，列表又重新同步表格數(shù)據(jù)，根據(jù)格子 所在行和列的位置信息，以及格子所占的列數(shù)，重新設置控件的位置和大
小信息。
本發(fā)明實施例提供的一種頁面布局動態(tài)切換方法，包括 SOI,設置至少兩個頁面布局方案，并保存各頁面布局方案配置信息， 該配置信息包括布局中控件的位置及大小信息； 設置頁面布局方案，具體包括獲取頁面上所有控件的位置信息和尺寸；
調(diào)整頁面上至少一個控件的位置和/或尺寸并保存，得到相應的頁面 布局方案。
另外，還可以刪除頁面上至少一個控件并保存，得到相應的頁面布局 方案。
S02，建立各業(yè)務流程環(huán)節(jié)與所述頁面布局方案的映射關系； 根據(jù)業(yè)務流程環(huán)節(jié)的需求，將該業(yè)務流程環(huán)節(jié)與所設置的頁面布局方
案中至少之一綁定，并保存業(yè)務流程環(huán)節(jié)及其對應的頁面布局方案配置信 臺
S03,當業(yè)務流程進入下一環(huán)節(jié)，基于所述映射關系加載下一業(yè)務流 程環(huán)節(jié)對應的頁面布局方案配置信息，得到所需頁面布局。 具體包括
根據(jù)頁面布局方案中控件的位置信息和尺寸生成所述業(yè)務流程環(huán)節(jié) 對應的頁面。
下面結合具體實施例對本發(fā)明的實現(xiàn)方案進行進一步說明。 本實施例以財務管理流程為例描述如何進^f亍頁面切換。 參照圖1，本發(fā)明實施例提供的一種頁面布局動態(tài)切換方法，包括 S101,根據(jù)具體要求生成多個頁面布局方案，并保存各頁面布局方案
配置信息，該配置信息包括頁面布局中控件的位置及大小信息；
首先，以表格的形式對頁面布局區(qū)域進行劃分，以列表的形式進行展
現(xiàn)，只需要簡單的調(diào)整列表的順序，就可以完成頁面的布局，修改控件的
位置和大小信息。
才艮據(jù)頁面上控件相對于容器的位置信息(橫坐標X，縱坐標Y),通過 表格生成算法，將頁面布局區(qū)域劃分為一個包含多行多列的表格，每個控 件位于表格的格子區(qū)域，并根據(jù)大小信息，占據(jù)一個或多個格子。通過從 左到右、從上到下的順序，把表格的所有格子轉(zhuǎn)換成列表進行展示。進行 頁面布局時，調(diào)整列表上控件的前后順序和所占的列數(shù)，形成新的列表； 新的列表與不同的業(yè)務流程環(huán)節(jié)進行映射綁定，在保存布局后，不同的業(yè) 務流程環(huán)節(jié)加載對應綁定的列表方案，列表又重新同步表格數(shù)據(jù)，根據(jù)格子所在行和列的位置信息，以及格子所占的列數(shù)，重新設置控件的位置和 大小信息，得到不同的頁面布局方案。
本實施例中表格生成算法如下
1) 創(chuàng)建一個空表格；
2) 通過元數(shù)據(jù)文件所記錄的控件信息，遍歷頁面上的所有控件，讀 取控件的位置和大小信息；
3) 將控件放在表格的格子中
3a.根據(jù)控件位置的X值，獲取控件所在的行；如果獲取不到，在表 格中添加控件所在的行；
3b.根據(jù)控件位置的Y值，獲取控件所在的列；如果獲取不到，在表 格中添加控件所在的列;
3c.從以上的行和列信息，4巴控件放在表格對應的格子中。
4) 根據(jù)控件的大小信息，設置控件所占的行數(shù)和列數(shù)。
圖2所示為本發(fā)明實施例中的一審批環(huán)節(jié)的默認頁面(收款單)，其 中包括有單據(jù)編碼，單據(jù)名稱，收付款單位，賬戶，本次金額等條目(即 控件內(nèi)容)。
在后續(xù)的核銷環(huán)節(jié)需要調(diào)整頁面布局，并且可屏蔽掉預算余額和累計
金額信息，使其在同一條流程的另一個環(huán)節(jié)(核銷)中展現(xiàn)。通過切換頁
面布局可便于操作以及提高業(yè)務數(shù)據(jù)的安全性。
遍歷標準頁面上的所有控件，將控件放在表格的格子中。
例如，獲取單據(jù)編碼控件的位置(20, 20 )，在表格中找不到對應的
行和列，新增一行一列，并將控件放在對應格子中，形成一個l行l(wèi)列的表格。
獲取單據(jù)名稱控件的位置(80, 20 ),在表格中找到所在的行(第一 行)，找不到對應的列，新增一列，并將控件放在對應格子中，形成一個l 行2列的表格。
繼續(xù)遍歷其余所有控件，將控件逐個放在表格的格子中，形成一個5 行6列的控件信息表格，如圖3所示。 表格轉(zhuǎn)換成列表步驟如下(1) 從左到右的順序遍歷表格所有行；
(2) 從上到下的順序遍歷表格所有列；
(3) 把當前行和列的表格格子的控件添加到列表中。 基于之前生成的表格，通過列表轉(zhuǎn)換算法得到控件列表yl,如圖4所示。
調(diào)整列表中控件元素的順序，可以得到新的列表。例如將付款相關控
件與收款相關控件布局順序進行交換，并可從列表中刪除預算余額和累計
金額，得到列表Y2，如圖5所示。
S102 ，建立各業(yè)務流程環(huán)節(jié)與所述頁面布局方案的映射關系；
根據(jù)業(yè)務流程環(huán)節(jié)的需求，將該業(yè)務流程環(huán)節(jié)與所設置的頁面布局方
案中至少之一綁定，并保存業(yè)務流程環(huán)節(jié)及其對應的頁面布局方案配置信
自
流程環(huán)節(jié)與頁面布局綁定如下
將修改后的控件列表與指定流程環(huán)節(jié)進行映射綁定；例如，將Y2列 表與"核銷"環(huán)節(jié)映射，如圖6所示。
各個流程環(huán)節(jié)是確定加載頁面布局列表的前置狀態(tài)，通過映射指定形 成頁面在流程中的環(huán)節(jié)與所需加載的列表方案的映射表，如不指定，則該 環(huán)節(jié)加載標準布局頁面Yl，最后形成的流程環(huán)節(jié)與加載方案的映射表如圖 6所示。
S103，基于所述映射關系加載業(yè)務流程環(huán)節(jié)對應的頁面布局方案配置 信息，得到所需頁面布局。
當業(yè)務流程進入下二環(huán)節(jié)(核銷)，通過該頁面的上下文環(huán)境信息， 通過映射表獲取該前置狀態(tài)下所需加載的流程環(huán)節(jié)(核銷)對應的布局列 表Y2。
遍歷控件列表的所有控件；從左到右的順序遍歷表格所有行；從上到 下的順序遍歷表格所有列；將當前控件放在表格當前行和列的格子中。此 時核銷環(huán)節(jié)的，頁面布局如圖8所示。
參照圖9，本發(fā)明實施例提供的一種頁面布局動態(tài)切換系統(tǒng)900,包括..頁面布局設置單元91,用于設置至少兩個頁面布局方案，并保存各頁 面布局方案配置信息，該配置信息包括布局中控件的位置及大小信息； 映射單元92，用于建立各業(yè)務流程環(huán)節(jié)與所述頁面布局方案的映射關
系；
頁面生成單元93，用于基于所述映射關系加載將進入的業(yè)務流程下一 環(huán)節(jié)對應的頁面布局方案配置信息，得到所述下一業(yè)務流程環(huán)節(jié)對應的頁 面布局。
其中，頁面布局設置單元91包括
控件信息獲取^t塊91a,用于獲取頁面上所有控件的位置信息和尺寸；
控件處理模塊91b,用于調(diào)整頁面上至少一個控件的位置和/或尺寸并 保存，得到新的頁面布局方案。
控件刪除模塊91c,用于刪除頁面上的控件，并保存刪除控件后的頁 面布局方案配置信息，得到新的頁面布局方案。
其中，映射單元92,包括
綁定模塊92a,用于根據(jù)業(yè)務流程環(huán)節(jié)的需求，將該業(yè)務流程環(huán)節(jié)與 所設置的頁面布局方案中至少之一綁定；
存儲模塊92b,用于保存業(yè)務流程環(huán)節(jié)及其對應的頁面布局方案配置 信息。
本發(fā)明實施例提供的頁面布局動態(tài)切換方法及系統(tǒng)，根據(jù)需要預先配 置各種不同的頁面布局方案，將不同的流程環(huán)節(jié)與所配置的頁面布局方案 映射及靈活綁定，頁面定義靈活性和復用度高，實現(xiàn)在不同的業(yè)務流程環(huán) 節(jié)中的頁面布局的動態(tài)切換，^^于業(yè)務操作人員完成業(yè)務流程中頁面布局 的定制，以較低的成本和高效率滿足在工作流處理中頁面布局控制個性化 需求。
以上所述僅為本發(fā)明的示范性實施方案而已，并非用于限定本發(fā)明的 保護范圍。凡在本發(fā)明的精神和原則之內(nèi)所作的任何修改、等同替換、改 進等，均包含在本發(fā)明的保護范圍內(nèi)。
權利要求
1、一種頁面布局動態(tài)切換方法，其特征在于，包括設置至少兩個頁面布局方案，并保存各頁面布局方案配置信息，該配置信息包括頁面布局中控件的位置及大小信息；建立各業(yè)務流程環(huán)節(jié)與所述頁面布局方案的映射關系；當業(yè)務流程進入下一環(huán)節(jié)，基于所述映射關系加載下一業(yè)務流程環(huán)節(jié)對應的頁面布局方案配置信息，得到所需頁面布局。
2、 如權利要求1所述的頁面布局動態(tài)切換方法，其特征在于，所述設 置頁面布局方案，具體包括獲取頁面上所有控件的位置信息和尺寸；調(diào)整頁面上至少一個控件的位置和/或尺寸并保存，得到新的頁面布局 方案。
3、 如權利要求2所述的頁面布局動態(tài)切換方法，其特征在于，所述設 置頁面布局方案，還包括刪除頁面上至少一個控件，保存刪除控件后的頁面布局方案配置信息， 得到新的頁面布局方案。
4、 如權利要求l所述的頁面布局動態(tài)切換方法，其特征在于， 建立各業(yè)務流程環(huán)節(jié)與所述頁面布局方案的映射關系，具體包括 根據(jù)業(yè)務流程環(huán)節(jié)的需求，將該業(yè)務流程環(huán)節(jié)與所"沒置的頁面布局方案中至少之一綁定，并保存業(yè)務流程環(huán)節(jié)及其對應的頁面布局方案配置信息。
5、 如權利要求1所述的頁面布局動態(tài)切換方法，其特征在于， 所述加載車務流程環(huán)節(jié)對應的頁面布局方案配置信息，具體包括 根據(jù)頁面布局方案中控件的位置信息和尺寸生成所述業(yè)務流程環(huán)節(jié)對應的頁面。
6、 一種頁面布局動態(tài)切換系統(tǒng)，其特征在于，包括 頁面布局設置單元，用于設置至少兩個頁面布局方案，并保存各頁面布局方案配置信息，該配置信息包括布局中控件的位置及大小信息；映射單元，用于建立各業(yè)務流程環(huán)節(jié)與所述頁面布局方案的映射關系； 頁面生成單元，用于基于所述映射關系加載將進入的業(yè)務流程下一環(huán)節(jié)對應的頁面布局方案配置信息，得到所述下一業(yè)務流程環(huán)節(jié)對應的頁面布局。
7、 如權利要求6所述的頁面布局動態(tài)切換系統(tǒng)，其特征在于，所述頁 面布局設置單元包括控件信息獲取模塊，用于獲取頁面上所有控件的位置信息和尺寸； 控件處理模塊，用于調(diào)整頁面上至少一個控件的位置和/或尺寸并保存， 得到新的頁面布局方案。
8、 如權利要求6所述的頁面布局動態(tài)切換系統(tǒng)，其特征在于，所述頁 面布局設置單元還包括控件刪除;f莫塊，用于刪除頁面上的控件，并保存刪除控件后的頁面布局 方案配置信息，得到新的頁面布局方案。
9、 如權利要求6所述的頁面布局動態(tài)切換系統(tǒng)，其特征在于，所述映 射單元，包括綁定模塊，用于根據(jù)業(yè)務流程環(huán)節(jié)的需求，將該業(yè)務流程環(huán)節(jié)與所設置 的頁面布局方案中至少之一綁定；存儲^t塊，用于保存業(yè)務流程環(huán)節(jié)及其對應的頁面布局方案配置信息。
全文摘要
本發(fā)明公開了一種頁面布局動態(tài)切換方法，包括設置至少兩個頁面布局方案，并保存各頁面布局方案配置信息，該配置信息包括頁面布局中控件的位置及大小信息；建立各業(yè)務流程環(huán)節(jié)與所述頁面布局方案的映射關系；當業(yè)務流程進入下一環(huán)節(jié)，基于所述映射關系加載下一業(yè)務流程環(huán)節(jié)對應的頁面布局方案配置信息，得到所需頁面布局。本發(fā)明還提供相應的系統(tǒng)。根據(jù)本發(fā)明將不同的流程環(huán)節(jié)與所配置的頁面布局方案映射及靈活綁定，頁面定義靈活性和復用度高，實現(xiàn)在不同的業(yè)務流程環(huán)節(jié)中的頁面布局的動態(tài)切換，便于業(yè)務操作人員完成業(yè)務流程中頁面布局的定制，以較低的成本和高效率滿足在工作流處理中頁面布局控制個性化需求。
文檔編號G06Q10/00GK101609403SQ20091016068
公開日2009年12月23日 申請日期2009年7月29日 優(yōu)先權日2009年7月29日
發(fā)明者唐洪敏 申請人:金蝶軟件(中國)有限公司