CN108170409B - Web前端控件的开发方法和系统 - Google Patents

Abstract

本发明涉及WEB前端控件的开发方法和系统，其中，WEB前端控件的开发方法包括：根据接收到的配置指令，创建WEB前端控件模型的XML配置；利用JAVA端模型和渲染引擎解析所述XML配置，生成前端控件脚本；利用模版技术根据所述前端控件脚本生成HTML；调用前端控件结合所述HTML生成目标样式的控件。本发明的技术方案通过创建目标控件的XML配置，利用模板技术生成目标样式，使用户不需要编写javascript编码，提高web前端控件的开发效率，从而降低web前端开发与维护的成本。

Description

WEB前端控件的开发方法和系统

技术领域

本发明涉及软件开发技术领域，具体而言，涉及一种WEB前端控件的开发方法和一种WEB前端控件的开发系统。

背景技术

在WEB(互联网网页)客户端蓬勃发展的今天，许多应用管理系统中，需要编写大量的代码，即使目前有诸如EXT，Jquery等优秀的框架来简化前端编程，但前端代码编写量依然庞大，由于代码的编写、调试与维护都需要大量专业性的技术人员，对前端技术人员的素质要求较高，增加了前端调试与维护的困难，提高了开发与后期维护的成本。现有的WEB前端开发系统，通常需要用户自己编写或者使用第三方提供的控件插件库，javascript编码的工作量很大，增加了web前端开发与维护的成本。

因此，如何降低WEB前端控件的开发难度，从而降低web前端开发与维护成本，成为亟待解决的问题。

发明内容

本发明旨在至少解决上述现有技术或相关技术中存在的技术问题之一。

为此，本发明的一个目的在于提出了一种WEB前端控件的开发方法。

本发明的另一个目的在于提供了一种WEB前端控件的开发系统。

本发明的第一方面提出了一种WEB前端控件的开发方法，包括：根据接收到的配置指令，创建WEB前端控件模型的XML(Extensible Markup Language，又称可扩展标记语言)配置；利用JAVA端模型和渲染引擎解析所述XML配置，生成前端控件脚本；利用模版技术根据所述前端控件脚本生成HTML(HyperText Markup Language，又称超文本标记语言)；调用前端控件结合所述HTML生成目标样式的控件。

根据本发明第一方面的WEB前端控件的开发方法，利用JAVA服务端的解析能力和内置模版，结合目标控件的XML配置，利用模板技术生成目标样式，使用户不需要编写javascript编码，提高web前端控件的开发效率。

在上述技术方案中，优选地，所述的WEB前端控件的开发方法进一步包括：在前端事件触发时，收集前端控件的差异化数据，将所述前端控件模型的差异化数据序列化到JAVA端；在JAVA端模型数据发生改变时，通过所述渲染引擎将相关数据反序列化到前端，其中，所述JAVA端模型由所述JAVA端解析所述XML配置获得。

在该技术方案中，在交互事件中使用暴露的API(应用程序编程接口)来获取和设置控件的属性值，JAVA服务端会通过渲染差异化数据传输等机制来保证前后台控件数据的一致性，从而达到前端免编程的使用效果。

在上述技术方案中，优选地，所述创建WEB前端控件模型XML配置，具体包括：创建控件视图XML配置和控件UI模型XML配置，并通过唯一标识进行关联，其中，控件视图XML配置描述控件的数据属性，控件UI模型XML配置描述控件的布局属性。

在该技术方案中，控件视图XML配置与控件UI模型XML配置是对控件属性的表达，并且通过唯一标识的关联，以便解析和使用，利于保证控件在前端和后端的一致性。

在上述技术方案中，优选地，所述利用JAVA端模型和渲染引擎解析所述XML配置，生成前端控件脚本，具体包括：利用所述JAVA端模型解析所述控件视图XML配置，生成第一解析结果，并将所述第一解析结果加载到缓存；利用所述渲染引擎解析所述控件UI模型XML配置，生成第二解析结果，并结合缓存中的所述第一解析结果进行递归渲染，生成所述前端控件的脚本。

在该技术方案中，通过渲染引擎和JAVA服务端的模型对XML配置进行解析，将控件XML配置的解析结果进行渲染，能够生成前端控件的脚本，避免编写大量Javascript代码。

