CN104484189B - 一种应用界面的构建及设计方法 - Google Patents

Abstract

本发明涉及应用界面构建技术领域，尤其涉及应用界面的构建及设计方法。应用界面的构建方法，包括：服务器向客户端提供可视化操作界面信息，可视化操作界面信息包括界面、数据、操作、事件、控件资源的定义信息及关联信息；客户端接收可视化操作界面信息后，在客户端上动态生成应用界面。本发明实施例提供的应用界面的构建及设计方法，在设计端设计应用界面，并将设计的应用界面以可视化操作信息的形式发送到客户端，且在客户端以控件形式动态生成应用界面，在设计时通过简单拖拽和配置即可实现应用界面的开发，提高了应用界面开发的效率，同时通过该方法实现了应用界面的可视化设计降低了应用界面运行的成本。

Description

一种应用界面的构建及设计方法

技术领域

本发明涉及应用界面构建技术领域，具体而言，涉及应用界面的构建及设计方法。

背景技术

当前，在电脑、手机等终端设备中的界面多为原生开发或HTML5或CSS3开发。原生开发采用复杂的代码及设计器实现，HTML5+CSS3亦不能完全脱离代码，需通过脚本实现。

HTML5+CSS3实现模式下，当用户进入某个应用时，终端设备从本地或服务器中调取创建好的HTML5或CSS3格式的网页页面，显示的网页页面需要占用较多的系统资源。

当今缺少一种通过简单拖拽和配置即可实现高执行效率的应用开发方法。

发明内容

本发明的目的在于提供一种应用界面的构建及设计方法，以解决上述的问题。

本发明实施例提供了一种应用界面的构建方法，包括：服务器向客户端提供可视化操作界面信息，所述可视化操作界面信息包括界面、数据、操作、事件、控件资源的定义信息及关联信息；所述客户端接收所述可视化操作界面信息后，在所述客户端上动态生成应用界面。

优选地，该方法还包括：所述客户端接收用户在所述应用界面上的操作指令，并将所述操作指令发送给所述服务器；所述服务器将符合所述操作指令的可视化操作界面信息发送给所述客户端。

优选地，该方法还包括：所述服务器以界面生成脚本的形式存储所述可视化操作界面信息，其中所述界面生成脚本为顺序执行的行式界面脚本。

优选地，所述服务器以界面生成脚本的形式存储所述可视化操作界面信息，包括：所述服务器以控件声明的脚本形式存储控件信息；所述服务器以控制属性值的脚本形式存储控件的属性值；所述服务器以控件级联关系的脚本形式存储控件与控件之间的父子或级联关系。

优选地，所述服务器向客户端提供可视化操作界面信息，包括：所述服务器通过所述界面生成脚本向所述客户端提供所述可视化操作界面信息。

优选地，所述客户端接收所述可视化操作界面信息后，在所述客户端上动态生成应用界面，包括：所述服务器将与所述可视化操作界面信息对应的界面生成脚本发送给所述客户端；所述客户端获取所述界面生成脚本并按行顺序解析获取的所述界面生成脚本，根据所述解析的结果动态生成及设置所述客户端可视化界面上的控件。

优选地，所述客户端获取所述界面生成脚本并按行顺序解析获取的所述界面生成脚本，包括：当所述界面生成脚本为控件声明时，所述客户端在其内存创建与所述控制声明对应的控件，并设置属性默认值；当所述界面生成脚本为控件属性值时，所述客户端从本地控件库中查找与所述控件属性值匹配的控件，并为查找出的所述控件的属性赋值；当所述界面生成脚本为控件级联关系时，在所述客户端可视化界面上按照级联关系加载并显示控件。

本发明实施例还提供了一种应用界面的设计方法，包括：设计端接收设计人员设置的应用界面；设计端根据预设规则定义所述应用界面的可视化操作界面信息，其中所述可视化操作界面信息包括界面、数据、操作、事件、控件资源的定义信息及关联信息；设计端将所述可视化操作界面信息保存至服务器。

