CN108762750A - 一种基于fmp模型的可视化界面生成方法和系统 - Google Patents

Abstract

本发明公开了一种基于FMP模型的可视化界面生成方法和系统。所述方法包括：根据企业信息化业务应用特点，收集并分析出典型业务界面的展现特点，形成相应的界面模板库；建立生成用户界面的FMP模型；通过预设的可视化设计环境中，采集用户提供的用户界面信息；根据FMP模型和用户界面信息，并配合界面模板库相应的界面模板，生成相应的用户界面。本发明根据企业信息化业务应用特点，收集并分析出典型业务模块界面的展现特点，形成多套常用业务场景界面模板，通过可视化在线设计技术，以FMP理论将界面分成功能、模型及展现三大部分，提供快速、可视化、简单直观的界面设计，提升界面开发效率、体验与质量，降低软件企业的软件开成本。

Description

一种基于FMP模型的可视化界面生成方法和系统

技术领域

本发明涉及界面设计技术领域，特别涉及一种基于FMP模型的可视化界面生成方法和系统。

背景技术

传统软件开发过程中需投入大量人力堆砌来完成项目研发，其中前端界面的开发占据了软件功能开发65％以上的工作量，提供前端界面的开发效率、降低前端界面的开发技能要求成为了软件开发企业一直追求的目标。

然而目前业界大多数界面设计工具主要以C/S架构为主，设计时的界面效果与实际在线运行的效果差别比较大，同时普通的界面绘制工具，在使用过程中每个界面都需要单独设计，与真实系统的后台服务无法对接。

发明内容

为了解决现有技术的问题，本发明实施例提供了一种基于FMP模型的可视化界面生成方法和系统。所述技术方案如下：

一方面，本发明实施例提供了一种基于FMP模型的可视化界面生成方法，所述方法包括：

根据企业信息化业务应用特点，收集并分析出典型业务界面的展现特点，形成相应的界面模板库；

建立生成用户界面的FMP模型，所述FMP模型包括：用于负责界面操作的功能模型、用于提供界面开发所使用到的数据对象的内部模型、用于负责界面信息展示的表现模型；

通过预设的可视化设计环境中，采集用户提供的用户界面信息；

根据FMP模型和用户界面信息，并配合界面模板库相应的界面模板，生成相应的用户界面。

在本发明实施例上述的可视化界面生成方法中，所述通过可视化技术采集用户提供的用户界面信息，包括：

采用jqueryUI作为可视化交互技术，并配合codemirror实现用户在线进行用户界面信息编辑，配合mvvm界面技术实现界面控件信息的编辑。

在本发明实施例上述的可视化界面生成方法中，所述根据FMP模型和用户界面信息，并配合界面模板库相应的界面模板，生成相应的用户界面，包括：

采用基于freemarker模板引擎技术，配合界面模板库相应的界面模板，生成相应的用户界面。

在本发明实施例上述的可视化界面生成方法中，所述功能模型包括：前端js方法、界面加载方法、状态控制、可扩展标记语言(Extensible Markup Language，简称“XML”)规范与可扩展行为模型；所述内部模型包括：界面控件状态控制模型、界面数据模型；所述表示模型包括：界面布局模型、界面基本信息模型、界面模板。

另一方面，本发明实施例提供了一种基于FMP模型的可视化界面生成系统，所述系统包括：

采集模块，用于根据企业信息化业务应用特点，收集并分析出典型业务界面的展现特点，形成相应的界面模板库；

建立模块，用于建立生成用户界面的FMP模型，所述FMP模型包括：用于负责界面操作的功能模型、用于提供界面开发所使用到的数据对象的内部模型、用于负责界面信息展示的表现模型；

采集模块，还用于通过预设的可视化设计环境中，采集用户提供的用户界面信息；

处理模块，用于根据FMP模型和用户界面信息，并配合界面模板库相应的界面模板，生成相应的用户界面。

在本发明实施例上述的可视化界面生成系统中，所述采集模块，还用于采用jqueryUI作为可视化交互技术，并配合codemirror实现用户在线进行用户界面信息编辑，配合mvvm界面技术实现界面控件信息的编辑。

在本发明实施例上述的可视化界面生成系统中，所述处理模块，还用于采用基于freemarker模板引擎技术，配合界面模板库相应的界面模板，生成相应的用户界面。

在本发明实施例上述的可视化界面生成系统中，所述功能模型包括：前端js方法、界面加载方法、状态控制、XML规范与可扩展行为模型；所述内部模型包括：界面控件状态控制模型、界面数据模型；所述表示模型包括：界面布局模型、界面基本信息模型、界面模板。

本发明实施例提供的技术方案带来的有益效果是：

