專利名稱：界面布局裝置和界面布局方法
技術(shù)領(lǐng)域：
本發(fā)明涉及頁面布局技術(shù)領(lǐng)域，具體而言，涉及一種界面布局裝置和一種界面布局方法。
背景技術(shù)：
現(xiàn)有技術(shù)中，對(duì)于界面布局主要有兩種方式:流式布局和自由布局(固定寬度布局)。其中，流式布局，主體部分應(yīng)用了百分比寬度，因此可以自適應(yīng)用戶的分辨率。如圖1所示，是一個(gè)簡單流式(流體)布局的輪廓。雖然有些設(shè)計(jì)師可能給流動(dòng)布局中某些元素設(shè)置了固定寬度，但只要主體元素是百分比寬度，就可以讓布局自適應(yīng)適應(yīng)各種分辨率。流式布局的優(yōu)點(diǎn)是，頁面對(duì)用戶更友好，因?yàn)樗茏赃m應(yīng)用戶的設(shè)置。頁面周圍的空白區(qū)域在所有分辨率和瀏覽器下都是相同的，在視覺上更美觀。如果設(shè)計(jì)良好，流動(dòng)布局可以避免在小分辨率下出現(xiàn)水平滾動(dòng)條。流式布局的缺點(diǎn)是，設(shè)計(jì)者更難控制用戶所見，并可能忽略掉一些錯(cuò)誤，因?yàn)樵谔囟ǖ姆直媛氏驴雌饋砗玫膱D片，視頻以及其他設(shè)置了寬度的內(nèi)容可能需要多種寬度以適應(yīng)不同分辨率的用戶。在特別大的分辨率下，內(nèi)容會(huì)被拉成長長的一行，變得難以閱讀。對(duì)于自由布局，這種布局有一個(gè)設(shè)置了固定寬度的外包裹，里面的各個(gè)模塊也是固定寬度而非百分比。重要的是容器(外包裹)元素是設(shè)置為不能移動(dòng)的。無論訪問者屏幕的分辨率是多少，界面都顯示為和其它訪問者相同的寬度。如圖2所示，展示的是一個(gè)自由布局的基本輪廓。里面的三列分別是520px、200px和200px寬度。960px已經(jīng)成為現(xiàn)代web設(shè)計(jì)的標(biāo)準(zhǔn)，因?yàn)榇蠖鄶?shù)站點(diǎn)用戶被假定為使用1024X768分辨率。許多設(shè)計(jì)者喜歡固定寬度布局勝過流動(dòng)布局，因?yàn)樗菀讓?shí)現(xiàn)，并確保了設(shè)計(jì)者所見即用戶所見。不過它和流動(dòng)布局一樣，具有兩面性。自由布局的優(yōu)點(diǎn)是，固定寬度的布局更容易使用，在設(shè)計(jì)方面更容易定制。在所有瀏覽器中寬度一樣，所以不會(huì)受到圖片、表單、視頻和其他固定寬度內(nèi)容的麻煩。不需要min-width和max-width，所有瀏覽器都支持。即使需要兼容800 X 600這么小的分辨率，界面的主體內(nèi)容仍然有足夠的寬度易于閱讀。自由布局的缺點(diǎn)是，對(duì)于使用高分辨率的用戶，固定寬度布局會(huì)留下很大的空白。因此出現(xiàn)了“黃金比例”，“三分定律”，綜合平衡和其他設(shè)計(jì)原則。屏幕分辨率過小時(shí)需要垂直滾動(dòng)條。無縫紋理，連續(xù)的圖案需要適應(yīng)更大的分辨率。固定寬度布局一般在可用性上得分較低。因此，需要一種新的界面布局技術(shù)，能夠?qū)⒘魇讲季峙c自由布局相結(jié)合，使用戶可以根據(jù)需要對(duì)流式布局中的控件進(jìn)行擺放，并且界面既能適用于各種分辨率，又能更符合不同的業(yè)務(wù)習(xí)慣。