优选地，所述设计端设计有可视化设计器，所述设计器中包括：包含可选择控件的控件选择区、用于显示和修改应用的控件属性区、用于配置界面对附加资源引用的资源引用区以及用于界面效果预览的应用预览区；当进行可视化界面设计时，包括以下步骤中的一种或多种：从所述控件选择区中选取控件；将选取的所述控件添加到预设位置；修改选取的所述控件的属性；预览形成的可视化界面的效果。

优选地，该方法还包括：根据设计的所述应用界面生成脚本；其中，所述应用界面上的所有控件在脚本中声明；将所述控件的不等于默认值的属性在脚本中记录；将所述控件的级联关系记录在脚本中，且级联记录在父子控件声明之后。

本发明实施例提供的应用界面的构建及设计方法，在设计端设计应用界面，并将设计的应用界面以可视化操作信息的形式发送到客户端，且在客户端以控件形式动态生成应用界面，在设计时通过简单拖拽和配置即可实现应用界面的开发，提高了应用界面开发的效率，同时通过该方法实现了应用界面的可视化设计降低了应用界面运行的成本。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本发明实施例中应用界面设计方法的流程图；

图2示出了本发明实施例中应用界面构建方法的流程图；

图3示出了本发明实施例中设计开发应用界面的效果示意图。

具体实施方式

下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

现有的客户端尤其是手机终端上的应用界面多以HTML5或CSS3格式进行加载运行，会占用手机终端较多的系统资源。

为了降低手机应用界面加载运行的成本，本发明中提出了应用界面控件化且原生实现的设计理念，基于该设计理念，用户在客户端可以通过控件组成应用界面，提供满足用户实际需求的应用界面。

基于上述应用界面控件化的设计理念，本发明实施例中提供了一种应用界面的设计方法，如图1所示，主要包括：

步骤S11：设计端接收设计人员设置的应用界面；

步骤S12：设计端根据预设规则定义所述应用界面的可视化操作界面信息，其中所述可视化操作界面信息包括界面、数据、操作、事件、控件资源的定义信息及关联信息；

步骤S13：设计端将所述可视化操作界面信息保存至服务器。

与上述设计方法相对应的，本发明实施例中提供了一种应用界面的构建方法，如图2所示，该方法的主要处理步骤包括：

步骤S21：服务器向客户端提供可视化操作界面信息，可视化操作界面信息包括界面、数据、操作、事件、控件资源的定义信息及关联信息；

步骤S22：客户端接收可视化操作界面信息后，在客户端上动态生成应用界面。

其中，客户端生成应用界面后，所述客户端接收用户在所述应用界面上的操作指令，并将所述操作指令发送给所述服务器；所述服务器重复上述的步骤S21将符合所述操作指令的可视化操作界面信息发送给所述客户端。

上述方法中，在设计端所完成的操作包括：在设计端设计应用的界面；设计端根据设计的应用界面定义界面的数据、操作、事件、资源，并设置关联；将界面、数据、操作、事件、资源的定义信息及关联信息保存至服务器端。服务器向客户端提供的可视化操作界面信息由设计端提供并存储在服务器中。

上述的应用界面设计方法中，设计端设计有可视化设计器，所述设计器中包括：包含可选择控件的控件选择区、用于显示和修改应用的控件属性区、用于配置界面对附加资源引用的资源引用区以及用于界面效果预览的应用预览区；

当在设计端进行可视化界面设计时，包括以下步骤中的一种或多种：

从所述控件选择区中选取控件；

将选取的所述控件添加到预设位置；

修改选取的所述控件的属性；

预览形成的可视化界面的效果。

上述的可视化界面设计方法实现了移动终端界面的可视化设计，简化了应用界面开发设计的过程。

当客户端向服务器发送操作指令时，服务器按照操作指令将相应的界面、数据、操作、事件、资源的定义信息及关联信息发送至客户端。

客户端接收到服务器发送的上述可视化操作界面信息后，动态生成应用界面。