通过对典型业务应用场景展现界面的特点进行归纳与整合，形成多套不同场景的模块界面模板，开发人员能快速完成整个模块的界面整体设计，再通过可视化界面设计环境进行微调，并采用积累的大量丰富最佳实践，有效提升界面开发效率，同时还使用Web技术，设计时使用的控件与运行时使用的界面控件完全相同，有效保障了开发时与运行时的效率一致性、通过可视化的拖拉拽布局，结合控件属性简单配置，有效简化对开发人员的技能要求，实现软件企业的高效率、低成本、低门槛、高质量的软件交付要求。

附图说明

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

图1是本发明实施例一提供的一种基于FMP模型的可视化界面生成方法流程图；

图2是本发明实施例一提供的一种FMP模型的示例图；

图3是本发明实施例一提供的一种优化后的FMP模型示例图；

图4是本发明实施例二提供的一种基于FMP模型的可视化界面生成系统的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。

实施例一

本发明实施例提供了一种基于FMP模型的可视化界面生成方法，参见图1，该方法可以包括：

步骤S11，根据企业信息化业务应用特点，收集并分析出典型业务界面的展现特点，形成相应的界面模板库。

在本实施例中，通过收集典型业务界面，并形成相应的界面模板库，可以将后续界面开发过程中，提升界面开发效率，降低软件开发成本。

步骤S12，建立生成用户界面的FMP模型，FMP模型包括：用于负责界面操作的功能模型、用于提供界面开发所使用到的数据对象的内部模型、用于负责界面信息展示的表现模型。

在本实施例中，FMP模型(即Function Model Presentation模型)是一种面向软件工程和支持用户界面自动生成的界面模型，它为建立界面和描述界面构成提供了宏观体系结构指导。参见图2，FMP模型可以包括：功能模型(即Function模型)主要负责界面所有的操作、交互、请求，新增、删除、上报、跳转等界面操作级功能，也称之为界面行为；内部模型(即Model模型)，又称数据模型是指界面使用到的所有数据对象包括展现使用的数据对象、交互使用的参数对象，通过数据模型能统一定义当前界面使用到的所有数据结构，如：界面操作控件的数据模型、界面使用到的全局变量、常量、访问参数、界面的展现的业务数据表单结构、控件及界面布局的配置数据模型；表示模型(即Presentation模型)又称表现层模型，负责界面控件、数据的展现布局的数据模型，保障界面信息有序展现给用户。

优选地，该FMP模型可以进一步优化，参见图3，该FMP模型中，功能模型可以细化分解为：前端js(即JavaScript)方法、界面加载方法、状态控制、XML规范与可扩展行为模型；内部模型可以细化为：界面控件状态控制模型、界面数据模型；表示模型可以细化为：界面布局模型、界面基本信息模型、界面模板等类别。

在本实施例中，附图3中的页面是由设计的界面生成的，其本质相同。

步骤S13，通过预设的可视化设计环境中，采集用户提供的用户界面信息。

在本实施例中，用户界面信息可以包括：界面基本信息、界面设计信息、依赖的控件信息、所需的数据对象、界面行为等。

在本实施例中，上述步骤S13可以通过如下方式实现：

采用jqueryUI作为可视化交互技术，并配合codemirror实现用户在线进行用户界面信息编辑，配合mvvm界面技术实现界面控件信息的编辑。

在本实施例中，jquery UI是以jquery为基础的开源JavaScript网页用户界面代码库，包含底层用户交互、动画、特效和可更换主题的可视控件，可以直接用它来构建具有很好交互性的web应用程序。Codemirror是一款在线的支持语法高亮的代码编辑器。mvvm(即Model-View-ViewModel)本质上就是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。

步骤S14，根据FMP模型和用户界面信息，并配合界面模板库相应的界面模板，生成相应的用户界面。

在本实施例中，根据企业信息化业务应用特点，收集并分析出典型业务模块界面的展现特点，形成多套常用业务场景界面模板，通过可视化在线设计技术，以FMP理论将界面分成功能、模型及展现三大部分，提供快速、可视化、简单直观的界面设计，提升界面开发效率、体验与质量，降低软件企业的软件开成本。

具体地，上述步骤S14可以通过如下方式实现：

采用基于freemarker模板引擎技术，配合界面模板库相应的界面模板，生成相应的用户界面。

在本实施例中，freemarker是一款模板引擎：即一种基于模板和要改变的数据，并用来生成输出文本(HTML网页、电子邮件、配置文件、源代码等)的通用工具。它不是面向最终用户的，而是一个Java类库，是一款程序员可以嵌入他们所开发产品的组件。