在上述技术方案中，优选地，所述调用前端控件结合所述HTML生成目标样式的控件，具体包括：调用Jquery编写的布局与控件，生成可视化的控件样式，并对属性值进行绑定。

在该技术方案中，通过对上述技术方案中的脚本数据和布局控件信息进行整合、调用，生成用户需要的可视化的控件样式，对具有数据属性值的控件进行数据值绑定，保证控件的实用性。

本发明的第二方面提供了一种WEB前端控件的开发系统，包括：配置单元，跟据接收到的配置指令，创建WEB前端控件模型的XML配置；解析单元，利用JAVA端模型和渲染引擎解析所述XML配置，生成前端控件脚本；目标单元，利用模版技术根据所述前端控件脚本生成HTML，调用前端控件结合所述HTML生成目标样式的控件。

根据本发明第二方面的WEB前端控件的开发系统，利用JAVA服务端的解析能力和内置模版，结合目标控件的XML配置，利用模板技术生成目标样式，使用户不需要编写javascript编码，提高web前端控件的开发效率。

在上述技术方案中，优选地，所述的WEB前端控件的开发系统进一步包括：序列化单元，在前端事件触发时，收集前端控件的差异化数据，将所述前端控件模型的差异化数据序列化到JAVA端；反序列化单元，在JAVA端模型数据发生改变时，通过所述渲染引擎将相关数据反序列化到前端，其中，所述JAVA端模型由所述JAVA端解析所述XML配置获得。

在该技术方案中，在交互事件中使用暴露的API来获取和设置控件的属性值，JAVA服务端会通过渲染差异化数据传输等机制来保证前后台控件数据的一致性，从而达到前端免编程的使用效果。

在上述技术方案中，优选地，所述配置单元，具体用于：创建控件视图XML配置和控件UI模型XML配置，并通过唯一标识进行关联，其中，所述控件视图XML配置描述控件的数据属性，所述控件UI模型XML配置描述控件的布局属性。

在该技术方案中，控件视图XML配置与控件UI模型XML配置是对控件属性的表达，并且通过唯一标识的关联，以便解析和使用，利于保证控件在前端和后端的一致性。

在上述技术方案中，优选地，所述解析单元，具体用于：利用所述JAVA端模型解析所述控件视图XML配置，生成第一解析结果，并将所述第一解析结果加载到缓存；利用所述渲染引擎解析所述控件UI模型XML配置，生成第二解析结果，并结合缓存中的所述第一解析结果进行递归渲染，生成所述前端控件的脚本。

在该技术方案中，通过渲染引擎将控件XML配置的解析结果进行渲染，能够生成前端控件的脚本，利用模板引擎能将脚本输出成HTML；渲染可以直接将用户需要的控件配置，翻译成机器可识别的指令，以生成可视化的控件，避免编写大量Javascript代码。

在上述技术方案中，优选地，所述目标单元，具体用于：调用Jquery编写的布局与控件，生成可视化的控件样式，并对属性值进行绑定。

在该技术方案中，通过对上述技术方案中的脚本数据和布局控件信息进行整合、调用，生成用户需要的可视化的控件样式，对具有数据属性值的控件进行数据值绑定，保证控件的实用性。

根据本发明的技术方案，通过创建控件的XML配置以及对XML配置的解析，利用模板技术生成目标样式的控件，使用户不需要编写javascript编码，提高web前端控件的开发效率，从而降低web前端开发与维护的成本。

附图说明

图1示出了根据本发明实施例的WEB前端控件的开发方法的流程图。

图2示出了根据本发明实施例的序列化与反序列化过程的示意图。

图3示出了根据本发明实施例的渲染过程的流程图。

图4示出了根据本发明实施例的各组成部分之间关系的示意图。

图5示出了根据本发明实施例的WEB前端控件的开发系统的框图。

具体实施方式

为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施方式对本发明进行进一步的详细描述。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征能够相互组合。

在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还能够采用其他不同于在此描述的其他方式来实施，因此，本发明的保护范围并不受下面公开的具体实施例的限制。

图1示出了根据本发明实施例的WEB前端控件的开发方法的流程图。

如图1所示，本发明的实施例提出了一种WEB前端控件的开发方法，包括：步骤S102，根据接收到的配置指令，创建WEB前端控件模型的XML配置；步骤S104，利用JAVA端模型和渲染引擎解析所述XML配置，生成前端控件脚本；步骤S106，利用模版技术根据所述前端控件脚本生成HTML；步骤S108，调用前端控件结合所述HTML生成目标样式的控件。

