WO2014190821A1 - 一种创建应用的方法及装置 - Google Patents

Abstract

一种创建应用的方法及装置。该方法包括：接收用户配置的组件属性的属性值，根据组件属性的属性值生成组件模型，并根据组件模型渲染组件界面中的预定义图元，以获取与所述组件属性的属性值相应的组件界面图元；将组件模型映射为功能组件模型，并将其图形化显示为功能组件图元，根据用户对所述功能组件图元的操作，图形化建立待创建的应用中不同的所述功能组件图元之间的关联关系，并根据所述待创建的应用中不同的功能组件图元之间的关联关系生成业务功能模型；根据所述组件模型和所述业务功能模型，生成应用的可执行代码。本发明提供的创建应用的方法及装置，实现了全图形化零代码创建应用和开发程序功能。

Description

一种创 ^用的方法^置 技术领域

本发明涉及应用开发技术， 尤其涉及一种创建应用的方法及装置， 属于 计算机技术领域。 背景技术

随着移动互联网的迅猛发展，移动应用软件的开发面向广大的普通受众 是未来的一大必然趋势， 以使普通人员能够方便、 快速地实现移动应用软件 的开发。

但是目前的应用开发技术中， 虽然能够通过可视化界面技术， 使得开发 人员通过拖、 拽组件的方式完成界面设计， 但是在基于界面中的组件模型开 发程序功能时， 仍然需要开发人员以语言文字描述的形式进行配置， 即进行 代码开发。 这就需要应用开发者精通编程语言， 而且开发效率低。

因此， 现有技术已经不能满足需求， 基于可视化用户交互界面（UI )组 件模型如何进一步全图形化开发程序功能， 以使得普通人员也能简单、 快速 开发程序功能， 已经成为图形化开发领域研究的热点和难点。 发明内容

针对现有技术中存在的缺陷， 本发明实施例提供一种创建应用的方法及 装置， 以实现图形化创建应用。

第一方面， 提供一种创建应用的方法， 该方法应用在带有显示设备的终 端上， 包括：

接收用户配置的组件属性的属性值， 根据所述组件属性的属性值， 生成 组件模型， 并根据所述组件模型渲染组件界面中所述组件模型的预定义图 元， 以获取与所述组件属性的属性值相应的组件界面图元；

将所述组件模型映射为功能组件模型， 并根据所述组件界面图元将所述 功能组件模型图形化显示为功能组件图元，根据用户对所述功能组件图元的 操作， 图形化建立待创建的应用中不同的所述功能组件图元之间的关联关 系， 并根据所述待创建的应用中不同的所述功能组件图元之间的关联关系生 成业务功能模型；

根据所述组件模型和所述业务功能模型， 生成所述待创建的应用的可执 行代码。

在第一方面的第一种可能的实现方式中， 所述根据所述组件模型渲染组 件界面中所述组件模型的预定义图元， 以获取与所述组件属性的属性值相应 的组件界面图元， 具体包括：

根据所述组件属性中的组件界面展现格式的属性值及组件界面展现数 据的属性值， 生成组件模型代码；

根据所述组件模型代码， 生成所述组件界面图元。

在第一方面的第二种可能的实现方式中， 所述将组件模型映射为功能组 件模型， 并根据所述组件界面图元将所述功能组件模型图形化显示为功能组 件图元， 具体包括：

将所述组件模型的组件属性， 映射为所述功能组件模型的功能组件属 性；

将所述组件模型的组件关键标识， 映射为所述功能组件模型的功能组件 关键标识；

根据所述组件模型的组件关键标识， 获取所述功能组件关键标识对应的 功能组件展现代码； 或者， 根据所述组件关键标识对应的组件模型的组件展 现格式的属性值和组件界面展现数据的属性值， 生成所述功能组件关键标识 对应的功能组件展现代码；

根据所述组件关键标识对应的组件模型的位置坐标， 在功能组件界面对 应的位置坐标处， 4艮据所述功能组件展现代码渲染所述功能组件图元。

结合第一方面的第二种可能的实现方式，在第一方面的第三种可能的实 现方式中， 所述根据所述组件关键标识对应的组件模型的位置坐标， 在功能 组件界面对应的位置坐标处， 根据所述功能组件展现代码渲染功能组件图 元， 具体包括： 调用所述终端中预置的绘图工具的图形操作接口，根据所述组件关键标 识对应的位置坐标， 在功能组件界面对应的位置坐标处， 根据所述功能组件 展现代码渲染功能组件界面图元；

根据所述组件模型的组件属性， 自动联想映射所述功能组件属性图元。 在第一方面的第四种可能的实现方式中， 所述将所述功能组件模型图形 化显示为功能组件图元， 具体包括：

利用所述终端中预置的绘图工具的三维展现空间能力， 自动建模所述功 能组件图元的三维模型， 并根据用户配置的组件显示层次进行分层显示。

结合第一方面的第四种可能的实现方式，在第一方面的第五种可能的实 现方式中， 所述根据用户配置的组件显示层次进行分层显示， 具体包括： 检索所有组件类型为应用程序交互接口 API的功能组件图元； 将 API 类型的功能组件界面图元的显示层次设置为最底层值， 以在最底层显示所述 API类型的功能组件界面图元； 将 API类型的功能组件界面图元对应的输入 输出属性图元的显示层次，设置为所述 API类型的功能组件界面图元的显示 层次加 1， 以在所述 API类型的功能组件界面图元的上方叠加显示附属的输 入输出属性图元；

检索所有组件类型为可视化用户交互界面 UI类型的功能组件图元； 根 据所述 UI类型的功能组件图元的显示层次，显示所述 UI类型的功能组件图 元。

在第一方面的第六种可能的实现方式中， 所述根据用户对所述功能组件 图元的操作， 图形化建立待创建的应用中不同的所述功能组件图元之间的关 联关系， 具体包括：

接收用户为所述功能组件图元进行颜色标注的标注颜色消息， 所述标注 颜色消息包括标注颜色、 标注时间戳， 以及功能组件图元对应的功能组件关 键标识；

根据所述标注颜色、 标注时间戳， 以及功能组件图元对应的功能组件关 键标识， 生成图元标注序列；

根据所述图元标注序列，确定所述待创建的应用中不同的所述功能组件 图元之间的关联关系。 结合第一方面的第六种可能的实现方式，在第一方面的第七种可能的实 现方式中， 所述根据所述图元标注序列， 确定所述待创建的应用中不同的所 述功能组件图元之间的关联关系， 具体包括：

将所述功能组件图元的前景色， 修改为所述标注颜色；

根据所述功能组件图元的前景色， 以及所述功能组件图元对应的标注时 间戳， 自动生成用于指示应用功能逻辑的标注顺序码。

结合第一方面或第一方面的第一至第七中任一种可能的实现方式， 在第 一方面的第八种可能的实现方式中， 所述根据所述待创建的应用中不同的所 述功能组件图元之间的关联关系生成业务功能模型， 具体包括：

根据所述待创建的应用中不同的所述功能组件图元之间的关联关系， 生 成功能组件图元关联序列；

根据所述图元关联序列、所述组件模型以及所述组件模型与功能组件图 元的映射关系， 生成所述业务功能模型。

结合第一方面或第一方面的第一至第七中任一种可能的实现方式， 在第 一方面的第九种可能的实现方式中， 所述根据所述组件模型和所述业务功能 模型， 生成应用的可执行代码， 具体包括：

从所述业务功能模型中， 读取可视化用户交互界面 UI类型的功能组件 图元的属性； 从所述组件界面中对应的 UI组件的组件模型中， 获取与所述

UI类型的功能组件图元对应的已配置生成代码模板； 根据所述 UI类型的功 能组件图元的属性， 与所述对应的已配置生成代码模板， 生成即时渲染组件 代码；

从所述业务功能模型中，读取应用程序交互接口 API类型的功能组件图 元的属性； 从所述组件界面中对应的 API组件的组件模型中， 获取与所述 API类型的功能组件图元对应的已配置生成代码模板， 并根据 API组件声明 的引用库生成引用类库代码； 才艮据所述 API类型的功能组件图元的属性、 所 述对应的已配置生成代码模板以及所述引用类库代码， 生成 API功能代码； 根据所述功能组件图元的属性和所述待创建的应用中不同的所述功能 组件图元之间的关联关系， 生成用于控制所述 UI组件和所述 API组件交互 的脚本代码； 根据所述即时渲染组件代码、 所述 API功能代码以及所述脚本代码， 生 成所述应用的可执行代码。

第二方面， 提供一种创建应用的装置， 设置在带有显示设备的终端上， 包括组件模型、 组件设计模块、 功能设计模块以及代码生成模块， 其中： 所述组件设计模块， 用于接收用户配置的组件属性的属性值， 根据所述 组件属性的属性值， 生成组件模型， 并根据所述组件模型渲染组件界面中所 述组件模型的预定义图元， 以获取与所述组件属性的属性值相应的组件界面 图元；

所述功能设计模块， 用于将所述组件模型映射为功能组件模型， 并根据 所述组件界面图元将所述功能组件模型图形化显示为功能组件图元，根据用 户对所述功能组件图元的操作， 图形化建立待创建的应用中不同的所述功能 组件图元之间的关联关系， 并根据所述待创建的应用中不同的所述功能组件 图元之间的关联关系生成业务功能模型；

所述代码生成模块， 用于根据所述组件模型和所述业务功能模型， 生成 所述待创建的应用的可执行代码。

在第二方面的第一种可能的实现方式中， 所述组件设计模块具体用于： 根据所述组件属性中的组件界面展现格式的属性值及组件界面展现数 据的属性值， 生成组件模型代码；

根据所述组件模型代码， 生成所述组件界面图元。

在第二方面的第二种可能的实现方式中， 所述功能设计模块具体用于： 将所述组件模型的组件属性， 映射为所述功能组件模型的功能组件属 性；

将所述组件模型的组件关键标识， 映射为所述功能组件模型的功能组件 关键标识；

根据所述组件模型的组件关键标识， 获取所述功能组件关键标识对应的 功能组件展现代码； 或者， 根据所述组件关键标识对应的组件模型的组件展 现格式的属性值和组件界面展现数据的属性值， 生成所述功能组件关键标识 对应的功能组件展现代码； 根据所述组件关键标识对应的组件模型的位置坐标， 在功能组件界面对 应的位置坐标处， 4艮据所述功能组件展现代码渲染所述功能组件图元。

结合第二方面的第二种可能的实现方式，在第二方面的第三种可能的实 现方式中， 所述功能设计模块进一步用于：

