終端界面設(shè)計系統(tǒng)、方法及相關(guān)設(shè)備的制作方法
【專利摘要】本發(fā)明公開了一種終端界面設(shè)計系統(tǒng)、方法及相關(guān)設(shè)備，以解決現(xiàn)有的終端界面開發(fā)技術(shù)需要針對用戶終端的類型分別開發(fā)，效率低下等問題。本發(fā)明一些可行的實施方式中，系統(tǒng)可包括：控件庫，用于提供界面控件；編輯器，用于提供可視化編輯界面，根據(jù)編輯指令從所述控件庫中提取界面控件至所述可視化編輯界面，并設(shè)置提取的所述界面控件的屬性，形成所需要的終端界面；代碼生成器，用于根據(jù)所述編輯器中呈現(xiàn)的終端界面，以通用代碼格式生成相應(yīng)的界面描述文件；存儲器，用于保存所述界面描述文件；以及，適配器，用于提供適配庫，所述適配庫用于獲取并解析所述界面描述文件，生成與用戶終端適配的、其它代碼格式的界面程序代碼。
【專利說明】終端界面設(shè)計系統(tǒng)、方法及相關(guān)設(shè)備

【技術(shù)領(lǐng)域】
[0001] 本發(fā)明涉及網(wǎng)絡(luò)【技術(shù)領(lǐng)域】，具體涉及一種終端界面設(shè)計系統(tǒng)、方法及相關(guān)設(shè)備。

【背景技術(shù)】
[0002]用戶終端的類型越來越多，包括PC(personalcomputer，個人計算機）、手機、平 板、智能電視等。一個業(yè)務(wù)的開發(fā)需要適配眾多用戶終端，而每種用戶終端的終端界面開發(fā) 技術(shù)不盡相同，需要針對不同用戶終端招聘不同的技術(shù)人員進行適配開發(fā)，耗費大量時間、 金錢，效率也相當?shù)拖隆?br>

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

[0003] 本發(fā)明實施例提供一種終端界面設(shè)計系統(tǒng)、方法及相關(guān)設(shè)備，以解決現(xiàn)有的終端 界面開發(fā)技術(shù)需要針對用戶終端的類型分別開發(fā)，效率低下等問題。
[0004] 本發(fā)明第一方面提供一種終端界面設(shè)計方法，包括：
[0005] 控件庫，用于提供界面控件；
[0006] 編輯器，用于提供可視化編輯界面，根據(jù)編輯指令從所述控件庫中提取界面控件 至所述可視化編輯界面，并設(shè)置提取的所述界面控件的屬性，形成所需要的終端界面；
[0007] 代碼生成器，用于根據(jù)所述編輯器中呈現(xiàn)的終端界面，以通用代碼格式生成相應(yīng) 的界面描述文件；
[0008] 存儲器，用于保存所述界面描述文件；以及，
[0009] 適配器，用于提供適配庫，所述適配庫用于獲取并解析所述界面描述文件，生成與 用戶終端適配的、其它代碼格式的界面程序代碼。
[0010] 本發(fā)明第二方面提供一種終端界面設(shè)計系統(tǒng)，包括：
[0011] 提供可視化編輯界面，根據(jù)編輯指令從所述控件庫中提取界面控件至所述可視化 編輯界面，并設(shè)置提取的所述界面控件的屬性，形成所需要的終端界面；
[0012] 根據(jù)所述編輯器中呈現(xiàn)的終端界面，以通用代碼格式生成相應(yīng)的界面描述文件， 并保存所述界面描述文件；以及，
[0013] 提供適配庫，所述適配庫用于獲取并解析所述界面描述文件，生成與用戶終端適 配的、其它代碼格式的界面程序代碼。
[0014] 本發(fā)明第三方面提供一種用戶終端，包括：
[0015] 發(fā)送模塊，用于發(fā)送終端界面訪問請求給服務(wù)器；
[0016] 接收模塊，用于接收所述服務(wù)器返回的通用代碼格式的界面描述文件；
[0017] 適配庫模塊，用于解析所述界面描述文件，生成與所述用戶終端適配的、其它代碼 格式的界面程序代碼；
[0018] 顯示模塊，用于根據(jù)所述界面程序代碼顯示相應(yīng)的終端界面。
[0019] 本發(fā)明第四方面提供一種服務(wù)器，包括：
[0020] 接收模塊，用于接收用戶終端發(fā)送的終端界面訪問請求；
[0021] 獲取模塊，用于根據(jù)所述終端界面訪問請求提取相應(yīng)的通用代碼格式的界面描述 文件；
[0022] 識別模塊，用于識別所述用戶終端的類型；
[0023] 適配庫模塊，用于根據(jù)所述用戶終端的類型，解析所述界面描述文件，生成與所述 用戶終端適配的、其它代碼格式的界面程序代碼；
[0024] 發(fā)送模塊，用于發(fā)送所述其它代碼格式的界面程序代碼給所述用戶終端。
[0025] 由上可見，本發(fā)明實施例通過采用上述技術(shù)方案，使得，開發(fā)終端界面時，不需要 考慮用戶終端的類型，只需要生成通用代碼格式的界面描述文件即可；用戶終端可利用適 配庫將通用代碼格式的界面描述文件轉(zhuǎn)換為與用戶終端適配的界面程序代碼，最終呈現(xiàn)出 相應(yīng)的終端界面；從而取得以下技術(shù)效果：
[0026] 1、在可視化編輯界面中通過編輯控件形成終端界面，所見即所得，不需要直接寫 代碼，因而降低了開發(fā)難度，使得普通技術(shù)人員也可以開發(fā)終端界面。
[0027] 2、由于可利用適配庫進行代碼轉(zhuǎn)換，不需要針對每一種用戶終端分別開發(fā)終端界 面，只需要根據(jù)形成的終端界面生成一種通用代碼格式的界面描述文件即可，簡化了開發(fā) 操作，提高了開發(fā)效率。
[0028] 3、本發(fā)明終端界面設(shè)計系統(tǒng)能兼容多種主流平臺的界面開發(fā)，所兼容的平臺數(shù)量 取決于適配庫的開發(fā)數(shù)量。