根据本发明实施例的WEB前端控件的开发方法，在步骤S102中，WEB前端控件模型的XML配置分为UI控件XML配置与视图控件XML配置。XML即可扩展标记语言，是一种简单的数据存储语言，使用一系列简单的标记描述数据，XML的简单使其易于在任何应用程序中读写数据。每个控件都有对应的UI属性与其本身的数据属性，例如：按钮控件的大小位置输入UI属性；按钮上显示的值、状态及触发的事件属于数据属性。为了描述这两方面的属性，故而将其分别在控件UI模型XML配置与视图XML配置中进行配置，并通过唯一标识进行关联。UI模型XML配置中有一些布局性质的控件没有数据属性，如下所示：表1控件举例表，例如：页签、百叶窗、横向纵向布局等。这些控件只在控件UI模型XML配置中存在。

表1控件举例表

在步骤S104中，JAVA端模型包括两部分:UI模型与视图模型。系统通过解析器将XML配置解析到对应的JAVA端模型中，并对配置的控件属性进行装配。UI模型主要是描述控件的布局属性，视图模型主要是描述控件的数据属性。为了保证前后台数据的一致性，在每个JAVA端模型中有一个收集变化数据的机制。JAVA端通过设置属性，生成通知设置前端属性的javascript方法。通过获取setDiff方法设置获取前端的变化。JAVA端是后端，其使用统一的API对后台模型进行管理，包括获取控件，动态生成控件，设置空间属性等。渲染引擎的主要功能是将JAVA端的UI控件模型，按照模型中定义的结构，生成前端控件的脚本，并使用模板技术将脚本输出成HTML。最后通过步骤S108调用前端控件结合所述HTML生成目标样式的控件，具体地：调用Jquery编写的布局与控件，生成可视化的控件样式，并对属性值进行绑定，生成用户需要的可视化的控件样式，对具有数据属性值的控件进行数据值绑定，保证控件的实用性。

图2示出了根据本发明实施例的序列化与反序列化过程的示意图。

如图2所示，前端模型202对应于WEB前端控件，通过步骤S202收集差异数据，并将差异数据通过步骤S204转成JSON传输，JAVA端通过步骤S206解析数据和步骤S208差异化数据赋值，得到JAVA端模型204，利用渲染引擎进行步骤S210调用渲染方法和步骤S212响应输出，步骤S214执行渲染方法，返回到前端模型202，完成一次前后端之间的数据交互。

具体地，在前端事件触发时，收集前端控件的差异化数据，将所述前端模型202的差异化数据序列化到JAVA端；在JAVA端模型204数据发生改变时，通过所述渲染引擎将相关数据反序列化到前端，其中，所述JAVA端模型由所述JAVA端解析所述XML配置获得。在序列化与反序列化的过程中，为了保证每次交互过程中前后端模型的一致性，需要在前端事件触发时收集前端模型的数据并将这些数据序列化到JAVA服务端；相反的，当事件过程中，后端模型数据发生改变，则通过渲染方法的方式将数据反序列化到前端。通过序列化与反序列化过程中事件的交互，保证了前端与后端控件模型的一致性。所述创建WEB前端控件模型XML配置，具体包括：创建控件视图XML配置和控件UI模型XML配置，并通过唯一标识进行关联，其中，所述控件视图XML配置描述控件的数据属性，所述控件UI模型XML配置描述控件的布局属性。XML作为一种简单的数据存储语言，使用一系列简单的标记描述数据。创建控件的视图XML配置和UI模型XML配置，就是将控件的数据属性和UI属性写入XML文档中，使用XML文档描述控件的属性信息。所述控件视图XML配置与所述控件UI模型XML配置是对控件属性的表达，并且，通过唯一标识的关联，使用XML文档描述控件的属性信息，这样，控件的属性就能保证在前端和后端的一致性。