调用所述终端中预置的绘图工具的图形操作接口，根据所述组件关键标 识对应的位置坐标， 在功能组件界面对应的位置坐标处， 根据所述功能组件 展现代码渲染功能组件界面图元；

根据所述组件模型的组件属性， 自动联想映射所述功能组件属性图元。 在第二方面的第四种可能的实现方式中， 所述功能设计模块进一步用 于：

利用所述终端中预置的绘图工具的三维展现空间能力， 自动建模所述功 能组件图元的三维模型， 并根据用户配置的组件显示层次进行分层显示。

结合第二方面的第四种可能的实现方式，在第二方面的第五种可能的实 现方式中， 所述功能设计模块具体用于：

检索所有组件类型为应用程序交互接口 API的功能组件图元； 将 API 类型的功能组件界面图元的显示层次设置为最底层值， 以在最底层显示所述 API类型的功能组件界面图元； 将 API类型的功能组件界面图元对应的输入 输出属性图元的显示层次，设置为所述 API类型的功能组件界面图元的显示 层次加 1， 以在所述 API类型的功能组件界面图元的上方叠加显示附属的输 入输出属性图元；

检索所有组件类型为可视化用户交互界面 UI的功能组件图元； 根据所 述 UI类型的功能组件图元的显示层次， 显示所述 UI类型的功能组件图元。

在第二方面的第六种可能的实现方式中， 所述功能设计模块进一步用 于：

接收用户为所述功能组件图元进行颜色标注的标注颜色消息， 所述标注 颜色消息包括标注颜色、 标注时间戳， 以及功能组件图元对应的功能组件关 键标识；

根据所述标注颜色、 标注时间戳， 以及功能组件图元对应的功能组件关 键标识， 生成图元标注序列； 根据所述图元标注序列，确定所述待创建的应用中不同的所述功能组件 图元之间的关联关系。

结合第二方面的第六种可能的实现方式，在第二方面的第七种可能的实 现方式中， 所述功能设计模块进一步用于：

将所述功能组件图元的前景色， 修改为所述标注颜色；

根据所述功能组件图元的前景色， 以及所述功能组件图元对应的标注时 间戳， 自动生成用于指示应用功能逻辑的标注顺序码。

结合第二方面或第二方面的第一至第七中任一种可能的实现方式， 在第 二方面的第八种可能的实现方式中， 所述功能设计模块进一步用于：

根据所述待创建的应用中不同的所述功能组件图元之间的关联关系， 生 成功能组件图元关联序列；

根据所述图元关联序列、所述组件模型以及所述组件模型与功能组件图 元的映射关系， 生成所述业务功能模型。

结合第二方面或第二方面的第一至第七中任一种可能的实现方式， 在第 二方面的第九种可能的实现方式中， 所述代码生成模块， 具体用于：

从所述业务功能模型中， 读取可视化用户交互界面 UI类型的功能组件 图元的属性； 从所述组件界面中对应的 UI组件的组件模型中， 获取与所述 UI类型的功能组件图元对应的已配置生成代码模板； 根据所述 UI类型的功 能组件图元的属性， 与所述对应的已配置生成代码模板， 生成即时渲染组件 代码；

从所述业务功能模型中，读取应用程序交互接口 API类型的功能组件图 元的属性； 从所述组件界面中对应的 API组件的组件模型中， 获取与所述 API类型的功能组件图元对应的已配置生成代码模板， 并根据 API组件声明 的引用库生成引用类库代码； 才艮据所述 API类型的功能组件图元的属性、 所 述对应的已配置生成代码模板以及所述引用类库代码， 生成 API功能代码； 根据所述功能组件图元的属性和所述待创建的应用中不同的所述功能 组件图元之间的关联关系， 生成用于控制所述 UI组件和所述 API组件交互 的脚本代码； 根据所述即时渲染组件代码、 所述 API功能代码， 以及所述脚本代码， 生成所述应用的可执行代码。

根据本发明实施例提供的创建应用的方法及装置， 利用用户通过图形化 组件界面配置的组件模型创建图形化的功能组件图元， 并根据用户对图形化 的功能组件图元的操作，确定实现应用时，各功能组件图元之间的关联关系； 还结合功能组件图元和关联关系生成用于表征程序功能的业务功能模型， 并 根据组件模型和业务功能模型， 生成应用的可执行代码。 因此， 将组件设计 与业务功能设计有机结合， 实现了在完整的应用创建过程中， 用户基于可视 化界面零代码开发， 并且简化了应用的创建过程， 应用的开发创建效率高。 附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案， 下面将对实 施例或现有技术描述中所需要使用的附图作简单地介绍， 显而易见地， 下面 描述中的附图仅仅是本发明的一些实施例， 对于本领域普通技术人员来讲， 在不付出创造性劳动性的前提下， 还可以根据这些附图获得其他的附图。

图 1为本发明实施例的创建应用的方法的流程示意图；

图 2为本发明实施例的创建应用的方法中更新组件模型的一个示例的流 程示意图；

图 3为本发明实施例的创建应用的方法中生成功能组件模型的一个示例 的流程示意图；

图 4为本发明实施例的创建应用的方法中展现功能组件属性图元的一个 示例的流程示意图；

图 5为本发明实施例的创建应用的方法中图形化建立所述待创建的应用 中不同的功能组件图元之间的关联关系的一个示例的流程示意图；

图 6为本发明实施例的创建应用的装置的结构示意图；

图 7为应用本发明实施例的创建应用的装置创建应用的示例一的流程示 意图；

图 8为应用本发明实施例的创建应用的装置更新组件模型的一个示例的 流程示意图；

图 9为应用本发明实施例的创建应用的装置创建应用的示例二的流程示 意图；

图 10为本发明另一实施例的创建应用的装置的结构示意图；

图 11为本发明另一实施例的创建应用的装置的结构示意图。 具体实施方式

本发明实施例的创建应用的方法应用在带有显示设备的终端上， 例如由 一个创建应用的装置来执行， 该创建应用的装置具有可视化界面， 即显示设 备， 用户通过对该可视化界面进行操作， 即可创建应用。 下面， 从创建应用 的装置的角度， 对本发明实施例的创建应用的方法进行说明。

图 1为本发明实施例的创建应用的方法的流程示意图。 如图 1所示， 该 创建应用的方法包括：

步骤 101， 接收用户配置的组件属性的属性值， 根据所述组件属性的属 性值， 生成组件模型， 并根据所述组件模型渲染组件界面中所述组件模型的 预定义图元， 以获取与所述组件属性的属性值相应的组件界面图元；

具体地， 创建应用的装置以图形化的方式， 向用户提供组件待设计的组 件属性， 并将用户的实时设计信息更新到预先定义的组件模型， 生成组件模 型， 再根据所述组件模型的属性渲染组件界面中组件模型对应的预定义图 元， 以获取相应的组件界面图元。 其中， 渲染的含义是指根据组件模型的属 性生成图形化图元。

其中， 组件模型提供的功能实体例如包括：

可视化用户交互界面 （User Interface, UI )组件： 定义界面表单元素实 体；

应用程序交互接口 （Application Program Interface, API )组件： 业务平 台提供或从第三方引入的数据处理能力组件； 和

模型操作接口： 根据组件信息读取或更新组件模型的接口；

用户可设计的组件的属性例如包括组件可以触发事件、组件对外交互接 口及参数、 以及组件展现信息三类属性。

其中， 组件触发事件例如包括单击 （ click )、 双击 （doubleclick ), 轻触 ( tap )、 滑动 ( swipe )等；

组件支持的交互功能及参数例如为 setData(data)、 getData() , hideQ , getLocation()等； 对外交互功能属性数据格式例如为：

{name: ""，

alias: ""，

icon: ""， //用于显示 API组件对应的图标

input: {parameter: {name:"", alias: ""， default:"", nullable: ""} }， 〃输 入

output: {name:"", alias: ""}//输出

}

组件展现信息例如包括布局 （layout ), 和 /或类型 （ style )、 和 /或格式 ( format ), 和 /或数据（data )、 和 /或可视（ visible )、 和 /或索引 （ index )、 和 /或宽度（ width )、 和 /或高度（height )等。