【專利附圖】

【附圖說明】
[0029] 為了更清楚地說明本發(fā)明實施例技術(shù)方案，下面將對實施例和現(xiàn)有技術(shù)描述中所 需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發(fā)明的一些實施 例，對于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動的前提下，還可以根據(jù)這些附圖獲 得其它的附圖。
[0030]圖1是本發(fā)明實施例提供的一種終端界面設(shè)計系統(tǒng)的結(jié)構(gòu)示意圖；
[0031]圖2是本發(fā)明實施例終端界面設(shè)計系統(tǒng)的一個邏輯結(jié)構(gòu)及原理示意圖；
[0032] 圖3是本發(fā)明實施例提供的一種終端界面設(shè)計方法的流程示意圖；
[0033] 圖4是本發(fā)明實施例提供的一種用戶終端的結(jié)構(gòu)示意圖；
[0034] 圖5是本發(fā)明實施例提供的一種服務(wù)器的結(jié)構(gòu)示意圖。

【具體實施方式】
[0035] 本發(fā)明實施例提供一種終端界面設(shè)計系統(tǒng)、方法及相關(guān)設(shè)備，以解決現(xiàn)有的終端 界面開發(fā)技術(shù)需要針對用戶終端的類型分別開發(fā)，效率低下等問題。
[0036] 為了使本【技術(shù)領(lǐng)域】的人員更好地理解本發(fā)明方案，下面將結(jié)合本發(fā)明實施例中的 附圖，對本發(fā)明實施例中的技術(shù)方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是 本發(fā)明一部分的實施例，而不是全部的實施例?；诒景l(fā)明中的實施例，本領(lǐng)域普通技術(shù) 人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都應(yīng)當屬于本發(fā)明保護的范 圍。
[0037] 下面通過具體實施例，分別進行詳細的說明。
[0038] 實施例一、
[0039] 請參考圖1，本發(fā)明實施例提供一種終端界面設(shè)計系統(tǒng)，可包括：
[0040] 控件庫101，用于提供界面控件；
[0041] 編輯器102,用于提供可視化編輯界面，根據(jù)編輯指令從所述控件庫中提取界面控 件至所述可視化編輯界面，并設(shè)置提取的所述界面控件的屬性，形成所需要的終端界面；
[0042] 代碼生成器103,用于根據(jù)所述編輯器102中呈現(xiàn)的終端界面，以通用代碼格式生 成相應(yīng)的界面描述文件；
[0043] 存儲器104,用于保存所述界面描述文件；以及，
[0044]適配器105,用于提供適配庫，所述適配庫用于獲取并解析所述界面描述文件，生 成與用戶終端適配的、其它代碼格式的界面程序代碼。
[0045] 請參考圖2,是本發(fā)明實施例終端界面設(shè)計系統(tǒng)的一個邏輯結(jié)構(gòu)及原理示意圖。下 面，結(jié)合圖1和圖2,對本發(fā)明做進一步詳細說明：
[0046] 本發(fā)明實施例中，所述控件庫101中可存儲多種常用類型的界面控件，例如可包 括按鈕、選擇框、文本框、輸入框、圖片、列表、跑馬條、視頻框等。
[0047] 所述編輯器102可提供可視化編輯界面，用戶可以在可視化編輯界面中新建終端 界面，可以從所述控件庫中將需要的界面控件拖曳至新建的終端界面中，擺放在合適位置， 可以選中任一個界面控件，編輯其控件屬性，控件屬性可包括：位置、尺寸、內(nèi)容等等。所述 可視化編輯界面可利用javascript腳本技術(shù)，來實現(xiàn)拖拽和屬性編輯功能。編輯完畢，編 輯器102的可視化編輯界面中，呈現(xiàn)出最終需要的終端界面。所說的終端界面具體可以是 網(wǎng)頁，游戲頁面等。
[0048] 完成編輯后，用戶可指令代碼生成器103執(zhí)行代碼生成步驟，代碼生成器103根據(jù) 編輯器最終狀態(tài)信息，即編輯器102中最終呈現(xiàn)的終端界面，以通用代碼格式生成相應(yīng)的 界面描述文件。所說的通用代碼格式具體可以是JSON或XML等通用型描述格式。所說的界 面描述文件用于描述所述終端界面的配置信息，包括其中的界面控件的控件屬性信息等。
[0049] 存儲器104可將生成的通用代碼格式的界面描述文件保存到數(shù)據(jù)庫或文本文件 中。這些界面描述文件最終可提供給用于提供網(wǎng)絡(luò)服務(wù)的網(wǎng)頁服務(wù)器或者其它服務(wù)器，以 待用戶終端訪問。
[0050] 本發(fā)明實施例系統(tǒng)生成的是通用代碼格式的界面描述文件。為了能夠適用于不同 類型的用戶終端，本發(fā)明實施例系統(tǒng)的適配器還提供適配庫，適配庫用于提供代碼轉(zhuǎn)換功 能，可解析所述界面描述文件，生成與用戶終端適配的、其它代碼格式的界面程序代碼。
[0051] 本發(fā)明實施例中，所說的用戶終端可以是計算機設(shè)備或者安卓設(shè)備或者蘋果IOS 設(shè)備，所述的安卓設(shè)備或蘋果IOS設(shè)備具體可以是手機或平板電腦或Ipad等。舉例來說， 針對采用視窗（Windows)操作系統(tǒng)的計算機設(shè)備，適配庫可具體用于生成與計算機設(shè)備匹 配的、html或者jsp或者php或者python或者ruby格式的界面程序代碼。針對安卓設(shè)備， 可生成與安卓設(shè)備匹配的、java格式的界面程序代碼。針對蘋果IOS設(shè)備，可生成與蘋果 IOS設(shè)備匹配的、object-c格式的界面程序代碼。
[0052] 本發(fā)明實施例中，適配庫可提供給提供網(wǎng)絡(luò)服務(wù)的服務(wù)器，或者提供給用戶終端。 以便服務(wù)器或者用戶終端將需要轉(zhuǎn)換的通用格式的界面描述文件轉(zhuǎn)換成所需要的其它代 碼格式的界面程序代碼。界面程序代碼可在用戶終端中轉(zhuǎn)換為界面元素顯示出來，最終呈 現(xiàn)為終端界面。
[0053]以將適配庫配置在服務(wù)器為例。
[0054]服務(wù)器可以在接收用戶終端發(fā)送的終端界面訪問請求后，根據(jù)所述終端界面訪 問請求提取相應(yīng)的通用代碼格式的界面描述文件；并識別所述用戶終端的類型；利用適配 庫，根據(jù)所述用戶終端的類型，解析所述界面描述文件，生成與所述用戶終端適配的、其它 代碼格式的界面程序代碼；將所述其它代碼格式的界面程序代碼發(fā)送給所述用戶終端。
[0055]用戶終端在發(fā)送終端界面訪問請求后，可收到服務(wù)器返回的所述界面程序代碼， 轉(zhuǎn)化為用戶終端能識別的界面元素，實時呈現(xiàn)為終端界面。
[0056]以將適配庫配置在用戶終端為例。
[0057]服務(wù)器可以在接收用戶終端發(fā)送的終端界面訪問請求后，根據(jù)所述終端界面訪問 請求提取相應(yīng)的通用代碼格式的界面描述文件；將所述通用代碼格式的界面描述文件發(fā)送 給所述用戶終端。
[0058]用戶終端在發(fā)送終端界面訪問請求給服務(wù)器之后，可接收所述服務(wù)器返回的通用 代碼格式的界面描述文件；然后，利用適配庫解析所述界面描述文件，生成與所述用戶終端 適配的、其它代碼格式的界面程序代碼；根據(jù)所述界面程序代碼，轉(zhuǎn)換得到用戶終端能識別 的界面元素，顯示相應(yīng)的終端界面。
[0059]其中，所述界面描述文件可以是JSON或者XML格式的界面描述文件。所述界面程 序代碼可以是與計算機設(shè)備匹配的、html或者jsp或者php或者python或者ruby格式的 界面程序代碼；或者，可以是與安卓設(shè)備匹配的、java格式的界面程序代碼；或者，可以是 與蘋果IOS設(shè)備匹配的、object-c格式的界面程序代碼。
[0060]由上可見，本發(fā)明實施例中，在可視化編輯界面完成終端界面制作后，將代碼生成 過程分成兩個階段來實現(xiàn)：
[0061]第一階段，生成通用代碼格式的界面描述文件。界面描述文件是由格式化數(shù)據(jù)描 述的終端界面的配置信息，包括對每一種控件的屬性的詳細定義。后續(xù)，將通用代碼格式的 界面描述文件作為提供不同用戶終端的統(tǒng)一數(shù)據(jù)源，可確保不同用戶終端平臺的數(shù)據(jù)源的 一致性。一般的，一個終端界面對應(yīng)一個界面描述文件。界面描述文件可以是通用代碼格 式的文本文件，例如JSON或XML格式的文本文件。界面描述文件可包括終端界面的屬性信 息，以及所包括的各類界面控件的屬性信息，界面描述文件中的屬性信息與實際的用戶終 端平臺無關(guān)，可視為對終端界面及其界面控件的客觀信息描述。
[0062]第二階段，通過利用適配庫進行轉(zhuǎn)換，由界面描述文件生成適應(yīng)于用戶終端平臺 的界面元素，并在終端展現(xiàn)出終端界面。
[0063]適配庫與各類用戶終端平臺強相關(guān)。適配庫可運行在用戶終端上，用戶終端訪問 終端界面時，用戶終端可調(diào)用適配庫，由適配庫獲取相應(yīng)的界面描述文件，解析并生成本用 戶終端適配的界面程序代碼，轉(zhuǎn)化為本用戶終端能識別的界面元素，進行實時呈現(xiàn)，顯示出 終端界面。其中，交互功能可統(tǒng)一通過控件的action屬性調(diào)用相應(yīng)接口完成。
[0064]本發(fā)明一個應(yīng)用場景中，例如一種利用JSON格式代碼語言描述的界面描述文件， 可如下所示：
[0065]