在上述技术方案中，优选地，所述利用JAVA端模型和渲染引擎解析所述XML配置，生成前端控件脚本，具体包括：利用所述JAVA端模型解析所述控件视图XML配置，生成第一解析结果，并将所述第一解析结果加载到缓存；利用所述渲染引擎解析所述控件UI模型XML配置，生成第二解析结果，并结合缓存中的所述第一解析结果进行递归渲染，生成所述前端控件的脚本。XML作为一种简单的数据存储语言，使用一系列简单的标记描述数据。对XML配置文件的解析，就是解析XML文档展示出来的数据。渲染引擎的主要功能是将JAVA端的UI控件模型，按照模型中定义的结构，生成前端控件的脚本，并使用模板技术将脚本输出成HTML。渲染过程中，系统会根据请求内容从缓存中获取是否存在已经解析过的XML模型，如果已经存在，则直接使用该模型进行下一步渲染，如果不存在，则重新解析XML模型，并将解析过的JAVA模型放入缓存(系统会根据XML配置文件是否存在和变化来确定是否需要重新解析)。脚本是一种特定的描述性语言，是依据一定的格式编写的可执行文件。脚本程序在执行时，是由计算机系统的一个解释器，将其一条条地翻译成机器可识别的指令，并按程序顺序执行。将解析过的XML配置文件渲染成脚本文件，就能通过模板引擎将脚本文件翻译成html即超文本标记语言，通过html文件就可以告诉前端如何显示其中的内容，不需要javascript编程。通过渲染引擎将控件XML配置的解析结果进行渲染，能够生成前端控件的脚本，利用模板引擎能将脚本输出成HTML；渲染可以直接将用户需要的控件配置，翻译成机器可识别的指令，以生成可视化的控件。

在上述技术方案中，优选地，所述调用前端控件结合所述HTML生成目标样式的控件具体包括：调用Jquery编写的布局与控件，生成可视化的控件样式，并对属性值进行绑定。Jquery是一个快速的、简洁的javascript库，具有详细的文档说明和大量成熟的插件，能够使用户的html页面保持代码和html内容分离，不需要再在html里插入大量的javascript代码来调用命令，只需要定义id即可。系统通过调用Jquery库中编写好的布局与控件，不需要再在html里插入大量的javascript代码来调用命令，提高前端开发的效率，降低开发的成本。

图3示出了根据本发明实施例的渲染过程的流程图。

如图3所示，所述渲染的流程包括：步骤S302，服务器接收请求，根据请求的内容分配到不同的模块；步骤S304，系统根据请求内容从缓存中获取是否存在已经解析过的XML模型，如果已经存在，进入步骤S306，则直接使用该模型进行下一步渲染，如果不存在，进入步骤S308，则重新解析XML模型，并将解析过的JAVA模型放入缓存(系统会根据XML文件是否存在和变化来确定是否需要重新解析)；步骤S310，根据解析过的UI模型，按照UI控件模型的结构(布局之间的关系，布局与控件间的关系)，递归渲染布局与控件；步骤S312，生成渲染前端脚本，首先根据UI控件模型描述的结构渲染出对应的占位DOM结构，然后根据前端模型提供的初始化方法，将视图模型中的属性设置到前端初始化方法中，并将前端控件加入到前端模型集合类中以方便前端API的获取调用；步骤S314，系统通过Freemarker等模板技术，将生成好的前端脚本生成html，返回到前端；步骤S316，前端根据生成的脚本，调用Jquery编写的布局与控件，生成可视化的控件样式，并对属性值进行绑定。

其中，脚本是一种特定的描述性语言，是依据一定的格式编写的可执行文件。脚本程序在执行时，是由计算机系统的一个解释器，将其一条条地翻译成机器可识别的指令，并按程序顺序执行。html即超文本标记语言，它通过标记符号来标记要显示的网页中的各个部分；网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。Freemarker是一种模板引擎。模板引擎可以使用户界面与业务数据分离开，能够生成一个标准的html文档。

图4示出了根据本发明实施例的各组成部分之间关系的示意图。

如图4所示，本发明所提出的方法实现主要包括以下部分：视图控件XML配置402、UI控件模型XML配置406、JAVA端控件模型404，前端控件模型410，渲染引擎408，数据序列化与反序列化传输。在使用时，只需要配置UI控件模型的XML与视图控件模型XML以及在事件中使用暴露的API来获取和设置控件的属性值，系统会通过渲染差异化数据传输等机制来保证前后台控件数据的一致性，从而达到前端免编程的使用效果。具体地包括：

(1)UI控件模型XML配置406与视图控件XML配置402