更为具体地， 用户可设计的组件的属性例如包括组件界面展现格式、 组 件界面展现数据、 组件显示层次、 组件的位置坐标、 组件触发事件名称、 组 件对外交互接口名称及接口相关参数的名称， 以及组件类型等。 创建应用的 装置获取用户输入的组件属性的属性值， 并将所获取的组件属性的属性值， 更新到预定义的组件模型。预定义的组件模型中预定义有各组件属性的初始 化属性值， 该初始化属性值可以为空。 例如， 组件模型预先定义如下： {ID: ""， //组件关键标识

Name: ""， //组件名称

Type: "UI/API", //组件类型， UI或 API

Icon: ""， //图标格式

Width: ""， //组件的位置坐标（横向）

Height: "",〃组件的位置坐标（纵向）

Zindex: ""， //组件显示层次

Functions: {function:"对外交互功能属性数据格式，，}，〃组件支持的交互功 能及参数

Events : { {name:"", alias:""}， { ... } }〃组件触发事件

}

步骤 102， 将组件模型映射为功能组件模型， 并根据所述组件界面图元 将所述功能组件模型图形化显示为功能组件图元， 图形化建立待创建的应用 中不同的所述功能组件图元之间的关联关系， 并根据所述待创建的应用中不 同的所述功能组件图元之间的关联关系生成业务功能模型；

其中， 所述功能组件图元包括功能组件界面图元和附属于所述功能组件 界面图元的功能组件属性图元。

具体地， 创建应用的装置还以图形化方式供用户开发业务功能， 设计开 发组件关联关系， 生成业务功能模型。 其中， 创建应用的装置将步骤 101获 得的组件模型， 映射为功能组件模型， 并将功能组件模型图形化显示为功能 组件图元。 所显示的功能组件图元包括功能组件界面图元和功能组件属性图 元，其中，功能组件界面图元用于标识功能组件模型，其可以与组件界面中， 对应的组件模型的显示方式相同， 功能组件属性图元是根据功能组件模型对 应的事件和功能属性生成的， 并附属展现在功能组件界面图元周围或重叠在 功能组件界面图元之上。

用户通过创建应用的装置的人机交互界面，根据待创建的应用的实现流 程， 对功能组件图元进行操作， 例如对功能组件图元进行标注， 或对功能组 件图元进行拖动操作等。创建应用的装置获取用户对图形化功能组件图元的 操作， 根据用户的操作， 确定在待创建的应用中， 实现不同功能的各功能组 件图元之间的关联关系， 例如为执行的先后次序。 创建应用的装置再根据各 功能组件图元， 以及所确定的各功能组件图元之间的关联关系， 即可生成业 务功能模型。

步骤 103， 根据所述组件模型和所述业务功能模型， 生成应用的可执行 代码。

具体地， 创建应用的装置在执行上述步骤 101和步骤 102后， 根据组件 模型和业务功能模型， 生成代码形式的可执行应用， 通过加载并运行可执行 应用， 即可提供相应的应用服务。

根据本发明实施例的创建应用的方法， 利用用户通过图形化组件界面配 置的组件模型创建图形化的功能组件图元， 并根据用户对图形化的功能组件 图元的操作， 确定实现应用时， 各功能组件图元之间的关联关系； 还结合功 能组件图元和关联关系生成用于表征程序功能的业务功能模型， 并根据组件 模型和业务功能模型， 生成应用的可执行代码。 因此， 将组件设计与业务功 能设计有机结合， 实现了在完整的应用创建过程中， 用户基于可视化界面零 代码开发， 并且简化了应用的创建过程， 应用的创建开发效率高。

进一步地， 在本发明实施例的创建应用的方法中， 接收用户配置的组件 属性的属性值，根据所述组件属性的属性值，生成组件模型的过程，例如为： 创建应用的装置按照图 2所示流程检测组件属性的改变，记录改变后的属性 值， 并更新组件模型中的对应的属性值为改变后的值。 其中， 图 2为本发明 实施例的创建应用的方法中更新组件模型的一个示例的流程示意图。 如图 2 所示， 包括以下步骤：

步骤 201， 根据用户选择设计的组件的类型和名称， 获取相应的组件模 型的组件元数据；

步骤 202， 根据所获取的组件元数据， 图形化分属性展现属性项， 展现 形式例如为 （属性名称、 属性值）， 并设置属性值可编辑；

步骤 203， 获取变更的属性值；

步骤 204， 将组件模型中对应的属性更新为变更的属性值。

进一步地， 在本发明实施例的创建应用的方法中， 所述根据组件模型渲 染组件界面中所述组件模型的预定义图元， 以获取相应的组件界面图元， 包 括：

根据组件界面展现格式的属性值及组件界面展现数据的属性值， 生成组 件模型代码；

根据组件模型代码， 生成所述组件界面图元。

进一步地， 在本发明实施例的创建应用的方法中， 所述将组件模型映射 为功能组件模型， 并根据所述组件界面图元将所述功能组件模型图形化显示 为功能组件图元， 包括：

将所述组件模型的组件属性， 映射为所述功能组件模型的功能组件属 性；

将所述组件模型的组件关键标识， 映射为所述功能组件模型的功能组件 关键标识；

根据所述组件模型的组件关键标识， 获取所述功能组件关键标识对应的 功能组件展现代码； 或者， 4艮据所述组件关键标识对应的组件模型的组件展 现格式的属性值和组件界面展现数据的属性值， 生成所述功能组件关键标识 对应的功能组件展现代码；

根据所述组件关键标识对应的组件模型的位置坐标， 在功能组件界面对 应的位置坐标处， 根据所述功能组件展现代码， 渲染功能组件图元。

具体地， 在上述渲染功能组件图元的过程中， 创建应用的装置根据生成 的组件模型， 动态生成对应的功能组件模型， 该功能组件模型主要包括以下 属性： 功能组件关键标识 （ID ); 功能组件展现代码（图元展现格式、 图元 展现数据、 图元图标、 图元大小）， 展示的效果和组件设计效果保持一致； 功能组件类型 （ UI组件 /API组件；)； 功能组件支持的交互功能及参数； 功能 组件支持的触发事件； 功能组件的显示层次 zindex值； 以及功能组件对应显 示的位置坐标。

功能组件模型定义例如为：

{

ID:"",

UnitDisplayCode: ""，

Type: "，，，

Events: "{event{name:"",alias: ""},{ ... } }"，

Functions:

{

function: {

name:"",alias:"",

parameters:

{

parameter: {name:"",alias:"",default:""}

}

}

},

Zindex: "" Location: {x: ""， y: ""}

}

图 3为本发明实施例的创建应用的方法中生成功能组件模型的一个示例 的流程示意图。 如图 3所示， 包括以下步骤：

步骤 301， 获取组件模型；

步骤 302， 解析组件模型；

步骤 303， 将所述组件模型的组件属性， 映射为功能组件模型的功能组 件属性； 并根据组件模型的组件关键标识， 生成功能组件模型的功能组件关 键标识；

具体地， 例如为将组件模型的组件关键标识， 添加任意字符串， 生成功 能组件关键标识。

步骤 304， 将功能组件模型的功能组件事件属性（即组件支持的可设计 的事件）， 设置为组件模型的组件事件属性（即组件触发事件名称）；

步骤 305， 将功能组件的功能属性（即支持的交互功能及参数）， 设置为 组件模型的功能 （即组件对外交互接口名称及接口相关参数的名称）；

步骤 306， 根据所述组件模型的组件关键标识， 获取所述功能组件关键 标识对应的功能组件展现代码； 或者， 4艮据所述组件关键标识对应的组件模 型的组件展现格式的属性值和组件界面展现数据的属性值， 生成所述功能组 件关键标识对应的功能组件展现代码；

步骤 307， 设置功能组件显示层次为组件显示层次；

步骤 308， 设置功能组件展现位置坐标为组件展现位置坐标； 步骤 309， 保存经过以上设置的功能组件模型。

经过图 3所示的流程， 生成功能组件模型后， 根据功能组件关键标识和 组件关键标识， 建立功能组件和组件的映射关系， 并根据功能组件模型对应 的功能组件展现位置坐标、 显示层次和功能组件展现代码， 自动展现功能组 件。

其中， 自动展现功能组件具体包括： 调用终端中预置的绘图工具（例如 为 Canvas或 SVG等 )的图形操作接口， 根据所述组件关键标识对应的位置 坐标， 在功能组件界面对应的位置坐标处， 根据所述功能组件展现代码， 绘 制功能组件界面图元； 并自动联想映射所述功能组件属性图元。 具体地， 基 于组件模型的组件属性， 自动联想所述功能组件界面图元的属性， 根据功能 组件对应的事件和功能属性， 自动生成图形化展示组件事件和功能属性的功 能组件部件单元， 并附属展现在功能组件界面图元周围或重叠在功能组件界 面图元之上， 即功能组件属性图元。 其中， 自动联想映射所述功能组件属性 图元的过程，例如为：将组件模型的组件属性一一映射为功能组件属性图元。

更为具体地， 图 4为本发明实施例的创建应用的方法中展现功能组件属 性图元的一个示例的流程示意图。 如图 4所示， 包括以下步骤：

步骤 401， 读取功能组件事件属性；

步骤 402， 分别为每个事件在功能组件界面图元周围增加一个部件展现 单元；

步骤 403， 设置步骤 402增加的部件展现单元文本信息为事件名； 步骤 404， 为步骤 402增加的部件展现单元增加标识事件的图标； 步骤 405， 读取功能组件对应的功能属性；

步骤 406， 分别为每个功能在功能组件界面图元周围增加一个部件展现 单元， 即功能部件展现单元；

步骤 407， 设置步骤 406增加的部件展现单元文本信息为功能方法名； 步骤 408， 为步骤 406增加的部件展现单元增加标识功能图标 /API组件 图标属性对应的图标；

步骤 409， 在功能部件展现单元周围增加所有参数部件单元， 并设置其 文本为参数名。

至此， 完成渲染功能组件图元的操作。

进一步地， 在本发明实施例的创建应用的方法中， 除釆用上述图 3和图 4所示的流程渲染功能组件图元之外， 还可以利用终端中预置的绘图工具的 三维展现空间能力， 自动建模所述功能组件图元的三维模型， 并根据用户配 置的组件显示层次进行分层显示。

其中， 所述根据用户配置的组件显示层次进行分层显示， 包括： 检索所有组件类型为 API的功能组件图元；将 API类型的功能组件界面 图元的显示层次设置为最底层值，以在最底层显示 API类型的功能组件界面 图元； 将 API 类型的功能组件界面图元对应的输入输出属性图元的显示层 次， 设置为 API类型的功能组件界面图元的显示层次加 1， 以在 API类型的 功能组件界面图元的上方叠加显示附属的输入输出属性图元； 检索所有组件 类型为 UI的功能组件图元； 才艮据 UI类型的功能组件图元的显示层次， 显示 UI类型的功能组件图元。其中，用户还可以通过修改功能组件图元的显示层 次， 控制功能组件图元处于显示状态或隐藏状态。

根据本发明实施例的创建应用的方法， 提供了更为直观、 形象的功能组 件图元显示。

进一步地， 在本发明实施例的创建应用的方法中， 所述根据用户对所述 功能组件图元的操作， 图形化建立所述待创建的应用中不同的功能组件图元 之间的关联关系， 包括：

接收用户为所述功能组件图元进行颜色标注的标注颜色消息， 所述标注 颜色消息包括标注颜色、 标注时间戳， 以及功能组件图元对应的功能组件关 键标识；

根据所述标注颜色、 标注时间戳， 以及功能组件图元对应的功能组件关 键标识， 生成图元标注序列；

根据所述图元标注序列，确定待创建的应用中不同的功能组件图元之间 的关联关系。

其中， 根据所述图元标注序列， 确定待创建的应用中不同的功能组件图 元之间的关联关系， 具体包括：

将所述功能组件图元的前景色， 修改为所述标注颜色；

根据所述功能组件图元的前景色， 以及所述功能组件图元对应的标注时 间戳， 自动生成用于指示应用功能逻辑的标注顺序码。

更为具体地， 图 5为本发明实施例的创建应用的方法中图形化建立所述 待创建的应用中不同的功能组件图元之间的关联关系的一个示例的流程示 意图。 如图 5所示， 包括以下步骤：

步骤 501， 接收用户对功能组件图元的点击；

步骤 502， 显示颜色面板；

步骤 503， 接收用户选定的颜色； 步骤 504， 将功能组件图元的前景色， 修改为用户选定的颜色 （即标注 颜色）；

步骤 505， 记录着色的功能组件图元的功能组件关键标识、 标注颜色和 标注时间戳；

步骤 506， 根据用户对不同功能组件图元的标注顺序， 分析出业务功能 执行顺序， 自动生成与各功能组件图元对应的标注顺序码。

进一步， 还可以包括：