本实施例提供的基于FMP模型的可视化界面生成方法，是针对软件开发过程中界面开发耗时长、技术要求门槛高、开发实现过程体验差，前端展现与后端服务之间无法打通，大量同类型不同业务的界面重复开发的问题。通过对典型业务应用场景展现界面的特点进行归纳与整合，形成多套不同场景的模块界面模板，开发人员能快速完成整个模块的界面整体设计，再通过可视化界面设计环境进行微调，并采用积累的大量丰富最佳实践，有效提升界面开发效率，同时还使用Web技术，设计时使用的控件与运行时使用的界面控件完全相同，有效保障了开发时与运行时的效率一致性、通过可视化的拖拉拽布局，结合控件属性简单配置，有效简化对开发人员的技能要求，实现软件企业的高效率、低成本、低门槛、高质量的软件交付要求。

本发明实施例通过对典型业务应用场景展现界面的特点进行归纳与整合，形成多套不同场景的模块界面模板，开发人员能快速完成整个模块的界面整体设计，再通过可视化界面设计环境进行微调，并采用积累的大量丰富最佳实践，有效提升界面开发效率，同时还使用Web技术，设计时使用的控件与运行时使用的界面控件完全相同，有效保障了开发时与运行时的效率一致性、通过可视化的拖拉拽布局，结合控件属性简单配置，有效简化对开发人员的技能要求，实现软件企业的高效率、低成本、低门槛、高质量的软件交付要求。

实施例二

本发明实施例提供了一种基于FMP模型的可视化界面生成系统，执行了实施例一所述的方法，参见图4，该系统可以包括：采集模块100、建立模块200、处理模块300

采集模块100，用于根据企业信息化业务应用特点，收集并分析出典型业务界面的展现特点，形成相应的界面模板库。

在本实施例中，通过收集典型业务界面，并形成相应的界面模板库，可以将后续界面开发过程中，提升界面开发效率，降低软件开发成本。

建立模块200，用于建立生成用户界面的FMP模型，FMP模型包括：用于负责界面操作的功能模型、用于提供界面开发所使用到的数据对象的内部模型、用于负责界面信息展示的表现模型。

在本实施例中，FMP模型(即Function Model Presentation模型)是一种面向软件工程和支持用户界面自动生成的界面模型，它为建立界面和描述界面构成提供了宏观体系结构指导。FMP模型可以包括：功能模型(即Function模型)主要负责界面所有的操作、交互、请求，新增、删除、上报、跳转等界面操作级功能，也称之为界面行为；内部模型(即Model模型)，又称数据模型是指界面使用到的所有数据对象包括展现使用的数据对象、交互使用的参数对象，通过数据模型能统一定义当前界面使用到的所有数据结构，如：界面操作控件的数据模型、界面使用到的全局变量、常量、访问参数、界面的展现的业务数据表单结构、控件及界面布局的配置数据模型；表示模型(即Presentation模型)又称表现层模型，负责界面控件、数据的展现布局的数据模型，保障界面信息有序展现给用户。

采集模块100，还用于通过预设的可视化设计环境中，采集用户提供的用户界面信息。

在本实施例中，用户界面信息可以包括：界面基本信息、界面设计信息、依赖的控件信息、所需的数据对象、界面行为等。

处理模块300，用于根据FMP模型和用户界面信息，并配合界面模板库相应的界面模板，生成相应的用户界面。

本实施例提供的基于FMP模型的可视化界面生成方法，是针对软件开发过程中界面开发耗时长、技术要求门槛高、开发实现过程体验差，前端展现与后端服务之间无法打通，大量同类型不同业务的界面重复开发的问题。通过对典型业务应用场景展现界面的特点进行归纳与整合，形成多套不同场景的模块界面模板，开发人员能快速完成整个模块的界面整体设计，再通过可视化界面设计环境进行微调，并采用积累的大量丰富最佳实践，有效提升界面开发效率，同时还使用Web技术，设计时使用的控件与运行时使用的界面控件完全相同，有效保障了开发时与运行时的效率一致性、通过可视化的拖拉拽布局，结合控件属性简单配置，有效简化对开发人员的技能要求，实现软件企业的高效率、低成本、低门槛、高质量的软件交付要求。

具体地，采集模块100，还用于采用jqueryUI作为可视化交互技术，并配合codemirror实现用户在线进行用户界面信息编辑，配合mvvm界面技术实现界面控件信息的编辑。

在本实施例中，jquery UI是以jquery为基础的开源JavaScript网页用户界面代码库，包含底层用户交互、动画、特效和可更换主题的可视控件，可以直接用它来构建具有很好交互性的web应用程序。Codemirror是一款在线的支持语法高亮的代码编辑器。mvvm(即Model-View-ViewModel)本质上就是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。