發(fā)明內(nèi)容
本發(fā)明正是基于上述問題，提出了一種界面布局技術(shù)，能夠?qū)⒘魇讲季峙c自由布局相結(jié)合，使用戶可以根據(jù)需要對(duì)流式布局中的控件進(jìn)行擺放，并且界面既能適用于各種分辨率，又能更符合不同的業(yè)務(wù)習(xí)慣。有鑒于此，本發(fā)明提出了一種界面布局裝置，包括:獲取單元，用于根據(jù)接收到的選擇指令選擇第一界面中的目標(biāo)區(qū)域，獲取所述目標(biāo)區(qū)域中的目標(biāo)控件；轉(zhuǎn)化單元，用于將所述目標(biāo)控件的信息轉(zhuǎn)化為預(yù)設(shè)模型的信息，根據(jù)所述目標(biāo)控件在所述第一界面中的布局在第二界面中顯示所述目標(biāo)控件；調(diào)整單元，用于根據(jù)接收到的調(diào)整指令，調(diào)整所述目標(biāo)控件在所述第二界面中的布局，和/或在所述第二界面中新增容器控件，保存調(diào)整后的第二界面；展現(xiàn)單元，用于在加載所述調(diào)整后的第二界面時(shí)，展現(xiàn)所述調(diào)整后的第二界面。在該技術(shù)方案中，第一界面可以是流式布局的界面，第二界面可以是自由布局的界面，通過將目標(biāo)控件的信息轉(zhuǎn)化為預(yù)設(shè)模型的信息，使得不同的界面，有了統(tǒng)一的模型，不同界面的控件相關(guān)信息都可以轉(zhuǎn)化為預(yù)設(shè)模型信息，從而只需調(diào)整界面輸入信息適配，便可使用自由布局界面中的調(diào)整功能，來調(diào)整流式布局界面中的控件，從而使得用戶可以根據(jù)不同的業(yè)務(wù)需要，在流式布局的界面中調(diào)整控件的位置，而且還可以新增容器控件，把相關(guān)的控件擺放在一個(gè)容器中。在上述技術(shù)方案中，優(yōu)選地，所述預(yù)設(shè)模型用于確定所述目標(biāo)控件在所述第一界面中的布局的結(jié)構(gòu)，和所述目標(biāo)控件在所述第二界面中的布局的結(jié)構(gòu)，以及相應(yīng)的可視化狀態(tài)。在上述技術(shù)方案中，優(yōu)選地，所述展現(xiàn)單元還用于根據(jù)接收到的預(yù)覽指令，展現(xiàn)所述調(diào)整后的第二界面；所述調(diào)整單元用于根據(jù)接收到的保存指令，保存所述調(diào)整后的第二界面。在該技術(shù)方案中，當(dāng)用戶完成控件的調(diào)整后，可以預(yù)覽調(diào)整后界面的整體效果，如果整體效果不滿意，則可以繼續(xù)調(diào)整控件，直至整體效果滿意，再保存調(diào)整后的界面，避免了在保存界面后才能查看整體效果，提高了界面布局的效率。在上述任一技術(shù)方案中，優(yōu)選地，所述展現(xiàn)單元包括:解析子單元，用于在加載所述調(diào)整后的第二界面時(shí)，解析所述調(diào)整后的第二界面得到新增信息和調(diào)整信息；創(chuàng)建子單元，用于根據(jù)所述新增信息動(dòng)態(tài)創(chuàng)建容器控件；確定子單元，用于根據(jù)所述調(diào)整信息確定所述目標(biāo)控件的坐標(biāo)信息。在該技術(shù)方案中，可以解析用戶的調(diào)整操作和新增操作，根據(jù)調(diào)整操作的信息調(diào)整控件，并根據(jù)新增操作信息創(chuàng)建容器控件，將相關(guān)的控件布置在一個(gè)容器控件中。在上述技術(shù)方案中，優(yōu)選地，所述解析子單元還用于解析所述調(diào)整后的第二界面得到層次信息；所述展現(xiàn)單元還包括:層次調(diào)整子單元，用于據(jù)所述層次信息調(diào)整所述目標(biāo)控件和/或所述容器控件的層次關(guān)系。在該技術(shù)方案中，根據(jù)層次信息調(diào)整層次關(guān)系，可以保證調(diào)整后的一個(gè)或多個(gè)控件與創(chuàng)建的容器控件等多個(gè)控件之間正確的層次關(guān)系。本發(fā)明還提出了一種界面布局方法，包括:步驟202，根據(jù)接收到的選擇指令選擇第一界面中的目標(biāo)區(qū)域，獲取所述目標(biāo)區(qū)域中的目標(biāo)控件；步驟204，將所述目標(biāo)控件的信息轉(zhuǎn)化為預(yù)設(shè)模型的信息，根據(jù)所述目標(biāo)控件在所述第一界面中的布局在第二界面中顯示所述目標(biāo)控件；步驟206，根據(jù)接收到的調(diào)整指令，調(diào)整所述目標(biāo)控件在所述第二界面中的布局，和/或在所述第二界面中新增容器控件，保存調(diào)整后的第二界面；步驟208，在加載所述調(diào)整后的第二界面時(shí)，展現(xiàn)所述調(diào)整后的第二界面。在該技術(shù)方案中，第一界面可以是流式布局的界面，第二界面可以是自由布局的界面，通過將目標(biāo)控件的信息轉(zhuǎn)化為預(yù)設(shè)模型的信息，使得不同的界面，有了統(tǒng)一的模型，不同界面的控件相關(guān)信息都可以轉(zhuǎn)化為預(yù)設(shè)模型信息，從而只需調(diào)整界面輸入信息適配，便可使用自由布局界面中的調(diào)整功能，來調(diào)整流式布局界面中的控件，從而使得用戶可以根據(jù)不同的業(yè)務(wù)需要，在流式布局的界面中調(diào)整控件的位置，而且還可以新增容器控件，把相關(guān)的控件擺放在一個(gè)容器中。在上述技術(shù)方案中，優(yōu)選地，所述預(yù)設(shè)模型用于確定所述目標(biāo)控件在所述第一界面中的布局的結(jié)構(gòu)，和所述目標(biāo)控件在所述第二界面中的布局的結(jié)構(gòu)，以及相應(yīng)的可視化狀態(tài)。在上述技術(shù)方案中，優(yōu)選地，所述步驟206還包括:根據(jù)接收到的預(yù)覽指令，展現(xiàn)所述調(diào)整后的第二界面；根據(jù)接收到的保存指令，保存所述調(diào)整后的第二界面。在該技術(shù)方案中，當(dāng)用戶完成控件的調(diào)整后，可以預(yù)覽調(diào)整后界面的整體效果，如果整體效果不滿意，則可以繼續(xù)調(diào)整控件，直至整體效果滿意，再保存調(diào)整后的界面，避免了在保存界面后才能查看整體效果，提高了界面布局的效率。在上述任一技術(shù)方案中，優(yōu)選地，所述步驟208包括:在加載所述調(diào)整后的第二界面時(shí)，解析所述調(diào)整后的第二界面得到新增信息和調(diào)整信息，根據(jù)所述新增信息動(dòng)態(tài)創(chuàng)建容器控件，根據(jù)所述調(diào)整信息確定所述目標(biāo)控件的坐標(biāo)信息。在該技術(shù)方案中，可以解析用戶的調(diào)整操作和新增操作，根據(jù)調(diào)整操作的信息調(diào)整控件，并根據(jù)新增操作信息創(chuàng)建容器控件，將相關(guān)的控件布置在一個(gè)容器控件中。在上述技術(shù)方案中，優(yōu)選地，所述步驟208還包括:解析所述調(diào)整后的第二界面得到層次信息，根據(jù)所述層次信息調(diào)整所述目標(biāo)控件和/或所述容器控件的層次關(guān)系。在該技術(shù)方案中，根據(jù)層次信息調(diào)整層次關(guān)系，可以保證調(diào)整后的一個(gè)或多個(gè)控件與創(chuàng)建的容器控件等多個(gè)控件之間正確的層次關(guān)系。通過以上技術(shù)方案，可以將流式布局與自由布局相結(jié)合，使用戶可以根據(jù)需要對(duì)流式布局中的控件進(jìn)行擺放，并且界面既能適用于各種分辨率，又能更符合不同的業(yè)務(wù)習(xí)慣。


