專(zhuān)利名稱(chēng)：合成布局的可視化和編輯的制作方法
技術(shù)領(lǐng)域：
本發(fā)明涉及合成布局的可視化和編輯。
背景技術(shù)：
下載到客戶機(jī)瀏覽器的網(wǎng)頁(yè)包括標(biāo)記語(yǔ)言、可能包括一些多媒體文件并可能包括一些腳本代碼。標(biāo)記語(yǔ)言是最常用的超文本標(biāo)記語(yǔ)言(HTML)，并可被瀏覽器解釋來(lái)定義網(wǎng)頁(yè)的結(jié)構(gòu)以及內(nèi)容中的一些或可能所有。多媒體文件可包括被自動(dòng)呈現(xiàn)在網(wǎng)頁(yè)的布局內(nèi)的視頻或圖像，或者可響應(yīng)于一個(gè)或多個(gè)控件的執(zhí)行而呈現(xiàn)的視頻或圖像。腳本代碼允許該頁(yè)面具有更多動(dòng)態(tài)功能，并可自動(dòng)執(zhí)行和/或響應(yīng)于用戶與頁(yè)面上的控件進(jìn)行交互而執(zhí)行。Java腳本是腳本編碼語(yǔ)目的不例。
網(wǎng)頁(yè)一般包括一個(gè)或多個(gè)元素。當(dāng)網(wǎng)頁(yè)被呈現(xiàn)時(shí)，每一元素被安置在該網(wǎng)頁(yè)內(nèi)。一些用戶界面平臺(tái)允許以元素的順序執(zhí)行多個(gè)布局處理。例如，元素首先可具有沒(méi)有任何方向的默認(rèn)位置。網(wǎng)頁(yè)本身可通過(guò)包含該元素位置的表達(dá)來(lái)覆蓋這個(gè)默認(rèn)位置。例如，在超文本標(biāo)記語(yǔ)言(HTML)網(wǎng)頁(yè)的上下文中，這被稱(chēng)為“流入(in-flow)”位置。樣式表也可以應(yīng)用會(huì)進(jìn)一步改變?cè)撐恢玫钠渌季治恢?。?dāng)多個(gè)布局處理被應(yīng)用時(shí)，一般會(huì)按順序應(yīng)用這些布局處理。一旦確定了最終布局，就可將元素呈現(xiàn)在其適當(dāng)?shù)奈恢?。發(fā)明內(nèi)容
在此描述的至少一個(gè)實(shí)施例涉及在多個(gè)布局處理用于確定文檔元素的最終位置的情況下對(duì)該文檔元素的布局的計(jì)算機(jī)輔助可視化。首先確定元素的初始位置。然后，將一個(gè)或多個(gè)布局處理的第一集合應(yīng)用于該元素以相對(duì)于該初始位置確定該元素的中間位置。 隨后，將一個(gè)或多個(gè)布局處理的第二集合應(yīng)用于該元素以相對(duì)于該元素的中間位置確定該元素的最終位置。不是只將該最終位置表示在顯示器上，該實(shí)施例使得該元素的初始位置、 一個(gè)或多個(gè)中間位置以及最終位置全部都被表示在顯示器上。在更具體的實(shí)施例中，還可以將在應(yīng)用布局處理時(shí)執(zhí)行的一個(gè)或多個(gè)變換的表示可視化，以允許設(shè)計(jì)者看見(jiàn)為了到達(dá)該元素的最終位置而使元素經(jīng)歷的所有布局處理。
在一個(gè)或多個(gè)實(shí)施例中，通過(guò)用戶與中間控件進(jìn)行交互以移動(dòng)表示在顯示器上的元素的中間位置的表示，可以改變一個(gè)或多個(gè)布局的第一集合。另外或另選地，通過(guò)用戶與最終控件進(jìn)行交互以移動(dòng)表示在顯示器上的元素的最終位置的表示，可以改變一個(gè)或多個(gè)布局的第二集合。
提供本發(fā)明內(nèi)容以便以簡(jiǎn)化形式介紹將在以下詳細(xì)描述中進(jìn)一步描述的一些概念。本發(fā)明內(nèi)容并不旨在標(biāo)識(shí)所要求保護(hù)的主題的關(guān)鍵特征或必要特征，也不旨在用于幫助確定所要求保護(hù)的主題的范圍。