模型配置分为控件UI模型XML配置406与视图控件XML配置402：每个控件都有对应的UI属性与其本身的数据属性，例如：按钮控件的大小位置输入UI属性；按钮上显示的值、状态及触发的事件属于数据属性。为了描述这两方面的属性，故而将其分别再UI控件XML配置与视图XML配置中进行配置，并通过唯一标识进行关联。UI配置中有一些布局性质的控件没有数据属性，例如：页签、百叶窗、横向纵向布局等。这些控件只在UI控件XML配置中存在，模型提供了大多数基础控件的支持。

(2)JAVA端控件模型404

JAVA端控件模型与配置一样包括两部分:UI模型与视图模型。系统通过解析器将XML配置解析到对应的JAVA模型中并对配置的控件属性进行装配。UI模型主要是描述控件的布局属性，视图模型主要是描述控件的数据属性。为了保证前后台数据的一致性，在每个JAVA模型中有一个收集变化数据的机制。JAVA端通过设置属性，生成通知设置前端属性的javascript方法，通过获取setDiff方法设置获取前端的变化。JAVA端使用统一的API对后台模型进行管理，包括获取控件，动态生成控件，设置空间属性等。

(3)前端控件模型410

前端模型既包括了控件的属性信息的保存也包括了前端HTML的渲染，事件生成，布局控制，方法调用等。前端模型控件使用了JqueryUI提供的官方插件机制，在支持JqueryUI的基础上，并保持了良好的扩展性，提供了比较完整的插件编写模板。前端同样具有统一的API接口可以方便的获取当前页面中的控件，设置相关属性等。

(4)渲染引擎408

渲染引擎408的主要功能是将JAVA端的UI控件模型，按照模型中定义的结构，生成前端控件的脚本，并使用模板技术将脚本输出成HTML。渲染的流程主要包括：服务器接收请求，根据请求的内容分配到不同的模块；系统根据请求内容从缓存中获取是否存在已经解析过的XML模型，如果已经存在，则直接使用该模型进行下一步渲染，如果不存在，则重新解析XML模型，并将解析过的JAVA模型放入缓存(系统会根据XML文件是否存在和变化来确定是否需要重新解析)；根据解析过的UI模型，按照UI控件模型的结构(布局之间的关系，布局与控件间的关系)，递归渲染布局与控件；生成渲染前端脚本，首先根据UI控件模型描述的结构渲染出对应的占位DOM结构，然后根据前端模型提供的初始化方法，将视图模型中的属性设置到前端初始化方法中。并将前端控件加入到前端模型集合类中以方便前端API的获取调用；系统通过Freemarker等模板技术，将生成好的前端脚本生成html，返回到前端；前端根据生成的脚本，调用Jquery编写的布局与控件。生成可视化的控件样式，并对属性值进行绑定。

其中，脚本是一种特定的描述性语言，是依据一定的格式编写的可执行文件。脚本程序在执行时，是由计算机系统的一个解释器，将其一条条地翻译成机器可识别的指令，并按程序顺序执行。html即超文本标记语言，它通过标记符号来标记要显示的网页中的各个部分；网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。Freemarker是一种模板引擎。模板引擎可以使用户界面与业务数据分离开，能够生成一个标准的html文档。

(5)数据序列化与反序列化过程

为了保证每次交互过程中前后端模型的一致性，需要在前端事件触发时收集前端模型202的数据并将这些数据序列化到JAVA服务端；相反的，当事件过程中，后端模型数据发生改变，则通过渲染方法的方式将数据反序列化到前端。所述序列化与反序列化的过程包括：收集差异化数据，当前端控件的值或状态发生改变时，前端会记录下该控件的变化状态，在事件触发时，前端会将发生改变的控件属性值收集起来，并记录后端差异化类名；事件触发ajax请求，发送请求之前会将收集的差异化控件转换为JSON串，通过ajax方法传输到服务端；通过JSON工具解析前端发来的数据；根据差异化类名称，反射生成差异化类的实例。在根据前后端控件的对应关系(通过ID对应)，将差异化类中的属性赋值到JAVA端模型中；在后端方法中如果改变JAVA端模型204的数据，则会通过调用渲染方法的方式来实现差异化数据的传输，每个控件的每个属性都会暴露一个设置属性的渲染方法；在设置属性值时，将该值传入渲染方法中；渲染方法以字符串的方式响应到前端；通过javascript的eval方法执行渲染方法的字符串，完成前后端模型数据的一致。

