混合型客戶(hù)端界面實(shí)現(xiàn)方法及其系統(tǒng)的制作方法
【技術(shù)領(lǐng)域】
[0001] 本發(fā)明涉及數(shù)據(jù)顯示技術(shù)，特別涉及混合型客戶(hù)端界面實(shí)現(xiàn)方法及其系統(tǒng)。
【背景技術(shù)】
[0002] 為了更好的適應(yīng)不同的需求，可以在一個(gè)客戶(hù)端界面中嵌入多個(gè)頁(yè)面片段來(lái)提升 客戶(hù)端界面的靈活度。
[0003] 通常，一個(gè)webview組件用于承載一個(gè)頁(yè)面片段。那么如圖1所示，如果要實(shí)現(xiàn)不 連續(xù)的頁(yè)面片段在同一客戶(hù)端界面顯示，則必須要使用多個(gè)webview組件。然而，本發(fā)明的 發(fā)明人發(fā)現(xiàn)，webview組件本身比較消耗資源（加載頁(yè)面、獲取數(shù)據(jù)、渲染頁(yè)面），如果過(guò)多 的使用webview組件必會(huì)帶來(lái)性能、體驗(yàn)上的下降，例如消耗內(nèi)存造成卡或是加載時(shí)間長(zhǎng) 等等。

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