為了描述能夠獲得上述和其它優(yōu)點(diǎn)和特征的方式，各實(shí)施例的更具體的描述將通過(guò)參考各附圖來(lái)呈現(xiàn)?？梢岳斫?，這些附圖只描繪了示例實(shí)施例，并且因此不被認(rèn)為是對(duì)其范圍的限制，將通過(guò)使用附圖并利用附加特征和細(xì)節(jié)來(lái)描述和解釋各實(shí)施例，在附圖中
圖I示出了可以用來(lái)利用此處所描述的各實(shí)施例的示例計(jì)算系統(tǒng)；
圖2示出了應(yīng)用于在對(duì)應(yīng)于文檔的文檔空間的上下文中的元素的四個(gè)順序布局處理的示例序列；
圖3示出了用于使得文檔元素被顯示在其最終位置及在后位置上的方法的流程圖4A示出了顯示有在應(yīng)用了兩個(gè)順序布局處理的情況下的元素的最終位置和元素的在先位置的用戶界面。
圖4B示出了其中表示中間位置的可視化表示被向前調(diào)整后的圖4A的用戶界面。
圖4C示出了其中表示最終位置的可視化表示被向前調(diào)整后的圖4A的用戶界面。
圖5A示出了顯示有在應(yīng)用了四個(gè)順序布局處理的情況下的元素的最終位置和元素的四個(gè)在先位置的用戶界面。
圖5B示出了其中表示第三位置的可視化表示被向前調(diào)整后的圖5A的用戶界面；
圖5C示出了其中表示最終位置的可視化表示被向前調(diào)整后的圖5A的用戶界面； 以及
圖6示出了用于以計(jì)算系統(tǒng)上運(yùn)行的設(shè)計(jì)工具來(lái)調(diào)整一個(gè)或多個(gè)布局處理的計(jì)算機(jī)實(shí)現(xiàn)的方法的流程圖。
具體實(shí)施方式
根據(jù)在此描述的各實(shí)施例，描述了在多個(gè)布局處理用于確定文檔元素的最終位置的情況下，對(duì)文檔元素的布局的計(jì)算機(jī)輔助可視化和可能的調(diào)整。將一個(gè)或多個(gè)布局處理的一個(gè)集合應(yīng)用于元素以相對(duì)于該元素的初始位置確定該元素的中間位置。然后，將一個(gè)或多個(gè)布局處理的另一集合應(yīng)用于該元素以相對(duì)于中間位置確定該元素的最終位置。不是只將最終位置顯示在顯示器上，而是使該元素的初始位置、中間位置和最終位置全部被顯示。中間控件可用于通過(guò)移動(dòng)所顯示的元素的中間位置來(lái)改變一個(gè)或多個(gè)布局處理的第一集合。最終控件可用于通過(guò)移動(dòng)所顯示的元素的最終位置來(lái)改變一個(gè)或多個(gè)布局處理的第一隹A-口 O
首先，將參考圖I來(lái)描述關(guān)于計(jì)算系統(tǒng)的一些引導(dǎo)性討論。然后，將參考圖2到6 來(lái)描述布局設(shè)計(jì)過(guò)程的各實(shí)施例。
首先，參考圖I來(lái)描述關(guān)于計(jì)算系統(tǒng)的介紹性討論。計(jì)算系統(tǒng)現(xiàn)在越來(lái)越多地采取多種多樣的形式。例如，計(jì)算系統(tǒng)可以是手持式設(shè)備、電器、膝上型計(jì)算機(jī)、臺(tái)式計(jì)算機(jī)、 大型機(jī)、分布式計(jì)算系統(tǒng)或甚至常規(guī)上不被認(rèn)為是計(jì)算系統(tǒng)的設(shè)備。在本說(shuō)明書(shū)以及權(quán)利要求書(shū)中，術(shù)語(yǔ)“計(jì)算系統(tǒng)”被廣義地定義為包括任何設(shè)備或系統(tǒng)(或其組合)，該設(shè)備或系統(tǒng)包含至少一個(gè)物理有形的處理器以及其上能含有可由處理器執(zhí)行的計(jì)算機(jī)可執(zhí)行指令的物理有形的存儲(chǔ)器。存儲(chǔ)器可以采取任何形式，并可以取決于計(jì)算系統(tǒng)的特性和形式。計(jì)算系統(tǒng)可以分布在網(wǎng)絡(luò)環(huán)境中，并可包括多個(gè)組分計(jì)算系統(tǒng)。
如圖I所示，在其最基本的配置中，計(jì)算系統(tǒng)100通常包括至少一個(gè)處理單元102 和存儲(chǔ)器104。存儲(chǔ)器104可以是物理系統(tǒng)存儲(chǔ)器，該物理系統(tǒng)存儲(chǔ)器可以是易失性、非易失性、或兩者的某種組合。術(shù)語(yǔ)“存儲(chǔ)器”在此也可用來(lái)指諸如物理存儲(chǔ)介質(zhì)等非易失性大容量存儲(chǔ)。如果計(jì)算系統(tǒng)是分布式的，則處理、存儲(chǔ)器和/或存儲(chǔ)能力也可以是分布式的。 如此處所使用的那樣，術(shù)語(yǔ)“模塊”或“組件”可以指在計(jì)算系統(tǒng)上執(zhí)行的軟件對(duì)象或例程。 此處所描述的不同組件、模塊、引擎，以及服務(wù)可以實(shí)現(xiàn)為在計(jì)算系統(tǒng)上執(zhí)行的對(duì)象或進(jìn)程 (例如，作為分開(kāi)的線程)。
在隨后的描述中，參考由一個(gè)或多個(gè)計(jì)算系統(tǒng)執(zhí)行的動(dòng)作描述了各實(shí)施例。如果這樣的動(dòng)作是以軟件實(shí)現(xiàn)的，則執(zhí)行動(dòng)作的相關(guān)聯(lián)計(jì)算系統(tǒng)的一個(gè)或多個(gè)處理器響應(yīng)于已經(jīng)執(zhí)行了計(jì)算機(jī)可執(zhí)行指令來(lái)引導(dǎo)計(jì)算系統(tǒng)的操作。這樣的操作的示例涉及對(duì)數(shù)據(jù)的操縱。計(jì)算機(jī)可執(zhí)行指令(以及被操縱的數(shù)據(jù))可以存儲(chǔ)在計(jì)算系統(tǒng)100的存儲(chǔ)器104中。計(jì)算系統(tǒng)100還可包含允許計(jì)算系統(tǒng)100例如通過(guò)網(wǎng)絡(luò)110與其他消息處理器通信的通信信道108。計(jì)算系統(tǒng)還可以包括顯示器112，顯示器可顯示計(jì)算系統(tǒng)的用戶可以與之接口的一個(gè)或多個(gè)用戶界面。
這里描述的各實(shí)施例可包括或利用專(zhuān)用或通用計(jì)算機(jī)，該專(zhuān)用或通用計(jì)算機(jī)包括諸如例如一個(gè)或多個(gè)處理器和系統(tǒng)存儲(chǔ)器等計(jì)算機(jī)硬件，如以下更詳細(xì)討論的。這里描述的各實(shí)施例還包括用于承載或存儲(chǔ)計(jì)算機(jī)可執(zhí)行指令和/或數(shù)據(jù)結(jié)構(gòu)的物理和其他計(jì)算機(jī)可讀介質(zhì)。這樣的計(jì)算機(jī)可讀介質(zhì)可以是可由通用或?qū)Ｓ糜?jì)算機(jī)系統(tǒng)訪問(wèn)的任何可用介質(zhì)。存儲(chǔ)計(jì)算機(jī)可執(zhí)行指令的計(jì)算機(jī)可讀介質(zhì)是物理存儲(chǔ)介質(zhì)。承載計(jì)算機(jī)可執(zhí)行指令的計(jì)算機(jī)可讀介質(zhì)是傳輸介質(zhì)。由此，作為示例而非限制，本發(fā)明的各實(shí)施例可包括至少兩種顯著不同的計(jì)算機(jī)可讀介質(zhì)計(jì)算機(jī)存儲(chǔ)介質(zhì)和傳輸介質(zhì)。
計(jì)算機(jī)存儲(chǔ)介質(zhì)包括RAM、ROM、EEPROM、CD-ROM或其他光盤(pán)存儲(chǔ)、磁盤(pán)存儲(chǔ)或其他磁存儲(chǔ)設(shè)備、或可用于存儲(chǔ)計(jì)算機(jī)可執(zhí)行指令或數(shù)據(jù)結(jié)構(gòu)形式的所需程序代碼裝置且可由通用或?qū)Ｓ糜?jì)算機(jī)訪問(wèn)的任何其他介質(zhì)。在該說(shuō)明書(shū)和權(quán)利要求書(shū)中，“計(jì)算機(jī)程序產(chǎn)品” 在其上包括具有計(jì)算機(jī)可執(zhí)行指令的一個(gè)或多個(gè)計(jì)算機(jī)存儲(chǔ)介質(zhì)，當(dāng)這些計(jì)算機(jī)可執(zhí)行指令由計(jì)算機(jī)系統(tǒng)的一個(gè)或多個(gè)處理器來(lái)執(zhí)行時(shí)，執(zhí)行計(jì)算機(jī)程序產(chǎn)品的功能。
“網(wǎng)絡(luò)”被定義為允許在計(jì)算機(jī)系統(tǒng)和/或模塊和/或其他電子設(shè)備之間傳輸電子數(shù)據(jù)的一個(gè)或多個(gè)數(shù)據(jù)鏈路。當(dāng)信息通過(guò)網(wǎng)絡(luò)或另一個(gè)通信連接(硬連線、無(wú)線、或者硬連線或無(wú)線的組合)傳輸或提供給計(jì)算機(jī)時(shí)，該計(jì)算機(jī)將該連接適當(dāng)?shù)匾暈閭鬏斀橘|(zhì)。傳輸介質(zhì)可包括可用于攜帶計(jì)算機(jī)可執(zhí)行指令或數(shù)據(jù)結(jié)構(gòu)形式的所需程序代碼裝置且可由通用或?qū)Ｓ糜?jì)算機(jī)訪問(wèn)的網(wǎng)絡(luò)和/或數(shù)據(jù)鏈路。上述的組合也應(yīng)被包括在計(jì)算機(jī)可讀介質(zhì)的范圍內(nèi)。
此外，在到達(dá)各種計(jì)算機(jī)系統(tǒng)組件之后，計(jì)算機(jī)可執(zhí)行指令或數(shù)據(jù)結(jié)構(gòu)形式的程序代碼裝置可從傳輸介質(zhì)自動(dòng)傳輸?shù)接?jì)算機(jī)存儲(chǔ)介質(zhì)(或反之亦然)。例如，通過(guò)網(wǎng)絡(luò)或數(shù)據(jù)鏈路接收到的計(jì)算機(jī)可執(zhí)行指令或數(shù)據(jù)結(jié)構(gòu)可被緩存在網(wǎng)絡(luò)接口模塊(例如，“NIC”)內(nèi)的RAM中，然后最終被傳輸?shù)接?jì)算機(jī)系統(tǒng)RAM和/或計(jì)算機(jī)系統(tǒng)處的較不易失性的計(jì)算機(jī)存儲(chǔ)介質(zhì)。因而，應(yīng)當(dāng)理解，計(jì)算機(jī)存儲(chǔ)介質(zhì)可被包括在還利用(或甚至主要利用)傳輸介質(zhì)的計(jì)算機(jī)系統(tǒng)組件中。
計(jì)算機(jī)可執(zhí)行指令例如包括，當(dāng)在處理器處執(zhí)行時(shí)使通用計(jì)算機(jī)、專(zhuān)用計(jì)算機(jī)、或?qū)Ｓ锰幚碓O(shè)備執(zhí)行某一功能或某組功能的指令和數(shù)據(jù)。計(jì)算機(jī)可執(zhí)行指令可以是例如二進(jìn)制代碼、諸如匯編語(yǔ)言之類(lèi)的中間格式指令、或甚至源代碼。盡管用結(jié)構(gòu)特征和/或方法動(dòng)作專(zhuān)用的語(yǔ)言描述了本主題，但可以理解，所附權(quán)利要求書(shū)中定義的主題不必限于上述特征或動(dòng)作。相反，上述特征和動(dòng)作是作為實(shí)現(xiàn)權(quán)利要求的示例形式而公開(kāi)的。
本領(lǐng)域的技術(shù)人員將理解，本發(fā)明可以在具有許多類(lèi)型的計(jì)算機(jī)系統(tǒng)配置的網(wǎng)絡(luò)計(jì)算環(huán)境中實(shí)踐，這些計(jì)算機(jī)系統(tǒng)配置包括個(gè)人計(jì)算機(jī)、臺(tái)式計(jì)算機(jī)、膝上型計(jì)算機(jī)、消息處理器、手持式設(shè)備、多處理器系統(tǒng)、基于微處理器的或可編程消費(fèi)電子設(shè)備、網(wǎng)絡(luò)PC、小型計(jì)算機(jī)、大型計(jì)算機(jī)、移動(dòng)電話、PDA、尋呼機(jī)、路由器、交換機(jī)等等。本發(fā)明也可在其中通過(guò)網(wǎng)絡(luò)鏈接(或者通過(guò)硬連線數(shù)據(jù)鏈路、無(wú)線數(shù)據(jù)鏈路，或者通過(guò)硬連線和無(wú)線數(shù)據(jù)鏈路的組合)的本地和遠(yuǎn)程計(jì)算機(jī)系統(tǒng)兩者都執(zhí)行任務(wù)的分布式系統(tǒng)環(huán)境中實(shí)施。在分布式系統(tǒng)環(huán)境中，程序模塊可位于本地和遠(yuǎn)程存儲(chǔ)器存儲(chǔ)設(shè)備中。
根據(jù)在此描述的原理，將多個(gè)布局處理的序列應(yīng)用于要被呈現(xiàn)在顯示器上的文檔內(nèi)的元素。作為示例，文檔可以是頁(yè)面(諸如網(wǎng)頁(yè))，或者可能是桌面應(yīng)用的屏幕。圖2示出了應(yīng)用于在對(duì)應(yīng)于文檔的文檔空間201內(nèi)的元素的四個(gè)順序應(yīng)用的布局處理211到214的示例序列200。然而，在此描述的原理可應(yīng)用于任意多個(gè)順序應(yīng)用的布局處理。
此外，可應(yīng)用在此描述的原理而不管布局處理的類(lèi)型。在為HTML網(wǎng)頁(yè)及使用CSS 的上下文中，存在可被順序應(yīng)用的若干布局處理。CSS中的示例包括絕對(duì)定位、相對(duì)位置和變換。然而，在此描述的原理并不限于將CSS作為布局處理的平臺(tái)，也不限于這些特定類(lèi)型的布局處理。
順序應(yīng)用的布局處理中的每一個(gè)基于元素的在先位置確定元素的在后位置。例如，順序200示出了文檔空間201的五個(gè)不同狀態(tài)，在這五個(gè)不同狀態(tài)中元素202處于不同的位置。元素202的五個(gè)不同位置被示為從其初始位置201 (I)開(kāi)始一路行進(jìn)到第五位置 202 (5)，其中后綴標(biāo)識(shí)位置的次序。此時(shí)，無(wú)需真地呈現(xiàn)文檔，但該順序表示計(jì)算到的元素位置如何隨著所應(yīng)用的每一個(gè)布局處理而改變。
走查順序200，元素處于文檔空間201內(nèi)的初始狀態(tài)202 (I)。作為示例，這可能是沒(méi)有應(yīng)用任何布局處理的元素202的默認(rèn)位置。在文檔被呈現(xiàn)時(shí)，文檔描述(例如，HTML) 可以指定將元素202放在哪里。或者，在文檔描述(例如，HTML)中可能不存在分配給元素 202的位置，在這種情況下初始位置202 (I)是默認(rèn)位置。
在這個(gè)示例序列200中，第一布局處理211被首先應(yīng)用以使得元素202移動(dòng)到第二位置202(2)。然后，第二布局處理212被應(yīng)用以使得元素202移動(dòng)到第三位置202(3)。 接著，第三布局處理213被應(yīng)用以使得元素202移動(dòng)到第四位置202 (4)。最后，第四布局處理214被應(yīng)用以使得元素202移動(dòng)到第五位置202 (5)。省略號(hào)215表示在需要的情況下可以應(yīng)用其他布局處理。在該特定示例中，各布局處理將元素移動(dòng)到文檔空間內(nèi)的各特定位置。然而，在此描述的原理并不限于由每一布局處理造成的元素的特定移動(dòng)，因?yàn)檫@樣的移動(dòng)將根據(jù)布局處理本身。雖然這些布局處理中的每一個(gè)可以是單個(gè)布局處理，但它們本身也可以包括組分布局操作的序列。
一旦計(jì)算出了元素的各位置中的每一個(gè)，則可以將這些位置可視化(例如，將其表示在顯示器上)。回想，可以將在此描述的原理應(yīng)用于任何多個(gè)數(shù)目的順序應(yīng)用的布局處理。因此，這樣的計(jì)算可以導(dǎo)致標(biāo)識(shí)元素的初始位置、元素的最終位置和元素的至少一個(gè)中間位置。
圖3示出了用于使得文檔元素被顯示在其初始位置及在后位置中的方法300的流程圖。僅作為示例，將參看圖2的示例序列200來(lái)描述方法300。方法300可以由圖I的計(jì)算系統(tǒng)100響應(yīng)于作為計(jì)算機(jī)程序產(chǎn)品的一部分的計(jì)算機(jī)可執(zhí)行指令的執(zhí)行而執(zhí)行。
方法300包括計(jì)算系統(tǒng)確定文檔元素的初始位置(動(dòng)作301)。例如，參看圖2，在文檔空間201的上下文中確定元素202的初始位置202(1)。再一次，該動(dòng)作可以通過(guò)解釋文檔描述(即，HTML)、應(yīng)用默認(rèn)位置而發(fā)生，或者可以通過(guò)確定在沒(méi)有應(yīng)用任何順序布局處理的情況下會(huì)將元素放置在哪里而發(fā)生。
計(jì)算系統(tǒng)隨后將一個(gè)或多個(gè)布局處理的集合應(yīng)用于該元素以相對(duì)于元素的在先位置確定該元素的下一位置(動(dòng)作302)?；氐綀D2，布局處理211被應(yīng)用以在文檔空間201 中確定元素202的下一位置202(2)。然后，處理分支成是否存在更多的布局處理集合要應(yīng)用(決策框203)。在此，假設(shè)存在更多的布局處理集合要應(yīng)用(決策框303處為是)。然后， 該處理轉(zhuǎn)至將更多的布局處理應(yīng)用于元素。
然后，計(jì)算系統(tǒng)將一個(gè)或多個(gè)布局處理的另一集合應(yīng)用于元素以相對(duì)于該元素的在先位置確定該元素的下一位置(動(dòng)作302)?；氐綀D2，布局處理212被應(yīng)用以在文檔空間 201中確定元素202的第三位置202 (3)。然后，該處理再次分支成是否存在更多的布局處理要應(yīng)用(決策框303)。在參考圖4A到4C提供的示例中，僅存在元素的三個(gè)計(jì)算到的位置 (初始位置、單個(gè)中間位置、和最終位置)。因此，在圖4A到4C的示例中，不存在要應(yīng)用的其他布局處理(在決策框303中為否)，并且因此計(jì)算系統(tǒng)將因此將各元素位置呈現(xiàn)在顯示器上(動(dòng)作304)。然而，在參考圖5A到5C提供的示例中，存在元素的五個(gè)計(jì)算到的位置(初始位置、三個(gè)中間位置、和最終位置)。因此，在圖5A到5C的情況下，存在其他布局處理集合要被應(yīng)用(決策框303處為是)，并因此計(jì)算系統(tǒng)將轉(zhuǎn)至應(yīng)用其他布局處理集合。
在圖5A到5C的情況下，計(jì)算系統(tǒng)隨后將一個(gè)或多個(gè)布局處理的集合應(yīng)用于元素以相對(duì)于該元素的第三位置確定該元素的第四位置(動(dòng)作302)。轉(zhuǎn)至圖2，布局處理213被應(yīng)用以在文檔空間201中確定元素202的第四位置202 (4)。在此，在圖5A到5C的情況下，存在又一布局處理集合要被應(yīng)用(決策框303處為是)。該處理隨后轉(zhuǎn)至將最終的布局處理集合應(yīng)用于元素。
在圖5A到5C的情況下，計(jì)算系統(tǒng)隨后將一個(gè)或多個(gè)布局處理的最終集合應(yīng)用于元素以相對(duì)于該元素的第四位置確定該元素的最終位置(動(dòng)作302)。轉(zhuǎn)至圖2，布局處理 214被應(yīng)用以在文檔空間201中確定元素202的第五位置202 (5)。在此，在圖5A到5C的情況下，所有布局處理已被應(yīng)用(決策框303處為否)，并因此計(jì)算系統(tǒng)隨后將元素的五個(gè)位置呈現(xiàn)在顯示器上。
在一些實(shí)施例中，以及在圖4A到4C和圖5A到5C的示例中，不僅表示在顯示器上的各個(gè)計(jì)算到的元素位置被可視化，而且元素因布局處理的相應(yīng)集合被應(yīng)用而從一個(gè)位置到下一位置的變換(即，移動(dòng))也被可視化。如參考圖4A到4C及圖5A到5C的示例將解釋的，還向所呈現(xiàn)的位置提供與元素的所顯示的位置中的每一個(gè)相對(duì)應(yīng)的控件，使得當(dāng)用戶操作該控件時(shí)，允許用戶相對(duì)于表示在顯示器上的元素的在先位置移動(dòng)表示在顯示器上的元素的相應(yīng)位置。這導(dǎo)致一個(gè)或多個(gè)處理的相應(yīng)集合被改變，使得下一次再應(yīng)用一個(gè)或多個(gè)處理的集合時(shí)，相對(duì)于在先位置來(lái)到達(dá)移動(dòng)后的位置。因此，用戶不僅可以將到達(dá)最終位置前在布局元素時(shí)發(fā)生的各個(gè)位置改變可視化，而且用戶還可以通過(guò)選擇應(yīng)更改多個(gè)布局處理的集合中的哪個(gè)集合來(lái)改變?cè)氐淖罱K位置。
圖4A示出了其中存在所計(jì)算到的元素的三個(gè)位置的用戶界面400A，并且圖4A表示在僅執(zhí)行圖2的前兩個(gè)處理211和212的情況下可如何呈現(xiàn)元素的各位置的示例。
可視化初始元素位置402 (I)是圖2中的元素202的初始位置202 (I)的可視化表示。箭頭411是由對(duì)布局處理211的應(yīng)用所導(dǎo)致的元素移動(dòng)的可視化表示。可視化元素位置402 (2)是圖2中的元素202的第二(S卩，中間)位置202 (2)的可視化表示。箭頭412 是由對(duì)布局處理212的應(yīng)用所導(dǎo)致的元素移動(dòng)的可視化表示。可視化元素位置402 (3)是圖2中的元素202的第三(即，最終)位置202 (3)的可視化表示。在一個(gè)實(shí)施例中，可以使元素的最終位置在視覺(jué)上區(qū)別于各在先位置，因?yàn)槭窃氐淖罱K位置在呈現(xiàn)文檔后會(huì)是明顯的。各在先位置僅僅是可見(jiàn)的，因?yàn)橛脩艚缑?00A是設(shè)計(jì)工具的用戶界面。
圖4B和4C示出了設(shè)計(jì)者對(duì)改變布局處理211、還是改變布局處理212、還是改變它們兩者具有細(xì)粒度控制的原理。相比于用戶界面的在前狀態(tài)400A，圖4B示出了例如用戶界面的狀態(tài)400B。在狀態(tài)400B中，設(shè)計(jì)者已移動(dòng)后了與元素202的中間位置202 (2)相對(duì)應(yīng)的控件。具體地，在這種情況下，該控件實(shí)際上與該中間位置202 (2)的可視化表示402(2)相同。在該示例中，設(shè)計(jì)者將可視化表示402(2)向上移動(dòng)，如箭頭401A所表示的。注意，圖4A中的箭頭401A、后面的圖中的箭頭401B到401D都表不控件的移動(dòng)，并且可實(shí)際上不被顯示。
該移動(dòng)401A沒(méi)有改變初始位置202 (I)的可視化表示402 (I),因?yàn)樵撘苿?dòng)沒(méi)有致使元素202的初始位置202 (I)改變。然而，移動(dòng)401A將中間位置202 (2)的可視化表示402 (2)改變到了不同位置402 (2) A0這是因?yàn)樵O(shè)計(jì)者對(duì)可視化表示402 (2)的移動(dòng) 40IA已致使布局處理211的相應(yīng)改變，使得對(duì)布局處理211的應(yīng)用將致使元素的中間位置 202 (2)向上移動(dòng)(如可視化表示402 (2)A所表示的)。該移動(dòng)401A沒(méi)有改變布局處理 212，因此最終位置202 (3)相對(duì)于中間位置202 (2)的相對(duì)位置保持不變。然而，由于中間位置202 (2)的可視化表示402 (2)經(jīng)歷了平移移動(dòng)，因此元素的最終位置202 (3)的可視化表示402 (3)同樣經(jīng)歷了平移移動(dòng)(如可視化表示402 (3)A所表示的)，并且箭頭 412也被移動(dòng)了(如箭頭412A所表示的)。
相比于用戶界面的在先狀態(tài)400A，圖4C示出了例如用戶界面的另一狀態(tài)400C。在狀態(tài)400C中，設(shè)計(jì)者已移動(dòng)了與元素202的最終位置202 (3)相對(duì)應(yīng)的控件。在這種情況下，該控件同樣與最終位置202 (3)的可視化表示402 (3)相同。在該示例中，設(shè)計(jì)者將可視化表示402 (3)向上移動(dòng)，如箭頭401B所表示的。
該移動(dòng)401B沒(méi)有改變初始位置202 (I)的可視化表示402 (I),因?yàn)樵撘苿?dòng)沒(méi)有致使元素202的初始位置202 (I)改變。同樣，布局處理211的可視化表示411沒(méi)有改變， 因?yàn)樵撘苿?dòng)401B也沒(méi)有改變布局處理211。此外，該移動(dòng)401B沒(méi)有改變中間位置202 (2) 的可視化表示402 (2)，因?yàn)樵撘苿?dòng)也沒(méi)有致使元素202的中間位置202 (2)改變。然而， 移動(dòng)401B改變了最終位置202 (2)的可視化表示402 (3)，使其移動(dòng)到了不同的位置402(3)B。這是因?yàn)樵O(shè)計(jì)者對(duì)可視化表示402 (3)的移動(dòng)401B已致使布局處理212的相應(yīng)改變，使得對(duì)布局處理212的應(yīng)用將致使元素的最終位置202 (3)向上移動(dòng)，如可視化表示 403 (3) B所表示的。
因此，設(shè)計(jì)者可以通過(guò)移動(dòng)一個(gè)控件(例如，可視化表示402 (3))來(lái)選擇改變布局處理212，或者可以通過(guò)移動(dòng)其他控件(例如，可視化表示402 (2))來(lái)選擇改變布局處理211。因此，在已經(jīng)應(yīng)用了多個(gè)布局處理來(lái)到達(dá)最終位置的情況下，當(dāng)將元素從一個(gè)最終位置移動(dòng)到另一最終位置時(shí)，設(shè)計(jì)者可以選擇這些布局處理中的哪一個(gè)要改變以致使最終位置的改變。
圖5A示出了其中存在所計(jì)算到的元素的五個(gè)位置的用戶界面500A，并且圖5A表示在執(zhí)行圖2的所有四個(gè)處理211到214的情況下可如何呈現(xiàn)元素的各位置的示例。在此， 可視化表示402 (I)到402 (5)各自表示圖2的元素202的相應(yīng)的計(jì)算到的位置202 (I) 到202 (5)。箭頭411到414各自是由對(duì)相應(yīng)布局處理211到214的應(yīng)用所致使的元素移動(dòng)的可視化表示。
圖5B和5C再次示出了設(shè)計(jì)者對(duì)于在移動(dòng)元素的最終位置時(shí)要改變布局處理211 到214中的哪一個(gè)具有細(xì)粒度控制的原理。圖5B示出了通過(guò)移動(dòng)可視化表示402(3)來(lái)改變布局處理212的過(guò)程，且圖5C示出了通過(guò)移動(dòng)可視化表示402 (5)來(lái)改變布局處理214 的過(guò)程。然而，用戶界面還準(zhǔn)許通過(guò)移動(dòng)可視化表示402 (2)來(lái)改變布局處理211，以及通過(guò)移動(dòng)可視化表不402 (4)來(lái)改變布局處理213。
相比于用戶界面的在先狀態(tài)500A，圖5B示出了例如用戶界面的狀態(tài)500B。在狀態(tài)500B中，設(shè)計(jì)者已移動(dòng)了與元素202的中間位置(即，第二中間位置)202 (3)相對(duì)應(yīng)的控件(例如，可視化表示402 (3))。在該示例中，設(shè)計(jì)者使可視化表示402 (3)向上移動(dòng)，如箭頭401C所表示的。
該移動(dòng)402C沒(méi)有改變初始位置202 (I)的可視化表示402 (I)、第一中間位置202(2)的可視化表示402(2)和布局處理211的可視化表示411，因?yàn)橐苿?dòng)401C沒(méi)有改變這樣的位置202 (I)和202 (2)以及布局處理211。然而，移動(dòng)401C將第二中間位置202 (3) 的可視化表示402 (3)改變到了不同位置402 (3)C。這是因?yàn)樵O(shè)計(jì)者對(duì)可視化表示402(3)的移動(dòng)401C已致使布局處理212的相應(yīng)改變，使得對(duì)布局處理212的應(yīng)用將致使元素的第二中間位置202 (3)向上移動(dòng)(如，可視化表示402 (3)C所表示的)。該移動(dòng)401C沒(méi)有改變布局處理213和214，因此第三中間位置202 (4)和最終位置202 (5)相對(duì)于彼此以及相對(duì)于第二中間位置202 (2)的相對(duì)位置保持不變。然而，由于第二中間位置202 (3) 的可視化表示402 (3)經(jīng)歷了平移移動(dòng)，元素的第三中間位置202 (4)的可視化表示402(4)同樣經(jīng)歷了平移移動(dòng)(如可視化表示402(4) C所表示的)，元素的最終位置202 (5)的可視化表示402 (5)同樣經(jīng)歷了平移移動(dòng)(如可視化表示402 (5)C所表示的)。此外，箭頭 413和414同樣被平移地移動(dòng)了(如箭頭413C和414C所表示的)。
相比于用戶界面的在先狀態(tài)500A，圖5C示出了例如用戶界面的另一狀態(tài)500C。 在狀態(tài)500C中，設(shè)計(jì)者已移動(dòng)了與元素202的最終位置202 (3)相對(duì)應(yīng)的控件。在該示例中，設(shè)計(jì)者使可視化表示402 (5)向上移動(dòng)，如箭頭401D所表示的。移動(dòng)401D改變了布局處理214，但是沒(méi)有改變布局處理211到213，并且因此沒(méi)有該元素202的初始位置202(1) 或中間位置202 (2)到202 (4)中的任何一個(gè)。然而，移動(dòng)401D將最終位置202 (5)的可視表示402 (5)改變到了不同位置402 (5)D。此外，箭頭414被更改為414D，以表示由移動(dòng)401D所致使的布局處理214的改變。
因此，設(shè)計(jì)者可通過(guò)移動(dòng)第一控件(例如，可視化表示402 (2))來(lái)選擇改變布局處理211，通過(guò)移動(dòng)第二控件(例如，可視化表示402 (3))來(lái)選擇改變布局處理212，通過(guò)移動(dòng)第三控件(例如，可視表示402 (4))來(lái)選擇改變布局處理213，或通過(guò)選擇第四控件(例如，可視化表示402 (5))來(lái)選擇改變布局處理214。因此，在該示例中，在已經(jīng)應(yīng)用了多個(gè)布局處理來(lái)到達(dá)最終位置的情況下，當(dāng)將元素從一個(gè)最終位置移動(dòng)到另一最終位置時(shí)，設(shè)計(jì)者也可以選擇這些布局處理中的哪一個(gè)要改變以致使最終位置的改變。
圖6示出了用于以計(jì)算系統(tǒng)上運(yùn)行的設(shè)計(jì)工具來(lái)調(diào)整一個(gè)或多個(gè)布局處理的計(jì)算機(jī)實(shí)現(xiàn)方法600的流程圖。在圖4A到4C的示例中以及圖5A到5C的示例中已經(jīng)應(yīng)用了方法600。方法600在顯示了元素的各個(gè)位置(動(dòng)作601)的上下文中操作。例如，參考圖 4A到4C，由可視化表示402 (I)到402 (3)來(lái)表示位置202 (I)到202 (3)。參考圖5A到 5C，由可視化表示402 (I)到402 (5)來(lái)表示位置202 (I)到202 (5)。
計(jì)算系統(tǒng)隨后檢測(cè)用戶對(duì)與元素的非初始位置相對(duì)應(yīng)的控件的操作(動(dòng)作602)。 例如，在圖4A到4C的示例中，用戶可能已經(jīng)操作了可視化表示402 (2)(如在圖4B的情況下)或可視化表示402 (3)(如在圖4C的情況下)。在圖5A到5C的示例中，用戶可能已經(jīng)操作了可視化表示402 (2)(附圖沒(méi)有示出對(duì)其的操作)、可視化表示402 (3)(如在圖4B 的情況下)、可視化表示402 (4)(附圖并沒(méi)有示出對(duì)其的操作)、或可視化表示402 (5)(如在圖5C的情況下)。
響應(yīng)于對(duì)控件的操作，相對(duì)于元素的在先位置移動(dòng)元素的相應(yīng)位置(動(dòng)作603)。 此外，用于到達(dá)相應(yīng)位置的相應(yīng)布局處理被更改(動(dòng)作604)，使得下一次再應(yīng)用該布局處理時(shí)，到達(dá)移動(dòng)后的位置。
例如，在圖4B中，可視化表示402 (2)被從位置402 (2)移動(dòng)到位置402 (2)A。 這致使相應(yīng)的位置202 (2)同樣被移動(dòng)，并由此致使布局處理211的改變(如，通過(guò)箭頭411 變化到箭頭41IA所表示的)。
在圖4B中，可視化表示402 (3)被從位置402 (3)移動(dòng)到位置402 (3) B。這致使相應(yīng)的位置202 (3)同樣被移動(dòng)，并由此致使布局處理212的改變(如，通過(guò)箭頭412變化到箭頭412B所表示的)。
因此，本發(fā)明的原理允許在改變要呈現(xiàn)在文檔上的元素的最終布局時(shí)對(duì)要改變布局處理序列中的哪一個(gè)布局處理的精細(xì)控制。本發(fā)明可具體化為其它具體形式而不背離其精神或本質(zhì)特征。所描述的實(shí)施例在所有方面都應(yīng)被認(rèn)為僅是說(shuō)明性而非限制性的。因此， 本發(fā)明的范圍由所附權(quán)利要求書(shū)而非前述描述指示。落入權(quán)利要求書(shū)的等效方案的含義和范圍內(nèi)的所有改變被權(quán)利要求書(shū)的范圍所涵蓋。
權(quán)利要求
1.一種包括一個(gè)或多個(gè)計(jì)算機(jī)存儲(chǔ)介質(zhì)(104)的計(jì)算機(jī)程序產(chǎn)品,所述一個(gè)或多個(gè)計(jì)算機(jī)存儲(chǔ)介質(zhì)在其上具有被結(jié)構(gòu)化的計(jì)算機(jī)可執(zhí)行指令，使得所述計(jì)算機(jī)可執(zhí)行指令由計(jì)算系統(tǒng)(100)的一個(gè)或多個(gè)處理器(102)執(zhí)行時(shí)，致使所述計(jì)算系統(tǒng)執(zhí)行以下動(dòng)作 確定文檔(201)的元素的初始位置(202 (O)的動(dòng)作(301)； 將一個(gè)或多個(gè)布局處理(211，212)的第一集合應(yīng)用于所述元素以相對(duì)于所述元素的所述初始位置確定所述元素的中間位置(202 (3))的動(dòng)作(302)； 將一個(gè)或多個(gè)布局處理(213，214)的第二集合應(yīng)用于所述元素以相對(duì)于所述元素的所述中間位置確定所述元素的最終位置(202 (5))的動(dòng)作(303，302);以及 致使所述元素的初始位置、所述中間位置和所述最終位置被表示在顯示器(112)上的動(dòng)作(304)。
2.如權(quán)利要求I所述的計(jì)算機(jī)程序產(chǎn)品，其特征在于，所述計(jì)算機(jī)可執(zhí)行指令被進(jìn)一步結(jié)構(gòu)化，以便在由一個(gè)或多個(gè)處理器執(zhí)行時(shí)，使得所述計(jì)算系統(tǒng)被進(jìn)一步配置為執(zhí)行以下動(dòng)作 提供中間控件的動(dòng)作，當(dāng)所述中間控件被用戶操作時(shí)，允許所述用戶相對(duì)于表示在所述顯示器上的所述元素的所述初始位置移動(dòng)表示在所述顯示器上的所述元素的所述中間位置，并致使一個(gè)或多個(gè)處理的所述第一集合被改變，使得下一次應(yīng)用一個(gè)或多個(gè)處理的所述第一集合時(shí)到達(dá)移動(dòng)后的中間位置。
3.如權(quán)利要求2所述的計(jì)算機(jī)程序產(chǎn)品，其特征在于，對(duì)所述中間控件的操作不改變一個(gè)或多個(gè)布局處理的第二集合。
4.如權(quán)利要求2所述的計(jì)算機(jī)程序產(chǎn)品，其特征在于，表示在所述顯示器上的所述中間位置也是所述中間控件。
5.如權(quán)利要求I所述的計(jì)算機(jī)程序產(chǎn)品，其特征在于，所述計(jì)算機(jī)可執(zhí)行指令被進(jìn)一步結(jié)構(gòu)化，以便在由一個(gè)或多個(gè)處理器執(zhí)行時(shí)，使得所述計(jì)算系統(tǒng)被進(jìn)一步配置為執(zhí)行以下動(dòng)作 提供最終控件的動(dòng)作，當(dāng)所述最終控件被用戶操作時(shí)，允許所述用戶相對(duì)于表示在所述顯示器上的所述元素的所述中間位置來(lái)移動(dòng)表示在所述顯示器上的所述元素的所述最終位置，并致使一個(gè)或多個(gè)處理的所述第二集合被改變，使得下一次應(yīng)用一個(gè)或多個(gè)處理的所述第二集合時(shí)相對(duì)于所述元素的所述中間位置到達(dá)移動(dòng)后的最終位置。
6.如權(quán)利要求5所述的計(jì)算機(jī)程序產(chǎn)品，其特征在于，對(duì)所述最終控件的操作不改變一個(gè)或多個(gè)布局處理的第二集合。
7.如權(quán)利要求I所述的計(jì)算機(jī)程序產(chǎn)品，其特征在于，所述計(jì)算機(jī)可執(zhí)行指令被進(jìn)一步結(jié)構(gòu)化，以便在由一個(gè)或多個(gè)處理器執(zhí)行時(shí)，使得所述計(jì)算系統(tǒng)被進(jìn)一步配置為執(zhí)行以下動(dòng)作 致使在應(yīng)用一個(gè)或多個(gè)布局處理的所述第一集合期間執(zhí)行的一個(gè)或多個(gè)變換的表示被表示在所述顯示器上的動(dòng)作。
8.如權(quán)利要求I所述的計(jì)算機(jī)程序產(chǎn)品，其特征在于，所述中間位置是第一中間位置，其中將一個(gè)或多個(gè)布局處理的第二集合應(yīng)用于所述元素以相對(duì)于所述元素的所述中間位置確定所述元素的最終位置的動(dòng)作包括 將一個(gè)或多個(gè)布局處理的所述第二集合的第一子集應(yīng)用于所述元素以相對(duì)于所述元素的所述第一中間位置確定所述元素的第二中間位置的動(dòng)作；以及 將一個(gè)或多個(gè)布局處理的所述第二集合的第二子集應(yīng)用于所述元素以相對(duì)于所述元素的所述第二中間位置確定所述元素的所述最終位置的動(dòng)作。
9.如權(quán)利要求I所述的計(jì)算機(jī)程序產(chǎn)品，其特征在于，所述中間位置是第一中間位置，其中將一個(gè)或多個(gè)布局處理的第二集合應(yīng)用于所述元素以相對(duì)于所述元素的所述中間位置確定所述元素的最終位置的動(dòng)作包括 將一個(gè)或多個(gè)布局處理的所述第二集合的第一子集應(yīng)用于所述元素以相對(duì)于所述元素的所述第一中間位置確定所述元素的第二中間位置的動(dòng)作；以及 將一個(gè)或多個(gè)布局處理的所述第二集合的第二子集應(yīng)用于所述元素以相對(duì)于所述元素的所述第二中間位置確定所述元素的第三中間位置的動(dòng)作；以及 將一個(gè)或多個(gè)布局處理的所述第二集合的第三子集應(yīng)用于所述元素以相對(duì)于所述元素的所述第三中間位置確定所述元素的所述最終位置的動(dòng)作。
10.一種用于以運(yùn)行在計(jì)算系統(tǒng)上的設(shè)計(jì)工具來(lái)調(diào)整一個(gè)或多個(gè)布局處理的計(jì)算機(jī)實(shí)現(xiàn)方法，所述方法包括 在顯示器上表示文檔的元素的初始位置(202 (I))、相對(duì)于所述初始位置的所述元素的中間位置(202 (3))、以及相對(duì)于所述中間位置的所述元素的最終位置(202 (5))的動(dòng)作(601)，其中所述元素的所述中間位置是通過(guò)將一個(gè)或多個(gè)布局處理(211、212)的第一集合應(yīng)用于所述元素來(lái)確定的，并且其中相對(duì)于所述中間位置的所述元素的所述最終位置是通過(guò)將一個(gè)或多個(gè)布局處理(213，214)的第二集合應(yīng)用于所述元素來(lái)確定的； 檢測(cè)用戶對(duì)中間控件的操作的動(dòng)作(602)； 響應(yīng)于所述用戶對(duì)所述中間控件的操作，相對(duì)于表示在所述顯示器上的所述元素的所述初始位置移動(dòng)表示在所述顯示器上的所述元素的所述中間位置的動(dòng)作(603);以及 致使一個(gè)或多個(gè)處理的所述第一集合被改變，使得下一次應(yīng)用一個(gè)或多個(gè)處理的所述第一集合時(shí)到達(dá)移動(dòng)后的中間位置的動(dòng)作(604)。
全文摘要
本發(fā)明涉及合成布局的可視化和編輯。對(duì)文檔元素的布局的計(jì)算機(jī)輔助可視化和可能的調(diào)整，其中存在多個(gè)布局處理被順序應(yīng)用。將一個(gè)或多個(gè)布局處理的一個(gè)集合應(yīng)用于元素以相對(duì)于該元素的初始位置確定它的中間位置。然后，將一個(gè)或多個(gè)布局處理的另一集合應(yīng)用于該元素以確定該元素的最終位置。不是只將最終位置顯示在顯示器上，而是使該元素的初始位置、中間位置和最終位置全部都被顯示。中間控件可用于通過(guò)移動(dòng)所顯示的元素的中間位置來(lái)改變一個(gè)或多個(gè)布局處理的第一集合。最終控件可用于通過(guò)移動(dòng)所顯示的元素的最終位置來(lái)改變一個(gè)或多個(gè)布局處理的第二集合。
文檔編號(hào)G06F17/30GK102929910SQ20121033104
公開(kāi)日2013年2月13日 申請(qǐng)日期2012年9月7日 優(yōu)先權(quán)日2011年9月8日
發(fā)明者E·A·索爾特韋爾, C·舍爾曼 申請(qǐng)人:微軟公司