图5示出了根据本发明实施例的WEB前端控件的开发系统的框图。

如图5所示，WEB前端控件的开发系统502，包括：配置单元512，跟据接收到的配置指令，创建WEB前端控件模型的XML配置；解析单元514，利用JAVA端模型和渲染引擎解析所述XML配置，生成前端控件脚本；目标单元516，利用模版技术根据所述前端控件脚本生成HTML，调用前端控件结合所述HTML生成目标样式的控件。序列化单元518，在前端事件触发时，收集前端控件的差异化数据，将所述前端控件模型的差异化数据序列化到JAVA端；反序列化单元520，在JAVA端模型数据发生改变时，通过所述渲染引擎将相关数据反序列化到前端，其中，所述JAVA端模型由所述JAVA端解析所述XML配置获得。

根据本发明实施例的WEB前端控件的开发系统502，所述配置单元512，具体用于：创建控件视图XML配置和控件UI模型XML配置，并通过唯一标识进行关联，其中，控件视图XML配置描述控件的数据属性，控件UI模型XML配置描述控件的布局属性。WEB前端控件模型的XML配置分为UI控件XML配置与视图控件XML配置。XML即可扩展标记语言，是一种简单的数据存储语言，使用一系列简单的标记描述数据，XML的简单使其易于在任何应用程序中读写数据。每个控件都有对应的UI属性与其本身的数据属性，例如：按钮控件的大小位置输入UI属性；按钮上显示的值、状态及触发的事件属于数据属性。为了描述这两方面的属性，故而将其分别在控件UI模型XML配置与视图XML配置中进行配置，并通过唯一标识进行关联。UI模型XML配置中有一些布局性质的控件没有数据属性，例如：页签、百叶窗、横向纵向布局等。这些控件只在控件UI模型XML配置中存在。

根据本发明实施例的WEB前端控件的开发系统502，所述解析单元514，具体用于：利用所述JAVA端模型解析所述控件视图XML配置，生成第一解析结果，并将所述第一解析结果加载到缓存；利用所述渲染引擎解析所述控件UI模型XML配置，生成第二解析结果，并结合缓存中的所述第一解析结果进行递归渲染，生成所述前端控件的脚本。JAVA端模型包括两部分:UI模型与视图模型。系统通过解析器将XML配置解析到对应的JAVA端模型中，并对配置的控件属性进行装配。UI模型主要是描述控件的布局属性，视图模型主要是描述控件的数据属性。为了保证前后台数据的一致性，在每个JAVA端模型中有一个收集变化数据的机制。JAVA端通过设置属性，生成通知设置前端属性的javascript方法。通过获取setDiff方法设置获取前端的变化。JAVA端是后端，其使用统一的API对后台模型进行管理，包括获取控件，动态生成控件，设置空间属性等。

渲染引擎的主要功能是将JAVA端的UI控件模型，按照模型中定义的结构，生成前端控件的脚本，并使用模板技术将脚本输出成HTML。所述渲染的流程包括：服务器接收请求，根据请求的内容分配到不同的模块。系统根据请求内容从缓存中获取是否存在已经解析过的XML模型，如果已经存在，则直接使用该模型进行下一步渲染，如果不存在，则重新解析XML模型，并将解析过的JAVA模型放入缓存(系统会根据XML文件是否存在和变化来确定是否需要重新解析)。根据解析过的UI模型，按照UI控件模型的结构(布局之间的关系，布局与控件间的关系)，递归渲染布局与控件。生成渲染前端脚本，首先根据UI控件模型描述的结构渲染出对应的占位DOM结构，然后根据前端模型提供的初始化方法，将视图模型中的属性设置到前端初始化方法中。并将前端控件加入到前端模型集合类中以方便前端API的获取调用。系统通过Freemarker等模板技术，将生成好的前端脚本生成html。返回到前端。前端根据生成的脚本，调用Jquery编写的布局与控件。生成可视化的控件样式，并对属性值进行绑定。其中，脚本是一种特定的描述性语言，是依据一定的格式编写的可执行文件。脚本程序在执行时，是由计算机系统的一个解释器，将其一条条地翻译成机器可识别的指令，并按程序顺序执行。html即超文本标记语言，它通过标记符号来标记要显示的网页中的各个部分；网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。Freemarker是一种模板引擎。模板引擎可以使用户界面与业务数据分离开，能够生成一个标准的html文档。