该方法中，服务器接收的操作指令可以为用户通过触发客户端可视化界面上的控件或者触发相应的功能按钮实现。例如，用户通过拖动或点选可视化界面上的控件触发相应的操作，或者，用户通过设置在控件上的触发按钮或独立设置的功能按钮触发相应的操作。

界面在设计时如何保存，在运行时如何传输给客户端，以及界面如何生成，均通过界面脚本及语法协议。界面脚本协议是界面显示平台的运行基础，在界面显示中的所有过程均以界面脚本为介质。

因为界面脚本及协议贯穿平台运行的全过程，因此脚本语法及协议规则的设计会决定平台的扩展性和性能，其也将是平台优劣的重要指标。

本发明实施例的方法中，服务器以界面生成脚本的形式存储可视化操作界面信息，其中界面生成脚本为顺序执行的行式界面脚本。具体地，服务器以行式界面脚本存储界面、数据、操作、事件、控件资源的定义信息及关联信息。

本方法中采用了上述顺序执行的行式界面脚本存储可视化操作界面信息，而未采用xml或json，其主要是因为：xml或json是级联脚本语法，在级联脚本语法中存在着多级引用，而多级引用在构造和解析的过程中均需要树形数据结构，树形数据结构无论是遍历、查询、修改的时间复杂度均大大高于线性数据结构的时间复杂度。

而本方法中采用的行式界面脚本为线性结构脚本，在引用中可以不分先后顺序按行执行，不存在多级引用、构建树形数据结构的复杂过程，因此采用行式界面脚本简化了遍历、查询、修改过程中的时间复杂度，提高运行效率，减小服务器和客户端的存储、运算压力。

服务器以私有的行式界面脚本存储可视化操作界面信息时，行式界面脚本的语法包括：控件声明、空间属性值及控件级联关系。

服务器以控件声明的脚本形式存储控件信息；服务器以控制属性值的脚本形式存储控件的属性值；服务器以控件级联关系的脚本形式存储控件与控件之间的父子或级联关系。

本发明实施例中还进一步给出了行式界面脚本的具体语法：

其中控件声明用于定义控件，具体语法可以为：

var.<控件名>＝<控件类名>

如：var.txt1＝LabelText

控件属性值用于记录控件的某个属性的属性值，具体语法可以为：

<控件名>.<属性名>＝<属性值>

如：txt1.label＝姓名

txt1.text＝张三

控件级联关系用于定义控件与控件间的父子或级联关系，具体语法可以为：

<父控件>.add.<子控件>＝<子控件是否提交数值(true/false)>

如：Form.add.txt1＝true。

可视化界面设计时，根据界面生成脚本的方法包括：将界面上的所有控件，在脚本中声明，控件的声明不分先后顺序；将控件的所有不等于默认值的属性，在脚本中记录，属性值需在声明之后；将控件的级联关系记录在脚本中，级联记录需在父子控件声明之后。

服务器在向客户端提供可视化操作界面信息的方法为，服务器通过界面生成脚本向客户端提供可视化操作界面信息。

服务器接收到客户端返回的操作指令，按照操作指令设置客户端可视化界面上的控件时，服务器调取与操作指令所对应的界面生成脚本；客户端获取界面生成脚本并按行顺序解析获取的界面生成脚本，根据解析的结果动态生成及设置客户端可视化界面上的控件。

客户端获取界面生成脚本并按行顺序解析获取的界面生成脚本，包括：当界面生成脚本为控件声明时，客户端在其内存创建与控制声明对应的控件，并设置属性默认值；当界面生成脚本为控件属性值时，客户端从本地控件库中查找与控件属性值匹配的控件，并为查找出的控件的属性赋值；当界面生成脚本为控件级联关系时，在客户端可视化界面上按照级联关系加载并显示控件。

本发明中按照操作指令设置客户端可视化界面上的控件之后，客户端可以接收用户发送的预览指令，在客户端预览将要生成的可视化界面。

用户根据预览的效果可以对某个控件或对可视化界面的显示效果进行修改，例如将某个文本控件修改为通知控件。

