組件渲染方法和裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及計(jì)算機(jī)技術(shù)領(lǐng)域，特別是涉及一種組件渲染方法和裝置。
【背景技術(shù)】
[0002]UI (User Interface，用戶界面)動態(tài)擴(kuò)展機(jī)制可以讓最終用戶個性化調(diào)整對應(yīng)的頁面，比如，設(shè)置表格的寬度，調(diào)整表格的列順序，設(shè)置字段的位置等。Web (網(wǎng)頁)中現(xiàn)有的動態(tài)擴(kuò)展技術(shù)一般以UI元數(shù)據(jù)進(jìn)行驅(qū)動，在設(shè)計(jì)期操作的全部是Web的UI元數(shù)據(jù)。設(shè)計(jì)期所渲染的界面是為了方便開發(fā)人員設(shè)計(jì)而定義的界面，與運(yùn)行期無關(guān)。設(shè)計(jì)期頁面與對應(yīng)的運(yùn)行期頁面的內(nèi)容和形式會有所不同。以WAFII(Web Applicat1n Framework II, Web應(yīng)用框架II )平臺為例，設(shè)計(jì)期頁面如圖1所示，而對應(yīng)的運(yùn)行期頁面如圖2所示，設(shè)計(jì)期頁面與運(yùn)行期頁面并不一致。對于開發(fā)人員來講，設(shè)計(jì)期和運(yùn)行期相互隔離，即使在設(shè)計(jì)期就出現(xiàn)了界面錯誤，也只能等到運(yùn)行期才能發(fā)現(xiàn)，從而導(dǎo)致開發(fā)效率下降。

【發(fā)明內(nèi)容】

