一种通过数据渲染移动应用界面的方法
【专利摘要】本发明涉及通过数据渲染移动应用界面的方法，包括以下步骤S1~S3，其中，S1为：在服务器植入页面模板html与控件xml，并解析形成页面数据以及控件数据的Json数据包；S2为：客户端向服务器发送请求并接收该Json数据包，将其转化为页面模型；S3为：将该页面模型数据进行处理生成页面事件、页面控件，同时渲染页面布局。本发明的有益效果为：能够通过数据渲染出移动的web页面，可以使前端程序员不必过于关注页面的控件实现细节，不仅节约了开发时间，而且增加了移动应用之间的页面复用度。
【专利说明】一种通过数据渲染移动应用界面的方法
【技术领域】
[0001] 本发明涉及一种能够增加移动应用页面复用度的通过数据渲染移动应用界面的 方法。
【背景技术】
[0002] 目前移动应用对于跨平台的解决方案，大多是通过使用web技术来解决的，而对 于web页面编写通常是前端程序员设计成固定的页面而完成的。这种方式创建的应用的页 面并不能在多个应用间进行复用，因而需要花费巨大的人力成本。
[0003] 目前web界面的渲染主要为两种技术：一种是网页跳转方式，客户端直接请求新 页面替换当前页，另一种是通过交互的数据来渲染页面，通过程序解析交互的数据，再渲染 页面。传统网页技术一般使用跳转的方式请求新的页面，但是一些新的应用开始使用AJAX 技术，通过数据交互来渲染部分页面。
[0004] 在现有技术中，移动界面的设计实现大多基于HTML或者XML的配置式进行构造， 比如Andriod的页面设计就是基于编写页面XML布局模版，开发人员通过编写XML文件来 描述某个Activity的内容，程序会对布局模版进行解析，然后渲染产生页面。而基于传统 的WEB方法的JqueryMobile等都是基于HTML文本进行描述。本发明是在抽取出了页面交 互特性的基础上，将数据、布局和控件分离，用单独的配置文件和各自特定的的标签来描述 页面，并且将常用的组件进行抽象分离，使其能够更加多样化，适用于多种移动环境下，保 证了不论在PC端和移动端（比如Android，iOS)，只要是支持HTML5的环境中都能得到同 样的应用界面渲染效果。
【发明内容】
[0005] 针对现有技术中存在的不足，本发明的目的在于提供一种通过数据渲染移动应用 界面的方法，能够通过数据渲染出移动的web页面，极大的提高了用于构建应用页面的复 用度。
[0006] 本发明的技术方案如下：
[0007] -种通过数据渲染移动应用界面的方法，包括以下步骤：
[0008] S1 :在服务器植入页面模板html与控件xml，并解析形成页面数据以及控件数据 的Json数据包；
[0009] S2 :客户端向服务器发送请求并接收该Json数据包，将其转化为页面模型；
[0010] S3 :将该页面模型数据进行处理生成页面事件、页面控件，同时渲染页面布局。
[0011] 上述的方法，进一步包括：
[0012] 客户端检查Json数据包的完整性；
[0013] 将页面事件绑定至页面控件上，以使两者进行集中管理。
[0014] 上述的方法，在步骤S2中，进一步包括：
[0015] 通过浏览器启动指定的初始页面，并读入指定的配置文件；
[0016] 读取配置文件中的信息并获取服务Ur 1，开始构建请求服务器的Json数据包；
[0017] 通过http协议向服务器发送Ajax请求；
[0018] 获取响应的Json数据，验证其状态值，判断响应是否成功；
[0019] 将成功响应的Json数据转化为页面模型数据。
[0020] 上述的方法，通过Ajax请求获得服务器的响应数据，包括以下步骤：
[0021] 通过Ajax请求指定的服务器地址获得页面Json数据；
[0022] 解析获得的Json数据，验证数据的状态。
[0023] 上述的方法，将请求的页面Json数据转化为页面模型，包括以下步骤：
[0024] 将请求获得的页面数据进行分割；
[0025] 将分割获得的页面数据按照不同的类型封装为不同的数据模型；
[0026] 将数据模型搜集在不同的collection中。
[0027] 上述的方法，在步骤S3中，进一步地包括以下步骤：
[0028] 从不同类型的collection中将数据模型还原；
[0029] 将数据模型分为控件模型与事件模型；
[0030] 按照控件模型的类型将其渲染成不同的控件；
[0031] 通过页面模型的所属ID将其绑定在指定的控件模型上。
[0032] 上述的方法，进一步还包括以下步骤：
[0033] 将页面事件、页面控件进行集中管理，包括有：
[0034] 在生成页面控件和页面事件时将其放入页面管理器中；
[0035] 在页面数据进行切换时将指定的页面控件和页面事件清除。
[0036] 上述的方法，配置文件定义的内容包括：页面响应服务器的地址；应用所属的ID ; 应用初始化页面；事件的响应地址；
[0037] 上述的方法，进一步包括：
[0038] 页面事件响应产生页面迁移时，搜集页面控件信息，构造请求的数据包信息；
[0039] 获取服务器的响应Json数据，重新使用以上方法渲染新的页面。
[0040] 上述的方法，服务器响应的Json数据格式包括：数据包的状态值、页面的模版数 据、页面的控件描述信息集合、页面事件的定义集合、应用认证信息以及页面签名信息中的 一种或者几种。
[0041] 本发明的有益效果是：
[0042] (1)能够通过数据渲染出移动的web页面，可以使前端程序员不必过于关注页面 的控件实现细节，不仅节约了开发时间，而且增加了移动应用之间的页面复用度；
[0043] (2)使用数据来渲染界面，减少了前端开发人员的工作量，同时使得应用程序升级 变得方便；
[0044] (3)本发明运用了 AJAX技术，不但加快了页面的渲染速度，减少了数据的交互量， 而且在传统AJAX交互的基础上，采用了纯JS0N数据交互的方式，进一步降低了交互的数据 量，提升了在移动环境下的使用性能；
[0045] (4)在抽取出了页面交互特性的基础上，将数据、布局和控件分离，用单独的配置 文件和各自特定的的标签来描述页面，并且将常用的组件进行抽象分离，使其能够更加多 样化，适用于多种移动环境下，保证了不论在PC端和移动端（比如Android，iOS)，只要是 支持HTML5的环境中都能得到同样的应用界面渲染效果。
【专利附图】
【附图说明】
[0046] 图1为本发明的流程框图；
[0047] 图2为客户端渲染页面的工作过程示意图；
[0048] 图3为定义文件、服务器、客户端关系图。
【具体实施方式】
[0049] 以下描述和附图充分地示出本发明的具体实施方案，以使本领域的技术人员能够 实践它们。本发明的实施方案的范围包括权利要求书的整个范围，以及权利要求书的所有 可获得的等同。在本文中，本发明的这些实施方案可以被单独地或总地用术语"发明"来表 示，这仅仅是为了方便，并且如果事实上公开了超过一个的发明，不是要自动地限制该应用 的范围为任何单个发明或发明构思。
[0050] 图1示出了本发明实施例所述的通过数据渲染移动应用界面的方法的总体流程 图，如图1所示，一种通过数据渲染移动应用界面的方法，包括以下步骤S1?S3,其中，S1 为：在服务器植入页面模板html与控件xml，并解析形成页面数据以及控件数据的Json数 据包；S2为：客户端向服务器发送请求并接收该Json数据包，将其转化为页面模型；S3为： 将该页面模型数据进行处理生成页面事件、页面控件，同时渲染页面布局。
[0051] 在本实施例中，页面模板html为：
[0052] <div id="contcnt"> <div class="div-login-r'> <img class=Mimg-rcsponsivc" src=,,hUp://10.66.4.69:8080/SmartX/logo.pngM> </div> <div id=t,input" class=Mdiv-login-2">
[0053] </div> <div id-MbtnM class-,,div-login--3,,> </tliv> </div> 控件xml为： <?xml versiorH'1.0" encoding=''uU'-8"？> <pagc codc="login'' tiUc="登录" path=''root"> <data id-"uscr" imporl_"McmAccountBalance" iterator-"objcci"> 〈parameter namc=,'where" valuc=，'rclMcmlnr〇,miName=，(^:{rcqucst.gct( ,uscrid,Vl' a nd mabPassword-(? j request.gcl(!password!) | !M/> </daia> <layoul Ille="guodong/layoul/main/login.hlmrV>
[0054] 本发明的方法应用在至少一个客户端和服务器之间，S卩，移动客户端的个数可以 为多个，且各移动客户端均可通过访问接收服务器的数据进行自身的应用界面渲染，以达 到节省人力成本之目的。
[0055] 开发人员事先将页面模板html与控件xml放入服务器中，由服务器进行解析，将 页面模板数据与控件数据形成的Json数据包存储到服务器的数据库中，任何一移动的客 户端请求到这些数据后即可完成整个移动应用界面的渲染。
[0056] 其中，所述的客户端具有一移动前端的浏览器，浏览器的作用是：点击运行该浏览 器，在浏览器中输入一指定的Url将指定的页面打开，以启动指定的初始页面，从而在该初 始页面中读入一指定的配置文件，通过读取配置文件中的信息获取服务Url，开始构建请求 服务器的Json数据包。
[0057] 通过指定的配置文件构建数据请求，包括以下步骤：
[0058] a)配置指定路径下的配置文件；
[0059] b)导入并解析该配置文件信息；
[0060] c)通过配置文件定义的服务地址与主页信息构建Url ;
[0061] d)开始对解析获得的Url进行数据请求。
[0062] 以上对于指定的配置文件构建数据的请求是通过HTTP协议完成的。
[0063] 通过http协议向服务器发送Ajax请求，以获取响应的Json数据，包括以下步骤：
[0064] a)通过Ajax请求指定的服务器地址获得页面Json数据；
[0065] b)解析获得的Json数据，验证数据的状态，通过验证得到的Json数据的状态值来 判断响应是否成功。
[0066] 其中，服务器响应的Json数据格式包括：数据包的状态值、页面的模版数据、页面 的控件描述信息集合、页面事件的定义集合、应用认证信息以及页面签名信息等，在客户端 进行数据请求时，请求的Json数据定义的内容至少包括有页面事件及页面控件的描述信 息、请求状态信息以及页面模板信息。
[0067] 对于响应成功的Json数据转化为页面模型数据，其过程如下：
[0068] a)将请求获得的页面数据进行分割；
[0069] b)将分割获得的页面数据按照不同的类型封装为不同的数据模型；
[0070] c)将数据模型搜集在不同的collection(数据模型集合）中，以形成页面模型数 据。
[0071] 并进一步形成的页面模块经过以下处理生成页面事件以及页面控件：
[0072] a)从不同类型的collection中将数据模型还原；
[0073] b)将数据模型分为控件模型与事件模型；
[0074] c)按照控件模型的类型将其渲染成不同的控件；
[0075] d)通过页面模型的所属ID将其绑定在指定的控件模型上。
[0076] 通过以下步骤，对页面事件和页面控件进行集中管理：
[0077] a)在生成页面控件和页面事件时将其放入页面管理器中；
[0078] b)在页面数据进行切换时将指定的页面控件和页面事件清除。
[0079] 具体地，本实施例中的页面模板html和控件xml的基础上的代码如下：
[0080] <!--导 4；ii 粒 --> <widgcl id="navtoppancr, lypc=Mnavtoppancr, conlaincr=Mnavigator" bind-π?> <navioppanci></navtoppancl>
[0081] </widgci> <widgct id="heacicrlcxt" iypc='tcxlvicw" containcr="navtoppanel" binc^"^^" class =,,nav-litlc,,> <tcx t V ie w></lcx t V i ew> </widgcl> <\vidgct id-'register" typc="iconbulton" containcr="navtoppancr' bind="" class=,,btn nav-bln nav-btn-righr> <iconbuUon iconclass="glyphicon glyphic〇i>uscr"></iconlmtton> </widgcl> <!- 主面板 -> <\vidgct ic^'^serid" iypc_"tcxi" containcr_,'inpui" bind_,,"> <text placeholder - "用尸名 </widgci> <wiclgct id=Mpassword,' ivpc="password" containcr=：!,inpul" bind=""> 〈password placeholder = "读码Γ ma^ = ,,truci,></password> </widgci> <widgcl id=,,loginn type=T，buU〇n" coniainer="btnM bind-'^iA"> <button> </b utlon> </vvidgci> 〈event when="submit"> ir(rcqucst.gct(tx_sourcc,) -- "login,') | itTisdcf uscr){ if(isdef session) ! context. rcmovcScssion(nuscrM): } var session = conlcxl.crcalcScssion(); contexLpmmpL((,OI<M); session.addScssionC^ser",user); } else] context.error("用户名或密码错误！ ")； / }
[0082] </cvcnt> <aclion iypc=,,click,' targcl=,,loginM do=Msubmir/> <actiori typc= "click" targcl^'Ycgistcr" do=,,submit'V> <transfcr on="rcqucsl.gcl(,x_sourcct) == 'rcgislcr'" to="rcgislcri,/> <transfcr on="isdcf user" to=McatcgorylistM/> </pagc>
[0083] 图2为数据渲染界面的工作过程示意图，参见图2,该过程包括：
[0084] 步骤1):客户端应用打开，发送请求给服务器，向服务器请求初始页面数据。在 本实施例中，请求格式为 http://10. 66. 4. 69:8080/SmartX/webapi/adapterx/page/get/g uodong/login〇
[0085] 步骤2):服务器接收到请求，从数据库中读取出相关数据发送给客户端。在本实 施例中服务器发给客户端的json数据为 ：
[0086] { "code": ?Κ", "msg": null, "extra": null, ''rcfUrl"： null， "token"： null， "signature": "guodong-86c43707f6554515acl066c28755aa7d", "dalas"; { "code": "login", "uW1: "登录"， ,frcload,!: null, ,!layout": "<DIV id^V'conlentV'^^n <DIV class-^'div-login-lV'^nn <1MG class ^V'img-rcsponsivcV* 8?χ=\'?ιΠρ：/ν?()/^6.4/l9:8080/SmaΓtX/1ogo.pngV^/>\r\n </DIV>\r\n <DIV clas s=V\li\-login-2V^\l=V^Vipiu\M>V\n </DIV>\r\n <DIV class=V^ji\-login-3\M i\l=V'blnV,>\r\n ^DIV >\r\n </DIV>"5 "itemlayout": id=^Milcmvicw\,! typc=V1lcxL/lcmplatc\">\r\n</SCRIPT>' ,, "navigator": "<DIV id-\Mnavigalor\n/>Mi ^pagcwidgcls":[ {
[0087] "wgttype"; "navtoppanel", "wgtid": "navtoppancl", "wgLcotUaiiier"： "navigator', "wguillc": null, "wglvaluc": n，\ "wglclass": Mx navloppancl", "wgtrcquircd": "ialse?\ "wglrcadonly": false, "wglconlcnipagc'1: null. "wgtvisiblc": true, " inierval''M) }， { "wgUypc": "icxlvicvv", "wgtid": "hcadcrlcxl", "wglcontainer": "navtoppancr', "wguillc": null, "wglvduc"： "登录' "wglclass": Μηαν---.Ιο?,, "wglrcquircd": "I'iilsc", "wgtrcadonlv": false, "wglconlenipagc": null. "wgtvisiblc,f: true, "interval"： 0 }， { "wgttypc": "iconbullon", nwgtid": "register", "wglconlaincr": ,!navloppanel"5 "wgUillc": null, "wgwaluc"： "wgtclass": Mbtn nav-btn naY-btn-rightn, "wglxequinxi"： ''false", "wgircadonlv": false,
[0088] "wgtcontcntpagc": null, "wgtvisiblc": true, "intervar': 0, "iconclass": "glyphicon glyphicon-uscr' }， { "wgltypc": "text". "wgtid": "userid". "wgteoniainer": "input"， "wgUiUc"： null, "wgtvaliie'，： ''''， ''wgiclass": "x_lcxlM, "wglrcquircd": 11 false", "wgtreadonly": false, "wgtconlcntpage"; null, "wglvisiblc": true, "interval": 0, "placeholder"： ''用户名'' }， { "wgttypc": "password", ''wgtid": "password"， "wglconiaincr": "input", "wgtlitlc": null, MwgtvalucM: MM, "vvgtclass": Mx_password", MwgtrcquircdM: "false", Mwgl.rcadonlyi,: false, Mwgtcontcntpagc,'; null, "wglvisiblc": true, ninterval"： 0, "placeholder"： n密码''， "md5p: "truen
[0089] }， { "wgUypcf,: f'builonf,, "wgticl": nogin", "wglconlaincr": "bln", "wgtmle"： null， "wgtvaluc"： ''确认''， "wgtclass": Mx_butlonM, "wgtrcquircd": 'Malsc", "wglrcadonly": false, "wglcontcntpagc": null, "wgtvisiblc": true, "interval": 0 } ]， "pagcaclions":[ i ( "actiontypc"： "click"， "actiontargcr： "login", "actiondo"： ''submit" }， { "actiontype"： "click"， "actiontargci": "register", "actiondo"： ''submit" } ] } }
[0090] 步骤3):客户端接收到服务器发送的数据，检查数据包的完整性，确认数据在发 送过程中没有错误。
[0091] 步骤4):客户端解析接收到的数据，读取datas中的layout内容，并将这些内容 加入至html页面id为pageviews的div中。
[0092] 步骤5):客户端根据datas中的pagewidgets的若干个控件数据来渲染控件，这 些数据中存储了控件的类型、id、父容器、内容、类名等信息，以及一些特定控件包含的信息 如只读属性、循环属性等信息。
[0093] 步骤6):客户端根据datas中的pageactions的若干行为数据来绑定事件，这些 数据中存储了行为的类型、行为的所属控件、行为的内容。
[0094] 上述实施例仅仅是为清楚地说明本发明创造所作的举例，而并非对本发明具体实 施方式的限定。对于所属领域的普通技术人员来说，在上述说明的基础上还可以做出其它 不同形式的变化或变动。这里无需也无法对所有的实施方式予以穷举。凡在本发明的精神 和原则之内所引伸出的任何显而易见的变化或变动仍处于本权利要求的保护范围之中。
【权利要求】
1. 一种通过数据渲染移动应用界面的方法，其特征在于，包括以下步骤： 51 :抽取页面交互特性，分离数据、布局以及控件，在服务器植入页面模板html与控件 xml，并解析形成页面数据以及控件数据的Json数据包； 52 :客户端向服务器发送请求并接收该Json数据包，将其转化为页面模型； 53 :将该页面模型数据进行处理生成页面事件、页面控件，同时渲染页面布局。
2. 根据权利要求1所述的方法，其特征在于，进一步包括： 客户端检查Json数据包的完整性； 将页面事件绑定至页面控件上，以使两者进行集中管理。
3. 根据权利要求1或2所述的方法，其特征在于，在步骤S2中，进一步包括： 通过浏览器启动指定的初始页面，并读入指定的配置文件； 读取配置文件中的信息并获取服务Url，开始构建请求服务器的Json数据包； 通过http协议向服务器发送Ajax请求； 获取响应的Json数据，验证其状态值，判断响应是否成功； 将成功响应的Json数据转化为页面模型数据。
4. 根据权利要求3所述的方法，其特征在于，通过Ajax请求获得服务器的响应数据，包 括以下步骤： 通过Ajax请求指定的服务器地址获得页面Json数据； 解析获得的Json数据，验证数据的状态。
5. 根据权利要求3所述的方法，其特征在于，将请求的页面Json数据转化为页面模型， 包括以下步骤： 将请求获得的页面数据进行分割； 将分割获得的页面数据按照不同的类型封装为不同的数据模型； 将数据模型搜集在不同的collection中。
6. 根据权利要求5所述的方法，其特征在于，在步骤S3中，进一步地包括以下步骤： 从不同类型的collection中将数据模型还原； 将数据模型分为控件模型与事件模型； 按照控件模型的类型将其渲染成不同的控件； 通过页面模型的所属ID将其绑定在指定的控件模型上。
7. 根据权利要求2或6所述的方法，其特征在于，进一步还包括以下步骤： 将页面事件、页面控件进行集中管理，包括有： 在生成页面控件和页面事件时将其放入页面管理器中； 在页面数据进行切换时将指定的页面控件和页面事件清除。
8. 根据权利要求1所述的方法，其特征在于，配置文件定义的内容包括：页面响应服务 器的地址；应用所属的ID ;应用初始化页面；事件的响应地址。
9. 根据权利要求1所述的方法，其特征在于，进一步包括： 页面事件响应产生页面迁移时，搜集页面控件信息，构造请求的数据包信息； 获取服务器的响应Json数据，重新使用以上方法渲染新的页面。
10. 根据权利要求1所述的方法，其特征在于，服务器响应的Json数据格式包括：数据 包的状态值、页面的模版数据、页面的控件描述信息集合、页面事件的定义集合、应用认证 信息以及页面签名信息中的一种或者几种。
【文档编号】G06F9/44GK104158836SQ201410284680
【公开日】2014年11月19日 申请日期:2014年6月23日 优先权日:2014年6月23日
【发明者】彭彬, 吴明晖, 蔡强, 祁陈斌, 潘汝范, 杨比特, 胡民伟 申请人:浙江大学城市学院