[0004] 本發(fā)明的目的在于提供一種混合型客戶(hù)端界面實(shí)現(xiàn)方法及其系統(tǒng)，在確?？蛻?hù)端 界面的靈活度的同時(shí)，不會(huì)影響客戶(hù)端的用戶(hù)體驗(yàn)。
[0005] 為解決上述技術(shù)問(wèn)題，本發(fā)明的實(shí)施方式公開(kāi)了一種混合型客戶(hù)端界面實(shí)現(xiàn)方 法，該客戶(hù)端界面中包括至少兩個(gè)頁(yè)面片段和至少一個(gè)本地組件，該方法包括以下步驟：
[0006] 生成一個(gè)瀏覽器組件和至少一個(gè)本地組件；
[0007] 將至少兩個(gè)頁(yè)面片段組合成一個(gè)頁(yè)面，并由該瀏覽器組件加載和顯示，其中至少 兩個(gè)頁(yè)面片段分布在至少一個(gè)本地組件的兩側(cè)；
[0008] 將本地組件疊加于瀏覽器組件上方的指定位置，以形成客戶(hù)端界面。
[0009] 本發(fā)明的實(shí)施方式還公開(kāi)了一種混合型客戶(hù)端界面實(shí)現(xiàn)系統(tǒng)，該客戶(hù)端界面中包 括至少兩個(gè)頁(yè)面片段和至少一個(gè)本地組件，該系統(tǒng)包括：
[0010] 生成模塊，用于生成一個(gè)瀏覽器組件和至少一個(gè)本地組件；
[0011] 組合模塊，用于將至少兩個(gè)頁(yè)面片段組合成一個(gè)頁(yè)面；
[0012] 加載模塊，用于控制生成模塊生成的瀏覽器組件加載和顯示組合模塊組合的頁(yè) 面，其中至少兩個(gè)頁(yè)面片段分布在至少一個(gè)本地組件的兩側(cè)；以及
[0013] 疊加模塊，用于將生成模塊生成的本地組件疊加于瀏覽器組件上方的指定位置， 以形成客戶(hù)端界面。
[0014] 本發(fā)明實(shí)施方式與現(xiàn)有技術(shù)相比，主要區(qū)別及其效果在于：
[0015] 在本發(fā)明中，將至少兩個(gè)頁(yè)面片段組合成一個(gè)頁(yè)面，并由瀏覽器組件加載和顯示， 然后將本地組件疊加于該瀏覽器組件上方的指定位置，以形成客戶(hù)端界面，不但確保了客 戶(hù)端界面的靈活度，而且不會(huì)影響客戶(hù)端的用戶(hù)體驗(yàn)。
[0016] 進(jìn)一步地，根據(jù)本地組件的位置來(lái)調(diào)整瀏覽器組件中頁(yè)面片段的位置和/或大 小，方便靈活。
[0017] 進(jìn)一步地，更新客戶(hù)端界面時(shí)，只需要加載和渲染一次新的網(wǎng)頁(yè)頁(yè)面即可，在不影 響用戶(hù)體驗(yàn)的基礎(chǔ)上，能夠大大靈活客戶(hù)端的展現(xiàn)能力。
[0018] 進(jìn)一步地，能夠使客戶(hù)端界面同時(shí)顯示不同業(yè)務(wù)內(nèi)容，以更好地適應(yīng)不同需求。
【附圖說(shuō)明】
[0019] 圖1是現(xiàn)有的客戶(hù)端界面的結(jié)構(gòu)示意圖；
[0020] 圖2是現(xiàn)有的客戶(hù)端界面實(shí)現(xiàn)方法的流程示意圖；
[0021] 圖3是本發(fā)明第一實(shí)施方式中一種混合型客戶(hù)端界面實(shí)現(xiàn)方法的流程示意圖；
[0022] 圖4A-4C分別是本發(fā)明第一實(shí)施方式中一種混合型客戶(hù)端界面的結(jié)構(gòu)示意圖；
[0023] 圖5是本發(fā)明第二實(shí)施方式中一種混合型客戶(hù)端界面的結(jié)構(gòu)示意圖；
[0024] 圖6是本發(fā)明第二實(shí)施方式中一種混合型客戶(hù)端界面實(shí)現(xiàn)方法的流程示意圖；
[0025] 圖7是本發(fā)明第三實(shí)施方式中一種混合型客戶(hù)端界面實(shí)現(xiàn)系統(tǒng)的結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0026] 在以下的敘述中，為了使讀者更好地理解本申請(qǐng)而提出了許多技術(shù)細(xì)節(jié)。但是，本 領(lǐng)域的普通技術(shù)人員可以理解，即使沒(méi)有這些技術(shù)細(xì)節(jié)和基于以下各實(shí)施方式的種種變化 和修改，也可以實(shí)現(xiàn)本申請(qǐng)各權(quán)利要求所要求保護(hù)的技術(shù)方案。
[0027] 為使本發(fā)明的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面將結(jié)合附圖對(duì)本發(fā)明的實(shí)施 方式作進(jìn)一步地詳細(xì)描述。
[0028] 本發(fā)明第一實(shí)施方式涉及一種混合型客戶(hù)端界面實(shí)現(xiàn)方法。圖3是該混合型客戶(hù) 端界面實(shí)現(xiàn)方法的流程示意圖。該客戶(hù)端界面中包括至少兩個(gè)頁(yè)面片段和至少一個(gè)本地組 件?？梢岳斫?，本地組件是在客戶(hù)端本地實(shí)現(xiàn)界面的預(yù)制組件，包括編輯組件（Memo)、下拉 框組件（Combobox)、多選框組件、單選框組件、輸入框組件（Edit)、標(biāo)簽組件（Label)等等， 但不包括瀏覽器組件。
[0029] 該方法包括以下步驟：
[0030] 在步驟301中，生成一個(gè)瀏覽器組件和至少一個(gè)本地組件。
[0031] 此后進(jìn)入步驟302,將至少兩個(gè)頁(yè)面片段組合成一個(gè)頁(yè)面，并由該瀏覽器組件加載 和顯示，其中至少兩個(gè)頁(yè)面片段分布在至少一個(gè)本地組件的兩側(cè)。例如，如圖4A所示，頁(yè)面 片段1和頁(yè)面片段2分別在本地組件2的上下側(cè)；或是如圖4B所示，頁(yè)面片段1、頁(yè)面片段 2和頁(yè)面片段3分別在本地組件2的上側(cè)、下側(cè)和右側(cè)；又或是如圖4C所示，頁(yè)面片段1、頁(yè) 面片段2和頁(yè)面片段3分別在本地組件2的左側(cè)、右側(cè)和下側(cè)等等。
[0032] 優(yōu)選地，各頁(yè)面片段具有不同業(yè)務(wù)內(nèi)容。能夠使客戶(hù)端界面同時(shí)顯示不同業(yè)務(wù)內(nèi) 容，以更好地適應(yīng)不同需求。
[0033] 此外，可以理解，在本發(fā)明的其他實(shí)施方式中，各頁(yè)面片段也可以是相同業(yè)務(wù)內(nèi) 容。
[0034] 此后進(jìn)入步驟303,將本地組件疊加于瀏覽器組件上方的指定位置，以形成客戶(hù)端 界面。在本發(fā)明的一個(gè)優(yōu)選例中，將本地組件疊加于瀏覽器組件上方的指定位置是指：將瀏 覽器組件中顯示的頁(yè)面作為背景，本地組件疊加在瀏覽器組件之上（遮蓋掉瀏覽器組件的 一部分）。
[0035] 此后結(jié)束本流程。
[0036] 在本實(shí)施方式中，將至少兩個(gè)頁(yè)面片段組合成一個(gè)頁(yè)面，并由瀏覽器組件加載和 顯示，將本地組件疊加于該瀏覽器組件上方的指定位置，以形成客戶(hù)端界面，不但確保了客 戶(hù)端界面的靈活度，而且不會(huì)影響客戶(hù)端的用戶(hù)體驗(yàn)。
[0037] 本發(fā)明第二實(shí)施方式涉及一種混合型客戶(hù)端界面實(shí)現(xiàn)方法。
[0038] 第二實(shí)施方式在第一實(shí)施方式的基礎(chǔ)上進(jìn)行了改進(jìn)，主要改進(jìn)之處在于：根據(jù)本 地組件的位置來(lái)調(diào)整瀏覽器組件中頁(yè)面片段的位置和/或大小，方便靈活。具體地說(shuō)：
[0039] 在步驟303之后還包括以下步驟：
[0040] 根據(jù)本地組件的位置來(lái)調(diào)整瀏覽器組件中頁(yè)面片段的位置和/或大小。
[0041] 可以理解，在本發(fā)明的其他實(shí)施方式中，也可以根據(jù)瀏覽器組件中頁(yè)面片段的位 置和/或大小來(lái)調(diào)整本地組件的位置，或者可以同時(shí)調(diào)整本地組件的位置和瀏覽器組件中 頁(yè)面片段的位置和/或大小。
[0042] 優(yōu)選地，根據(jù)本地組件的位置來(lái)調(diào)整瀏覽器組件中頁(yè)面片段的位置和/或大小的 步驟中包括以下子步驟：
[0043] 判斷本地組件的位置與頁(yè)面片段的位置是否重疊或是否符合預(yù)定義的閾值；
[0044] 若本地組件的位置與頁(yè)面片段的位置重疊或不符合預(yù)定義的閾值，則對(duì)頁(yè)面片段 的位置和/或大小進(jìn)行相應(yīng)調(diào)整。
[0045] 可以理解，與傳統(tǒng)的直接將本地組件和瀏覽器組件加載的網(wǎng)頁(yè)頁(yè)面一個(gè)個(gè)排布到 客戶(hù)端界面上不同，由于本實(shí)施方式將多個(gè)頁(yè)面片段組合成一個(gè)頁(yè)面，并由瀏覽器組件加 載和顯示，然后在該瀏覽器組件上方疊加本地組件，因此需要對(duì)頁(yè)面片段的位置和/或大 小以及本地組件的位置進(jìn)行調(diào)整，以使其均勻分布（例如頁(yè)面片段與組件間隙在一范圍 內(nèi)，不能太大，也不能太?。?br>[0046] 可選地，調(diào)整參數(shù)包括坐標(biāo)和尺寸等等。可以理解，必要時(shí)，在調(diào)整其中一個(gè)頁(yè)面 片段的同時(shí)，調(diào)整與該頁(yè)面片段相關(guān)聯(lián)的其他頁(yè)面片段。當(dāng)然，在本發(fā)明的其他實(shí)施方式 中，也可以使用其他參數(shù)對(duì)頁(yè)面片段和本地組件進(jìn)行調(diào)整。
[0047] 作為可選實(shí)施方式，該方法還可以包括以下步驟：
[0048] 需要更新客戶(hù)端界面時(shí)，將至少兩個(gè)頁(yè)面片段組合成一個(gè)新的頁(yè)面，并由瀏覽器 組件