基于ExtJS UI可视化生成代码的方法
【技术领域】
[0001]本发明涉及软件开发领域，尤其涉及一种基于Extjs UI可视化生成代码的方法。
【背景技术】
[0002]从各种数据库里获取数据字典信息(包括数据库对象的注释、数据表字段的原始定义，字段的注释等等)，是目前软件开发过程中比较常用的技术，但是该技术目前基本上仅支持SQL Server或者Oracle，对于其他类型的数据库例如Sybase/IBM DB2/MySQL/SQLite/以及其他支持ODBC、OLE DB接口的数据库很少支持。而且现有的获取数据字典的信息的技术，不够完善、完美，获取的数据字典信息缺失数据库原生的元数据，例如数据表的备注信息，而备注信息至关重要，可用于界面上的输入项的标签，缺失这项信息，标签文字，就得手工一个个修改，大大降低效率。
[0003]目前，类似的软件开发工具还缺少一个可视化设计环节或者设计器还不够完善。有的是根据数据库字典信息，套用相关的模板生成一些简单的代码，由于缺少可视化设计这样的一个环节，开发效率较低，而且需要开发人员掌握相关领域的较强的编程知识；有的设计器不够完善，需要开发人员做大量的补充完善，工作量大。
[0004]ExtJS是可以用来开发RIA即客户端的AJAX应用，是通过javascript写码，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架，是一个非常完美、完善而又复杂的前端基于Javascript前端组件库。ExtJS体系复杂度、灵活度都很高，被称之为Web前端开发语言中的“中文”，难以掌握，所以很多的软件从业人员、从业公司，尤其是小公司、刚从业不久的开发人员，都会望而生畏。因此，ExtJS可视化设计器，给很多从业人员、从业公司带来了福音，但是目前市面上还没有这样的完美、完善的ExtJS的可视化设计器。
[0005]另外，现有的ExtJS设计器没有与数据库相结合，相关的界面输入栏位没有与数据库进行绑定，需要通过原始的方式把界面输入项转化为数据库里的数据，操作过程比较繁琐；除此之外，现有技术中的IDE，也没有将数据库字典信息与界面设计器相结合的可视化设计器。
【发明内容】
[0006]为解决上述技术问题，本发明的目的是提供一种能够提取各种类型、各种版本的数据库自身的元数据信息，将数据字典信息与可视化界面相结合的基于ExtJS UI可视化生成代码的方法。
[0007]本发明的基于ExtJS UI可视化生成代码的方法，包括步骤:
[0008](1)请求
[0009]由数据字典获取信息模块，连接上指定数据库，提供数据表、视图名称等，向数据库发出请求；
[0010]⑵获取
[0011]根据数据库自身的原生元数据信息，得到数据字典信息；
[0012]⑶拖拽
[0013]将获取到的数据字典信息，放置在可视化设计器的数据字段列表中；
[0014](4)拖放、修改控件类型、其他属性
[0015]将数据字段鼠标拖放到设计器的表格定位器中，初始化数据字段的定义和显示方式，通过鼠标选择、拖动到所需栏位，并设置每一个栏位的显示方式，实施对界面的设计;
[0016](5)请求生成代码
[0017]向代码生成器提出Web服务请求；
[0018](6)得到代码片段
[0019]代码生成器Web服务，首先认证身份，然后生成相应的代码片段；
[0020](7)生成代码
[0021]根据一组组的代码片段，应用于ExtJS UI文件模板，生成ExtJS UI前端代码文件以及后台获取数据部分的C#以及Java代码。
[0022]进一步的，还包括步骤:
[0023](8)生成布局文件
[0024]将界面的布局信息保存到页面布局文件中；
[0025](9)装载布局文件
[0026]从布局文件中装载UI设计信息；
[0027](10)保存布局信息
[0028]将布局信息保存到数据库；
[0029](11)装载布局信息
[0030]根据数据库中的布局信息，读出重新转载到UI设计器上。
[0031]进一步的，所述步骤(2)包括步骤:
[0032](21)建立数据库连接；
[0033](22)调用程序接口，传数据库对象名称；
[0034](23)返回列的定义以及注释，包括表的注释。
[0035]借由上述方案，本发明将数据字典信息与可视化界面相结合，生成ExtJS程序代码的方法，能够全面挖掘提取各种类型、各种版本的数据库自身的元数据信息，且可视化设计器较完善，并在服务器端生成代码段，高效易操作且安全可靠，具有以下优点:
[0036]1、诸如控件命名、中文标签、数据展现、数据校验、数据保存等重复繁琐的工作无需软件开发人员手动去操作，而由计算机完成，大大提高了软件开发的效率；
[0037]2、界面风格统一；
[0038]3、代码风格统一；
[0039]4、程序员无需进行重复繁琐的工作，可快速开发程序原型；
[0040]5、由于编码过程由计算机完成，大大减少了手工编码带来的各种难以捕捉的错误，提高了工作效率；
[0041]6、由于界面风格统一、代码风格统一，减少了人员流失对项目的风险。
[0042]上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，并可依照说明书的内容予以实施，以下以本发明的较佳实施例并配合附图详细说明如后。
【附图说明】
[0043]图1是本发明流程图。
【具体实施方式】
[0044]下面结合附图和实施例，对本发明的【具体实施方式】作进一步详细描述。以下实施例用于说明本发明，但不用来限制本发明的范围。
[0045]参见图1，本发明所述的一种基于ExtJS UI可视化生成代码的方法，包括如下步骤:
[0046](1)请求:由数据字典获取信息模块，连接上指定数据库，提供数据表、视图名称等，向数据库发出请求。
[0047](2)获取:根据数据库自身的原生元数据信息，得到数据字典信息；具体的在向数据库发出请求后，首先与数据库建立连接，再调用程序接口，传数据库对象名称，最后返回列的定义以及注释，包括表的注释。
[0048]现有技术中各种不同类型的数据库，甚至同一类型数据库，由于版本的差别，元数据的存储结构各不相同，挖掘提取各种类型、各种版本的数据库自身的元数据信息难度较高。而本发明中利用数据字典的功能，在不需要精通数据库的前提下，即可轻松获取到数据字典信息。
[0049](3)拖拽:将获取到的数据字典信息，放置在可视化设计器的数据字段列表中；字段有备注信息的以备注信息的方式展现。
[0050](4)拖放、修改控件类型、其他属性
[0051]将数据字段鼠标拖放到设计器的表格定位器中，初始化数据字段的定义和显示方式，通过鼠标选择、拖动到所需栏位，并设置每一个栏位的显示方式，实施对界面的设计。
[0052]可以拖放字段的位置，以拖放方式设定字段占用的横纵两个方向的大小，可以设定栏位展现类型(如:单行文本、密码、多行文本、日期选择、文件上传、下拉框、检查框、检查框列表、多选框、代码选择)、只读、不可见、显示文本的格式化输出、数据的有效性校验规贝1J、字段值的引用、两个或者更多字段间输入值间的联动；同时支持复杂的单表头、多个表体数据(多条)表单设计器。本步骤基本满足了事务性软件系统功能模块界面输入模块的业务需求，进行较少的补充完善即可交付使用。
[0053](5)请求生成代码:向代码生成器提出Web服务请求。以Web服务器的方式部署，可以防止盗版，同时确保了客户端的运行。
[0054](6)得到代码片段:代码生成器Web服务，首先认证身份，然后生成相应的代码片段。
[0055](7)生成代码:根据一组组的代码片段，应用于ExtJS UI文件模板，生成ExtJS UI前端代码文件以及后台获取数据部分的C#以及Java代码。
[0056]上述七个步骤就是获取、设计、生成代码的全过程。为了便于快速重复以上步骤，还需要以下四个步骤:
[0057](8)生成布局文件:在可视化界面设计器中将界面的布局信息保存到页面布局文件中。
[0058](9)装载布局文件:从布局文件中装载UI设计信息。
[0059](10)保存布局信息:将布局信息保存到数据库。
[0060](11)装载布局信息:根据数据库中的布局信息，读出重新转载到UI设计器上。
[0061]具体实施时，利用基于.net framework 3.5、使用Visual stud1 2010开发出来的可执行程序的软件进行操作。首先安装该软件并连接到业务系统数据库；配置程序解决方案以生成程序解决方案；根据上述可视化生成代码的方法，生成各种类型的UI代码，如:单表提交设计器、单表查询设计器、表头-表体一体化设计器；打开相应的集成开发环境如Visual Stud1/MyEclipse，打开创建的程序解决方案，编译解决方案；最后运行主UI程序即可。
[0062]可见，本发明将数据字典信息与可视化界面相结合，生成ExtJS程序代码的方法，能够全面挖掘提取各种类型、各种版本的数据库自身的元数据信息，且可视化设计器较完善，并在服务器端生成代码段，高效易操作且安全可靠。
[0063]以上所述仅是本发明的优选实施方式，并不用于限制本发明，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明技术原理的前提下，还可以做出若干改进和变型，这些改进和变型也应视为本发明的保护范围。
【主权项】
1.一种基于Extjs UI可视化生成代码的方法，其特征在于包括步骤: (1)请求 由数据字典获取信息模块，连接上指定数据库，提供数据表、视图名称等，向数据库发出请求； (2)获取 根据数据库自身的原生元数据信息，得到数据字典信息； (3)拖拽 将获取到的数据字典信息，放置在可视化设计器的数据字段列表中； (4)拖放、修改控件类型、其他属性 将数据字段鼠标拖放到设计器的表格定位器中，初始化数据字段的定义和显示方式，通过鼠标选择、拖动到所需栏位，并设置每一个栏位的显示方式，实施对界面的设计； (5)请求生成代码 向代码生成器提出Web服务请求； (6)得到代码片段 代码生成器Web服务，首先认证身份，然后生成相应的代码片段； (7)生成代码 根据一组组的代码片段，应用于ExtJS UI文件模板，生成ExtJS UI前端代码文件以及后台获取数据部分的C#以及Java代码。2.根据权利要求1所述的基于ExtJSUI可视化生成代码的方法，其特征在于还包括步骤: (8)生成布局文件 将界面的布局信息保存到页面布局文件中； (9)装载布局文件 从布局文件中装载UI设计信息； (10)保存布局信息 将布局信息保存到数据库； (11)装载布局信息 根据数据库中的布局信息，读出重新转载到UI设计器上。3.根据权利要求1所述的基于ExtJSUI可视化生成代码的方法，其特征在于:所述步骤⑵包括步骤: (21)建立数据库连接； (22)调用程序接口，传数据库对象名称； (23)返回列的定义以及注释，包括表的注释。
【专利摘要】本发明涉及一种基于ExtJS？UI可视化生成代码的方法，将数据字典信息与可视化界面相结合，生成ExtJS程序代码，能够全面挖掘提取各种类型、各种版本的数据库自身的元数据信息，且可视化设计器较完善，并在服务器端生成代码段，高效易操作且安全可靠。
【IPC分类】G06F9/44
【公开号】CN105404509
【申请号】CN201510765176
【发明人】徐侠君, 凌诚, 徐多明, 陈凯
【申请人】神州数码国信信息技术（苏州）有限公司
【公开日】2016年3月16日
【申请日】2015年11月11日