步骤 507， 在所述功能组件图元上自动增加容器元素， 并设置所述容器 元素的文本为所述标注顺序码。

根据本发明实施例的创建应用的方法， 用户通过对功能组件图元进行颜 色标注， 即可完成应用执行逻辑的设置， 程序功能开发效率高， 尤其当功能 组件图元显示为三维模型时， 通过这种颜色标注的方法， 使图形化显示效果 更为清晰。

进一步地， 在本发明实施例的创建应用的方法中， 除釆用上述图 5所示 的流程图形化建立各功能组件图元之间的关联关系之外，还可以通过接收用 户的拖动操作， 自动画线连接所述拖动操作对应的源功能组件图元和目标功 能组件图元， 记录各功能组件图元之间的关联关系。

根据本发明实施例的创建应用的方法， 用户通过直接对功能组件图元进 行拖拽操作， 即可完成应用执行逻辑的设置， 更为直观、 简便。

进一步地， 在本发明实施例的创建应用的方法中， 根据所述待创建的应 用中不同的所述功能组件图元之间的关联关系生成业务功能模型， 包括： 根据所述待创建的应用中不同的功能组件图元之间的关联关系， 生成功 能组件图元关联序列；

根据图元关联序列、 组件模型， 以及组件模型与功能组件图元的映射关 系， 生成业务功能模型。

其中， 功能组件图元关联序列例如定义如下：

{objectl .event:object2.method,objec2t.method.paral :object3,object2.out:obj ect4， ... }

其中， 用"： "隔开不同的功能组件图元。 业务功能模型例如定义如下：

<功能逻辑>

<组件>

〈组件 ID></组件 ID>

<事件>

<事件名〉</事件名〉

<组件〉

〈组件 ID〉<血件 ID>

<功能 >

<调用优先级 ></调用优先级〉

<功能名 ><功能名 > <名称 ></名称 >

<值关联对象 >UI组件 ID(objectxxx)/xxxx</值关联对象〉 </参数〉

<输出〉

<组件 ID〉</组件 ID〉

</输出〉

</功能〉

</组件 >

</事件 >

〈血件〉

</功能逻辑>

进一步地， 在本发明实施例的创建应用的方法中， 所述图形化建立的所 述待创建的应用中不同的所述功能组件图元之间的关联关系，是以树形结构 分层或分级展示的。

进一步地， 在本发明实施例的创建应用的方法中， 所述根据所述组件模 型和所述业务功能模型， 生成应用的可执行代码， 包括：

从所述业务功能模型中， 读取 UI类型的功能组件图元的属性； 从所述 组件界面中对应的 UI组件的组件模型中，获取与所述 UI类型的功能组件图 元对应的已配置生成代码模板； 才艮据所述 UI类型的功能组件图元的属性， 与所述对应的已配置生成代码模板， 生成即时渲染组件代码；

从所述业务功能模型中， 读取 API类型的功能组件图元的属性； 从所述 组件界面中对应的 API组件的组件模型中，获取与所述 API类型的功能组件 图元对应的已配置生成代码模板，并根据 API组件声明的引用库生成引用类 库代码； 才艮据所述 API类型的功能组件图元的属性、 所述对应的已配置生成 代码模板以及所述引用类库代码， 生成 API功能代码；

根据所述功能组件图元的属性和所述功能组件图元的关联关系， 生成用 于控制所述 UI组件和所述 API组件交互的脚本代码；

根据所述即时渲染组件代码、 所述 API功能代码， 以及所述脚本代码， 生成所述应用的可执行代码。

图 6为本发明实施例的创建应用的装置的结构示意图。该创建应用的装 置设置在带有显示设备的终端上。 如图 6所示， 创建应用的装置 60包括组 件模型 61、组件设计模块 62、功能设计模块 63以及代码生成模块 64，其中： 所述组件设计模块 62，用于接收用户配置的组件属性的属性值，根据所 述组件属性的属性值， 生成组件模型， 并根据所述组件模型渲染组件界面中 所述组件模型的预定义图元， 以获取与所述组件属性的属性值相应的组件界 面图元；

所述功能设计模块 63，用于将组件模型映射为功能组件模型，并根据所 述组件界面图元将所述功能组件模型图形化显示为功能组件图元，根据用户 对所述功能组件图元的操作， 图形化建立待创建的应用中不同的所述功能组 件图元之间的关联关系， 并根据所述待创建的应用中不同的所述功能组件图 元之间的关联关系生成业务功能模型； 其中， 所述功能组件图元包括功能组 件界面图元和附属于所述功能组件界面图元的功能组件属性图元；

所述代码生成模块 64，用于根据所述组件模型和所述业务功能模型，生 成待创建的应用的可执行代码。

本发明实施例的创建应用的装置创建应用的具体流程与本发明实施例 的创建应用的方法相同， 故此处不再赘述。 根据本发明实施例的创建应用的装置， 利用用户通过图形化组件界面配 置的组件模型创建图形化的功能组件图元， 并根据用户对图形化的功能组件 图元的操作， 确定实现应用时， 各功能组件图元之间的关联关系； 还结合功 能组件图元和关联关系生成用于表征程序功能的业务功能模型， 并根据组件 模型和业务功能模型， 生成应用的可执行代码。 因此， 将组件设计与业务功 能设计有机结合， 实现了在完整的应用创建过程中， 用户基于图形化界面零 代码开发， 并且简化了应用的创建过程， 而且应用的创建效率高。

进一步地， 本发明实施例的创建应用的装置中， 还可以包括业务运行引 擎， 用于运行代码生成模块生成的可执行代码， 以向用户提供应用服务。

进一步地， 本发明实施例的创建应用的装置中， 所述组件属性包括： 组 件界面展现格式、 组件界面展现数据、 组件显示层次、 组件的位置坐标、 组 件触发事件名称、 组件对外交互接口名称及接口相关参数的名称， 以及组件 类型。

进一步地， 本发明实施例的创建应用的装置中， 所述组件设计模块具体 用于：

根据所述组件属性中的组件界面展现格式的属性值及组件界面展现数 据的属性值， 生成组件模型代码； 根据所述组件模型代码， 生成所述组件界 面图元。

进一步地， 本发明实施例的创建应用的装置中， 所述功能设计模块具体 用于：

将所述组件模型的组件属性， 映射为所述功能组件模型的功能组件属 性；

将所述组件模型的组件关键标识， 映射为所述功能组件模型的功能组件 关键标识；

根据所述组件模型的组件关键标识， 获取所述功能组件关键标识对应的 功能组件展现代码； 或者， 根据所述组件关键标识对应的组件模型的组件展 现格式的属性值和组件界面展现数据的属性值， 生成所述功能组件关键标识 对应的功能组件展现代码；

根据所述组件关键标识对应的组件模型的位置坐标， 在功能组件界面对 应的位置坐标处， 4艮据所述功能组件展现代码渲染功能组件图元。

进一步地， 本发明实施例的创建应用的装置中， 所述功能设计模块具体 还用于：

调用终端中预置的绘图工具的图形操作接口，根据所述组件关键标识对 应的位置坐标， 在功能组件界面对应的位置坐标处， 根据所述功能组件展现 代码渲染功能组件界面图元；

根据所述组件模型的组件属性， 自动联想映射所述功能组件属性图元。 进一步地， 本发明实施例的创建应用的装置中， 所述功能设计模块还用 于：

利用终端中预置的绘图工具的三维展现空间能力， 自动建模所述功能组 件图元的三维模型， 并根据用户配置的组件显示层次进行分层显示。

进一步地， 本发明实施例的创建应用的装置中， 所述功能设计模块还用 于：

检索所有组件类型为 API的功能组件图元；将 API类型的功能组件界面 图元的显示层次设置为最底层值，以在最底层显示所述 API类型的功能组件 界面图元；将 API类型的功能组件界面图元对应的输入输出属性图元的显示 层次， 设置为所述 API类型的功能组件界面图元的显示层次加 1， 以在所述 API类型的功能组件界面图元的上方叠加显示附属的输入输出属性图元； 检索所有组件类型为 UI的功能组件图元；根据所述 UI类型的功能组件 图元的显示层次， 显示所述 UI类型的功能组件图元。

进一步地， 本发明实施例的创建应用的装置中， 所述功能设计模块还还 用于：

通过^ ί爹改所述功能组件图元的显示层次，控制所述功能组件图元处于显 示状态或隐藏状态。

进一步地， 本发明实施例的创建应用的装置中， 所述功能设计模块还用 于：

接收用户为所述功能组件图元进行颜色标注的标注颜色消息， 所述标注 颜色消息包括标注颜色、 标注时间戳， 以及功能组件图元对应的功能组件关 键标识； 根据所述标注颜色、 标注时间戳， 以及功能组件图元对应的功能组件关 键标识， 生成图元标注序列；

根据所述图元标注序列，确定待创建的应用中不同的功能组件图元之间 的关联关系。

进一步地， 本发明实施例的创建应用的装置中， 所述功能设计模块还具 体用于：

将所述功能组件图元的前景色， 修改为所述标注颜色；

根据所述功能组件图元的前景色， 以及所述功能组件图元对应的标注时 间戳， 自动生成用于指示应用功能逻辑的标注顺序码。

进一步地， 本发明实施例的创建应用的装置中， 所述功能设计模块还具 体用于：

在所述功能组件图元上自动增加容器元素， 并设置所述容器元素的文本 为所述标注顺序码。

进一步地， 本发明实施例的创建应用的装置中， 所述功能设计模块还用 于：

接收用户的拖动操作， 自动画线连接所述拖动操作对应的源功能组件图 元和目标功能组件图元，记录所述待创建的应用中不同的所述功能组件图元 之间的关联关系。

进一步地， 本发明实施例的创建应用的装置中， 所述功能设计模块还用 于：

将所述组件模型的组件关键标识， 添加任意字符串， 生成所述功能组件 关键标识。

进一步地， 本发明实施例的创建应用的装置中， 所述功能设计模块还用 于：

根据所述待创建的应用中不同的所述功能组件图元之间的关联关系， 生 成功能组件图元关联序列；

根据所述图元关联序列、所述组件模型以及所述组件模型与功能组件图 元的映射关系， 生成所述业务功能模型。

进一步地， 本发明实施例的创建应用的装置中， 所述图形化建立的所述 功能组件图元之间的关联关系， 是以树形结构分层或分级展示的。

进一步地， 本发明实施例的创建应用的装置中， 所述功能组件图元与相 应的组件界面图元的展现效果一致。

进一步地， 本发明实施例的创建应用的装置中， 所述代码生成模块， 用 于：