根据本发明实施例的WEB前端控件的开发系统502，所述目标单元516，具体用于：调用Jquery编写的布局与控件，生成可视化的控件样式，并对属性值进行绑定。Jquery是一个快速的、简洁的javascript库，具有详细的文档说明和大量成熟的插件，能够使用户的html页面保持代码和html内容分离，不需要再在html里插入大量的javascript代码来调用命令，只需要定义id即可。

根据本发明提出的WEB前端控件的开发系统和方法，通过配置的方式使用户不需要编写javascript编码，主要由java端读取XML配置文件，解析出java端控件模型，并通过渲染机制，将前端代码渲染到页面中，结合前端控件脚本生成的HTML，组成目标样式，实现免编程；通过序列化与反序列化应对事件的交互，以保证前端与后端控件模型的一致性。提高web前端控件的开发效率，从而降低web前端开发与维护的成本。

本发明实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减，本发明实施例系统中的单元可以根据实际需要进行合并、划分和删减。以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (6)

1.一种WEB前端控件的开发方法，其特征在于，包括：

根据接收到的配置指令，创建WEB前端控件模型的XML配置；

利用JAVA端模型和渲染引擎解析所述XML配置，生成前端控件脚本；

利用模版技术根据所述前端控件脚本生成HTML；

调用前端控件结合所述HTML生成目标样式的控件；

所述创建WEB前端控件模型XML配置，具体包括：

创建控件视图XML配置和控件UI模型XML配置，并通过唯一标识进行关联，其中，所述控件视图XML配置描述控件的数据属性，所述控件UI模型XML配置描述控件的布局属性；

所述利用JAVA端模型和渲染引擎解析所述XML配置，生成前端控件脚本包括：

利用所述JAVA端模型解析所述控件视图XML配置，生成第一解析结果，并将所述第一解析结果加载到缓存；

利用所述渲染引擎解析所述控件UI模型XML配置，生成第二解析结果，并结合缓存中的所述第一解析结果进行递归渲染，生成所述前端控件的脚本。

2.根据权利要求1所述的开发方法，其特征在于，进一步包括：

在前端事件触发时，收集前端控件的差异化数据，将所述前端控件模型的差异化数据序列化到JAVA端；

在JAVA端模型数据发生改变时，通过所述渲染引擎将相关数据反序列化到前端，其中，所述JAVA端模型由所述JAVA端解析所述XML配置获得。

3.根据权利要求1所述的开发方法，其特征在于，所述调用前端控件结合所述HTML生成目标样式的控件，具体包括：

调用Jquery编写的布局与控件，生成可视化的控件样式，并对属性值进行绑定。

4.一种WEB前端控件的开发系统，其特征在于，包括：

配置单元，跟据接收到的配置指令，创建WEB前端控件模型的XML配置；

解析单元，利用JAVA端模型和渲染引擎解析所述XML配置，生成前端控件脚本；

目标单元，利用模版技术根据所述前端控件脚本生成HTML，调用前端控件结合所述HTML生成目标样式的控件；

所述配置单元具体用于：

创建控件视图XML配置和控件UI模型XML配置，并通过唯一标识进行关联，其中，所述控件视图XML配置描述控件的数据属性，所述控件UI模型XML配置描述控件的布局属性；

所述解析单元，具体用于：

利用所述JAVA端模型解析所述控件视图XML配置，生成第一解析结果，并将所述第一解析结果加载到缓存；

利用所述渲染引擎解析所述控件UI模型XML配置，生成第二解析结果，并结合缓存中的所述第一解析结果进行递归渲染，生成所述前端控件的脚本。

5.根据权利要求4所述的开发系统，其特征在于，进一步包括：

序列化单元，在前端事件触发时，收集前端控件的差异化数据，将所述前端控件模型的差异化数据序列化到JAVA端；

反序列化单元，在JAVA端模型数据发生改变时，通过所述渲染引擎将相关数据反序列化到前端，其中，所述JAVA端模型由所述JAVA端解析所述XML配置获得。

6.根据权利要求4所述的开发系统，其特征在于，所述目标单元，具体用于：

调用Jquery编写的布局与控件，生成可视化的控件样式，并对属性值进行绑定。

Images