圖1示出了流式布局的示意圖；圖2示出了自由布局的示意圖；圖3示出了根據(jù)本發(fā)明的實(shí)施例的界面布局裝置的框圖；圖4示出了根據(jù)本發(fā)明的實(shí)施例的界面布局方法的流程圖；圖5示出了根據(jù)本發(fā)明的實(shí)施例的多元計(jì)算器的類圖；圖6示出了根據(jù)本發(fā)明的實(shí)施例的界面布局的具體流程圖；圖7示出了根據(jù)本發(fā)明的實(shí)施例的容器控件創(chuàng)建的示意圖；圖8A至圖8C示出了根據(jù)本發(fā)明的實(shí)施例的界面布局的示意圖9A和圖9B示出了根據(jù)本發(fā)明的實(shí)施例的進(jìn)行界面布局前后的界面示意圖。
具體實(shí)施方式
為了能夠更清楚地理解本發(fā)明的上述目的、特征和優(yōu)點(diǎn)，下面結(jié)合附圖和具體實(shí)施方式
對(duì)本發(fā)明進(jìn)行進(jìn)一步的詳細(xì)描述。需要說明的是，在不沖突的情況下，本申請(qǐng)的實(shí)施例及實(shí)施例中的特征可以相互組合。
在下面的描述中闡述了很多具體細(xì)節(jié)以便于充分理解本發(fā)明，但是，本發(fā)明還可以采用其他不同于在此描述的其他方式來實(shí)施，因此，本發(fā)明的保護(hù)范圍并不受下面公開的具體實(shí)施例的限制。
圖3示出了根據(jù)本發(fā)明的實(shí)施例的界面布局裝置的框圖。
如圖3所示，根據(jù)本發(fā)明的實(shí)施例的界面布局裝置100包括:獲取單元102，用于根據(jù)接收到的選擇指令選擇第一界面中的目標(biāo)區(qū)域，獲取目標(biāo)區(qū)域中的目標(biāo)控件；轉(zhuǎn)化單元104，用于將目標(biāo)控件的信息轉(zhuǎn)化為預(yù)設(shè)模型的信息，根據(jù)目標(biāo)控件在第一界面中的布局在第二界面中顯示目標(biāo)控件；調(diào)整單元106，用于根據(jù)接收到的調(diào)整指令，調(diào)整目標(biāo)控件在第二界面中的布局，和/或在第二界面中新增容器控件，保存調(diào)整后的第二界面；展現(xiàn)單元108，用于在加載調(diào)整后的第二界面時(shí)，展現(xiàn)調(diào)整后的第二界面。
第一界面可以是流式布局的界面，第二界面可以是自由布局的界面，通過將目標(biāo)控件的信息轉(zhuǎn)化為預(yù)設(shè)模型的信息，使得不同的界面，有了統(tǒng)一的模型，不同界面的控件相關(guān)信息都可以轉(zhuǎn)化為預(yù)設(shè)模型信息，從而只需調(diào)整界面輸入信息適配，便可使用自由布局界面中的調(diào)整功能，來調(diào)整流式布局界面中的控件，從而使得用戶可以根據(jù)不同的業(yè)務(wù)需要，在流式布局的界面中調(diào)整控件的位置，而且還可以新增容器控件，把相關(guān)的控件擺放在一個(gè)容器中。
優(yōu)選地，預(yù)設(shè)模型用于確定目標(biāo)控件在第一界面中的布局的結(jié)構(gòu)，和目標(biāo)控件在第二界面中的布局的結(jié)構(gòu)，以及相應(yīng)的可視化狀態(tài)。
優(yōu)選地，展現(xiàn)單元108還用于根據(jù)接收到的預(yù)覽指令，展現(xiàn)調(diào)整后的第二界面；調(diào)整單元106用于根據(jù)接收到的保存指令，保存調(diào)整后的第二界面。
當(dāng)用戶完成控件的調(diào)整后，可以預(yù)覽調(diào)整后界面的整體效果，如果整體效果不滿意，則可以繼續(xù)調(diào)整控件，直至整體效果滿意，再保存調(diào)整后的界面，避免了在保存界面后才能查看整體效果，提高了界面布局的效率。
優(yōu)選地，展現(xiàn)單元108包括:解析子單元1082，用于在加載調(diào)整后的第二界面時(shí)，解析調(diào)整后的第二界面得到新增信息和調(diào)整信息；創(chuàng)建子單元1084，用于根據(jù)新增信息動(dòng)態(tài)創(chuàng)建容器控件；確定子單元1086，用于根據(jù)調(diào)整信息確定目標(biāo)控件的坐標(biāo)信息。
可以解析用戶的調(diào)整操作和新增操作，根據(jù)調(diào)整操作的信息調(diào)整控件，并根據(jù)新增操作信息創(chuàng)建容器控件，將相關(guān)的控件布置在一個(gè)容器控件中。
優(yōu)選地，解析子單元1082還用于解析調(diào)整后的第二界面得到層次信息；展現(xiàn)單元108還包括:層次調(diào)整子單元1088，用于據(jù)層次信息調(diào)整目標(biāo)控件和/或容器控件的層次關(guān)系O
根據(jù)層次信息調(diào)整層次關(guān)系，可以保證調(diào)整后的一個(gè)或多個(gè)控件與創(chuàng)建的容器控件等多個(gè)控件之間正確的層次關(guān)系。
圖4示出了根據(jù)本發(fā)明的實(shí)施例的界面布局方法的流程圖。
如圖4所示，根據(jù)本發(fā)明的實(shí)施例的界面布局方法包括:步驟202，根據(jù)接收到的選擇指令選擇第一界面中的目標(biāo)區(qū)域，獲取目標(biāo)區(qū)域中的目標(biāo)控件；步驟204，將目標(biāo)控件的信息轉(zhuǎn)化為預(yù)設(shè)模型的信息，根據(jù)目標(biāo)控件在第一界面中的布局在第二界面中顯示目標(biāo)控件；步驟206，根據(jù)接收到的調(diào)整指令，調(diào)整目標(biāo)控件在第二界面中的布局，和/或在第二界面中新增容器控件，保存調(diào)整后的第二界面；步驟208，在加載調(diào)整后的第二界面時(shí)，展現(xiàn)調(diào)整后的第二界面。
第一界面可以是流式布局的界面，第二界面可以是自由布局的界面，通過將目標(biāo)控件的信息轉(zhuǎn)化為預(yù)設(shè)模型的信息，使得不同的界面，有了統(tǒng)一的模型，不同界面的控件相關(guān)信息都可以轉(zhuǎn)化為預(yù)設(shè)模型信息，從而只需調(diào)整界面輸入信息適配，便可使用自由布局界面中的調(diào)整功能，來調(diào)整流式布局界面中的控件，從而使得用戶可以根據(jù)不同的業(yè)務(wù)需要，在流式布局的界面中調(diào)整控件的位置，而且還可以新增容器控件，把相關(guān)的控件擺放在一個(gè)容器中。
優(yōu)選地，預(yù)設(shè)模型用于確定目標(biāo)控件在第一界面中的布局的結(jié)構(gòu)，和目標(biāo)控件在第二界面中的布局的結(jié)構(gòu)，以及相應(yīng)的可視化狀態(tài)。
優(yōu)選地，步驟206還包括:根據(jù)接收到的預(yù)覽指令，展現(xiàn)調(diào)整后的第二界面；根據(jù)接收到的保存指令，保存調(diào)整后的第二界面。
當(dāng)用戶完成控件的調(diào)整后，可以預(yù)覽調(diào)整后界面的整體效果，如果整體效果不滿意，則可以繼續(xù)調(diào)整控件，直至整體效果滿意，再保存調(diào)整后的界面，避免了在保存界面后才能查看整體效果，提高了界面布局的效率。
優(yōu)選地，步驟208包括:在加載調(diào)整后的第二界面時(shí)，解析調(diào)整后的第二界面得到新增信息和調(diào)整信息，根據(jù)新增信息動(dòng)態(tài)創(chuàng)建容器控件，根據(jù)調(diào)整信息確定目標(biāo)控件的坐標(biāo)信息。
可以解析用戶的調(diào)整操作和新增操作，根據(jù)調(diào)整操作的信息調(diào)整控件，并根據(jù)新增操作信息創(chuàng)建容器控件，將相關(guān)的控件布置在一個(gè)容器控件中。
優(yōu)選地，步驟208還包括:解析調(diào)整后的第二界面得到層次信息，根據(jù)層次信息調(diào)整目標(biāo)控件和/或容器控件的層次關(guān)系。
根據(jù)層次信息調(diào)整層次關(guān)系，可以保證調(diào)整后的一個(gè)或多個(gè)控件與創(chuàng)建的容器控件等多個(gè)控件之間正確的層次關(guān)系。
圖5示出了根據(jù)本發(fā)明的實(shí)施例的多元計(jì)算器的類圖。
如圖5所示，根據(jù)本發(fā)明的實(shí)施例的界面布局裝置100的功能實(shí)現(xiàn)，可以基于MVC(Multiple Variate Counter,多元計(jì)算器)架構(gòu),通過鼠標(biāo)及鍵盤可視化的調(diào)整界面上控件的布局，再把相應(yīng)的變化反映到模型上，相應(yīng)的，模型上的變化也反映到布局上。
可以界面的控件布局當(dāng)作一張圖的概念來處理，其中單元作為控件的基類，包括容器控件及簡單控件，都繼承自單元。圖模型是描述圖的結(jié)構(gòu)的核心模板，圖結(jié)構(gòu)的修改、增加、刪除通過圖模型的應(yīng)用程序接口發(fā)生，該模型規(guī)定了一些方法去決定圖的結(jié)構(gòu)，同時(shí)也提供了一些方法去設(shè)置可視化狀態(tài)。主要的公共應(yīng)用程序接口是通過圖類實(shí)現(xiàn)的。使其更直觀的是:在模型和單元中的方法在圖中也有一份，而圖類中的方法被認(rèn)為是主要的公共應(yīng)用程序接口，但圖模型是存儲(chǔ)圖數(shù)據(jù)結(jié)構(gòu)的根本對(duì)象。并且容器對(duì)于其父控件來說，只是其中的一個(gè)單元，同時(shí)容器也通過圖模型來記錄其子控件的信息，因此可以很好地處理控件嵌套的模型。
主庫U1:圖的布局部份，用于界面展現(xiàn)及接收鼠標(biāo)、鍵盤事件并轉(zhuǎn)發(fā)給各種處理器去處理。對(duì)于控件下有子控件的模型，也是通過主庫UI中含有子主庫UI來真實(shí)的反映此結(jié)構(gòu)。采用Java的CellRendererPane類的paintComponent方法把模型中對(duì)應(yīng)的各種Swing控件繪制在此控件中，實(shí)現(xiàn)了模型到視圖的映射。
單元制作器:選中的控件的展現(xiàn)處理主要在此類中。
各種處理器(圖5中僅示出了圖處理器、選擇單元處理器、鍵盤處理器和轉(zhuǎn)移處理器):主庫Π把相關(guān)的各種操作轉(zhuǎn)發(fā)給對(duì)應(yīng)的處理器處理，最終的結(jié)果展示到界面上，并且存儲(chǔ)到圖模型上。
圖6示出了根據(jù)本發(fā)明的實(shí)施例的界面布局的具體流程圖。
如圖6所示，通過如圖1所示的界面布局裝置100對(duì)原始界面(相當(dāng)于第一界面，可以是流式布局的界面)進(jìn)行布局可以分為設(shè)計(jì)態(tài)和運(yùn)行態(tài)。
在設(shè)計(jì)態(tài)時(shí)，原始界面控件相關(guān)信息會(huì)轉(zhuǎn)化為圖模型信息，不同的界面，因?yàn)橛辛私y(tǒng)一的圖模型，只需簡單的調(diào)整界面輸入信息適配，便可使用自由布局界面調(diào)整功能。用戶對(duì)界面的調(diào)整可以反映到圖模型中，并被用戶保存到數(shù)據(jù)庫中。
在運(yùn)行態(tài)時(shí)，可以根據(jù)解析結(jié)果調(diào)整原始界面中已有的控件，對(duì)于創(chuàng)建容器控件，只需插入局部區(qū)域的容器控件中加入新的布局管理器來解析模型中控件的位置，并對(duì)原始界面不存在的容器控件進(jìn)行創(chuàng)建，這不影響原始界面展現(xiàn)的機(jī)制，具體創(chuàng)建過程如圖7所示，
圖8A至圖8C示出了根據(jù)本發(fā)明的實(shí)施例的界面布局的示意圖。
如圖8A所示，首先當(dāng)界面布局裝置100在設(shè)計(jì)態(tài)時(shí)，將原始界面(即第一界面，可以是流式布局的界面)的相關(guān)信息作為輸入，根據(jù)用戶需要在流式布局表單選中某一區(qū)域(比如表單的表頭)，通過分析界面上的控件，將其作為自由布局的待選控件。同時(shí)原來流式布局界面上的控件大小及位置，作為自由布局默認(rèn)布局的依據(jù)。
如圖8B和圖8C所示，由于不同的界面具有統(tǒng)一的表模型，因此可以在流式布局的界面中以自由布局的方式調(diào)整界面中的控件。具體地，可以根據(jù)用戶指令通過拖曳控件，擺放在任意位置。也可以從自定義控件中添加容器控件，把相關(guān)的控件擺放在一起。還可以通過對(duì)齊、等距、等大小等批量操作功能批量調(diào)整控件。還可以通過按住ctrl鍵+左、右、上、下鍵來微調(diào)控件的位置，按住Alt鍵+左、右、上、下鍵來微調(diào)控件的大小。最后還可通過修改屬性框中控件的屬性來調(diào)整界面，屬性的修改也是立刻反映在界面上的。
界面按照需求進(jìn)行調(diào)整好后，可以預(yù)覽一下整體的界面效果，如果滿意，則可保存，以便運(yùn)行態(tài)生效及下次再進(jìn)行調(diào)整。
當(dāng)界面布局裝置100在運(yùn)行態(tài)時(shí)，首先加載自由布局保存的界面結(jié)果，在打節(jié)點(diǎn)界面時(shí)，由布局管理器根據(jù)節(jié)點(diǎn)界面模板ID去加載自由布局模型。然后進(jìn)行解析，對(duì)于自由布局模型中新增的容器控件，由布局管理器動(dòng)態(tài)的創(chuàng)建，并保證正確的控件層次，設(shè)置相關(guān)的屬性。對(duì)于調(diào)整過位置及大小的控件，只需按照模型中記錄的值重新賦值，主要是位置及大小信息，對(duì)于有些控件還需調(diào)整其控件層次關(guān)系。最后進(jìn)行界面展現(xiàn)，在經(jīng)過正確的解析后，界面能按設(shè)計(jì)態(tài)所見的樣子展現(xiàn)出來。
圖9A和圖9B示出了根據(jù)本發(fā)明的實(shí)施例的進(jìn)行界面布局前后的界面示意圖。
如圖9A所示，在傳統(tǒng)的流式界面中，表單會(huì)根據(jù)流式布局展現(xiàn)在界面中，但是這種展現(xiàn)方式并不一定符合業(yè)務(wù)習(xí)慣，當(dāng)用戶需要查找某個(gè)控件時(shí)，必須在界面中依次查找每個(gè)字段，來確定所需的控件，十分浪費(fèi)時(shí)間。
如圖9B所示，在通過界面布局裝置100進(jìn)行布局后，用戶可以根據(jù)需要調(diào)整控件在界面中的布局，使其滿足業(yè)務(wù)習(xí)慣，十分方便查找所需控件。
可見，通過界面布局裝置100的進(jìn)行自由布局處理后，可以把原本流式的控件按照更貼切客戶使用需求的方式來擺布，整個(gè)界面的設(shè)計(jì)不再是只滿足適用各種分辨率這一個(gè)維度來進(jìn)行考慮了。
通過采用界面流式布局為主，局部自由布局，對(duì)于自由布局這部份，在界面設(shè)計(jì)時(shí)考慮好其大小滿足主流的分辨率，并且采用居左或居中的設(shè)計(jì)原則，這樣界面既能適用于各種分辨率，又能更符合業(yè)務(wù)習(xí)慣。
以上結(jié)合附圖詳細(xì)說明了本發(fā)明的技術(shù)方案，考慮到相關(guān)技術(shù)中，由于流式布局界面和自由布局界面各自的缺點(diǎn)，使表單在界面中的展現(xiàn)難以符合用戶需要，控件的排布并不合理。通過本發(fā)明的技術(shù)方案，能夠?qū)⒘魇讲季峙c自由布局相結(jié)合，使用戶可以根據(jù)需要對(duì)流式布局中的控件進(jìn)行擺放，并且界面既能適用于各種分辨率，又能更符合不同的業(yè)務(wù)習(xí)慣。
在本發(fā)明中，術(shù)語“第一”、“第二”僅用于描述目的，而不能理解為指示或暗示相對(duì)重要性。術(shù)語“多個(gè)”指兩個(gè)或兩個(gè)以上，除非另有明確的限定。
以上所述僅為本發(fā)明的優(yōu)選實(shí)施例而已，并不用于限制本發(fā)明，對(duì)于本領(lǐng)域的技術(shù)人員來說，本發(fā)明可以有各種更改和變化。凡在本發(fā)明的精神和原則之內(nèi)，所作的任何修改、等同替換、改進(jìn)等，均應(yīng)包含在本發(fā)明的保護(hù)范圍之內(nèi)。
權(quán)利要求
1.一種界面布局裝置，其特征在于，包括: 獲取單元，用于根據(jù)接收到的選擇指令選擇第一界面中的目標(biāo)區(qū)域，獲取所述目標(biāo)區(qū)域中的目標(biāo)控件； 轉(zhuǎn)化單元，用于將所述目標(biāo)控件的信息轉(zhuǎn)化為預(yù)設(shè)模型的信息，根據(jù)所述目標(biāo)控件在所述第一界面中的布局在第二界面中顯示所述目標(biāo)控件； 調(diào)整單元，用于根據(jù)接收到的調(diào)整指令，調(diào)整所述目標(biāo)控件在所述第二界面中的布局，和/或在所述第二界面中新增容器控件，保存調(diào)整后的第二界面； 展現(xiàn)單元，用于在加載所述調(diào)整后的第二界面時(shí)，展現(xiàn)所述調(diào)整后的第二界面。
2.根據(jù)權(quán)利要求1所述的界面布局裝置，其特征在于，所述預(yù)設(shè)模型用于確定所述目標(biāo)控件在所述第一界面中的布局的結(jié)構(gòu)，和所述目標(biāo)控件在所述第二界面中的布局的結(jié)構(gòu)，以及相應(yīng)的可視化狀態(tài)。
3.根據(jù)權(quán)利要求1所述的界面布局裝置，其特征在于，所述展現(xiàn)單元還用于根據(jù)接收到的預(yù)覽指令，展現(xiàn)所述調(diào)整后的第二界面；所述調(diào)整單元用于根據(jù)接收到的保存指令，保存所述調(diào)整后的第二界面。
4.根據(jù)權(quán)利要求1至3中任一項(xiàng)所述的界面布局裝置，其特征在于，所述展現(xiàn)單元包括: 解析子單元，用于在加載所述調(diào)整后的第二界面時(shí)，解析所述調(diào)整后的第二界面得到新增息和調(diào)整息; 創(chuàng)建子單元，用于根據(jù)所述新增信息動(dòng)態(tài)創(chuàng)建容器控件； 確定子單元，用于根據(jù)所述調(diào)整信息確定所述目標(biāo)控件的坐標(biāo)信息。
5.根據(jù)權(quán)利要求4所述的界面布局裝置，其特征在于，所述解析子單元還用于解析所述調(diào)整后的第二界面得到層次信息； 所述展現(xiàn)單元還包括: 層次調(diào)整子單元，用于據(jù)所述層次信息調(diào)整所述目標(biāo)控件和/或所述容器控件的層次關(guān)系。
6.—種界面布局方法,其特征在于,包括: 步驟202，根據(jù)接收到的選擇指令選擇第一界面中的目標(biāo)區(qū)域，獲取所述目標(biāo)區(qū)域中的目標(biāo)控件； 步驟204，將所述目標(biāo)控件的信息轉(zhuǎn)化為預(yù)設(shè)模型的信息，根據(jù)所述目標(biāo)控件在所述第一界面中的布局在第二界面中顯示所述目標(biāo)控件； 步驟206，根據(jù)接收到的調(diào)整指令，調(diào)整所述目標(biāo)控件在所述第二界面中的布局，和/或在所述第二界面中新增容器控件，保存調(diào)整后的第二界面； 步驟208，在加載所述調(diào)整后的第二界面時(shí)，展現(xiàn)所述調(diào)整后的第二界面。
7.根據(jù)權(quán)利要求6所述的界面布局方法，其特征在于，所述預(yù)設(shè)模型用于確定所述目標(biāo)控件在所述第一界面中的布局的結(jié)構(gòu)，和所述目標(biāo)控件在所述第二界面中的布局的結(jié)構(gòu)，以及相應(yīng)的可視化狀態(tài)。
8.根據(jù)權(quán)利要求6所述的界面布局方法，其特征在于，所述步驟206還包括:根據(jù)接收到的預(yù)覽指令，展現(xiàn)所述調(diào)整后的第二界面；根據(jù)接收到的保存指令，保存所述調(diào)整后的第二界面。
9.根據(jù)權(quán)利要求6至8中任一項(xiàng)所述的界面布局方法，其特征在于，所述步驟208包括:在加載所述調(diào)整后的第二界面時(shí)，解析所述調(diào)整后的第二界面得到新增信息和調(diào)整信息，根據(jù)所述新增信息動(dòng)態(tài)創(chuàng)建容器控件，根據(jù)所述調(diào)整信息確定所述目標(biāo)控件的坐標(biāo)信息。
10.根據(jù)權(quán)利要求9所述的界面布局方法，其特征在于，所述步驟208還包括:解析所述調(diào)整后的第二界面得到層次信息，根據(jù)所述層次信息調(diào)整所述目標(biāo)控件和/或所述容器控件的層次關(guān)系。
全文摘要
本發(fā)明提供了一種界面布局裝置，包括獲取單元，根據(jù)接收到的選擇指令選擇第一界面中的目標(biāo)區(qū)域，獲取目標(biāo)區(qū)域中的目標(biāo)控件；轉(zhuǎn)化單元，將目標(biāo)控件的信息轉(zhuǎn)化為預(yù)設(shè)模型的信息，根據(jù)目標(biāo)控件在第一界面中的布局在第二界面中顯示目標(biāo)控件；調(diào)整單元，根據(jù)接收到的調(diào)整指令，調(diào)整目標(biāo)控件在第二界面中的布局，和/或在第二界面中新增容器控件，保存調(diào)整后的第二界面；展現(xiàn)單元，在加載調(diào)整后的第二界面時(shí)，展現(xiàn)調(diào)整后的第二界面。本發(fā)明還提出了一種界面布局方法。通過本發(fā)明的技術(shù)方案，能夠?qū)⒘魇讲季峙c自由布局相結(jié)合，用戶可以根據(jù)需要對(duì)流式布局中的控件進(jìn)行擺放，并且界面既能適用于各種分辨率，又能更符合不同的業(yè)務(wù)習(xí)慣。
文檔編號(hào)G06F9/44GK103176797SQ20131005553
公開日2013年6月26日 申請(qǐng)日期2013年2月21日 優(yōu)先權(quán)日2013年2月21日
發(fā)明者楊小強(qiáng) 申請(qǐng)人:用友軟件股份有限公司