【權(quán)利要求】
1. 一種終端界面設(shè)計系統(tǒng)，其特征在于，包括： 控件庫，用于提供界面控件； 編輯器，用于提供可視化編輯界面，根據(jù)編輯指令從所述控件庫中提取界面控件至所 述可視化編輯界面，并設(shè)置提取的所述界面控件的屬性，形成所需要的終端界面； 代碼生成器，用于根據(jù)所述編輯器中呈現(xiàn)的終端界面，以通用代碼格式生成相應(yīng)的界 面描述文件； 存儲器，用于保存所述界面描述文件；以及， 適配器，用于提供適配庫，所述適配庫用于獲取并解析所述界面描述文件，生成與用戶 終端適配的、其它代碼格式的界面程序代碼。
2. 根據(jù)權(quán)利要求1所述的系統(tǒng)，其特征在于， 所述代碼生成器具體用于生成JSON或者XML格式的界面描述文件。
3. 根據(jù)權(quán)利要求1所述的系統(tǒng)，其特征在于， 所述存儲器具體用于將所述界面描述文件保存在數(shù)據(jù)庫或者文本文件中。
4. 根據(jù)權(quán)利要求1、2或3所述的系統(tǒng)，其特征在于， 所述適配庫具體用于生成與計算機設(shè)備匹配的、html或者jsp或者php或者python或 者ruby格式的界面程序代碼；或者，生成與安卓設(shè)備匹配的、java格式的界面程序代碼；或 者，生成與蘋果I0S設(shè)備匹配的、object-c格式的界面程序代碼。
5. -種終端界面設(shè)計方法，其特征在于，包括： 提供可視化編輯界面，根據(jù)編輯指令從所述控件庫中提取界面控件至所述可視化編輯 界面，并設(shè)置提取的所述界面控件的屬性，形成所需要的終端界面； 根據(jù)所述編輯器中呈現(xiàn)的終端界面，以通用代碼格式生成相應(yīng)的界面描述文件，并保 存所述界面描述文件；以及， 提供適配庫，所述適配庫用于獲取并解析所述界面描述文件，生成與用戶終端適配的、 其它代碼格式的界面程序代碼。
6. 根據(jù)權(quán)利要求5所述的方法，其特征在于，所述以通用代碼格式生成相應(yīng)的界面描 述文件包括： 生成JS0N或者XML格式的界面描述文件。
7. 根據(jù)權(quán)利要求5所述的方法，其特征在于，所述保存所述界面描述文件包括： 將所述界面描述文件保存在數(shù)據(jù)庫或者文本文件中。
8. 根據(jù)權(quán)利要求5、6或7所述的方法，其特征在于，所述生成與用戶終端適配的、其它 代碼格式的界面程序代碼包括： 生成與計算機設(shè)備匹配的、html或者jsp或者php或者python或者ruby格式的界面 程序代碼；或者， 生成與安卓設(shè)備匹配的、java格式的界面程序代碼；或者， 生成與蘋果I0S設(shè)備匹配的、object-c格式的界面程序代碼。
9. 一種用戶終端，其特征在于，包括： 發(fā)送模塊，用于發(fā)送終端界面訪問請求給服務(wù)器； 接收模塊，用于接收所述服務(wù)器返回的通用代碼格式的界面描述文件； 適配庫模塊，用于解析所述界面描述文件，生成與所述用戶終端適配的、其它代碼格式 的界面程序代碼； 顯示模塊，用于根據(jù)所述界面程序代碼顯示相應(yīng)的終端界面。
10. 根據(jù)權(quán)利要求9所述的用戶終端，其特征在于， 所述界面描述文件是JSON或者XML格式的界面描述文件； 所述界面程序代碼是與計算機設(shè)備匹配的、html或者jsp或者php或者python或者 ruby格式的界面程序代碼；或者，是與安卓設(shè)備匹配的、java格式的界面程序代碼；或者， 是與蘋果I0S設(shè)備匹配的、object-c格式的界面程序代碼。
11. 一種服務(wù)器，其特征在于，包括： 接收模塊，用于接收用戶終端發(fā)送的終端界面訪問請求； 獲取模塊，用于根據(jù)所述終端界面訪問請求提取相應(yīng)的通用代碼格式的界面描述文 件； 識別模塊，用于識別所述用戶終端的類型； 適配庫模塊，用于根據(jù)所述用戶終端的類型，解析所述界面描述文件，生成與所述用戶 終端適配的、其它代碼格式的界面程序代碼； 發(fā)送模塊，用于發(fā)送所述其它代碼格式的界面程序代碼給所述用戶終端。
12. 根據(jù)權(quán)利要求11所述的服務(wù)器，其特征在于， 所述界面描述文件是JS0N或者XML格式的界面描述文件； 所述界面程序代碼是與計算機設(shè)備匹配的、html或者jsp或者php或者python或者 ruby格式的界面程序代碼；或者，是與安卓設(shè)備匹配的、java格式的界面程序代碼；或者， 是與蘋果I0S設(shè)備匹配的、object-c格式的界面程序代碼。
【文檔編號】G06F9/44GK104484171SQ201410765247
【公開日】2015年4月1日 申請日期:2014年12月11日 優(yōu)先權(quán)日:2014年12月11日
【發(fā)明者】羅均文, 張芳景, 鐘虎林, 黃世華, 甘鳴春, 吳靜 申請人:深圳市路通網(wǎng)絡(luò)技術(shù)有限公司