从所述业务功能模型中， 读取 UI类型的功能组件图元的属性； 从所述 组件界面中对应的 UI组件的组件模型中，获取与所述 UI类型的功能组件图 元对应的已配置生成代码模板； 才艮据所述 UI类型的功能组件图元的属性， 与所述对应的已配置生成代码模板， 生成即时渲染组件代码；

从所述业务功能模型中， 读取 API类型的功能组件图元的属性； 从所述 组件界面中对应的 API组件的组件模型中，获取与所述 API类型的功能组件 图元对应的已配置生成代码模板，并根据 API组件声明的引用库生成引用类 库代码； 才艮据所述 API类型的功能组件图元的属性、 所述对应的已配置生成 代码模板以及所述引用类库代码， 生成 API功能代码；

根据所述功能组件图元的属性和所述功能组件图元的关联关系， 生成用 于控制所述 UI组件和所述 API组件交互的脚本代码；

根据所述即时渲染组件代码、 所述 API功能代码， 以及所述脚本代码， 生成所述应用的可执行代码。

下文中， 以两个具体的示例， 对应用本发明实施例的创建应用的装置创 建应用的流程进行更为详细说明。

示例一

创建的应用： 拍照业务， 通过单击一个按钮调用拍照 API组件， 并把拍 照的照片显示在图片组件上的 WEB业务， 通过 JavaScript和 CSS来实现该 业务。

需使用的相关组件： 一个图片 UI组件、 一个按钮 UI组件、 一个拍照

API组件。

图 7为应用本发明实施例的创建应用的装置创建应用的示例一的流程示 意图， 如图 7所示， 包括：

步骤 701， 组件设计模块记录用户设计的图片 UI组件、 按钮 UI组件、 拍照 API组件的属性信息， 并更新预先存储的组件模型；

具体地， 预先定义的组件模型包括 UI组件、 API组件和模型操作接口。 图 8为应用本发明实施例的创建应用的装置更新组件模型的一个示例的流程 示意图。 如图 8所示， 包括以下步骤：

步骤 801， 组件设计模块根据用户选择设计的组件的类型和名称， 向模 型操作接口发送组件元数据获取请求；

步骤 802， 模型操作接口根据用户选择设计的组件的类型和名称， 读取 对应的组件元数据， 并以 JSON格式封装为组件元数据消息；

步骤 803， 模型操作接口将组件元数据消息返回给组件设计模块； 步骤 804， 组件设计模块根据所获取的组件元数据， 图形化分属性展现 属性项， 展现形式例如为 （属性名称、 属性值）， 并设置属性值可编辑； 步骤 805， 组件设计模块为属性值增加编辑监听事件， 绑定组件属性变 更处理回调接口， 回调接口格式如下：

Interface ( String type， String name， String propertyName， String property Value )

{

〃调用组件元模型操作接口更新组件元模型

}

步骤 806， 回调接口获取变更属性值， 请求模型操作接口更新组件元数 据；

步骤 807， 模型操作接口将相应的 UI组件 /API组件中的属性更新为变 更的属性值。

在本示例中， 用户例如通过拖拽的方式， 在组件设计模块中增加了图片 UI组件、 按钮 UI组件和拍照 API组件， 并设置组件的展现数据、 图标、 样 式等属性。 组件设计模块调用模型操作接口， 自动更新组件模型对应的属性 信息。 更为具体地， 用户设计图片 UI组件的功能名为" changelmage", 输入 参数为 "image"; 设计按钮 UI组件 （即"拍照"按钮） 的触发事件名属性为 "onClick", 别名属性为" click"; 设计拍照 API组件的名称为 "TakePicture"及 对应的图标。 步骤 702， 组件设计模块请求功能设计模块生成所有组件的功能组件模 型；

步骤 703， 功能设计模块根据组件模型， 生成功能组件模型， 并建立组 件模型的组件属性与功能组件模型的功能组件属性的映射关系；

具体地， 功能设计模块向组件设计模块请求获取图片 UI组件、 按钮 UI 组件和拍照 API组件的组件元数据，并接收组件设计模块响应该请求返回的 组件元数据信息。 返回的元数据信息如下：