[0003]基于此，有必要針對上述技術(shù)問題，提供一種能夠有效提高開發(fā)效率的組件渲染方法和裝置。
[0004]一種組件渲染方法，所述方法包括:
[0005]獲取界面元數(shù)據(jù)，所述界面元數(shù)據(jù)中包括設(shè)計(jì)期組件和運(yùn)行期組件，所述設(shè)計(jì)期組件包括預(yù)設(shè)控制功能；
[0006]利用所述預(yù)設(shè)控制功能與所述運(yùn)行期組件包裝得到所述設(shè)計(jì)期組件對應(yīng)的控制組件；
[0007]通過對所述運(yùn)行期組件進(jìn)行渲染，得到運(yùn)行期頁面；
[0008]通過對所述控制組件進(jìn)行渲染，得到設(shè)計(jì)期頁面。
[0009]在其中一個實(shí)施例中，所述運(yùn)行期組件包括屬性集合和功能集合，所述利用所述預(yù)設(shè)控制功能與所述運(yùn)行期組件包裝得到所述設(shè)計(jì)期組件對應(yīng)的控制組件的步驟包括:
[0010]獲取所述運(yùn)行期組件的屬性集合和功能集合；
[0011]利用所述屬性集合和所述功能集合與所述預(yù)設(shè)控制功能進(jìn)行包裝，得到所述設(shè)計(jì)期組件對應(yīng)的控制組件。
[0012]在其中一個實(shí)施例中，在所述通過對所述運(yùn)行期組件進(jìn)行渲染，得到運(yùn)行期頁面的步驟之前，還包括:
[0013]在對所述界面元數(shù)據(jù)進(jìn)行渲染時，獲取控制組件D0M ;
[0014]對所述控制組件D0M進(jìn)行渲染；
[0015]對所述控制組件綁定所述預(yù)設(shè)控制功能。
[0016]在其中一個實(shí)施例中，所述控制組件包括父控制組件和子控制組件，在所述通過對所述運(yùn)行期組件進(jìn)行渲染，得到運(yùn)行期頁面的步驟之后，還包括:
[0017]獲取運(yùn)行期組件D0M ；
[0018]將所述運(yùn)行期組件D0M加入到所述父控制組件中；
[0019]通過對子控制組件和所述父控制組件進(jìn)行渲染，得到對應(yīng)的設(shè)計(jì)期頁面。
[0020]在其中一個實(shí)施例中，所述方法還包括:
[0021]當(dāng)處于設(shè)計(jì)期時，利用控制組件的渲染方式對所述界面元數(shù)據(jù)進(jìn)行渲染；
[0022]當(dāng)處于運(yùn)行期時，利用運(yùn)行期組件的渲染方式對所述界面元數(shù)據(jù)進(jìn)行渲染。
[0023]一種組件渲染裝置，所述裝置包括:
[0024]獲取模塊，用于獲取界面元數(shù)據(jù)，所述界面元數(shù)據(jù)中包括設(shè)計(jì)期組件和運(yùn)行期組件，所述設(shè)計(jì)期組件包括預(yù)設(shè)控制功能；
[0025]包裝模塊，用于利用所述預(yù)設(shè)控制功能與所述運(yùn)行期組件包裝得到所述設(shè)計(jì)期組件對應(yīng)的控制組件；
[0026]設(shè)計(jì)期渲染模塊，用于通過對所述控制組件進(jìn)行渲染，得到設(shè)計(jì)期頁面；
[0027]運(yùn)行期渲染模塊，用于通過對所述運(yùn)行期組件進(jìn)行渲染，得到運(yùn)行期頁面。
[0028]在其中一個實(shí)施例中，所述運(yùn)行期組件包括屬性集合和功能集合，所述獲取模塊還用于獲取所述運(yùn)行期組件的屬性集合和功能集合；所述包裝模塊還用于利用所述屬性集合和所述功能集合與所述預(yù)設(shè)控制功能進(jìn)行包裝，得到所述設(shè)計(jì)期組件對應(yīng)的控制組件。
[0029]在其中一個實(shí)施例中，所述獲取模塊還用于在對所述界面元數(shù)據(jù)進(jìn)行渲染時，獲取控制組件D0M ;所述設(shè)計(jì)期渲染模塊還用于對控制組件D0M進(jìn)行渲染；
[0030]所述裝置還包括:
[0031]綁定模塊，用于對控制組件綁定預(yù)設(shè)控制功能。
[0032]在其中一個實(shí)施例中，所述控制組件包括父控制組件和子控制組件，所述獲取模塊還用于獲取運(yùn)行期組件D0M ;所述設(shè)計(jì)期渲染模塊還用于將所述運(yùn)行期組件D0M加入到所述父控制組件中；通過對子控制組件和所述父控制組件進(jìn)行渲染，得到對應(yīng)的設(shè)計(jì)期頁面。
[0033]在其中一個實(shí)施例中，所述設(shè)計(jì)期渲染模塊還用于當(dāng)處于設(shè)計(jì)期時，利用控制組件的渲染方式對所述界面元數(shù)據(jù)進(jìn)行渲染；所述運(yùn)行期渲染模塊還用于當(dāng)處于運(yùn)行期時，利用運(yùn)行期組件的渲染方式對所述界面元數(shù)據(jù)進(jìn)行渲染。
[0034]上述組件渲染方法和裝置，通過對設(shè)計(jì)期組件的預(yù)設(shè)控制功能與運(yùn)行期組件包裝得到設(shè)計(jì)期組件對應(yīng)的控制組件，繼而對運(yùn)行期組件進(jìn)行渲染得到運(yùn)行期頁面，對控制組件進(jìn)行渲染得到設(shè)計(jì)期頁面，使得設(shè)計(jì)期組件的渲染方式與運(yùn)行期組件的渲染方式得到統(tǒng)一，由此使得設(shè)計(jì)期頁面和運(yùn)行期頁面幾乎一致。從而提供了所見即所得的功能，有效提高了開發(fā)效率。
【附圖說明】
[0035]圖1為一個實(shí)施例中設(shè)計(jì)期頁面的示意圖；
[0036]圖2為一個實(shí)施例中運(yùn)行期頁面的示意圖；
[0037]圖3為一個實(shí)施例中組件渲染方法流程圖；
[0038]圖4為又一個實(shí)施例中組件渲染方法流程圖；
[0039]圖5為一個實(shí)施例中采用組件渲染方法得到的設(shè)計(jì)期頁面的示意圖；
[0040]圖6為一個實(shí)施例中組件渲染裝置的結(jié)構(gòu)示意圖；
[0041]圖7為又一個實(shí)施例中組件渲染裝置的結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0042]為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點(diǎn)更加清楚明白，以下結(jié)合附圖及實(shí)施例，對本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說明。應(yīng)當(dāng)理解，此處描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0043]在一個實(shí)施例中，如圖3所示，提供了一種組件渲染方法，該方法包括:
[0044]步驟302，獲取界面元數(shù)據(jù)，界面元數(shù)據(jù)中包括設(shè)計(jì)期組件和運(yùn)行期組件，設(shè)計(jì)期組件包括預(yù)設(shè)控制功能。
[0045]界面元數(shù)據(jù)是描述界面對象的一種方式。界面元數(shù)據(jù)中包括有關(guān)界面布局的信息，其中包括界面組件以及業(yè)務(wù)邏輯等。界面組件可以處在不同的階段，其中包括設(shè)計(jì)期和運(yùn)行期。設(shè)計(jì)期(又稱為設(shè)計(jì)時)是指界面處在開發(fā)設(shè)計(jì)階段。運(yùn)行期(又稱為運(yùn)行時)是指界面處于運(yùn)行階段。處于設(shè)計(jì)期的組件可以稱為設(shè)計(jì)期組件，處于運(yùn)行期的組件可以稱為運(yùn)行期組件。
[0046]運(yùn)行期組件包括屬性集合、事件集合和功能集合。屬性集合(又稱為參數(shù)集合)中包含運(yùn)行期組件的屬性參數(shù)，是對外開放的接口。事件集合可以對外響應(yīng)事件，也是對外開放的接口。功能集合(又稱為行為集合)包含運(yùn)行期組件自身的行為。運(yùn)行期組件還包括運(yùn)行期組件渲染方法。調(diào)用運(yùn)行期組件渲染方法，根據(jù)輸入的屬性參數(shù)在界面中渲染出運(yùn)行期組件的外形。
[0047]設(shè)計(jì)期組件包括屬性集合，但不包括事件集合和功能集合，僅作設(shè)計(jì)期展現(xiàn)使用。設(shè)計(jì)期組件包括設(shè)計(jì)期組件渲染方法，以及預(yù)設(shè)控制功能。在一個實(shí)施例中，預(yù)設(shè)設(shè)計(jì)期功能包括拖動、修改、添加和刪除中至少一項(xiàng)。
[0048]傳統(tǒng)的設(shè)計(jì)期組件渲染方式為:在獲取界面元數(shù)據(jù)后，調(diào)用設(shè)計(jì)期組件渲染方法，以遞歸的方式對每個設(shè)計(jì)期組件進(jìn)行渲染。在渲染出設(shè)計(jì)期組件之后，根據(jù)預(yù)設(shè)控制功能進(jìn)行操作。例如，處理設(shè)計(jì)期組件的拖動操作、屬性編輯等。傳統(tǒng)的運(yùn)行期組件渲染方式為:在獲取界面元數(shù)據(jù)后，調(diào)用運(yùn)行期組件渲染方法，以遞歸的方式對每個運(yùn)行期組件進(jìn)行渲染。在渲染出運(yùn)行期組件之后，即可處理運(yùn)行期的相關(guān)事件。由于傳統(tǒng)的設(shè)計(jì)期組件渲染方式和傳統(tǒng)的運(yùn)行期組件渲染方式不同，使得渲染出的設(shè)計(jì)期組件與運(yùn)行期組件的外形不同，進(jìn)而導(dǎo)致設(shè)計(jì)期頁面與運(yùn)行期頁面也不同。
[0049]步驟304，利用預(yù)設(shè)控制功能與運(yùn)行期組件包裝得到設(shè)計(jì)期組件對應(yīng)的控制組件。
[0050]為了統(tǒng)一設(shè)計(jì)期組件渲染方式和運(yùn)行期組件渲染方式，可以將每個設(shè)計(jì)期組件分別包裝為對應(yīng)的控制組件。控制組件可以通過對設(shè)計(jì)期組件中的預(yù)設(shè)控制功能與運(yùn)行期組件包裝來得到。
[0051]在一個實(shí)施例中，運(yùn)行期組件包括屬性集合和功能集合，利用預(yù)設(shè)控制功能與運(yùn)行期組件包裝得到設(shè)計(jì)期組件對應(yīng)的控制組件的步驟包括:獲取運(yùn)行期組件的屬性集合和功能集合；利用屬性集合和功能集合與預(yù)設(shè)控制功能進(jìn)行包裝，得到設(shè)計(jì)期組件對應(yīng)的控制組件。
[0052]利用運(yùn)行期組件的屬性集合和功能集合與設(shè)計(jì)期組件的預(yù)設(shè)控制功能進(jìn)行包裝，得到設(shè)計(jì)期組件對應(yīng)的控制組件。具體的，可以采用Javascript (—種網(wǎng)絡(luò)腳本語言)中的Object (對象，一種數(shù)據(jù)類型)類型包裝方法對運(yùn)行期組件的屬性集合和功能集合與設(shè)計(jì)期組件的預(yù)設(shè)控制屬性進(jìn)行包裝，得到設(shè)計(jì)期組件對應(yīng)的控制組件。由此能夠使得設(shè)計(jì)期組件和運(yùn)行期組件對應(yīng)的職責(zé)能夠明確分離開來，并且通過控制組件對設(shè)計(jì)期組件和運(yùn)行期組件進(jìn)行有效融合。
[0053]步驟306，通過對運(yùn)行期組件進(jìn)行渲染，得到運(yùn)行期頁面。
[0054]對運(yùn)行期組件進(jìn)行渲染，可以采用傳統(tǒng)的運(yùn)行期組件渲染方式。通過對運(yùn)行期組件進(jìn)行渲染，得到運(yùn)行期頁面
[0055]步驟308，通過對控制組件進(jìn)行渲染，得到設(shè)計(jì)期頁面。
[0056]由于控制組件是通過設(shè)計(jì)期組件的預(yù)設(shè)控制功能與運(yùn)行期組件包裝得到的，因此運(yùn)行期組件的屬性集合和功能集合對于控制組件是透明的，控制組件的相關(guān)屬性與運(yùn)行期組件的屬性相同。在運(yùn)行期組件渲染之后，可以利用運(yùn)行期組件D0M(DoCUment ObjectModel，文檔對象模型)與控制組件DOM的結(jié)合對控制組件進(jìn)行渲染。進(jìn)而得到與運(yùn)行期頁面幾乎一致的設(shè)計(jì)期頁面。從而有效解決了設(shè)計(jì)期組件和運(yùn)行期組件渲染方式隔離的問題