具体地，处理模块300，还用于采用基于freemarker模板引擎技术，配合界面模板库相应的界面模板，生成相应的用户界面。

在本实施例中，freemarker是一款模板引擎：即一种基于模板和要改变的数据，并用来生成输出文本(HTML网页、电子邮件、配置文件、源代码等)的通用工具。它不是面向最终用户的，而是一个Java类库，是一款程序员可以嵌入他们所开发产品的组件。

可选地，该FMP模型可以进一步优化，该FMP模型中，功能模型可以细化分解为：前端js(即JavaScript)方法、界面加载方法、状态控制、XML规范与可扩展行为模型；内部模型可以细化为：界面控件状态控制模型、界面数据模型；表示模型可以细化为：界面布局模型、界面基本信息模型、界面模板等类别。

在本实施例中，根据企业信息化业务应用特点，收集并分析出典型业务模块界面的展现特点，形成多套常用业务场景界面模板，通过可视化在线设计技术，以FMP理论将界面分成功能、模型及展现三大部分，提供快速、可视化、简单直观的界面设计，提升界面开发效率、体验与质量，降低软件企业的软件开成本。

本发明实施例通过对典型业务应用场景展现界面的特点进行归纳与整合，形成多套不同场景的模块界面模板，开发人员能快速完成整个模块的界面整体设计，再通过可视化界面设计环境进行微调，并采用积累的大量丰富最佳实践，有效提升界面开发效率，同时还使用Web技术，设计时使用的控件与运行时使用的界面控件完全相同，有效保障了开发时与运行时的效率一致性、通过可视化的拖拉拽布局，结合控件属性简单配置，有效简化对开发人员的技能要求，实现软件企业的高效率、低成本、低门槛、高质量的软件交付要求。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (8)

1.一种基于FMP模型的可视化界面生成方法，其特征在于，所述方法包括：

根据企业信息化业务应用特点，收集并分析出典型业务界面的展现特点，形成相应的界面模板库；

建立生成用户界面的FMP模型，所述FMP模型包括：用于负责界面操作的功能模型、用于提供界面开发所使用到的数据对象的内部模型、用于负责界面信息展示的表现模型；

通过预设的可视化设计环境中，采集用户提供的用户界面信息；

根据FMP模型和用户界面信息，并配合界面模板库相应的界面模板，生成相应的用户界面。

2.根据权利要求1所述的方法，其特征在于，所述通过可视化技术采集用户提供的用户界面信息，包括：

采用jqueryUI作为可视化交互技术，并配合codemirror实现用户在线进行用户界面信息编辑，配合mvvm界面技术实现界面控件信息的编辑。

3.根据权利要求1所述的方法，其特征在于，所述根据FMP模型和用户界面信息，并配合界面模板库相应的界面模板，生成相应的用户界面，包括：

采用基于freemarker模板引擎技术，配合界面模板库相应的界面模板，生成相应的用户界面。

4.根据权利要求1所述的方法，其特征在于，所述功能模型包括：前端js方法、界面加载方法、状态控制、XML规范与可扩展行为模型；所述内部模型包括：界面控件状态控制模型、界面数据模型；所述表示模型包括：界面布局模型、界面基本信息模型、界面模板。

5.一种基于FMP模型的可视化界面生成系统，其特征在于，所述系统包括：

采集模块，用于根据企业信息化业务应用特点，收集并分析出典型业务界面的展现特点，形成相应的界面模板库；

建立模块，用于建立生成用户界面的FMP模型，所述FMP模型包括：用于负责界面操作的功能模型、用于提供界面开发所使用到的数据对象的内部模型、用于负责界面信息展示的表现模型；

采集模块，还用于通过预设的可视化设计环境中，采集用户提供的用户界面信息；

处理模块，用于根据FMP模型和用户界面信息，并配合界面模板库相应的界面模板，生成相应的用户界面。

6.根据权利要求5所述的系统，其特征在于，所述采集模块，还用于采用jqueryUI作为可视化交互技术，并配合codemirror实现用户在线进行用户界面信息编辑，配合mvvm界面技术实现界面控件信息的编辑。

7.根据权利要求5所述的系统，其特征在于，所述处理模块，还用于采用基于freemarker模板引擎技术，配合界面模板库相应的界面模板，生成相应的用户界面。

8.根据权利要求5所述的系统，其特征在于，所述功能模型包括：前端js方法、界面加载方法、状态控制、XML规范与可扩展行为模型；所述内部模型包括：界面控件状态控制模型、界面数据模型；所述表示模型包括：界面布局模型、界面基本信息模型、界面模板。