[发明专利]针对用户界面模式的可视化设计系统及其方法

权利要求书

1.一种针对用户界面模式的可视化设计系统，其特征在于，包括用户界面模式的可视化设计组件UIPVT；

所述用户界面模式的可视化设计组件UIPVT运行在可视化设计终端上；

所述用户界面模式的可视化设计组件UIPVT包括文档生成模块、界面模式布局结构图生成模块和逻辑状态转换图生成模块；

所述文档生成模块用于运用针对用户界面模式的可视化标记语言将模式呈现信息和模式对话信息组织成标记语言文档；

所述界面模式布局结构图生成模块用于运用所述标记语言文档来生成界面模式布局结构图；

所述逻辑状态转换图生成模块用于运用所述标记语言文档来生成逻辑状态转换图；

所述用户界面模式的可视化设计组件UIPVT还包括可视化数据模块、布局模块、渲染模块、交互处理模块以及控制调度模块；

所述可视化数据模块用于为界面模式布局结构图和逻辑状态转换图包括各自的节点和线条这样的元素添加相应的几何信息域，以维护元素的大小、位置这样的信息；

所述布局模块运用界面布局算法，生成几何信息，并将其设置到界面模式布局结构图和逻辑状态转换图的几何域中，该模块为界面模式布局结构图和逻辑状态转换图分别提供树布局中的节点链接布局和图布局中的弹性布局。

2.根据权利要求1所述的针对用户界面模式的可视化设计系统，其特征在于，所述渲染模块能够通过调度模块被调用，负责对界面模式布局结构图的每一个所述元素按照它自身的大小、颜色或者位置这样的信息进行绘制，并最终将其展现在用户面前。

3.根据权利要求1所述的针对用户界面模式的可视化设计系统，其特征在于，所述交互处理模块贯穿于所述用户界面模式的可视化设计组件UIPVT的各个模块之中，负责收集并处理各种交互事件，并按照设定将处理结果反作用于各个模块的数据之上。

4.根据权利要求1所述的针对用户界面模式的可视化设计系统，其特征在于，所述调度模块是整个工具的核心和入口，负责所述用户界面模式的可视化设计组件UIPVT中所有数据的流转以及各个模块之间的调度交互。

5.一种针对用户界面模式的可视化设计系统的方法，其特征在于，其包括基于可视化标记语言的用户界面模式的描述方法，该描述方法包括如下步骤：

步骤1：首先根据用户界面模式的要求中的布局模型将构件抽象成叶子节点Leaf，布局类型抽象成中间节点Branch，构件间的布局嵌套关系Description抽象成所述叶子节点Leaf与中间节点Branch之间的链接，这样就形成了模式呈现信息Structure；所述布局模型能够包括所述用户界面模式的图片说明Illustration；

步骤2：接着根据用户界面模式的要求中的对话模型将构件的状态抽象成状态节点Node，构件的逻辑关系抽象成状态节点之间的链接Edge，这样就形成了模式对话信息Dialog；所述对话模型能够包括用户界面模式的状态方案；

步骤3：在模式呈现信息和模式对话信息的基础上，运用针对用户界面模式的可视化标记语言将模式呈现信息和模式对话信息组织成标记语言文档，具体包括如下步骤，步骤A-1：首先，根据用户界面模式的要求来得到相关的信息Information:

所述相关的信息Information包括用户界面模式的主题或名称name、用户界面模式的图片说明Illustration和用户界面模式的状态方案Solution；所述用户界面模式的主题或名称name用于识别该用户界面；所述用户界面模式的图片说明Illustration用于以图片的形式在用户界面上静态展现各控件的布局方式；所述用户界面模式的状态方案Solution用于说明该用户界面上的构件的逻辑关系；

步骤A-2：运用针对用户界面模式的可视化标记语言来把用户界面相关的信息Information的主题或名称name、用户界面模式的图片说明Illustration和用户界面模式的状态方案Solution分别形成标记语言文档的记录一、标记语言文档的记录二和标记语言文档的记录三；

步骤A-3：运用针对用户界面模式的可视化标记语言来把模式呈现信息形成若干用于表示模式呈现信息的记录；

步骤A-4：运用针对用户界面模式的可视化标记语言来把模式对话信息形成若干用于表示模式对话信息的记录；

这样的所述标记语言文档的记录一、标记语言文档的记录二、标记语言文档的记录三、用于表示模式呈现信息的记录和用于表示模式对话信息的记录就组成了标记语言文档；

步骤4：运用所述标记语言文档来生成界面模式布局结构图，包括如下方式：

把所述标记语言文档中的若干用于表示模式呈现信息的记录中的用来表示叶子节点Leaf的信息、布局嵌套关系Description的信息和用来表示中间节点Branch的信息提取出来，然后根据布局嵌套关系Description的信息来用线条把叶子节点Leaf和中间节点Branch链接起来，由此就形成了界面模式布局结构图，所述叶子节点Leaf和中间节点Branch能够直接用其自身的名称在界面模式布局结构图上标示；

步骤5：运用所述标记语言文档来生成逻辑状态转换图，包括如下方式：把所述标记语言文档中的若干用于表示模式对话信息的记录中的构件状态和构件的逻辑关系提取出来，然后把构件状态作为状态节点，再根据各个构件的逻辑关系用线条把各个逻辑关系中所涉及的两个状态节点用线条连接起来构成逻辑状态转换图的图片，然后用文字描述的方式把各个用线条连接起来的两个状态节点的逻辑关系描述在该图片旁，最终形成了逻辑状态转换图，所述状态节点在逻辑状态转换图上能够用设定给该状态节点的ID来表示，所述状态节点的ID包括构件状态的起始状态的W0、出发地文本构件状态W1、目标地文本构件状态W2和出发时间文本构件状态W3。