CN110187875A - 一种组件可视化开发方法 - Google Patents
一种组件可视化开发方法 Download PDFInfo
- Publication number
- CN110187875A CN110187875A CN201910451815.4A CN201910451815A CN110187875A CN 110187875 A CN110187875 A CN 110187875A CN 201910451815 A CN201910451815 A CN 201910451815A CN 110187875 A CN110187875 A CN 110187875A
- Authority
- CN
- China
- Prior art keywords
- component
- interface
- sub
- sublist
- instruction
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 223
- 230000000007 visual effect Effects 0.000 title claims abstract description 29
- 239000000155 melt Substances 0.000 title claims description 12
- 238000013499 data model Methods 0.000 claims abstract description 114
- 238000012800 visualization Methods 0.000 claims abstract description 17
- 230000015572 biosynthetic process Effects 0.000 claims abstract description 12
- 238000012790 confirmation Methods 0.000 claims description 16
- 238000011161 development Methods 0.000 abstract description 27
- 230000000875 corresponding effect Effects 0.000 description 113
- 238000012545 processing Methods 0.000 description 31
- 230000006870 function Effects 0.000 description 20
- 238000003860 storage Methods 0.000 description 20
- 238000010586 diagram Methods 0.000 description 18
- 238000007667 floating Methods 0.000 description 7
- 238000004891 communication Methods 0.000 description 6
- 230000008569 process Effects 0.000 description 6
- 238000007726 management method Methods 0.000 description 4
- 230000005540 biological transmission Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000013461 design Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000008878 coupling Effects 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000005611 electricity Effects 0.000 description 2
- 238000012905 input function Methods 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 230000007774 longterm Effects 0.000 description 2
- 230000007246 mechanism Effects 0.000 description 2
- 241000208340 Araliaceae Species 0.000 description 1
- 241001269238 Data Species 0.000 description 1
- 235000005035 Panax pseudoginseng ssp. pseudoginseng Nutrition 0.000 description 1
- 235000003140 Panax quinquefolius Nutrition 0.000 description 1
- 238000013459 approach Methods 0.000 description 1
- 230000008901 benefit Effects 0.000 description 1
- 230000002596 correlated effect Effects 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 235000008434 ginseng Nutrition 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 230000014759 maintenance of location Effects 0.000 description 1
- 239000000463 material Substances 0.000 description 1
- 238000002844 melting Methods 0.000 description 1
- 230000008018 melting Effects 0.000 description 1
- 230000005055 memory storage Effects 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 238000005192 partition Methods 0.000 description 1
- 230000002085 persistent effect Effects 0.000 description 1
- 238000000926 separation method Methods 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 230000000153 supplemental effect Effects 0.000 description 1
- 238000010897 surface acoustic wave method Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明实施例公开了一种可视化开发方法，通过基于图形化的组件开发，提高了软件开发效率，可视化开发方法包括：接收拖拽指令，并根据所述拖拽指令将多个元件拖动到对应位置，其中，所述多个元件为采用预设的代码编辑生成的可视化组件；接收连接指令，并根据所述连接指令进行所述多个元件中各个元件之间的逻辑连接，生成组件；生成所述组件对应的数据模型，并向服务器发送所述数据模型，以使得所述服务器将所述数据模型编译为对应的软件代码；或，生成所述组件对应的数据模型，并将所述数据模型编译为对应的软件代码。
Description
技术领域
本发明涉及软件开发技术领域，尤其涉及一种组件可视化开发方法。
背景技术
随着互联网技术渗透到人类生活和工作的方方面面，各种前端应用开发需求爆发式增长。
传统软件开发方式都是通过文字式编码方式，效率很低，且容易产生BUG，每开发一个移动端APP，都需要投入大量人力物力，开发和维护成本很高。因此，本领域技术人员需要提供一种可以提高软件开发效率的方法。
发明内容
本申请提供了一种组件可视化开发方法，通过基于图形化的组件开发，提高了软件开发效率。
第一方面，本发明实施例提供了一种组件可视化开发方法，包括：
接收拖拽指令，并根据所述拖拽指令将多个元件拖动到对应位置，其中，所述多个元件为采用预设的代码编辑生成的可视化组件；
接收连接指令，并根据所述连接指令进行所述多个元件中各个元件之间的逻辑连接，生成组件；
生成所述组件对应的数据模型，并向服务器发送所述数据模型，以使得所述服务器将所述数据模型编译为对应的软件代码；或，
生成所述组件对应的数据模型，并将所述数据模型编译为对应的软件代码。
在一种可选实施例中，所述多个元件包括如下元件中的至少一种：至少一个子组件、至少一个事件接口、至少一个方法接口以及至少一个方法，其中，所述至少一个子组件中的每个子组件包括：子事件接口和/或子方法接口。
在一种可选实施例中，所述接收拖拽指令，并根据所述拖拽指令将多个元件拖动到对应位置，包括：
接收第一拖拽指令，并根据所述第一拖拽指令将所述至少一个子组件拖动到第一编辑页面的对应位置；
接收第二拖拽指令，并根据所述第二拖拽指令将所述至少一个事件接口、所述至少一个方法接口和所述至少一个方法中的至少一个元件拖动到第二编辑页面的对应位置。
在一种可选实施例中，所述接收连接指令，并根据所述连接指令进行所述多个元件中各个元件之间的逻辑连接，包括：
接收连接指令；
根据所述连接指令执行以下至少一种操作：
进行一个所述子组件的子事件接口与另一个所述子组件的子方法接口之间的逻辑连接、进行一个所述子组件的子事件接口与一个所述事件接口之间的逻辑连接、进行一个所述子组件的子事件接口与一个所述方法之间的逻辑连接、进行一个所述子组件的子方法接口与一个所述方法接口之间的逻辑连接，或进行一个所述方法与一个所述方法接口之间的逻辑连接。
在一种可选实施例中，所述方法还包括：
接收第三拖拽指令，并根据所述第三拖拽指令将至少一个视窗拖动到第一编辑页面的对应位置；
相应的，所述接收第一拖拽指令，并根据所述第一拖拽指令将所述至少一个子组件拖动到第一编辑页面的对应位置，包括：
接收第一拖拽指令，并根据所述第一拖拽指令将所述至少一个子组件拖动到第一编辑页面的一个视窗中的对应位置。
在一种可选实施例中，所述数据模型包括父表、方法接口子表、方法子表、事件接口子表、视窗子表、逻辑连接子表和子组件子表，所述父表分别与所述方法接口子表、方法子表、事件接口子表、视窗子表、逻辑连接子表和子组件子表存在对应关系；其中，
所述父表包括所述组件的组件参数；
所述方法接口子表包括所述至少一个方法接口的方法接口参数；
所述方法子表包括所述至少一个方法的方法参数；
所述事件接口子表包括所述至少一个事件接口的事件接口参数；
所述视窗子表包括所述至少一个视窗的视窗参数；
所述逻辑连接子表包括所述各个元件之间的逻辑连接的连接起始点和连接终止点；
所述子组件子表包括所述至少一个子组件的子组件参数。
在一种可选实施例中，所述接收第一拖拽指令，并根据所述第一拖拽指令将所述至少一个子组件拖动到第一编辑页面的对应位置之后，所述方法还包括：
接收第一设置信息；
根据所述第一设置信息定义变量，并设置当前所述组件的输入参数，以及所述至少一个子组件的输入参数，所述变量指向数值、字符串、对象、数组或表格数据。
在一种可选实施例中，所述接收第二拖拽指令，并根据所述第二拖拽指令将所述至少一个事件接口、所述至少一个方法接口和所述至少一个方法拖动到第二编辑页面的对应位置之后，所述方法还包括：
接收第二设置信息；
根据所述第二设置信息定义变量，并设置如下参数中的至少一种：所述至少一个事件接口的事件接口参数、所述至少一个方法接口的方法接口参数、所述至少一个方法的方法参数以及对应的代码。
在一种可选实施例中，所述向服务器发送所述数据模型包括：
向服务器发送所述数据模型，以使得所述服务器对所述数据模型进行编译生成软件代码；
接收所述服务器发送的所述软件代码对应的网址信息；
在预览视窗中显示所述网址信息对应的网页。
在一种可选实施例中，所述在预览视窗中显示所述网址信息对应的网页之后，所述方法还包括：
接收发布指令；
根据所述发布指令向所述服务器发送确认后的数据模型，以使得所述服务器将所述确认后的数据模型发布到数据库。
第二方面，本申请提供了一种组件可视化开发装置，包括：
接收模块，用于接收拖拽指令；
处理模块，用于根据所述拖拽指令将多个元件拖动到对应位置，其中，所述多个元件为采用预设的代码编辑生成的可视化组件；
所述接收模块，还用于接收连接指令；
所述处理模块，还用于根据所述连接指令进行所述多个组件中各个组件之间的逻辑连接，生成组件；生成所述组件对应的数据模型；
发送模块，用于向服务器发送所述数据模型，以使得所述服务器将所述数据模型编译为对应的软件代码；或，
生成所述组件对应的数据模型，并将所述数据模型编译为对应的软件代码。
在一种可选实施例中，所述多个元件包括如下元件中的至少一种：至少一个子组件、至少一个事件接口、至少一个方法接口以及至少一个方法，其中，所述至少一个子组件中的每个子组件包括：子事件接口和/或子方法接口。
在一种可选实施例中，所述接收模块，具体用于：接收第一拖拽指令；
所述处理模块，具体用于：根据所述第一拖拽指令将所述至少一个子组件拖动到第一编辑页面的对应位置；
所述接收模块，具体用于：接收第二拖拽指令；
所述处理模块，具体用于：并根据所述第二拖拽指令将所述至少一个事件接口、所述至少一个方法接口和所述至少一个方法中的至少一个元件拖动到第二编辑页面的对应位置。
在一种可选实施例中，所述接收模块，具体用于：接收连接指令；
所述处理模块，具体用于：根据所述连接指令执行以下至少一种操作：
进行一个所述子组件的子事件接口与另一个所述子组件的子方法接口之间的逻辑连接、进行一个所述子组件的子事件接口与一个所述事件接口之间的逻辑连接、进行一个所述子组件的子事件接口与一个所述方法之间的逻辑连接、进行一个所述子组件的子方法接口与一个所述方法接口之间的逻辑连接，或进行一个所述方法与一个所述方法接口之间的逻辑连接。
在一种可选实施例中，所述接收模块，还用于：接收第三拖拽指令；
所述处理模块，还用于：根据所述第三拖拽指令将至少一个视窗拖动到第一编辑页面的对应位置；
相应的所述接收模块，具体用于：接收第一拖拽指令；
所述处理模块，具体用于：根据所述第一拖拽指令将所述至少一个子组件拖动到第一编辑页面的一个视窗中的对应位置。
在一种可选实施例中，所述数据模型包括父表、方法接口子表、方法子表、事件接口子表、视窗子表、逻辑连接子表和子组件子表，所述父表分别与所述方法接口子表、方法子表、事件接口子表、视窗子表、逻辑连接子表和子组件子表存在对应关系；其中，
所述父表包括所述组件的组件参数；
所述方法接口子表包括所述至少一个方法接口的方法接口参数；
所述方法子表包括所述至少一个方法的方法参数；
所述事件接口子表包括所述至少一个事件接口的事件接口参数；
所述视窗子表包括所述至少一个视窗的视窗参数；
所述逻辑连接子表包括所述各个元件之间的逻辑连接的连接起始点和连接终止点；
所述子组件子表包括所述至少一个子组件的子组件参数。
在一种可选实施例中，所述接收模块，还用于：接收第一设置信息；
所述处理模块，还用于：根据所述第一设置信息定义变量，并设置当前所述组件的输入参数，以及所述至少一个子组件的输入参数，所述变量指向数值、字符串、对象、数组或表格数据。
在一种可选实施例中，所述接收模块，还用于：接收第二设置信息；
所述处理模块，还用于：根据所述第二设置信息定义变量，并设置如下参数中的至少一种：所述至少一个事件接口的事件接口参数、所述至少一个方法接口的方法接口参数、所述至少一个方法的方法参数以及对应的代码。
在一种可选实施例中，所述发送模块，具体用于：向服务器发送所述数据模型，以使得所述服务器对所述数据模型进行编译生成软件代码；
所述接收模块，还用于：接收所述服务器发送的所述网页代码对应的网址信息；
所述组件可视化开发装置还包括：显示模块，用于在预览视窗中显示所述网址信息对应的网页。
在一种可选实施例中，所述接收模块，还用于：接收发布指令；
所述处理模块，还用于：根据所述发布指令向所述服务器发送确认后的数据模型，以使得所述服务器将所述确认后的数据模型发布到数据库。
第三方面，本申请实施例提供一种执行组件可视化开发的装置，该执行组件可视化开发的装置包括：处理器、存储器；存储器用于存储计算机可读指令；处理器用于执行存储器中的计算机可读指令，使得执行可视化编程的装置执行如前述第一方面中的方法。
第四方面，本申请实施例提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述第一方面所述的方法。
从以上技术方案可以看出，本发明实施例具有以下优点：
本申请实施例中，终端设备接收拖拽指令，并根据所述拖拽指令将多个元件拖动到对应位置，其中，所述多个元件为采用预设的代码编辑生成的可视化组件；接收连接指令，并根据所述连接指令进行所述多个元件中各个元件之间的逻辑连接，生成组件；生成所述组件对应的数据模型，并向服务器发送所述数据模型，以使得所述服务器将所述数据模型编译为对应的软件代码；或，生成所述组件对应的数据模型，并将所述数据模型编译为对应的软件代码。本申请实施例中，把组件分解成事件接口、方法接口、方法、视窗、子组件等几个部分，以连线的方式建立各部分的逻辑关系。把这种组成模式和关联关系存储为一个完整数据模型，通过服务器可以把该数据模型编译成可执行的软件代码。通过上述方式，由于多个元件为采用预设的代码编辑生成的可视化组件，基于图形化的组件开发，可以提高开发效率，拖动一个元件，或连接一条线能够表达大量代码所要表达的逻辑。得益于图形化逻辑是人类思维最直观的表达方式，因此图形化开发的组件比传统代码注释更容易被理解。
附图说明
图1为本申请实施例中组件可视化开发系统的一个架构示意图；
图2为本申请实施例提供的一种组件可视化开发方法的一个流程示意图；
图3为本申请实施例提供的一种组件开发界面的示意图；
图4为本申请实施例提供的一种组件开发界面的示意图；
图5为本申请实施例提供的一种组件开发界面的示意图；
图6为本申请实施例提供的一种数据模型的示意图；
图7为本申请实施例中组件可视化开发装置一个实施例示意图；
图8为本申请实施例提供的一种服务器结构示意图；
图9为本申请实施例提供的一种终端设备的结构示意图。
具体实施方式
本申请提供了一种组件可视化开发方法，通过基于图形化的组件开发，提高了软件开发效率。
为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。
本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
本申请提出了一种组件可视化开发方法，该方法应用于图1所示的组件可视化开发相同，请参阅图1，图1为本申请实施例中组件可视化开发系统的一个架构示意图，如图1所示，终端设备可以接收拖拽指令，并根据所述拖拽指令将多个元件拖动到对应位置，其中，所述多个元件为采用预设的代码编辑生成的可视化组件；接收连接指令，并根据所述连接指令进行所述多个元件中各个元件之间的逻辑连接，生成组件；生成所述组件对应的数据模型，并向服务器发送所述数据模型，以使得所述服务器将所述数据模型编译为对应的软件代码；或，生成所述组件对应的数据模型，并将所述数据模型编译为对应的软件代码。服务器将所述数据模型编译为对应的软件代码。需要说明的是，终端设备包含但不仅限于平板电脑、笔记本电脑、掌上电脑、手机、机器人以及个人电脑(personal computer，PC)，此处不做限定。
参照图2，图2为本申请实施例提供的一种组件可视化开发方法的一个流程示意图，本申请实施例提供的组件可视化开发方法，包括：
201、终端设备接收拖拽指令，并根据所述拖拽指令将多个元件拖动到对应位置，其中，所述多个元件为采用预设的代码编辑生成的可视化组件。
本申请实施例中，终端设备接收拖拽指令之前，先显示一个组件开发界面，参照图3，图3为本申请实施例提供的一种组件开发界面的示意图，其中，组件开发界面包括列表显示区域、导航显示区域以及编辑区域，其中导航显示区域包括“界面布局”选项，列表显示区域包括“组建新建”按钮，例如图3中示出的标识“+”。
具体的，终端设备可以接收到用户点击“组建新建”按钮的操作，进而弹出组建新建对话框，组建新建对话框可以包括：组件名称的输入框、组件类型的输入框、组件说明的输入框以及确认按钮，用户可以在组建新建对话框内输入新建组件的组件名称、组件类型以及组件说明，并点击确认按钮。此时，列表显示区域可以显示出新增加的组件。相应的，导航显示区域中的界面布局选项被触发，进而在编辑区域中显示界面布局显示区域，即本申请中的第一编辑页面。
本申请的一种实施例中，终端设备可以接收第三拖拽指令，并根据所述第三拖拽指令将至少一个视窗拖动到第一编辑页面的对应位置。
具体的，列表显示区域可以包括“布局元素选项”，用户可以点击“布局元素选项”，并在对应的列表显示区域中选择并拖动“行布局”或“对话框”到组件的第一编辑页面，使得在第一编辑页面显示新增的视窗。相应的，终端设备可以将视窗以及布局数据存入组件的数据模型。
本申请实施例中，终端设备可以接收拖拽指令，并根据所述拖拽指令将多个元件拖动到对应位置，其中，所述多个元件为采用预设的代码编辑生成的可视化组件。
在一种实施例中，所述多个元件包括至少一个子组件、至少一个事件接口、至少一个方法接口以及至少一个方法，其中，所述至少一个子组件中的每个子组件包括：子事件接口和/或子方法接口。
以子组件为例，本申请实施例中，终端设备可以接收第一拖拽指令，并根据所述第一拖拽指令将所述至少一个子组件拖动到第一编辑页面的对应位置。
具体的，列表显示区域可以包括采用预设的代码编辑生成的多个可视化组件，每个子组件可以完成独立的功能。
本申请实施例中，终端设备可以接收第一拖拽指令，并根据所述第一拖拽指令将所述至少一个子组件拖动到第一编辑页面的一个视窗中的对应位置。即，用户可以在列表显示区域中选择一个功能的子组件，并拖动选择好的子组件到一个视窗中的对应位置。相应的，终端设备可以将子组件的数据存入组件的数据模型。
在一种实施例中，导航显示区域还可以包括“变量”选项，终端设备接收第一拖拽指令，并根据所述第一拖拽指令将所述至少一个子组件拖动到第一编辑页面的对应位置之后，可以接收用户的第一设置信息。
本申请实施例中，用户点击导航显示区域的“变量”选项之后，终端设备可以显示变量设置对话框，用户可以在变量设置对话框中输入第一设置信息，终端设备在接收用户输入的第一设置信息之后可以根据第一设置信息来定义变量，具体的，可以根据第一设置信息来新增、修改、删除相关变量。
本申请实施例中，变量不但可以像传统软件变量一样可以指向各种内存数据，数据类型包括：数值、字符串、对象、数组等等，还可以指向表格数据。传统软件要访问表格数据，必须使用至少3个普通变量：1个变量存放表格名称、1个变量存放字段、一个变量存放记录号，通过这3个变量才能获取指定数据。
而本申请中的表格变量是一个对象变量，内置了表格名称、字段名称和记录号三个键值，这些键值的初始值在定义变量时确定，也可以由其它表格变量通过赋值修改。传输过程中，表格、字段键值一般为固定，只需要向表格变量赋予记录号数值，即可访问表格数据，从而可以像普通变量一样使用。
在一种实施例中，导航显示区域还可以包括“参数”选项，终端设备接收第一拖拽指令，并根据所述第一拖拽指令将所述至少一个子组件拖动到第一编辑页面的对应位置之后，可以接收用户的第一设置信息。
本申请实施例中，用户点击导航显示区域的“参数”选项之后，终端设备可以显示参数设置对话框，用户可以在参数设置对话框中输入第一设置信息，终端设备在接收用户输入的第一设置信息之后可以根据第一设置信息设置当前所述组件的输入参数以及所述至少一个子组件的输入参数。相应的，终端设备可以将当前组件以及各个子组件的参数存入组件的数据模型。
本申请实施例中，在完成了组件界面布局之后，还可以进行组件风格的设置，本实施例中，导航显示区域可以包括“风格设置”选项。
参照图4，图4为本申请实施例提供的一种组件开发界面的示意图，用户在完成了组件界面布局之后，可以点击导航显示区域中的“风格设置”选项，此时，导航显示区域可以将编辑区域切换为“风格设置”区域，用户可以点击导航显示区域中的“变量”按钮，终端设备界面可以弹出对应的变量设置对话框，用户可以在变量设置对话框中新增或修改风格变量参数。
本申请实施例中，“风格设置”区域还可以包括多个显示模式按钮，例如图4中示出的“普通”、“中等”、“较小”以及“最小”按钮，用户可以点击多个显示模式按钮中的一项，此时，组建该模式的界面即显示到编辑区域。
本申请实施例中，用户可以选择至少一个视窗中的一个视窗，此时编辑区域中该被选择的视窗的边框加亮显示，且编辑区域可以显示该被选择的视窗的边框设置浮窗，边框设置浮窗可以包括“尺寸”标签、“线条”标签、“填充”标签以及“位置”标签。
本申请实施例中，用户可以在边框设置浮窗中设置视窗的风格信息，具体的，用户可以点击边框设置浮窗的“尺寸”标签，设置当前视窗的尺寸信息。用户可以点击边框设置浮窗的“线条”标签，设置当前视窗的线条信息。用户可以点击边框设置浮窗的“填充”标签，设置当前视窗的填充信息。用户可以点击边框设置浮窗的“位置”标签，设置当前视窗内子组件的位置信息。
此外，用户还可以点击导航模块其他的相应按钮，设置视窗的其它属性，这里并不限定。
本申请实施例中可以：
a.定义子组件在视窗的位置；
b.定义视窗的边框样式、边框颜色、填充色、内外边距、尺寸、效果以及在各种操作状态下的显示模式；
c.定义风格变量，让部分风格属性可在使用该组件时动态设定，以满足不同用户对界面风格的不同需求，而无需去修改组件代码。
由于组件的显示风格可以全部可视化配置，无需像传统方式去编写CSS代码，实现风格配置可见即所得，立即预览实际显示效果。
本申请实施例中，导航显示区域可以包括“逻辑设计”选项。
用户可以点击导航显示区域中的“逻辑设计”选项，此时编辑区域切换为“逻辑设计区域”，即本申请中的第二编辑页面。
本申请实施例中，用户在点击导航显示区域中的“逻辑设计”选项之后，列表显示区域可以显示事件接口的选项、方法接口的选项和方法的选项。
用户可以选择事件接口的选项、方法接口的选项和方法的选项中的一个选项，并将相应的选项拖放至第二编辑页面的相应位置。此时，终端设备可以接收第二拖拽指令，并根据所述第二拖拽指令将所述至少一个事件接口、所述至少一个方法接口和所述至少一个方法中的至少一个元件拖动到第二编辑页面的对应位置。
具体的，参照图5，图5为本申请实施例提供的一种组件开发界面的示意图，如图5中示出的那样，在一种实施例中，用户可以选择导航显示区域中的“变量”按钮，终端设备可以弹出变量设置对话框，用户可以在变量设置对话框中输入第二设置信息，终端设备可以根据用户输入的第二设置信息新增、修改或删除变量。
在一种实施例中，用户可以选择列表显示区域中“元素”拦中的事件接口的选项，并将事件接口的选项拖到第二编辑页面中的相应位置。相应的，终端设备可以将事件接口的数据存入组件的数据模型。
可选的，用户可以选中第二编辑页面中的事件接口，此时终端设备可以显示事件接口的设置菜单，用户可以在事件接口的设置菜单中输入第二设置信息，终端设备可以根据第二设置信息设置用户选择的事件接口的事件接口参数。
可选的，第二设置信息还可以是事件接口的名称信息，用户可以在事件接口的设置菜单中输入第二设置信息，终端设备可以根据第二设置信息设置用户选择的事件接口的事件接口名称。
在一种实施例中，用户可以选择列表显示区域中“元素”拦中的方法接口的选项，并将方法接口的选项拖到第二编辑页面中的相应位置。相应的，终端设备可以将方法接口的数据存入组件的数据模型。
可选的，用户可以选中第二编辑页面中的方法接口，此时终端设备可以显示方法接口的设置菜单，用户可以在方法接口的设置菜单中输入第二设置信息，终端设备可以根据第二设置信息设置用户选择的方法接口的方法接口参数。
可选的，第二设置信息还可以是方法接口的名称信息，用户可以在方法接口的设置菜单中输入第二设置信息，终端设备可以根据第二设置信息设置用户选择的方法接口的方法接口名称。
在一种实施例中，用户可以选择列表显示区域中“元素”拦中的方法的选项，并将方法的选项拖到第二编辑页面中的相应位置。相应的，终端设备可以将方法的数据存入组件的数据模型。
可选的，用户可以选中第二编辑页面中的方法，此时终端设备可以显示方法的设置菜单，用户可以在方法的设置菜单中输入第二设置信息，终端设备可以根据第二设置信息设置用户选择的方法的方法参数以及对应的代码。
可选的，第二设置信息还可以是方法的名称信息，用户可以在方法的设置菜单中输入第二设置信息，终端设备可以根据第二设置信息设置用户选择的方法的方法名称。
202、终端设备接收连接指令，并根据所述连接指令进行所述多个元件中各个元件之间的逻辑连接，生成组件。
本申请实施例中，导航显示区域中可以包括“布线”选项，用户可以点击“布线”选项，之后用户可以对元件多个元件中各个元件之间的逻辑连接。具体的，终端设备可以接收用户的连接指令，并根据所述连接指令执行以下至少一种操作：
进行一个所述子组件的子事件接口与另一个所述子组件的子方法接口之间的逻辑连接、进行一个所述子组件的子事件接口与一个所述事件接口之间的逻辑连接、进行一个所述子组件的子事件接口与一个所述方法之间的逻辑连接、进行一个所述子组件的子方法接口与一个所述方法接口之间的逻辑连接，或进行一个所述方法与一个所述方法接口之间的逻辑连接。
本申请实施例中，用户在进行一个所述子组件的子事件接口与另一个所述子组件的子方法接口之间的逻辑连接时，可以点击某个子组件的子事件接口作为布线起始点，再点击另一个所述子组件的子方法接口作为布线终止点。此时，子组件的子方法接口到其它子组件的子事件接口连接表示该其它子组件的子事件接口发出指令会调用连接的子组件的子方法接口。相应的，终端设备可以将线条逻辑存入组件的数据模型。
本申请实施例中，用户在进行一个所述子组件的子事件接口与一个所述事件接口之间的逻辑连接时，可以点击某个子组件的子事件接口作为布线起始点，再点击一个所述事件接口作为布线终止点。此时，事件接口到子组件的子事件接口的连接表示该子组件的子事件接口指令会被连接的当前组件事件接口再次发出。相应的，终端设备可以将线条逻辑存入组件的数据模型。
本申请实施例中，用户在进行一个所述子组件的子事件接口与一个所述方法之间的逻辑连接时，可以点击某个子组件的子事件接口作为布线起始点，再点击一个所述方法作为布线终止点。此时，方法到子组件的子事件接口连接表示该子组件的子事件接口发出指令，会调用连接的方法。相应的，终端设备可以将线条逻辑存入组件的数据模型。
本申请实施例中，用户在进行一个所述子组件的子方法接口与一个所述方法接口之间的逻辑连接时，可以点击某个子组件的子方法接口作为布线起始点，再点击一个所述方法接口作为布线终止点。此时，子组件的子方法接口到当前组件方法接口表示外部调用该当前组件方法接口，会直接调用连接的子组件的子方法接口。相应的，终端设备可以将线条逻辑存入组件的数据模型。
本申请实施例中，用户在进行一个所述方法与一个所述方法接口之间的逻辑连接时，可以点击一个所述方法作为布线起始点，再点击一个所述方法接口作为布线终止点。此时，方法到方法接口的连接是给该方法提供外部调用的接口。相应的，终端设备可以将线条逻辑存入组件的数据模型。
203、终端设备生成所述组件对应的数据模型，并向服务器发送所述数据模型，以使得所述服务器将所述数据模型编译为对应的软件代码；或，生成所述组件对应的数据模型，并将所述数据模型编译为对应的软件代码。
本申请实施例中，终端设备可以将上述至少一个子组件、至少一个视窗、至少一个事件接口、至少一个方法接口、至少一个方法以及相关线条逻辑的参数数据存入组件的数据模型，进而生成所述组件对应的数据模型。
本申请实施例中，终端设备还可以不向服务器发送所述数据模型，以使得所述服务器将所述数据模型编译为对应的软件代码，而是将所述数据模型直接在本地编译为对应的软件代码。
参照图6，图6为本申请实施例提供的一种数据模型的示意图，如图6中示出的那样，所述数据模型包括父表、方法接口子表、方法子表、事件接口子表、视窗子表、逻辑连接子表和子组件子表，所述父表分别与所述方法接口子表、方法子表、事件接口子表、视窗子表、逻辑连接子表和子组件子表存在对应关系；其中，
所述父表包括所述组件的组件参数；
所述方法接口子表包括所述至少一个方法接口的方法接口参数；
所述方法子表包括所述至少一个方法的方法参数；
所述事件接口子表包括所述至少一个事件接口的事件接口参数；
所述视窗子表包括所述至少一个视窗的视窗参数；
所述逻辑连接子表包括所述各个元件之间的逻辑连接的连接起始点和连接终止点；
所述子组件子表包括所述至少一个子组件的子组件参数。
在一种实施例中，导航显示区域可以包括“预览”按钮，用户可以点击“预览”按钮，此时，终端设备可以向服务器发送所述数据模型，以使得所述服务器对所述数据模型进行编译生成网页代码。
本申请实施例中，终端设备可以向服务器发送所述数据模型，并调用服务器的编译模块，服务器的编译模块把当前组件的数据模型编译成网页代码，并把网页代码对应的网址发送到终端设备。
本申请实施例中，终端设备可以接收所述服务器发送的所述网页代码对应的网址信息，并在预览视窗中显示所述网址信息对应的网页，用户可以在网页上进行操作，判断网页是否正确，如果不正确可以修改组件的配置，直到显示的预览网页正确为止。
可选的，在另一种实施例中，终端设备还可以接收发布指令，并根据所述发布指令向所述服务器发送确认后的数据模型，以使得所述服务器将所述确认后的数据模型发布到数据库。
本申请实施例中，导航显示区域可以包括“发布”按钮，用户可以点击“发布”按钮，此时终端设备可以弹出发布视窗，用户可以在发布视窗中输入当前组件的版本信息、以及该组件的修改信息等，本申请并不限定。本申请实施例中，发布视窗还可以包括“确认”按钮，用户可以点击“确认”按钮，此时终端设备接收到发布指令，进而可以向所述服务器发送确认后的数据模型，并调用服务器的发布模块，此时服务器的发布模块可以把当前组件数据模型发布到共享数据库里，以便授权给其它用户使用，并返回发布成功信息到终端设备。终端设备收到成功信息后，可以在对话框内显示发布成功相关信息。
现有技术中，软件开发的复用率特别低；不仅仅在不同公司之间代码复用率低，即使同一个公司的不同项目之间一样复用率偏低，本申请中，终端设备向所述服务器发送确认后的数据模型，并调用服务器的发布模块，此时服务器的发布模块可以把当前组件数据模型发布到共享数据库里，授权给其它用户使用，提高了软件开发的复用率。
本申请实施例中，终端设备接收拖拽指令，并根据所述拖拽指令将多个元件拖动到对应位置，其中，所述多个元件为采用预设的代码编辑生成的可视化组件；接收连接指令，并根据所述连接指令进行所述多个元件中各个元件之间的逻辑连接，生成组件；生成所述组件对应的数据模型，并向服务器发送所述数据模型，以使得所述服务器将所述数据模型编译为对应的软件代码。本申请实施例中，把组件分解成事件接口、方法接口、方法、视窗、子组件等几个部分，以连线的方式建立各部分的逻辑关系。把这种组成模式和关联关系存储为一个完整数据模型，通过服务器可以把该数据模型编译成可执行的软件代码。通过上述方式，由于多个元件为采用预设的代码编辑生成的可视化组件，基于图形化的组件开发，可以提高开发效率，拖动一个元件，或连接一条线能够表达大量代码所要表达的逻辑。得益于图形化逻辑是人类思维最直观的表达方式，因此图形化开发的组件比传统代码注释更容易被理解。
下面对本申请中的组件可视化开发装置进行详细描述，请参阅图7，图7为本申请实施例中组件可视化开发装置一个实施例示意图，组件可视化开发装置包括：
接收模块701，用于接收拖拽指令；
处理模块702，用于根据所述拖拽指令将多个元件拖动到对应位置，其中，所述多个元件为采用预设的代码编辑生成的可视化组件；
所述接收模块701，还用于接收连接指令；
所述处理模块702，还用于根据所述连接指令进行所述多个组件中各个组件之间的逻辑连接，生成组件；生成所述组件对应的数据模型；
发送模块703，用于向服务器发送所述数据模型，以使得所述服务器将所述数据模型编译为对应的软件代码；或，
生成所述组件对应的数据模型，并将所述数据模型编译为对应的软件代码。
本实施例中，接收模块701接收拖拽指令；处理模块702根据所述拖拽指令将多个元件拖动到对应位置，其中，所述多个元件为采用预设的代码编辑生成的可视化组件；所述接收模块701接收连接指令；所述处理模块702根据所述连接指令进行所述多个组件中各个组件之间的逻辑连接，生成组件；生成所述组件对应的数据模型；发送模块703向服务器发送所述数据模型，以使得所述服务器将所述数据模型编译为对应的软件代码；或，生成所述组件对应的数据模型，并将所述数据模型编译为对应的软件代码。
本申请实施例中，提供了一种组件可视化开发装置，终端设备接收拖拽指令，并根据所述拖拽指令将多个元件拖动到对应位置，其中，所述多个元件为采用预设的代码编辑生成的可视化组件；接收连接指令，并根据所述连接指令进行所述多个元件中各个元件之间的逻辑连接，生成组件；生成所述组件对应的数据模型，并向服务器发送所述数据模型，以使得所述服务器将所述数据模型编译为对应的软件代码；或，生成所述组件对应的数据模型，并将所述数据模型编译为对应的软件代码。本申请实施例中，把组件分解成事件接口、方法接口、方法、视窗、子组件等几个部分，以连线的方式建立各部分的逻辑关系。把这种组成模式和关联关系存储为一个完整数据模型，通过服务器可以把该数据模型编译成可执行的软件代码。通过上述方式，由于多个元件为采用预设的代码编辑生成的可视化组件，基于图形化的组件开发，可以提高开发效率，拖动一个元件，或连接一条线能够表达大量代码所要表达的逻辑。得益于图形化逻辑是人类思维最直观的表达方式，因此图形化开发的组件比传统代码注释更容易被理解。
在一种可选实施例中，
所述多个元件包括如下元件中的至少一种：至少一个子组件、至少一个事件接口、至少一个方法接口以及至少一个方法，其中，所述至少一个子组件中的每个子组件包括：子事件接口和/或子方法接口。
在一种可选实施例中，所述接收模块701，具体用于：接收第一拖拽指令；
所述处理模块702，具体用于：根据所述第一拖拽指令将所述至少一个子组件拖动到第一编辑页面的对应位置；
所述接收模块701，具体用于：接收第二拖拽指令；
所述处理模块702，具体用于：根据所述第二拖拽指令将所述至少一个事件接口、所述至少一个方法接口和所述至少一个方法中的至少一个元件拖动到第二编辑页面的对应位置。
在一种可选实施例中，所述接收模块701，具体用于：接收连接指令；
所述处理模块702，具体用于：根据所述连接指令执行以下至少一种操作：
进行一个所述子组件的子事件接口与另一个所述子组件的子方法接口之间的逻辑连接、进行一个所述子组件的子事件接口与一个所述事件接口之间的逻辑连接、进行一个所述子组件的子事件接口与一个所述方法之间的逻辑连接、进行一个所述子组件的子方法接口与一个所述方法接口之间的逻辑连接，或进行一个所述方法与一个所述方法接口之间的逻辑连接。
在一种可选实施例中，所述接收模块701，还用于：接收第三拖拽指令；
所述处理模块702，还用于：根据所述第三拖拽指令将至少一个视窗拖动到第一编辑页面的对应位置；
相应的所述接收模块701，具体用于：接收第一拖拽指令；
所述处理模块702，具体用于：根据所述第一拖拽指令将所述至少一个子组件拖动到第一编辑页面的一个视窗中的对应位置。
在一种可选实施例中，所述数据模型包括父表、方法接口子表、方法子表、事件接口子表、视窗子表、逻辑连接子表和子组件子表，所述父表分别与所述方法接口子表、方法子表、事件接口子表、视窗子表、逻辑连接子表和子组件子表存在对应关系；其中，
所述父表包括所述组件的组件参数；
所述方法接口子表包括所述至少一个方法接口的方法接口参数；
所述方法子表包括所述至少一个方法的方法参数；
所述事件接口子表包括所述至少一个事件接口的事件接口参数；
所述视窗子表包括所述至少一个视窗的视窗参数；
所述逻辑连接子表包括所述各个元件之间的逻辑连接的连接起始点和连接终止点；
所述子组件子表包括所述至少一个子组件的子组件参数。
在一种可选实施例中，所述接收模块701，还用于：接收第一设置信息；
所述处理模块，还用于：根据所述第一设置信息定义变量，并设置当前所述组件的输入参数，以及所述至少一个子组件的输入参数，所述变量指向数值、字符串、对象、数组或表格数据。
在一种可选实施例中，所述接收模块701，还用于：接收第二设置信息；
所述处理模块，
还用于：根据所述第二设置信息定义变量，并设置如下参数中的至少一种：所述至少一个事件接口的事件接口参数、所述至少一个方法接口的方法接口参数、所述至少一个方法的方法参数以及对应的代码。
在一种可选实施例中，所述发送模块703，具体用于：向服务器发送所述数据模型，以使得所述服务器对所述数据模型进行编译生成软件代码；
所述接收模块701，还用于：接收所述服务器发送的所述网页代码对应的网址信息；
所述组件可视化开发装置还包括：显示模块，用于在预览视窗中显示所述网址信息对应的网页。
在一种可选实施例中，所述接收模块701，还用于：接收发布指令；
所述处理模块702，还用于：根据所述发布指令向所述服务器发送确认后的数据模型，以使得所述服务器将所述确认后的数据模型发布到数据库。
图8是本申请实施例提供的一种服务器结构示意图，该服务器700可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上中央处理器(central processingunits，CPU)722(例如，一个或一个以上处理器)和存储器732，一个或一个以上存储应用程序742或数据744的存储介质730(例如一个或一个以上海量存储设备)。其中，存储器732和存储介质730可以是短暂存储或持久存储。存储在存储介质730的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对服务器中的一系列指令操作。更进一步地，中央处理器722可以设置为与存储介质730通信，在服务器700上执行存储介质730中的一系列指令操作。
服务器700还可以包括一个或一个以上电源726，一个或一个以上有线或无线网络接口750，一个或一个以上输入输出接口758，和/或，一个或一个以上操作系统741，例如Windows ServerTM，Mac OS XTM，UnixTM,LinuxTM，FreeBSDTM等等。
上述实施例中由服务器所执行的步骤可以基于该图8所示的服务器结构。
在本申请实施例中，该服务器还具有以下功能：
接收终端设备发送的数据模型，将所述数据模型编译为对应的软件代码；向终端设备发送的所述软件代码对应的网址信息；接收终端设备发送的确认后的数据模型，将所述确认后的数据模型发布到数据库。
本申请实施例还提供了一种终端设备，如图9所示，为了便于说明，仅示出了与本申请实施例相关的部分，具体技术细节未揭示的，请参照本申请实施例方法部分。该终端设备可以为包括平板电脑、笔记本电脑、掌上电脑、手机、机器人以及个人电脑(personalcomputer，PC)等任意终端设备，以终端设备为个人电脑为例：
图9示出的是与本申请实施例提供的终端设备相关的个人电脑的部分结构的框图。参考图9，个人电脑包括：射频(radio frequency，RF)电路810、存储器820、输入单元830、显示单元840、传感器850、音频电路860、无线保真(wireless fidelity，WiFi)模块870、处理器880、以及电源890等部件。本领域技术人员可以理解，图9中示出的个人电脑结构并不构成对个人电脑的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。下面结合图9对个人电脑的各个构成部件进行具体的介绍：
RF电路810可用于收发信息过程中，信号的接收和发送，RF电路810可以通过无线通信与网络和服务器通信。上述无线通信可以使用任一通信标准或协议，包括但不限于全球移动通讯系统(global system of mobile communication，GSM)、通用分组无线服务(general packet radio service，GPRS)、码分多址(code division multiple access，CDMA)、宽带码分多址(wideband code division multiple access,WCDMA)、长期演进(long term evolution，LTE)、电子邮件、短消息服务(short messaging service，SMS)等。
存储器820可用于存储软件程序以及模块，处理器880通过运行存储在存储器820的软件程序以及模块，从而执行个人电脑的各种功能应用以及数据处理。存储器820可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据个人电脑的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器820可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。
输入单元830可用于接收输入的数字或字符信息，以及产生与个人电脑的用户设置以及功能控制有关的键信号输入。具体地，输入单元830可包括触控面板831以及其他输入设备832。触控面板831，也称为触摸屏，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板831上或在触控面板831附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触控面板831可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器880，并能接收处理器880发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触控面板831。除了触控面板831，输入单元830还可以包括其他输入设备832。具体地，其他输入设备832可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。
显示单元840可用于显示由用户输入的信息或提供给用户的信息以及个人电脑的各种菜单。显示单元840可包括显示面板841，可选的，可以采用液晶显示器(liquidcrystal display，LCD)、有机发光二极管(organic light-emitting diode，OLED)等形式来配置显示面板841。进一步的，触控面板831可覆盖显示面板841，当触控面板831检测到在其上或附近的触摸操作后，传送给处理器880以确定触摸事件的类型，随后处理器880根据触摸事件的类型在显示面板841上提供相应的视觉输出。虽然在图9中，触控面板831与显示面板841是作为两个独立的部件来实现个人电脑的输入和输入功能，但是在某些实施例中，可以将触控面板831与显示面板841集成而实现个人电脑的输入和输出功能。
WiFi属于短距离无线传输技术，个人电脑通过WiFi模块870可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图9示出了WiFi模块870，但是可以理解的是，其并不属于个人电脑的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。
处理器880是个人电脑的控制中心，利用各种接口和线路连接整个个人电脑的各个部分，通过运行或执行存储在存储器820内的软件程序和/或模块，以及调用存储在存储器820内的数据，执行个人电脑的各种功能和处理数据，从而对个人电脑进行整体监控。可选的，处理器880可包括一个或多个处理单元；可选的，处理器880可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器880中。
个人电脑还包括给各个部件供电的电源890(比如电池)，可选的，电源可以通过电源管理系统与处理器880逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。
在本申请实施例中，该终端设备具有以下功能：
接收拖拽指令，并根据所述拖拽指令将多个元件拖动到对应位置，其中，所述多个元件为采用预设的代码编辑生成的可视化组件；
接收连接指令，并根据所述连接指令进行所述多个元件中各个元件之间的逻辑连接，生成组件；
生成所述组件对应的数据模型，并向服务器发送所述数据模型，以使得所述服务器将所述数据模型编译为对应的软件代码；或，
生成所述组件对应的数据模型，并将所述数据模型编译为对应的软件代码。
可选的，该终端设备具有以下功能：
接收第一拖拽指令，并根据所述第一拖拽指令将所述至少一个子组件拖动到第一编辑页面的对应位置；
接收第二拖拽指令，并根据所述第二拖拽指令将所述至少一个事件接口、所述至少一个方法接口和所述至少一个方法中的至少一个元件拖动到第二编辑页面的对应位置。
可选的，该终端设备具有以下功能：
接收连接指令；
根据所述连接指令执行以下至少一种操作：
进行一个所述子组件的子事件接口与另一个所述子组件的子方法接口之间的逻辑连接、进行一个所述子组件的子事件接口与一个所述事件接口之间的逻辑连接、进行一个所述子组件的子事件接口与一个所述方法之间的逻辑连接、进行一个所述子组件的子方法接口与一个所述方法接口之间的逻辑连接，或进行一个所述方法与一个所述方法接口之间的逻辑连接。
可选的，该终端设备具有以下功能：
接收第三拖拽指令，并根据所述第三拖拽指令将至少一个视窗拖动到第一编辑页面的对应位置；
接收第一拖拽指令，并根据所述第一拖拽指令将所述至少一个子组件拖动到第一编辑页面的一个视窗中的对应位置。
可选的，该终端设备具有以下功能：
接收第一设置信息；
根据所述第一设置信息定义变量，并设置当前所述组件的输入参数，以及所述至少一个子组件的输入参数，所述变量指向数值、字符串、对象、数组或表格数据。
可选的，该终端设备具有以下功能：
接收第二设置信息；
根据所述第二设置信息定义变量，并设置所述至少一个事件接口的事件接口参数、所述至少一个方法接口的方法接口参数、所述至少一个方法的方法参数以及对应的代码。
可选的，该终端设备具有以下功能：
向服务器发送所述数据模型，以使得所述服务器对所述数据模型进行编译生成软件代码；
接收所述服务器发送的所述软件代码对应的网址信息；
在预览视窗中显示所述网址信息对应的网页。
可选的，该终端设备具有以下功能：
接收发布指令；
根据所述发布指令向所述服务器发送确认后的数据模型，以使得所述服务器将所述确认后的数据模型发布到数据库。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
在本申请所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read-only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。
Claims (10)
1.一种组件可视化开发方法，其特征在于，包括：
接收拖拽指令，并根据所述拖拽指令将多个元件拖动到对应位置，其中，所述多个元件为采用预设的代码编辑生成的可视化组件；
接收连接指令，并根据所述连接指令进行所述多个元件中各个元件之间的逻辑连接，生成组件；
生成所述组件对应的数据模型，并向服务器发送所述数据模型，以使得所述服务器将所述数据模型编译为对应的软件代码；或，
生成所述组件对应的数据模型，并将所述数据模型编译为对应的软件代码。
2.根据权利要求1所述的方法，其特征在于，所述多个元件包括如下元件中的至少一种：至少一个子组件、至少一个事件接口、至少一个方法接口以及至少一个方法，其中，所述至少一个子组件中的每个子组件包括：子事件接口和/或子方法接口。
3.根据权利要求2所述的方法，其特征在于，所述接收拖拽指令，并根据所述拖拽指令将多个元件拖动到对应位置，包括：
接收第一拖拽指令，并根据所述第一拖拽指令将所述至少一个子组件拖动到第一编辑页面的对应位置；
接收第二拖拽指令，并根据所述第二拖拽指令将至少一个事件接口、所述至少一个方法接口和所述至少一个方法中的至少一个元件拖动到第二编辑页面的对应位置。
4.根据权利要求3所述的方法，其特征在于，所述接收连接指令，并根据所述连接指令进行所述多个元件中各个元件之间的逻辑连接，包括：
接收连接指令；
根据所述连接指令执行以下至少一种操作：
进行一个所述子组件的子事件接口与另一个所述子组件的子方法接口之间的逻辑连接、进行一个所述子组件的子事件接口与一个所述事件接口之间的逻辑连接、进行一个所述子组件的子事件接口与一个所述方法之间的逻辑连接、进行一个所述子组件的子方法接口与一个所述方法接口之间的逻辑连接，或进行一个所述方法与一个所述方法接口之间的逻辑连接。
5.根据权利要求4所述的方法，其特征在于，所述方法还包括：
接收第三拖拽指令，并根据所述第三拖拽指令将至少一个视窗拖动到第一编辑页面的对应位置；
相应的，所述接收第一拖拽指令，并根据所述第一拖拽指令将所述至少一个子组件拖动到第一编辑页面的对应位置，包括：
接收第一拖拽指令，并根据所述第一拖拽指令将所述至少一个子组件拖动到第一编辑页面的一个视窗中的对应位置。
6.根据权利要求5所述的方法，其特征在于，所述数据模型包括父表、方法接口子表、方法子表、事件接口子表、视窗子表、逻辑连接子表和子组件子表，所述父表分别与所述方法接口子表、方法子表、事件接口子表、视窗子表、逻辑连接子表和子组件子表存在对应关系；其中，
所述父表包括所述组件的组件参数；
所述方法接口子表包括所述至少一个方法接口的方法接口参数；
所述方法子表包括所述至少一个方法的方法参数；
所述事件接口子表包括所述至少一个事件接口的事件接口参数；
所述视窗子表包括所述至少一个视窗的视窗参数；
所述逻辑连接子表包括所述各个元件之间的逻辑连接的连接起始点和连接终止点；
所述子组件子表包括所述至少一个子组件的子组件参数。
7.根据权利要求1至6任一所述的方法，其特征在于，所述接收第一拖拽指令，并根据所述第一拖拽指令将所述至少一个子组件拖动到第一编辑页面的对应位置之后，所述方法还包括：
接收第一设置信息；
根据所述第一设置信息定义变量，并设置当前所述组件的输入参数，以及所述至少一个子组件的输入参数，所述变量指向数值、字符串、对象、数组或表格数据。
8.根据权利要求1至6任一所述的方法，其特征在于，所述接收第二拖拽指令，并根据所述第二拖拽指令将所述至少一个事件接口、所述至少一个方法接口和所述至少一个方法拖动到第二编辑页面的对应位置之后，所述方法还包括：
接收第二设置信息；
根据所述第二设置信息定义变量，并设置如下参数中的至少一种：所述至少一个事件接口的事件接口参数、所述至少一个方法接口的方法接口参数、所述至少一个方法的方法参数以及对应的代码。
9.根据权利要1至6任一所述的方法，其特征在于，所述向服务器发送所述数据模型包括：
向服务器发送所述数据模型，以使得所述服务器对所述数据模型进行编译生成软件代码；
接收所述服务器发送的所述软件代码对应的网址信息；
在预览视窗中显示所述网址信息对应的网页。
10.根据权利要9所述的方法，其特征在于，所述在预览视窗中显示所述网址信息对应的网页之后，所述方法还包括：
接收发布指令；
根据所述发布指令向所述服务器发送确认后的数据模型，以使得所述服务器将所述确认后的数据模型发布到数据库。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910451815.4A CN110187875A (zh) | 2019-05-28 | 2019-05-28 | 一种组件可视化开发方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910451815.4A CN110187875A (zh) | 2019-05-28 | 2019-05-28 | 一种组件可视化开发方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110187875A true CN110187875A (zh) | 2019-08-30 |
Family
ID=67718231
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910451815.4A Pending CN110187875A (zh) | 2019-05-28 | 2019-05-28 | 一种组件可视化开发方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110187875A (zh) |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111061473A (zh) * | 2019-12-16 | 2020-04-24 | 新奥数能科技有限公司 | 用于快速构建页面的可视化组件编辑方法和装置 |
| CN111596913A (zh) * | 2020-05-22 | 2020-08-28 | 北京达佳互联信息技术有限公司 | 一种可视化组件框架编排方法及装置 |
| CN112286514A (zh) * | 2020-10-28 | 2021-01-29 | 上海淇玥信息技术有限公司 | 一种配置任务流程的方法、装置和电子设备 |
| CN113157265A (zh) * | 2021-03-12 | 2021-07-23 | 杭州未名信科科技有限公司 | 一种用于可视化编程的数据处理方法及装置、介质、设备 |
| CN113343612A (zh) * | 2021-05-26 | 2021-09-03 | 广州市迪士普音响科技有限公司 | 音频处理器的配置方法和配置装置 |
| CN113590097A (zh) * | 2021-07-30 | 2021-11-02 | 中电金信软件有限公司 | 一种api接口的生成方法、装置、电子设备及存储介质 |
| CN113641346A (zh) * | 2021-07-08 | 2021-11-12 | 福建通慧教育科技有限公司 | 一种标准化编程的智能辅助工具及其工作方法 |
| CN113821203A (zh) * | 2020-06-20 | 2021-12-21 | 华为技术有限公司 | App开发平台、app开发方法及电子设备 |
| CN114995803A (zh) * | 2022-05-31 | 2022-09-02 | 中国电信股份有限公司 | 人机界面的开发方法、低代码开发平台、终端以及介质 |
| WO2023143197A1 (zh) * | 2022-01-28 | 2023-08-03 | 北京字跳网络技术有限公司 | 组合图形控件的生成方法、装置、设备及存储介质 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102087597A (zh) * | 2011-02-14 | 2011-06-08 | 浪潮通信信息系统有限公司 | 一种基于j2ee和构件集的可视化开发平台 |
| US20150135110A1 (en) * | 2013-11-09 | 2015-05-14 | International Business Machines Corporation | Utilizing object cloning to enable nested drag and drop |
| CN105843630A (zh) * | 2016-06-08 | 2016-08-10 | 江西洪都航空工业集团有限责任公司 | 一种基于机器人图形化编程开发的方法 |
| CN107526832A (zh) * | 2017-09-05 | 2017-12-29 | 江苏电力信息技术有限公司 | 一种构建基于页面拖拽技术的大数据业务模型的方法 |
| CN109669688A (zh) * | 2018-09-26 | 2019-04-23 | 深圳壹账通智能科技有限公司 | 基于可视化的软件开发方法、装置、终端设备及存储介质 |
-
2019
- 2019-05-28 CN CN201910451815.4A patent/CN110187875A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102087597A (zh) * | 2011-02-14 | 2011-06-08 | 浪潮通信信息系统有限公司 | 一种基于j2ee和构件集的可视化开发平台 |
| US20150135110A1 (en) * | 2013-11-09 | 2015-05-14 | International Business Machines Corporation | Utilizing object cloning to enable nested drag and drop |
| CN105843630A (zh) * | 2016-06-08 | 2016-08-10 | 江西洪都航空工业集团有限责任公司 | 一种基于机器人图形化编程开发的方法 |
| CN107526832A (zh) * | 2017-09-05 | 2017-12-29 | 江苏电力信息技术有限公司 | 一种构建基于页面拖拽技术的大数据业务模型的方法 |
| CN109669688A (zh) * | 2018-09-26 | 2019-04-23 | 深圳壹账通智能科技有限公司 | 基于可视化的软件开发方法、装置、终端设备及存储介质 |
Cited By (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111061473A (zh) * | 2019-12-16 | 2020-04-24 | 新奥数能科技有限公司 | 用于快速构建页面的可视化组件编辑方法和装置 |
| CN111596913A (zh) * | 2020-05-22 | 2020-08-28 | 北京达佳互联信息技术有限公司 | 一种可视化组件框架编排方法及装置 |
| CN111596913B (zh) * | 2020-05-22 | 2024-04-30 | 北京达佳互联信息技术有限公司 | 一种可视化组件框架编排方法及装置 |
| WO2021254167A1 (zh) * | 2020-06-20 | 2021-12-23 | 华为技术有限公司 | App开发平台、app开发方法及电子设备 |
| CN114371844A (zh) * | 2020-06-20 | 2022-04-19 | 华为技术有限公司 | App开发平台、app开发方法及电子设备 |
| CN113821203A (zh) * | 2020-06-20 | 2021-12-21 | 华为技术有限公司 | App开发平台、app开发方法及电子设备 |
| CN112286514A (zh) * | 2020-10-28 | 2021-01-29 | 上海淇玥信息技术有限公司 | 一种配置任务流程的方法、装置和电子设备 |
| CN112286514B (zh) * | 2020-10-28 | 2023-06-16 | 上海淇玥信息技术有限公司 | 一种配置任务流程的方法、装置和电子设备 |
| CN113157265A (zh) * | 2021-03-12 | 2021-07-23 | 杭州未名信科科技有限公司 | 一种用于可视化编程的数据处理方法及装置、介质、设备 |
| CN113343612A (zh) * | 2021-05-26 | 2021-09-03 | 广州市迪士普音响科技有限公司 | 音频处理器的配置方法和配置装置 |
| CN113641346A (zh) * | 2021-07-08 | 2021-11-12 | 福建通慧教育科技有限公司 | 一种标准化编程的智能辅助工具及其工作方法 |
| CN113590097A (zh) * | 2021-07-30 | 2021-11-02 | 中电金信软件有限公司 | 一种api接口的生成方法、装置、电子设备及存储介质 |
| WO2023143197A1 (zh) * | 2022-01-28 | 2023-08-03 | 北京字跳网络技术有限公司 | 组合图形控件的生成方法、装置、设备及存储介质 |
| CN114995803A (zh) * | 2022-05-31 | 2022-09-02 | 中国电信股份有限公司 | 人机界面的开发方法、低代码开发平台、终端以及介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110187875A (zh) | 一种组件可视化开发方法 | |
| CN104238877B (zh) | 控制图标的方法和终端 | |
| CN111080170B (zh) | 一种工作流建模方法、装置、电子设备及存储介质 | |
| WO2020057091A1 (zh) | 基于iOS的数据采集分析方法及装置 | |
| US20180081517A1 (en) | Operation method and terminal device | |
| KR101381484B1 (ko) | 그래픽 오브젝트 플로팅 기능을 갖는 모바일 디바이스 및 그 실행 방법 | |
| CN109981878A (zh) | 一种图标管理的方法及装置 | |
| US20140372506A1 (en) | Managing and using remote applications on a mobile device | |
| CN105094551A (zh) | 一种信息处理方法及电子设备 | |
| CN102830906B (zh) | 基于用户界面进行文件处理的方法及终端设备 | |
| CN110413276B (zh) | 参数编辑方法及装置、电子设备、存储介质 | |
| CN110633032B (zh) | 终端设备的图标显示方法及装置 | |
| WO2022048329A1 (zh) | 菜单显示方法和装置 | |
| CN104793915B (zh) | 一种分屏显示方法及终端 | |
| JP2016500175A (ja) | フローティングオブジェクトの実現方法及び装置 | |
| CN110032324A (zh) | 一种文本选中方法及终端 | |
| CN106547676A (zh) | 一种用户操作录制方法及终端 | |
| CN103414750A (zh) | Web可视化编辑ANDROID的客户端应用的系统及方法 | |
| CN112347545A (zh) | 一种建筑模型处理方法、装置、计算机设备及存储介质 | |
| US8977968B2 (en) | Pseudo-remote terminal IOTA mobile diagnostics and electronic customer care | |
| CN108984142A (zh) | 分屏显示方法、装置、存储介质和电子设备 | |
| CN108780400A (zh) | 数据处理方法及电子设备 | |
| CN106066874B (zh) | 对象处理方法及终端 | |
| CN103092615A (zh) | 一种任务预览的方法和装置 | |
| CN110347327A (zh) | 条目编辑方法及触控终端 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190830 |
|
| RJ01 | Rejection of invention patent application after publication |