{

{

{

ID :"objectl",

Name ： "IMAGE",

Type ： "UI",

Icon ： "http://localhost/resources/apple.png"//API组件是必填项， Width ： "80px",

Height: "80px",

Zindex: "1",

X: "124px",

Functions:

{

function:

{

name: "change Src",

alias :"changelmage",

input:

{

parameter: {name:"src",alias: "image", default:"", nullable: "true"} output: {}

},

Events: {}

}

{

ID :"object2",

Name: "takePicture",

Text: "拍照"

Type: "UI",

Icon: "http://localhost/resources/gear.png"//API组件是必填项，

Width: "80px",

Height ： "20px",

X: "124px",

Zindex: "2"，

Functions: { input: {} , output: {name:"imagepath",alias:"image"} } Events： {name :"onClick",alias： "click"}

}

{

ID :"object3",

Name: "TakePicture",

Text: "takePicture"

Type: "API",

Icon: "http://localhost/resources/camera.png"//API组件是必填项 Width: "80px",

Height: "20px",

X: "124px",

Zindex: "3"， Functions ：

{

function:

{

name:"takePicture",

alias :"takePicture",

input:

{

parameter: { }

}，

output: {name:" imageURL",alias:"imageURL"}

},

Events: {}

}

功能设计模块解析返回的组件元模型， 分别获取图片 UI组件、 按钮 UI 组件和拍照 API组件的组件元数据。 功能设计模块釆用组件关键标识（组件 ID标识） +"function"生成所有组件对应的功能组件关键标识， 即生成如下： 图片 UI功能组件标识为： "objectl function";

按钮 UI功能组件标识为： "object2 function";

拍照 API功能组件标识为： "object3 function"。

功能设计模块设置"拍照"按钮对应的功能组件支持事件为" click"; 设置 图片 UI功能组件支持的功能属性为步骤 701中用户设计的图片 UI组件的功 能属性， 即：

function:

{

name: "change Src",

alias :"changelmage",

input:

{ =j9A09snomuooT§0|₍₁(^) 9^0T|3|qQfqo₍₁=^OT |q uooT§0|₍₁(^) 95[OT|3fqo₍₁=5[OT uo " '9|q siA :XiT|Tq sTA 'y ： u§T|B-ix9i 'xdo^t ： dop §0| 'xd^8 ： ¾9 τ§0| 'ΐ :x9pm-z

Λΐρ>

^: ^w^^ ^ ¥i ^ Ψ ¾ ¥i in

<Ap/><"33d「3idfe/pimcu35pBq/S33腿 ςι

§UIT><₍₁(£) 95[0T|3fqO₍₁=5[0T UO

₍₁9|qB§§m -mX gzssj-mX qou5[-9z s9J-mX jsAoq-szs ai- "=ssBio" si[i)ino3sno] [f"qo"=ino3snouiuoo3oi" si[i)J3A03sno] [f"qo"=J3A

" '

Λΐρ>

{ ς\

{ } ： js uiBJBd

}

:induT oi

}

： uopunj

IciV ^^ m ζ

^w^ ΐθ ¾ ^ ^ Ψ ¾ ^ in

{

{

{"3tui，， :9|qB|pu '",,:iitiB p 腿 ,， ： smiB'" is,,:3ureu} ： JSISUIBJBI

-82-

ΪΖ806Ϊ/ 0Ζ OAV "objMouseOver(this);'logiconmouseout="objMouseOut(this);"class="yui-resize- hover yui-resize-knob yui-resize yui-draggable"><logica id=^,logicobjectPushButton2"style="margin:0px;height:100%;width:100%;text-al ign:left;" logichref="#" class="ui-btn ui-btn-icon-left ui-btn-hover-a ui-btn-corner-all ui-shadow ui-btn-up-a"><span id="buttonandicon2 " class="ui-btn-inner ui-btn-corner-all" style="line-height: 18px"><span class="ui-btn-text" id="buttontext2">拍照 </span> <span id="buttonicon2" class="ui-icon ui-icon-gear ui-icon-shadow"></ span></ span></logica>

拍照 API功能组件的功能组件展示代码为：

<div id="TakePicture" lang="API" align="addDsJSAPI(^,COSMOS', ",

'takePicture', 'username', ", 'images/toolbox/mobile_picture.png');" dir=" TakePicture " onmouseover="switchTopBarBg(this,'overVapibg.png');" onmouseout="switchTopBarBg(this,Over',");" class="div_api" title=" TakePicture "

style="background-image:url(http://localhost:8088/mashupIDE/images/newstyle/ apibg.png); "> <table> <tbody><tr><td style="height:30px;cursor:move" align="center"><imgclass=' mg_api_td"src=^, mages/toolbox/mobile_picture.png "></td></tr><tr><td align="center"><div class="td_api"><a style:"" href= "j avascript: void(0) "title=" ViewDetail" onclick: " show ApiDetail('TakePictur e');">TakePicture</a><a></a></div></tdx/tr> </tbody></table></div>

功能设计模块再将各功能组件的显示层次 Zindex值， 设置为用户设计 的组件的 Zindex属性值。 例如， 将图片 UI功能组件的 Zindex值设置为 1， 将按钮 UI功能组件的 Zindex值设置为 2，将拍照 API功能组件的 Zindex值 设置为 3。

功能设计模块再将各功能组件的显示位置属性值，设置为用户设计的组 件的显示位置属性值。 例如， 将图片 UI功能组件的 X属性值为 124px， y属 性值为 219px; 将按钮 UI功能组件的 X属性值为 124px， y属性值为 319px; 将拍照 API功能组件的 X属性值为 124px， y属性值为 419px。

通过上述步骤， 功能设计模块完成功能组件模型的生成， 保存所生成的 图片 UI功能组件、 按钮 UI功能组件和拍照 API功能组件。

步骤 704， 功能设计模块根据组件关键标识和功能组件关键标识建立映 射关系；

例如， 映射关系如下：

{objectl :objectl— function,object:object2— function,object3 :object3— function

}

步骤 705， 图形化显示功能组件模型到功能设计模块；

具体地， 在功能设计模块中分别为各功能组件模型增加 DIV容器元素， 所增加的 DIV容器元素的位置为功能组件模型的坐标属性（x， y )的值， 并 设置 DIV 容器元素的 ID 为功能组件 ID 标识， 设置 DIV 容器元素的 innerHTML代码为功能组件模型的 HTML代码， 最终展现效果同组件设计 模块中的组件展现效果完全一致。

步骤 706， 自动联想功能组件模型属性， 并图形化映射到图形化显示的 功能组件 （即功能组件界面图元）右侧附近；

具体流程例如包括： 功能设计模块从功能组件模型中读取拍照按钮对应 的事件属性值，即" click";在拍照按钮功能组件右侧增加一个 DIV展现容器； 设置 DIV文本（text )属性为 "click"; 为展现事件容器增加一个图片 （IMG ) 元素统一资源定位符 ( Uniform/Universal Resource Locator， URL )， "htt ://localhost/resources/gear.png"， 用于标识该功能组件为事件功能组件； 读取拍照 API功能组件对应的功能属性，属性值参考返回消息中 API组件元 数据； 在拍照 API功能设计组件右侧增加一个 DIV容器； 设置 DIV text属 性为 "output"； 为展现 DIV 容器增加一个 IMG 元素 URL， "htt ://localhost/resources/output.png" ,用于标识该功能组件为 API输出单元。

步骤 707， 功能设计模块记录用户通过拖动功能组件图元， 设计的功能 组件关联关系， 生成功能组件关联序列；

具体地， 用户通过拖动功能组件图元到目标、 关联组件， 功能设计模块 自动画线连接源和目标组件， 完成功能组件关联， 并建立关联关系， 生成功 能组件关联序列。 在本示例中， 所生成的功能组件关联序列例如为：

{ obj ect2. click: obj ect3.takePicture, object3. out: objectl } 步骤 708， 功能设计模块记录功能设计展示效果及功能组件模型， 序列 化功能设计容器代码 JSON ( JavaScript Object Notation )格式字符串及序列 化功能组件模型 JSON格式字符串并保存。

步骤 709， 功能设计模块根据组件模型、 组件模型与功能组件模型的映 射关系以及功能组件关联序列， 生成业务功能模型并保存；

在本示例中， 所生成的业务功能模型如下：

<function>

<component>

<id>object2</id>

<event>

<name>click</ event>

<component>

<id>object3<id>

<function>

<priority >l</priority>

<name>takePicture<name>

<parameter>

<name></ name>

<from> </from>

</parameter>

<out>

<id>objectl</id>

</out>

</function>

</component>

</event>

</ component >

</function>

步骤 710， 代码生成模块根据组件模型、 业务功能模型生成超文本标记 语言 ( Hypertext Markup Language , HTML )和 javascript代码。

在上述示例中， 功能设计模块以二维形式对功能组件图元进行显示， 并 且通过接收用户对功能组件图元的拖动操作， 建立所述待创建的应用中不同 的功能组件图元之间的关联关系； 还结合功能组件图元和关联关系生成用于 表征程序功能的业务功能模型， 并根据组件模型和业务功能模型， 生成应用 的可执行代码。 因此， 将组件设计与业务功能设计有机结合， 实现了在完整 的应用开发过程中， 用户基于图形化界面零代码开发， 使得普通人员也能简 单、 快速开发程序功能， 而且开发效率高。

示例二

本示例中，假设的待创建的应用、需使用的相关组件与上述示例一相同。 图 9为应用本发明实施例的创建应用的装置创建应用的示例二的流程示 意图， 如图 9所示， 包括：

步骤 901， 组件设计模块记录用户设计的图片 UI组件、 按钮 UI组件、 拍照 API组件的属性信息， 生成组件模型， 并根据组件模型渲染对应的预定 义图元， 重新生成组件界面图元；

步骤 902， 组件设计模块请求功能设计模块生成所有组件的功能组件模 型；

步骤 903， 功能设计模块根据组件模型， 生成功能组件模型；

步骤 904， 功能设计模块根据组件关键标识和功能组件关键标识建立映 射关系；

上述步骤 901 904可以釆用与示例一相同的方式执行。

步骤 905， 以 3D展现样式， 图形化显示功能组件模型到功能设计模块； 具体地， 在功能设计模块中分别为各功能组件模型增加 DIV容器元素， 所增加的 DIV容器元素的位置为功能组件模型的坐标属性（x， y )的值， 并 设置 DIV 容器元素的 ID 为功能组件 ID 标识， 设置 DIV 容器元素的 innerHTML代码为功能组件模型的 HTML代码， 最终展现效果同组件设计 模块中的组件展现效果完全一致， 并重新设置 API组件的容器的样式 zindex 属性值为 0使拍照 API作为底层展现， 设置功能组件容器的 style属性， 增 加 CSS3的 3D展现样式， 使功能组件分层 3D展示。 增加样式 CSS代码例如为: perspective: 500px;

perspective-origin: 150px 500px;

transform-origin: 150px 500px;

animation: scrollText 200s linear infinite;

-webkit-box-shadow: 0 2px lOpx rgba(0, 0, 0, 0.4),inset 0 4px 4px 0

#ffffff,inset 0 2px 4px 0 rgba(0, 0, 0, 0.4),inset 0 -2px 2px 0 rgba(255, 255, 255

0.9);

-moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4),inset 0 4px 4px 0

#ffffff,inset 0 2px 4px 0 rgba(0, 0, 0, 0.4),inset 0 -2px 2px 0 rgba(255, 255, 255 0.9);

-moz-border-radius： 6px;

-webkit-border-radius： 6 x;

0% { transform: rotateX(45deg) translate Y(500px); }

100% { transform: rotateX(45deg) translate Y(-8300px); }

}

步骤 906， 自动联想功能组件模型属性， 并图形化映射到图形化显示的 功能组件 （即功能组件界面图元）正上方的边线处；

具体地， 例如： 功能设计模块从功能组件模型中读取拍照按钮对应的事 件属性值， 即" click"; 在拍照按钮功能组件左上方增加一个 DIV展现容器； 设置 DIV文本（ text )属性为 "click"; 为展现事件容器增加 CSS3立体样式， 使事件单元立体展示。

步骤 907， 功能设计模块记录用户通过对功能组件图元标注颜色， 设计 的功能组件关联关系， 生成功能组件关联序列；

具体地， 例如： 用户单击拍照按钮组件的 click事件单元； 功能设计模 块显示包含常见颜色表的颜色选择器； 用户单击目标颜色选择标注颜色； 记 录标注的色彩码（ #llffll )、标注色彩的组件 ID标识及事件名 {object2.click}， 和时间戳（ 7/15/2012 10: 13:26 PM ); 以标注色彩的组件 ID标识、 标注颜色、 时间戳生成图元标注序列， 例如为：

{[object2, click, 7/15/2012 10:13:26 PM, #llffll], [object3,takePicture, 7/15/2012 10:13:27 PM, #llffll], [objectl, 7/15/2012 10:13:28 PM, #llffll]} 功能设计模块根据图元标注序列分析出业务功能步骤， 并自动标注顺序 码，生成功能组件关联序列，例如：拍照按钮功能组件的 click单元标注为 1， 拍照 API功能组件标注为 2， 图片功能组件标注为 3， 所生成的功能组件关 联序歹¹ J为： { obj ect2. click: object3.takePicture, object3. out: objectl }

步骤 908， 功能设计模块记录功能设计展示效果及功能组件模型， 序列 化功能设计容器代码 JSON ( JavaScript Object Notation )格式字符串及序列 化功能组件模型 JSON格式字符串并保存。

步骤 909， 功能设计模块根据组件模型、 组件模型与功能组件模型的映 射关系以及功能组件关联序列， 生成业务功能模型并保存；

步骤 910， 代码生成模块根据组件模型、 业务功能模型生成超文本标记 语言 ( Hypertext Markup Language , HTML )和 javascript代码。

上述步骤 908 910可以釆用与示例一相同的方式执行。

在上述示例中， 功能设计模块以三维形式对功能组件图元进行显示， 并 且通过接收用户对功能组件图元的颜色标注操作， 建立所述待创建的应用中 不同的功能组件图元之间的关联关系； 还结合功能组件图元和关联关系生成 用于表征程序功能的业务功能模型， 并根据组件模型和业务功能模型， 生成 应用的可执行代码。 因此， 将组件设计与业务功能设计有机结合， 实现了在 完整的应用开发过程中， 用户基于图形化界面零代码开发， 使得普通人员也 能简单、 快速开发程序功能， 而且开发效率高。

图 10为本发明另一实施例的创建应用的装置的结构示意图。 该创建应 用的装置设置在带有显示设备的终端上。 如图 10所示， 该创建应用的装置 100包括存储器 110和与存储器连接的处理器 120， 其中： 存储器 110中存 储一组程序代码， 且处理器 120用于调用存储器 110中存储的程序代码， 用 于执行以下操作：

接收用户配置的组件属性的属性值， 根据所述组件属性的属性值， 生成 组件模型， 并根据所述组件模型渲染组件界面中所述组件模型的预定义图 元， 以获取与所述组件属性的属性值相应的组件界面图元；

将所述组件模型映射为功能组件模型， 并根据所述组件界面图元将所述 功能组件模型图形化显示为功能组件图元，根据用户对所述功能组件图元的 操作， 图形化建立待创建的应用中不同的所述功能组件图元之间的关联关 系， 并根据所述待创建的应用中不同的功能组件图元之间的关联关系生成业 务功能模型； 其中， 所述功能组件图元包括功能组件界面图元和附属于所述 功能组件界面图元的功能组件属性图元；

根据所述组件模型和所述业务功能模型， 生成应用的可执行代码。 本发明实施例的创建应用的装置创建应用的具体流程与本发明实施例 的创建应用的方法相同， 故此处不再赘述。

根据本发明实施例的创建应用的装置， 利用用户通过图形化组件界面配 置的组件模型创建图形化的功能组件图元， 并根据用户对图形化的功能组件 图元的操作， 确定实现应用时， 各功能组件图元之间的关联关系； 还结合功 能组件图元和关联关系生成用于表征程序功能的业务功能模型， 并根据组件 模型和业务功能模型， 生成应用的可执行代码。 因此， 将组件设计与业务功 能设计有机结合， 实现了在完整的应用创建过程中， 用户基于图形化界面零 代码开发， 并且简化了应用的创建过程， 而且应用的创建效率高。

进一步地， 本发明实施例的创建应用的装置中， 所述组件属性包括： 组 件界面展现格式、 组件界面展现数据、 组件显示层次、 组件的位置坐标、 组 件触发事件名称、 组件对外交互接口名称及接口相关参数的名称， 以及组件 类型。

进一步地， 本发明实施例的创建应用的装置中， 所述处理器还用于调用 存储器中存储的程序代码， 执行以下操作：

根据所述组件属性中的组件界面展现格式的属性值及组件界面展现数 据的属性值， 生成组件模型代码；

根据所述组件模型代码， 生成所述组件界面图元。

进一步地， 本发明实施例的创建应用的装置中， 所述处理器还用于调用 存储器中存储的程序代码， 执行以下操作： 将所述组件模型的组件属性， 映射为所述功能组件模型的功能组件属 性；

将所述组件模型的组件关键标识， 映射为所述功能组件模型的功能组件 关键标识； 根据所述组件模型的组件关键标识， 获取所述功能组件关键标识 对应的功能组件展现代码； 或者， 4艮据所述组件关键标识对应的组件模型的 组件展现格式的属性值和组件界面展现数据的属性值， 生成所述功能组件关 键标识对应的功能组件展现代码；

根据所述组件关键标识对应的组件模型的位置坐标， 在功能组件界面对 应的位置坐标处， 4艮据所述功能组件展现代码渲染功能组件图元。

进一步地， 本发明实施例的创建应用的装置中， 所述处理器还用于调用 存储器中存储的程序代码， 执行以下操作：

调用终端中预置的绘图工具的图形操作接口，根据所述组件关键标识对 应的位置坐标， 在功能组件界面对应的位置坐标处， 根据所述功能组件展现 代码， 渲染功能组件界面图元；

根据所述组件模型的组件属性， 自动联想映射所述功能组件属性图元。 进一步地， 本发明实施例的创建应用的装置中， 所述处理器还用于调用 存储器中存储的程序代码， 执行以下操作：

利用终端中预置的绘图工具的三维展现空间能力， 自动建模所述功能组 件图元的三维模型， 并根据用户配置的组件显示层次进行分层显示。

进一步地， 本发明实施例的创建应用的装置中， 所述处理器还用于调用 存储器中存储的程序代码， 执行以下操作：

检索所有组件类型为 API的功能组件图元；将 API类型的功能组件界面 图元的显示层次设置为最底层值，以在最底层显示所述 API类型的功能组件 界面图元；将 API类型的功能组件界面图元对应的输入输出属性图元的显示 层次， 设置为所述 API类型的功能组件界面图元的显示层次加 1， 以在所述 API类型的功能组件界面图元的上方叠加显示附属的输入输出属性图元； 检索所有组件类型为 UI的功能组件图元；根据所述 UI类型的功能组件 图元的显示层次， 显示所述 UI类型的功能组件图元。

进一步地， 本发明实施例的创建应用的装置中， 所述处理器还用于调用 存储器中存储的程序代码， 执行以下操作：

通过^ ί爹改所述功能组件图元的显示层次，控制所述功能组件图元处于显 示状态或隐藏状态。

进一步地， 本发明实施例的创建应用的装置中， 所述处理器还用于调用 存储器中存储的程序代码， 执行以下操作：

接收用户为所述功能组件图元进行颜色标注的标注颜色消息， 所述标注 颜色消息包括标注颜色、 标注时间戳， 以及功能组件图元对应的功能组件关 键标识；

根据所述标注颜色、 标注时间戳， 以及功能组件图元对应的功能组件关 键标识， 生成图元标注序列；

根据所述图元标注序列，确定待创建的应用中不同的功能组件图元之间 的关联关系。

进一步地， 本发明实施例的创建应用的装置中， 所述处理器还用于调用 存储器中存储的程序代码， 执行以下操作：

将所述功能组件图元的前景色， 修改为所述标注颜色；

根据所述功能组件图元的前景色， 以及所述功能组件图元对应的标注时 间戳， 自动生成用于指示应用功能逻辑的标注顺序码。

进一步地， 本发明实施例的创建应用的装置中， 所述处理器还用于调用 存储器中存储的程序代码， 执行以下操作：

在所述功能组件图元上自动增加容器元素， 并设置所述容器元素的文本 为所述标注顺序码。

进一步地， 本发明实施例的创建应用的装置中， 所述处理器还用于调用 存储器中存储的程序代码， 执行以下操作：

接收用户的拖动操作， 自动画线连接所述拖动操作对应的源功能组件图 元和目标功能组件图元，记录所述待创建的应用中不同的所述功能组件图元 之间的关联关系。

进一步地， 本发明实施例的创建应用的装置中， 所述处理器还用于调用 存储器中存储的程序代码， 执行以下操作：

将所述组件模型的组件关键标识， 添加任意字符串， 生成所述功能组件 关键标识。

进一步地， 本发明实施例的创建应用的装置中， 所述处理器还用于调用 存储器中存储的程序代码， 执行以下操作：

根据所述待创建的应用中不同功能组件图元之间的关联关系， 生成功能 组件图元关联序列；

根据所述图元关联序列、 所述组件模型， 以及所述组件模型与功能组件 图元的映射关系， 生成所述业务功能模型。

进一步地， 本发明实施例的创建应用的装置中， 所述图形化建立的所述 待创建的应用中不同的所述功能组件图元之间的关联关系， 是以树形结构分 层或分级展示的。

进一步地， 本发明实施例的创建应用的装置中， 所述功能组件图元与相 应的组件界面图元的展现效果一致。

进一步地， 本发明实施例的创建应用的装置中， 所述处理器还用于调用 存储器中存储的程序代码， 执行以下操作：

从所述业务功能模型中， 读取 UI类型的功能组件图元的属性； 从所述 组件界面中对应的 UI组件的组件模型中，获取与所述 UI类型的功能组件图 元对应的已配置生成代码模板； 才艮据所述 UI类型的功能组件图元的属性， 与所述对应的已配置生成代码模板， 生成即时渲染组件代码；

从所述业务功能模型中， 读取 API类型的功能组件图元的属性； 从所述 组件界面中对应的 API组件的组件模型中，获取与所述 API类型的功能组件 图元对应的已配置生成代码模板，并根据 API组件声明的引用库生成引用类 库代码； 才艮据所述 API类型的功能组件图元的属性、 所述对应的已配置生成 代码模板以及所述引用类库代码， 生成 API功能代码；

根据所述功能组件图元的属性和所述待创建的应用中不同功能组件图 元之间的关联关系， 生成用于控制所述 UI组件和所述 API组件交互的脚本 代码；

根据所述即时渲染组件代码、 所述 API功能代码以及所述脚本代码， 生 成所述应用的可执行代码。

图 11 为本发明另一实施例的创建应用的装置的结构示意图， 该装置包 括至少一个处理器 1101 (例如 CPU ), 至少一个网络接口 1105或者其他通 信接口， 存储器 1106， 和至少一个通信总线 1103， 用于实现这些装置之间 的连接通信。 处理器 1101用于执行存储器 1106中存储的可执行模块， 例如 计算机程序。 存储器 1106 可能包含高速随机存取存储器 （RAM: Random Access Memory ), 也可能还包括非不稳、定的存 4诸器（ non- volatile memory )， 例如至少一个磁盘存储器。通过至少一个网络接口 1105 (可以是有线或者无 线）实现该系统网关与至少一个其他网元之间的通信连接，可以使用互联网， 广域网， 本地网， 城域网等。

在一些实施方式中， 存储器 1106存储了程序 11061， 程序 11061可以被 处理器 1101 执行， 这个程序包括： 接收用户配置的组件属性的属性值， 根 据所述组件属性的属性值， 生成组件模型， 并根据所述组件模型渲染组件界 面中所述组件模型的预定义图元， 以获取与所述组件属性的属性值相应的组 件界面图元； 将所述组件模型映射为功能组件模型， 并根据所述组件界面图 元将所述功能组件模型图形化显示为功能组件图元，才艮据用户对所述功能组 件图元的操作， 图形化建立待创建的应用中不同的所述功能组件图元之间的 关联关系， 并根据所述待创建的应用中不同的所述功能组件图元之间的关联 关系生成业务功能模型； 根据所述组件模型和所述业务功能模型， 生成所述 应用的可执行代码。

本领域普通技术人员可以理解： 实现上述各方法实施例的全部或部分步 骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可 读取存储介质中。 该程序在执行时， 执行包括上述各方法实施例的步骤； 而 前述的存储介质包括： ROM、 RAM, 磁碟或者光盘等各种可以存储程序代 码的介质。

最后应说明的是： 以上实施例仅用以说明本发明的技术方案， 而非对其 限制； 尽管参照前述实施例对本发明进行了详细的说明， 本领域的普通技术 人员应当理解： 其依然可以对前述各实施例所记载的技术方案进行修改， 或 者对其中部分技术特征进行等同替换； 而这些修改或者替换， 并不使相应技 术方案的本质脱离本发明各实施例技术方案的精神和范围。

+

Claims

权 利 要 求

1、 一种创建应用的方法， 该方法应用在带有显示设备的终端上， 其特 征在于， 包括：

接收用户配置的组件属性的属性值， 根据所述组件属性的属性值， 生成 组件模型， 并根据所述组件模型渲染组件界面中所述组件模型的预定义图 元， 以获取与所述组件属性的属性值相应的组件界面图元；

将所述组件模型映射为功能组件模型， 并根据所述组件界面图元将所述 功能组件模型图形化显示为功能组件图元，根据用户对所述功能组件图元的 操作， 图形化建立待创建的应用中不同的所述功能组件图元之间的关联关 系， 并根据所述待创建的应用中不同的所述功能组件图元之间的关联关系生 成业务功能模型；

根据所述组件模型和所述业务功能模型， 生成所述待创建的应用的可执 行代码。

2、 根据权利要求 1 所述的创建应用的方法， 其特征在于， 所述根据所 述组件模型渲染组件界面中所述组件模型的预定义图元， 以获取与所述组件 属性的属性值相应的组件界面图元， 具体包括：

根据所述组件属性中的组件界面展现格式的属性值及组件界面展现数 据的属性值， 生成组件模型代码；

根据所述组件模型代码， 生成所述组件界面图元。

3、 根据权利要求 1 所述的创建应用的方法， 其特征在于， 所述将组件 模型映射为功能组件模型， 并根据所述组件界面图元将所述功能组件模型图 形化显示为功能组件图元， 具体包括：

将所述组件模型的组件属性， 映射为所述功能组件模型的功能组件属 性；

将所述组件模型的组件关键标识， 映射为所述功能组件模型的功能组件 关键标识；

根据所述组件模型的组件关键标识， 获取所述功能组件关键标识对应的 功能组件展现代码； 或者， 根据所述组件关键标识对应的组件模型的组件展 现格式的属性值和组件界面展现数据的属性值， 生成所述功能组件关键标识 对应的功能组件展现代码；

根据所述组件关键标识对应的组件模型的位置坐标， 在功能组件界面对 应的位置坐标处， 4艮据所述功能组件展现代码渲染所述功能组件图元。

4、 根据权利要求 3 所述的创建应用的方法， 其特征在于， 所述根据所 述组件关键标识对应的组件模型的位置坐标， 在功能组件界面对应的位置坐 标处， 根据所述功能组件展现代码渲染功能组件图元， 具体包括：

调用所述终端中预置的绘图工具的图形操作接口，根据所述组件关键标 识对应的位置坐标， 在功能组件界面对应的位置坐标处， 根据所述功能组件 展现代码渲染功能组件界面图元；

根据所述组件模型的组件属性， 自动联想映射所述功能组件属性图元。

5、 根据权利要求 1 所述的创建应用的方法， 其特征在于， 所述将所述 功能组件模型图形化显示为功能组件图元， 具体包括：

利用所述终端中预置的绘图工具的三维展现空间能力， 自动建模所述功 能组件图元的三维模型， 并根据用户配置的组件显示层次进行分层显示。

6、 根据权利要求 5所述的创建应用的方法， 其特征在于， 所述根据用 户配置的组件显示层次进行分层显示， 具体包括：

检索所有组件类型为应用程序交互接口 API 的功能组件图元； 将 API 类型的功能组件界面图元的显示层次设置为最底层值， 以在最底层显示所述 API类型的功能组件界面图元； 将 API类型的功能组件界面图元对应的输入 输出属性图元的显示层次，设置为所述 API类型的功能组件界面图元的显示 层次加 1， 以在所述 API类型的功能组件界面图元的上方叠加显示附属的输 入输出属性图元；

检索所有组件类型为可视化用户交互界面 UI类型的功能组件图元； 根 据所述 UI类型的功能组件图元的显示层次，显示所述 UI类型的功能组件图 元。

7、 根据权利要求 1 所述的创建应用的方法， 其特征在于， 所述根据用 户对所述功能组件图元的操作， 图形化建立待创建的应用中不同的所述功能 组件图元之间的关联关系， 具体包括：

接收用户为所述功能组件图元进行颜色标注的标注颜色消息， 所述标注 颜色消息包括标注颜色、 标注时间戳， 以及功能组件图元对应的功能组件关 键标识；

根据所述标注颜色、 标注时间戳， 以及功能组件图元对应的功能组件关 键标识， 生成图元标注序列；

根据所述图元标注序列，确定所述待创建的应用中不同的所述功能组件 图元之间的关联关系。

8、 根据权利要求 7所述的创建应用的方法， 其特征在于， 所述根据所 述图元标注序列，确定所述待创建的应用中不同的所述功能组件图元之间的 关联关系， 具体包括：

将所述功能组件图元的前景色， 修改为所述标注颜色；

根据所述功能组件图元的前景色， 以及所述功能组件图元对应的标注时 间戳， 自动生成用于指示应用功能逻辑的标注顺序码。

9、 根据权利要求 1-8任一所述的创建应用的方法， 其特征在于， 所述 根据所述待创建的应用中不同的所述功能组件图元之间的关联关系生成业 务功能模型， 具体包括：

根据所述待创建的应用中不同的所述功能组件图元之间的关联关系， 生 成功能组件图元关联序列；

根据所述图元关联序列、所述组件模型以及所述组件模型与功能组件图 元的映射关系， 生成所述业务功能模型。

10、 根据权利要求 1-8任一所述的创建应用的方法， 其特征在于， 所述 根据所述组件模型和所述业务功能模型，生成应用的可执行代码，具体包括： 从所述业务功能模型中， 读取可视化用户交互界面 UI类型的功能组件 图元的属性； 从所述组件界面中对应的 UI组件的组件模型中， 获取与所述 UI类型的功能组件图元对应的已配置生成代码模板； 根据所述 UI类型的功 能组件图元的属性， 与所述对应的已配置生成代码模板， 生成即时渲染组件 代码；

从所述业务功能模型中，读取应用程序交互接口 API类型的功能组件图 元的属性； 从所述组件界面中对应的 API组件的组件模型中， 获取与所述 API类型的功能组件图元对应的已配置生成代码模板， 并根据 API组件声明 的引用库生成引用类库代码； 才艮据所述 API类型的功能组件图元的属性、 所 述对应的已配置生成代码模板以及所述引用类库代码， 生成 API功能代码； 根据所述功能组件图元的属性和所述待创建的应用中不同的所述功能 组件图元之间的关联关系， 生成用于控制所述 UI组件和所述 API组件交互 的脚本代码；

根据所述即时渲染组件代码、 所述 API功能代码以及所述脚本代码， 生 成所述应用的可执行代码。

11、一种创建应用的装置，设置在带有显示设备的终端上，其特征在于， 包括组件模型、 组件设计模块、 功能设计模块以及代码生成模块， 其中： 所述组件设计模块， 用于接收用户配置的组件属性的属性值， 根据所述 组件属性的属性值， 生成组件模型， 并根据所述组件模型渲染组件界面中所 述组件模型的预定义图元， 以获取与所述组件属性的属性值相应的组件界面 图元；

所述功能设计模块， 用于将所述组件模型映射为功能组件模型， 并根据 所述组件界面图元将所述功能组件模型图形化显示为功能组件图元，根据用 户对所述功能组件图元的操作， 图形化建立待创建的应用中不同的所述功能 组件图元之间的关联关系， 并根据所述待创建的应用中不同的所述功能组件 图元之间的关联关系生成业务功能模型；

所述代码生成模块， 用于根据所述组件模型和所述业务功能模型， 生成 所述待创建的应用的可执行代码。

12、 根据权利要求 11 所述的创建应用的装置， 其特征在于， 所述组件 设计模块具体用于：

根据所述组件属性中的组件界面展现格式的属性值及组件界面展现数 据的属性值， 生成组件模型代码；

根据所述组件模型代码， 生成所述组件界面图元。

13、 根据权利要求 11 所述的创建应用的装置， 其特征在于， 所述功能 设计模块具体用于：

将所述组件模型的组件属性， 映射为所述功能组件模型的功能组件属 性； 将所述组件模型的组件关键标识， 映射为所述功能组件模型的功能组件 关键标识；

根据所述组件模型的组件关键标识， 获取所述功能组件关键标识对应的 功能组件展现代码； 或者， 根据所述组件关键标识对应的组件模型的组件展 现格式的属性值和组件界面展现数据的属性值， 生成所述功能组件关键标识 对应的功能组件展现代码；

根据所述组件关键标识对应的组件模型的位置坐标， 在功能组件界面对 应的位置坐标处， 4艮据所述功能组件展现代码渲染所述功能组件图元。

14、 根据权利要求 13所述的创建应用的装置， 其特征在于， 所述功能 设计模块进一步用于：

调用所述终端中预置的绘图工具的图形操作接口，根据所述组件关键标 识对应的位置坐标， 在功能组件界面对应的位置坐标处， 根据所述功能组件 展现代码渲染功能组件界面图元；

根据所述组件模型的组件属性， 自动联想映射所述功能组件属性图元。

15、 根据权利要求 11 所述的创建应用的装置， 其特征在于， 所述功能 设计模块进一步用于：

利用所述终端中预置的绘图工具的三维展现空间能力， 自动建模所述功 能组件图元的三维模型， 并根据用户配置的组件显示层次进行分层显示。

16、 根据权利要求 15所述的创建应用的装置， 其特征在于， 所述功能 设计模块具体用于：

检索所有组件类型为应用程序交互接口 API 的功能组件图元； 将 API 类型的功能组件界面图元的显示层次设置为最底层值， 以在最底层显示所述 API类型的功能组件界面图元； 将 API类型的功能组件界面图元对应的输入 输出属性图元的显示层次，设置为所述 API类型的功能组件界面图元的显示 层次加 1， 以在所述 API类型的功能组件界面图元的上方叠加显示附属的输 入输出属性图元；

检索所有组件类型为可视化用户交互界面 UI的功能组件图元； 根据所 述 UI类型的功能组件图元的显示层次， 显示所述 UI类型的功能组件图元。

17、 根据权利要求 11 所述的创建应用的装置， 其特征在于， 所述功能 设计模块进一步用于：

接收用户为所述功能组件图元进行颜色标注的标注颜色消息， 所述标注 颜色消息包括标注颜色、 标注时间戳， 以及功能组件图元对应的功能组件关 键标识；

根据所述标注颜色、 标注时间戳， 以及功能组件图元对应的功能组件关 键标识， 生成图元标注序列；

根据所述图元标注序列，确定所述待创建的应用中不同的所述功能组件 图元之间的关联关系。

18、 根据权利要求 17所述的创建应用的装置， 其特征在于， 所述功能 设计模块进一步用于：

将所述功能组件图元的前景色， 修改为所述标注颜色；

根据所述功能组件图元的前景色， 以及所述功能组件图元对应的标注时 间戳， 自动生成用于指示应用功能逻辑的标注顺序码。

19、 根据权利要求 11-18任一所述的创建应用的装置， 其特征在于， 所 述功能设计模块进一步用于：

根据所述待创建的应用中不同的所述功能组件图元之间的关联关系， 生 成功能组件图元关联序列；

根据所述图元关联序列、所述组件模型以及所述组件模型与功能组件图 元的映射关系， 生成所述业务功能模型。

20、 根据权利要求 11-18任一所述的创建应用的装置， 其特征在于， 所 述代码生成模块， 具体用于：

从所述业务功能模型中， 读取可视化用户交互界面 UI类型的功能组件 图元的属性； 从所述组件界面中对应的 UI组件的组件模型中， 获取与所述 UI类型的功能组件图元对应的已配置生成代码模板； 根据所述 UI类型的功 能组件图元的属性， 与所述对应的已配置生成代码模板， 生成即时渲染组件 代码；

从所述业务功能模型中，读取应用程序交互接口 API类型的功能组件图 元的属性； 从所述组件界面中对应的 API组件的组件模型中， 获取与所述 API类型的功能组件图元对应的已配置生成代码模板， 并根据 API组件声明 的引用库生成引用类库代码； 才艮据所述 API类型的功能组件图元的属性、 所 述对应的已配置生成代码模板以及所述引用类库代码， 生成 API功能代码； 根据所述功能组件图元的属性和所述待创建的应用中不同的所述功能 组件图元之间的关联关系， 生成用于控制所述 UI组件和所述 API组件交互 的脚本代码；

根据所述即时渲染组件代码、 所述 API功能代码， 以及所述脚本代码， 生成所述应用的可执行代码。