客户端在按照操作指令设置客户端可视化界面上的控件后，进行相应修改的方法为：服务器接收客户端返回的修改指定控件属性的修改指令，按照修改指令向客户端返回符合修改指令要求的界面生成脚本；客户端解析接收到的符合修改指令要求的界面生成脚本，并根据解析的结果修改指定控件的属性。

本发明的应用界面构建过程中，服务器还可以接收用户返回的配置引用资源的引用指令，按照引用指令在客户端的应用界面中配置引用资源，其中引用资源包括从本地或从网络中获取的资源。

如图3示出了基于上述方法在设计端设计开发应用界面的效果示意图。

如图3所示，设计端包括：可视化设计器；在可视化设计器中包含了各种控件，如输入类控件、多媒体类控件及按钮类控件等，且每个控件均对应设置有属性、参数修改的功能，以满足界面设计需求。

在设计端的可视化设计器中包括：控件选择区，应用预览区，控件属性区，资源引用区。

应用预览区，可所见即所得的显示应用设计的模拟效果，可自然的直观的即时的看到应用设计及修改的实时效果。

控件选择区，可从中选取需要的控件，点选或拖放到应用预览区进行设计添加控件，如添加文本、输入框、图片、地图，均通过选取相应的控件并将其添加到应用中。

控件属性区，可显示和修改应用中的控件属性。通过修改属性，控件将相应改变，如选择一个文本控件后，修改text属性为“通知”，则该控件变为显示内容为“通知”的文本，还可以修改其字体、颜色、大小等属性以调整其显示效果。

资源引用区，配置界面对数据、操作、图片、声音、视频等资源的引用。

利用本发明实施的应用界面的构建方法能够使应用界面的构建设计可视化，其中可视化设计是以自然的所见即所得的方式进行应用的界面、数据及功能设计。

在应用界面可视化设计的过程中，本发明采用了行式界面脚本，解决了从设计图形界面到文本的转换，并将转换后的文本传输到客户端，在客户端再由文本转换为图形界面的语法定义及转换方法。

现有的基于编码的应用开发中，编码的基础元素是语句、函数、类和对象等，应用界面设计枯燥复杂；本发明的应用界面的构建方法将应用界面控件化，由控件组成应用界面，控件在界面开发过程中相当于一种可定制的零部件，是可根据实际的需要自由组合的最小单元，并且还可以定制其参数，以满足需求的细节；由此看出本发明的应用界面的构建方法简单、可视，简化了移动应用的开发过程。

根据脚本动态创建界面这一基本原理，基于此原理界面构造还具备三大特性：跨平台性、复杂效果零脚本、零升级。

(1)跨平台性

不同移动设备操作系统、计算机操作系统或其他嵌入式操作系统，只需根据平台的界面脚本协议在该操作系统下实现平台的所有控件及属性，并根据平台的指令协议实现指令生成及请求，便完成了该操作系统下的平台客户端。

平台在各操作系统下的客户端，可统一界面样式，亦可根据各操作系统的风格与习惯定制界面样式。不影响平台的跨平台性。

(2)复杂效果零脚本

界面显示效果及用户交互效果，均由平台客户端实现，脚本仅需定义调用此效果的控件属性。控件效果属性的属性值不同，就会改变客户端该控件的显示或交互效果，复杂效果亦是如此。

定义复杂效果无需像HTML5或CSS3，需要脚本定义效果过程，增加脚本量。因此显示同样复杂效果，无需脚本描述，仅为属性赋值；运行过程也无需解析加载，而是客户端直接调用加载。执行效率极大优于HTML5+CSS3。

(3)零升级

由于界面脚本均为在线请求，实时解析，动态生成界面，当界面和业务功能发生改变时，仅需在设计端进行调整，客户端无需升级即可完成发布更新。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims (9)

1.一种应用界面的构建方法，其特征在于，包括：

服务器向客户端提供可视化操作界面信息，所述可视化操作界面信息包括界面、数据、操作、事件、控件资源的定义信息及关联信息；

所述客户端接收所述可视化操作界面信息后，在所述客户端上动态生成应用界面；

