專利名稱：一種圖形界面編輯方法及裝置的制作方法
技術領域：
本發明涉及業務處理技術領域，特別是涉及一種圖形界面編輯方法及裝置。
背景技術：
在軟件開發工作中，構建圖形界面是一項重要內容。圖形界面是軟件在被應用過 程中最直接面向用戶、和用戶交互最多的軟件組成部分。 一般，圖形界面由大量的控件組 成。所述控件通常包括文本框、按鈕、分隔窗格、表等。 設計圖形界面的過程就是根據用戶需求，將控件逐一放置到設計界面中，并在后 臺對控件屬性進行編輯，使生成的圖形界面中，各控件的展現形式滿足用戶的需求。
發明人通過對現有技術的研究發現，傳統的圖形界面編輯過程中，放置到設計界 面中的控件，僅僅是各控件的簡單示意，并不是真實控件的繪圖實例。即為，設計過程中設 計界面中展現的控件，與最終生成給用戶的圖形界面中展現的控件，其形式并不一致，無法 做到所見即所得。因此，設計人員在圖形界面設計過程中，只能根據用戶需求憑借感覺去設 置各控件的屬性，無法獲知該圖形界面展示給用戶時各控件的真實形式。從而很容易導致 最終生成的用戶圖形界面與用戶需求不完全一致。
發明內容
有鑒于此，本發明的目的在于提供一種圖形界面編輯方法及裝置，能夠實現設計 人員在圖形界面設計過程中的所見即所得。 為實現上述目的，本發明提供了如下方案一種圖形界面編輯方法，所述方法包 括 生成控件實例，添加到根面板的控件面板上； 在所述控件面板的最高層設置蒙層，屏蔽所述控件面板上的控件實例的行為屬 性； 通過所述蒙層對所述控件面板上的控件實例進行操作。 優選地，所述生成控件實例具體為 至少設置控件的狀態屬性或外觀屬性或行為屬性，生成控件實例。 優選地，所述添加到根面板的控件面板上的控件實例為非容器類控件實例。 優選地，所述方法還包括 在所述蒙層上添加容器類控件； 生成控件實例并添加到對應的容器類控件上； 分別為各容器類控件設置二級蒙層，屏蔽所述容器類控件上控件實例的行為屬 性； 通過所述二級蒙層對各容器類控件上的各控件實例進行操作。 優選地，所述通過所述蒙層對所述控件面板上的控件實例進行操作，具體為 通過所述蒙層改變所述控件面板上的控件實例的位置或修改控件實例的外觀屬性。 優選地，所述通過所述二級蒙層，對各容器類控件上的各控件實例進行操作，具體 為 通過所述二級蒙層，改變各容器類控件上的控件實例的位置或修改控件實例的外 觀屬性。
本發明還提供一種圖形界面編輯裝置，所述裝置包括 控件實例添加單元，用于生成控件實例，添加到根面板的控件面板上； 蒙層設置單元，用于在所述控件面板的最高層設置蒙層，屏蔽所述控件面板上的
控件實例的行為屬性； 操作單元，用于通過所述蒙層對所述控件面板上的控件實例進行操作。 優選地，所述控件實例添加單元具體為至少設置控件的狀態屬性或外觀屬性或
行為屬性，生成控件實例。 優選地，所述控件實例生成單元中添加到根面板的控制面板上的控件實例為非容 器類控件實例。 優選地，所述裝置還包括 容器類控件添加單元，用于在所述蒙層上添加容器類控件；
第二控件實例添加單元，用于生成控件實例并添加到對應的容器類控件上；
二級蒙層設置單元，用于分別為各容器類控件設置二級蒙層，屏蔽所述容器類控 件上控件實例的行為屬性； 第二操作單元，用于通過所述二級蒙層對各容器類控件上的各控件實例進行操 作。 優選地，所述操作單元具體為通過所述蒙層改變所述控件面板上的控件實例的 位置或修改控件實例的外觀屬性。 優選地，所述第二操作單元具體為通過所述二級蒙層，改變各容器類控件上的控 件實例的位置或修改控件實例的外觀屬性。
根據本發明提供的具體實施例，本發明公開了以下技術效果 本發明實施例，在圖形界面的設計過程中，添加到控件面板上的控件實例，不再僅 僅是各控件的簡單示意，而是根據用戶需求設置了相應屬性后的真實按鈕。此時，設計人員 在控件面板上看到的控件實例，即為運行界面生成程序后，在圖形界面中展現給用戶的控 件，由此實現了所見即所得。 同時，通過采用蒙層，避免設計人員在運用鼠標對控件面板上控件實例進行事件 操作時，觸發控件實例的行為屬性，使得設計人員能夠運用自如的對控件面板上各控件實 例進行操作。
圖1是本發明實施例一的圖形界面編輯方法流程圖；
圖2是本發明實施例一所述方法對應的控件面板示意圖；
圖3是本發明實施例二的圖形界面編輯方法流程圖；
圖4是本發明實施例二所述方法對應的控件面板示意 圖5是本發明實施例的圖形界面編輯裝置結構圖。
具體實施例方式
本發明的目的在于提供一種圖形界面編輯方法及裝置，能夠實現設計人員在圖形 界面設計過程中的所見即所得。 為使本發明的上述目的、特征和優點能夠更加明顯易懂，下面結合附圖和具體實 施方式對本發明作進一步詳細的說明。 參見圖l，本發明實施例一提供的圖形界面編輯方法包括以下步驟
步驟S101 :生成控件實例，添加到根面板的控件面板上； 對于圖形界面設計而言，其設計界面一般都是由根面板和控件面板構成。其中，所 述根面板用于放入控件面板，以便設計人員在所述控件面板上添加界面控件。
在現有技術中，添加到所述控件面板上的控件一般是指該控件對應的示意圖標。 例如，對于按鈕控件，可以采用方框表示。則現有界面設計中，當需要在圖形界面上顯示一 個按鈕時，設計人員會在控件面板上添加一個表示按鈕的方框，再根據用戶需求，在后臺編 寫代碼，設置該按鈕的屬性。但是，經過該設置的按鈕屬性在控件面板中無法展現。對于設 計人員來說，在控件面板中看到的，仍僅僅是方框。只有運行該圖形界面的生成程序時，系 統才會根據該按鈕屬性的設置代碼，生成相應的按鈕，顯示在圖形界面上展現給用戶。
這里需要說明的是，控件的屬性一般可以包括狀態屬性、外觀屬性和行為屬性。 仍以按鈕控件為例進行說明。其狀態屬性是控件的使用狀態，例如可以包括可用、不可用、 暫不可用等狀態；外觀屬性指控件的外在展示的屬性，例如可以包括顏色、或尺寸、或渲染 效果等；行為屬性是指控件對事件做出的反應，例如按鈕控件的行為屬性是對輸入設備 (例如鼠標)按下、點擊等事件具有不同的反應。 而本發明實施例中，在設計過程中，便根據用戶需求生成控件實例，展現在控件面 板上。具體的，所述根據用戶需求，生成控件實例具體為設計人員根據用戶的需求，設置控 件的狀態屬性、外觀屬性、行為屬性，生成控件實例。 這時，設計人員在控件面板上看到的，不再是控件的示意圖，而是控件的實際視 圖，即已經根據用戶需求對控件各項屬性具體定義后的控件實例。例如，仍以按鈕控件為 例，其對應的控件實例不再僅僅是方框，而是根據用戶需求設置了狀態、外觀、行為屬性后 的真實按鈕。此時，設計人員在控件面板上看到的按鈕，即為界面生成程序運行后，在圖形 界面中展現給用戶的按鈕，由此實現了所見即所得。 步驟S102 :在所述控件面板的最高層設置蒙層，屏蔽所述控件面板上控件實例的 行為屬性； 其中，所述蒙層設置在所述控件面板的最高層，能夠覆蓋該控件面板上所有的控 件實例。 通過步驟S101，使得本發明實施例中，添加到所述控件面板上的控件實例，已經具
備了各控件的行為屬性。因此，若設計人員直接運用鼠標對各控件實例進行事件操作，很可
能會因為鼠標的點擊觸發其行為屬性對應的事件，而無法實現需要的操作。 需要說明的是，所述事件操作可以包括對各控件實例的外觀屬性進行修改、改變
其放置位置等。
例如，以按鈕控件為例進行說明。當設計人員需要運用輸入設備(例如鼠標)對 控件面板上的一個按鈕控件實例進行拖拽操作，改變其放置位置時，需要首先用鼠標選中 該按鈕，再將其拖至需要的位置。但是，由于該按鈕控件實例已經具備了按鈕控件的行為屬 性，當設計人員用鼠標選中該按鈕時，很可能會觸發其行為屬性，例如"被按下"。此時，所述 按鈕顯示被按下，并將該按鈕鎖定在被按下狀態，使得設計人員無法對其繼續執行拖拽操 作。 為了避免上述情形，在添加了控件實例的控件面板的最高層設置蒙層，使其能夠 屏蔽所述控件面板上各控件實例的行為屬性，只接收設計人員在所述控件面板內對各控件 實例進行的事件操作。 由此，當設計人員運用鼠標對控件面板上的各控件實例進行操作時，通過所述蒙 層的屏蔽作用，避免觸發控件實例的行為屬性，使得操作能夠順利進行。 優選地，本發明實施例中，所述蒙層可以屏蔽所述控件面板上所有控件實例的實 行屬性；也可以只用于屏蔽控件面板上部分控件實例的行為屬性。 具體的，為所述蒙層指定需要屏蔽的控件實例，當蒙層接收到設計人員運用輸入
設備發送的觸發某個控件實例的行為屬性的指令時，所述蒙層判斷是否需要屏蔽該控件實
例的行為屬性，如果是，屏蔽該操作指令；如果否，執行該指令。 步驟S103 :通過所述蒙層，對所述控件面板上的控件實例進行操作。 具體的，所述蒙層不僅用于屏蔽控件實例的行為屬性，還能夠接收設計人員的輸
入設備(如鼠標)事件，并對這些事件行為做出決策，實現設計人員運用輸入設備對各控件
實例的事件操作。 所述蒙層僅屏蔽了該控件實例的行為屬性，設計人員仍然可以對控件實例的其他 屬性進行操作。通過所述蒙層，設計人員可以運用輸入設備改變所述控件面板上控件實例 的位置、或修改控件實例的外觀屬性等操作。 具體的，設計人員可以在所述蒙層上，運用輸入設備選中某控件實例，而不必擔心 會激發該控件實例的行為屬性。由此，設計人員可以通過輸入設備(如鼠標)將該控件實 例拖拽到控件面板上的任意位置，也可以根據用戶需求對該控件實例的長、寬、高、色彩、渲 染效果等外觀屬性進行修改。 需要說明的是，設計人員在蒙層上運用輸入設備對控件實例進行事件操作時，實 際上是由蒙層接收操作事件，并執行操作。 例如，設計人員需要通過蒙層對某一控件實例進行拖拽操作，蒙層接收該拖拽事 件，判斷被拖拽的是哪個控件、該控件是否允許被拖拽、拖拽后的位置是什么等，然后為該 控件設置新的位置坐標。 通過所述蒙層對各控件實例行為屬性的屏蔽作用，可以實現設計人員對所述控件 面板上各控件實例的事件操作。 下面結合圖2進行詳細說明，參照圖2，為本發明實施例一所述方法對應的控件面 板示意圖。 如圖2所示，Viewer為根面板，Component為控件面板，控件面板上的陰影面板即 為蒙層。所述控件面板設置在根面板上，在其上添加按鈕、文本框等控件實例。通過所述蒙 層的屏蔽作用，設計人員只能運用輸入設備實現對該控制面板上的控件實例，如按鈕、文本框等進行事件操作，而不能觸發其行為屬性。 本發明實施例一所述方法中，在圖形界面的設計過程中，添加到控件面板上的控 件實例，不再僅僅是各控件的簡單示意，而是根據用戶需求設置了相應屬性后的真實按鈕。 此時，設計人員在控件面板上看到的控件實例，即為運行界面生成程序后，在圖形界面中展 現給用戶的控件，由此實現了所見即所得。 同時，通過采用蒙層，避免設計人員在運用輸入設備對控件面板上控件實例進行 事件操作時，觸發控件實例的行為屬性，使得設計人員能夠運用自如的對控件面板上各控 件實例進行操作。 在圖形界面設計中，可以根據該控件是否能夠用來盛放其他控件將其分為兩類 容器類控件和非容器類控件。 其中，容器類控件能夠用于盛放其他控件；該類控件一般自身沒有用戶圖形設計 接口 ，僅依賴于其中所盛放的控件實現一定的功能。容器類控件的行為屬性包括鼠標點擊 時，顯示或隱藏該容器類控件內包含的所有控件。因此，將控件放置在一個容器類控件中， 其主要目的在于，能夠將一個容器類控件內包含的所有控件作為一個整體進行顯示、隱藏、 移動等。例如，頁簽控件(TabbedPane)。 對于本發明實施例一所述的方法，在圖形界面設計時，若在控件面板上加入容器 類型控件時，由于蒙層屏蔽了控件實例的行為屬性，使得設計人員無法觸發容器類控件的 行為屬性，使得一些操作無法實現。例如，在控件面板上設置多個頁簽控件，當用戶需要在 不同頁簽之間進行切換時，需要用鼠標點擊各頁簽控件，使其顯示或隱藏。但是，實施例一 所述方法中，會因為蒙層的原因導致無法上述操作無法實現。本發明實施例二所述方法能 夠解決上述問題。 參見圖3，本發明實施例二提供的圖形界面編輯方法包括以下步驟 步驟S301 :生成非容器類控件實例，添加到根面板的控件面板上； 需要說明的是，本發明實施例二中，在所述根面板的控件面板上，可以僅添加非容
器類控件。而將容器類控件添加在蒙層上，這樣，就可以避免因蒙層導致無法實現對容器類
控件行為屬性的操作。 具體的，生成非容器類控件實例的過程與實施例一中步驟S101中所述生成控件 實例的過程相同，不再贅述。 步驟S302 :在所述控件面板的最高層設置蒙層，屏蔽所述控件面板上控件實例的 行為屬性； 步驟S303 :通過所述蒙層，對所述控件面板上的控件實例進行操作； 本發明實施例二的步驟S302-303與實施例一的步驟S102-103相同，不再詳細描述。
步驟S304 :在所述蒙層上，添加容器類控件； 將所述容器類控件添加在位于控件面板最高層的蒙層上，以避免所述蒙層屏蔽設 計人員觸發該容器類控件的行為屬性。
步驟S305 :生成控件實例，分別添加到對應的容器類控件上； 具體的，可以根據用戶需求，為各容器類控件設置相應的控件實例。當所述蒙層上 包括多個容器類控件時，則根據用戶的需求，將生成的控件實例分別放入各容器類控件上。
步驟S305中所述生成控件實例的具體過程與實施例一中步驟S101中相同。
步驟S306 :分別為各容器類控件設置二級蒙層，屏蔽所述容器類控件上控件實例 的行為屬性； 步驟S307 :通過所述二級蒙層，對容器類控件上的控件實例進行操作。 需要說明的是，為各容器類控件設置的二級蒙層，只屏蔽該容器類控件上添加的
控件實例的行為屬性，并不屏蔽該容器類控件的行為屬性。因此，設計人員能夠觸發該容器
類控件的行為屬性，實現其顯示或隱藏功能。同時，還可以避免觸發該容器類控件上各控件
實例的行為屬性。 所述二級蒙層僅屏蔽了該容器類控件上的控件實例的行為屬性，設計人員仍然可 以對各控件實例的其他屬性進行操作。具體的，通過所述二級蒙層，設計人員可以運用輸入 設備改變所述容器類控件上各控件實例的位置、或修改各控件實例的外觀屬性等操作。其 具體操作過程與實施例一中所述通過蒙層進行操作的過程相同。 下面結合圖4進行詳細說明，參照圖4，為本發明實施例二所述方法對應的控件面 板示意圖。 如圖4所示，將文本框、按鈕等非容器類控件添加在根面板的控件面板上，并在其 最高層設置蒙層。在該蒙層上添加頁簽控件Tabl和頁簽控件Tab2。分別為兩個頁簽控件 添加對應的控件實例。例如，在頁簽控件Tabl上添加checkbox、radio、文本框等。
為頁簽控件Tabl和頁簽控件Tab2分別設置二級蒙層，且各二級蒙層只屏蔽各頁 簽控件上各控件實例的行為屬性。例如，設置在頁簽控件Tabl上的二級蒙層只屏蔽其上添 加的check box、 radio、文本框等控件實例的行為屬性，并不屏蔽該頁簽控件Tabl的行為 屬性。即為，設計人員運用鼠標點擊該頁簽控件Tabl時，依然能夠實現顯示或隱藏該頁簽 控件Tabl的功能。但是當設計人員運用鼠標點擊頁簽控件Tabl上的其他控件實例，例如 checkbox時，并不能觸發其行為屬性，只能對其進行事件操作。 本發明實施例二所述的方法，能夠解決因蒙層導致的設計人員無法實現在各容器 類控件之間進行切換的問題。 與本發明實施例提供的圖形界面編輯方法相對應，本發明實施例還提供了一種圖 形界面編輯裝置，參見圖5，該裝置包括以下單元 控件實例添加單元U501，用于生成控件實例，添加到根面板的控件面板上；
蒙層設置單元U502，用于在所述控件面板的最高層設置蒙層，屏蔽所述控件面板 上控件實例的行為屬性； 操作單元U503，用于通過所述蒙層，對所述控件面板上的控件實例進行操作。
優選的，所述控件實例生成單元中添加到根面板的控制面板上的控件實例為非容 器類控件實例。 優選的，所述裝置還包括 容器類控件添加單元U504，用于在所述蒙層上，添加容器類控件； 第二控件實例添加單元U505，用于生成控件實例，分別添加到對應的容器類控件
上； 二級蒙層設置單元U506，用于分別為各容器類控件設置二級蒙層，屏蔽所述容器 類控件上控件實例的行為屬性；
第二操作單元U507，用于通過所述二級蒙層，對各容器類控件上的控件實例進行 操作。 優選的，所述控件實例添加單元U501具體為至少設置控件的狀態屬性或外觀屬 性或行為屬性，生成控件實例。 優選的，所述操作單元U503具體為通過所述蒙層，改變所述控件面板上的控件 實例的位置或修改其外觀屬性。 優選地，所述第二操作單元U507具體為通過所述二級蒙層，改變各容器類控件 上的控件實例的位置或修改各控件實例的外觀屬性。 本發明實施例所述裝置中，在圖形界面的設計過程中，添加到控件面板上的控件 實例，不再僅僅是各控件的簡單示意，而是根據用戶需求設置了相應屬性后的真實按鈕。此 時，設計人員在控件面板上看到的控件實例，即為運行界面生成程序后，在圖形界面中展現 給用戶的控件，由此實現了所見即所得。 同時，通過采用蒙層，避免設計人員在運用輸入設備對控件面板上控件實例進行 事件操作時，觸發控件實例的行為屬性，使得設計人員能夠運用自如的對控件面板上各控 件實例進行操作。 以上對本發明所提供的一種圖形界面編輯方法及裝置，進行了詳細介紹，本文中 應用了具體個例對本發明的原理及實施方式進行了闡述，以上實施例的說明只是用于幫助 理解本發明的方法及其核心思想；同時，對于本領域的一般技術人員，依據本發明的思想， 在具體實施方式
及應用范圍上均會有改變之處。綜上所述，本說明書內容不應理解為對本 發明的限制。
權利要求
一種圖形界面編輯方法，其特征在于，所述方法包括生成控件實例，添加到根面板的控件面板上；在所述控件面板的最高層設置蒙層，屏蔽所述控件面板上的控件實例的行為屬性；通過所述蒙層對所述控件面板上的控件實例進行操作。
2. 根據權利要求1所述的方法，其特征在于，所述生成控件實例具體為 至少設置控件的狀態屬性或外觀屬性或行為屬性，生成控件實例。
3. 根據權利要求2所述的方法，其特征在于，所述添加到根面板的控件面板上的控件 實例為非容器類控件實例。
4. 根據權利要求3所述的方法，其特征在于，所述方法還包括 在所述蒙層上添加容器類控件； 生成控件實例并添加到對應的容器類控件上；分別為各容器類控件設置二級蒙層，屏蔽所述容器類控件上控件實例的行為屬性； 通過所述二級蒙層對各容器類控件上的各控件實例進行操作。
5. 根據權利要求1至4任一項所述的方法，其特征在于，所述通過所述蒙層對所述控件 面板上的控件實例進行操作，具體為通過所述蒙層改變所述控件面板上的控件實例的位置或修改控件實例的外觀屬性。
6. 根據權利要求4所述的方法，其特征在于，所述通過所述二級蒙層，對各容器類控件 上的各控件實例進行操作，具體為通過所述二級蒙層，改變各容器類控件上的控件實例的位置或修改控件實例的外觀屬性。
7. —種圖形界面編輯裝置，其特征在于，所述裝置包括 控件實例添加單元，用于生成控件實例，添加到根面板的控件面板上； 蒙層設置單元，用于在所述控件面板的最高層設置蒙層，屏蔽所述控件面板上的控件實例的行為屬性；操作單元，用于通過所述蒙層對所述控件面板上的控件實例進行操作。
8. 根據權利要求7所述的裝置，其特征在于，所述控件實例添加單元具體為至少設置 控件的狀態屬性或外觀屬性或行為屬性，生成控件實例。
9. 根據權利要求8所述的裝置，其特征在于，所述控件實例生成單元中添加到根面板 的控制面板上的控件實例為非容器類控件實例。
10. 根據權利要求9所述的裝置，其特征在于，所述裝置還包括 容器類控件添加單元，用于在所述蒙層上添加容器類控件； 第二控件實例添加單元，用于生成控件實例并添加到對應的容器類控件上； 二級蒙層設置單元，用于分別為各容器類控件設置二級蒙層，屏蔽所述容器類控件上控件實例的行為屬性；第二操作單元，用于通過所述二級蒙層對各容器類控件上的各控件實例進行操作。
11. 根據權利要求7至10任一項所述的裝置，其特征在于，所述操作單元具體為通過 所述蒙層改變所述控件面板上的控件實例的位置或修改控件實例的外觀屬性。
12. 根據權利要求10所述的裝置，其特征在于，所述第二操作單元具體為通過所述二 級蒙層，改變各容器類控件上的控件實例的位置或修改控件實例的外觀屬性。
全文摘要
本發明公開了一種圖形界面編輯方法，包括生成控件實例，添加到根面板的控件面板上；在所述控件面板的最高層設置蒙層，屏蔽所述控件面板上控件實例的行為屬性；通過所述蒙層，對所述控件面板上的控件實例進行操作。本發明還公開了一種圖形界面編輯裝置。采用本發明實施例，能夠實現設計人員在圖形界面設計過程中的所見即所得。
文檔編號G06F9/44GK101702126SQ20091025035
公開日2010年5月5日 申請日期2009年12月4日 優先權日2009年12月4日
發明者陳泓釗 申請人:金蝶軟件(中國)有限公司