其中，所述服务器以界面生成脚本的形式存储所述可视化操作界面信息，所述界面生成脚本为顺序执行的行式界面脚本；所述行式界面脚本的语法包括var.<控件名>＝<控件类名>、<控件名>.<属性名>＝<属性值>、<父控件>.add.<子控件>＝<子控件是否提交数值>；在所述行式界面脚本中控件的声明不分先后顺序，并正在控件的声明之后记录控件的所有不等于默认值的属性，以及在父子控件声明之后记录控件的级联关系。

2.根据权利要求1所述的方法，其特征在于，该方法还包括：

所述客户端接收用户在所述应用界面上的操作指令，并将所述操作指令发送给所述服务器；

所述服务器将符合所述操作指令的可视化操作界面信息发送给所述客户端。

3.根据权利要求1所述的方法，其特征在于，所述服务器以界面生成脚本的形式存储所述可视化操作界面信息，包括：

所述服务器以控件声明的脚本形式存储控件信息；

所述服务器以控件属性值的脚本形式存储控件的属性值；

所述服务器以控件级联关系的脚本形式存储控件与控件之间的父子或级联关系。

4.根据权利要求3所述的方法，其特征在于，所述服务器向客户端提供可视化操作界面信息，包括：

所述服务器通过所述界面生成脚本向所述客户端提供所述可视化操作界面信息。

5.根据权利要求4所述的方法，其特征在于，所述客户端接收所述可视化操作界面信息后，在所述客户端上动态生成应用界面，包括：

所述服务器将与所述可视化操作界面信息对应的界面生成脚本发送给所述客户端；

所述客户端获取所述界面生成脚本并按行顺序解析获取的所述界面生成脚本，根据所述解析的结果动态生成及设置所述客户端可视化界面上的控件。

6.根据权利要求5所述的方法，其特征在于，所述客户端获取所述界面生成脚本并按行顺序解析获取的所述界面生成脚本，包括：

当所述界面生成脚本为控件声明时，所述客户端在其内存创建与所述控件声明对应的控件，并设置属性默认值；

当所述界面生成脚本为控件属性值时，所述客户端从本地控件库中查找与所述控件属性值匹配的控件，并为查找出的所述控件的属性赋值；

当所述界面生成脚本为控件级联关系时，在所述客户端可视化界面上按照级联关系加载并显示控件。

7.一种应用界面的设计方法，其特征在于，包括：

设计端接收设计人员设置的应用界面；

设计端根据预设规则定义所述应用界面的可视化操作界面信息，其中所述可视化操作界面信息包括界面、数据、操作、事件、控件资源的定义信息及关联信息；

设计端将所述可视化操作界面信息保存至服务器，所述可视化操作界面信息在所述服务器中是以界面生成脚本的形式存储的，所述界面生成脚本为顺序执行的行式界面脚本；所述行式界面脚本的语法包括var.<控件名>＝<控件类名>、<控件名>.<属性名>＝<属性值>、<父控件>.add.<子控件>＝<子控件是否提交数值>；在所述行式界面脚本中控件的声明不分先后顺序，并正在控件的声明之后记录控件的所有不等于默认值的属性，以及在父子控件声明之后记录控件的级联关系。

8.根据权利要求7所述的方法，其特征在于，所述设计端设计有可视化设计器，所述设计器中包括：包含可选择控件的控件选择区、用于显示和修改应用的控件属性区、用于配置界面对附加资源引用的资源引用区以及用于界面效果预览的应用预览区；

当进行可视化界面设计时，包括以下步骤中的一种或多种：

从所述控件选择区中选取控件；

将选取的所述控件添加到预设位置；

修改选取的所述控件的属性；

预览形成的可视化界面的效果。

9.根据权利要求7所述的方法，其特征在于，该方法还包括：根据设计的所述应用界面生成脚本；

其中，所述应用界面上的所有控件在脚本中声明；将所述控件的不等于默认值的属性在脚本中记录；将所述控件的级联关系记录在脚本中，且级联记录在父子控件声明之后。