CN103257986A

CN103257986A - 创建几何符号的html/css表示

Info

Publication number: CN103257986A
Application number: CN2012105646942A
Authority: CN
Inventors: 洛克·德·安杰利斯; 维托利奥·德·安杰利斯
Original assignee: Software AG
Current assignee: Software AG
Priority date: 2011-12-23
Filing date: 2012-12-21
Publication date: 2013-08-21
Also published as: US20130167001A1; EP2608056B1; US9104756B2; EP2608056A1

Abstract

本发明涉及通过如下方式来创建几何符号的HTML/CSS表示：处理(1000)来自文件的符号定义；和针对所述符号定义中包括的每一种几何形状，创建特定于web浏览器的形状CSS类(1080)。生成的HTML/CSS表示(1150)包括一个或多个所创建的特定于web浏览器的CSS类(1080、1130)。

Description

创建几何符号的HTML/CSS表示

技术领域

本发明涉及用于创建几何符号的HTML/CSS表示的方法和系统。

背景技术

几乎所有现代企业都使用软件工具来定义他们的内部和外部流程。这样的流程例如可能涉及组装汽车所需的各种步骤，而且还可能涉及企业的其它任务，例如监控销售。为了能够定义、监控和评估某一流程或者甚至是整个企业的工作成就，普遍使用一种称为业务流程管理(BPM)工具的软件。这种BPM工具的一个示例是可从申请人获得的软件ARIS。

但是，在实施和使用这样的流程之前，必须对其进行定义。为了简化其定义，通常例如使用如图1的截屏图所示的流程图以图形形式来显示要开发的流程的各个步骤。这样的流程图可以各种方式来创建，例如以手动方式或者通过使用专业的绘图程序在计算机上绘制。但是，这种方法是相当复杂和生硬的。创建这种流程图的一种更便利的选择是使用web浏览器，例如通过构建相应的HTML文件。

存在若干种采用web浏览器来创建流程图的方式，下面对其进行简要概述：

第一种选择是使用诸如Adobe Flash之类的第三方插件。然而，这种插件通常要求大量计算能力，并且可能不是在所有平台上都是可用的。

另一种选择是使用基于位图的图形，其中，位图表示基于如同PNG或JPEG这样的web图形格式的符号。在诸如Signavio或BPMN社区这样的产品中使用了这种技术。然而，基于位图的格式不能在不损失质量的情况下进行缩放。这在图2中被示出：符号200和210是以原始尺寸显示的基于位图图形的符号。符号220和230示出了相同但是被放大了2倍的符号。可见，放大造成了可视的伪像(artifact)，因而造成了质量降低。

另一种方法被称为9片缩放图形。例如IBM Blueworks Live使用了这种技术。这种方法背后的思想是将每一个图形或符号分割成9片，即，分割成不同图形，以使得可以独立地对整个图形的各个区域进行缩放。如图3所示，无论是否要水平地或者垂直地对图形300进行伸展，都绝不会对区域1、3、7和9进行缩放。如果水平地对图形300进行缩放，则仅仅区域2和8将被伸展。如果垂直地对图形300进行缩放，则区域4和6将被伸展。区域5将总是被伸展。这种方法具有如下优点：可在不损失质量的情况下对中心具有单素色区域的图形进行缩放。然而，这种方法并不是对任意形状都起作用。

另一种公知的方法是使用基于向量的图形，其中，图形被以如同SVG或VML这样的受web浏览器支持的格式进行格式化。这是Signavio的BPM工具使用的另一种技术。基于向量的图形可在不降低质量的情况下被无限缩放。然而，如同SVG和VML这样的向量格式需要大量存储空间和大处理能力以表现巨大且复杂的SVG和VML结构。

另一种选择是使用HTML5 Canvas API(应用编程接口)来在web浏览器中绘制符号。例如Lucidchart或WebSphere Business Compass使用了这种技术。如图4所示，HTML5 Canvas API允许在web浏览器中将任何类型的符号420绘制到画布(canvas)410上。现在大多数常见的web浏览器都已经支持HTML5 Canvas API的GPU(图形处理器单元)加速，但是计算符号几何和绘制符号的性能仍然不令人满意。

更新近的一种方法是使用HTML5和CSS3(层叠样式表)，这也是IBM Blueworks Live使用的一种技术。根据这种方法，符号由利用CSS进行式样设计的各种嵌套HTML元素来表示。这种技术可与上述其他方法中的任一者(特别是9片缩放图形)相结合。大多数常见的web浏览器都支持GPU加速的CSS表现，这与其他解决方案相比导致了将符号表示为利用CSS进行式样设计的HTML片段的可接受性能。然而，对于人类而言，基于HTML片段来创建复杂符号并利用CSS来进行式样设计是相当困难的。另外，一些常见的web浏览器无法支持完整的CSS标准，从而获得相同或相似的结果需要不同的CSS标记(notation)。

因此，本发明隐含的技术问题是提供一种解决方案，其减少对这种图形进行编程所需的努力(尤其是鉴于不同的web浏览器)并使得这种代码更加可靠和稳定。

发明内容

在一个实施例中，这个问题通过一种用于创建几何符号的HTML/CSS表示的方法来得以解决，其中，该方法包括：

a.处理来自文件的符号定义；

b.针对所述符号定义中包括的每一个几何形状，创建特定于web浏览器的形状CSS类；以及

c.生成包括一个或多个所创建的特定于web浏览器的CSS类的HTML符号。

通过使用以相比于HTML/CSS的复杂组合更容易理解的格式书写的几何符号的定义，创建这种符号所需的努力得以极大地降低。以适当语言(例如，XML或JSON)写代码相比于直接用HTML和CSS的组合来写代码要更容易。尤其是下面这种情况：某一几何符号具有复杂结构并且包括若干种形状，例如带有数个圆形的正方形，其中，每一个圆形具有不同的线条颜色和色彩渐变。

在一个示例性实施例中，该方法还包括针对每一种几何形状创建至少一个特定于web浏览器的属性CSS类。

从而，可以通过将几何形状放入不同的CSS类来分开这些几何形状。通过不仅创建CSS形状类而且还创建CSS属性类，可以分开几何符号的形状和特定属性。因此，由于等同的几何形状可以使用相同的CSS代码，所以需要较少的代码。仅各个属性(例如颜色或尺寸)可被单独存储在属性CSS类中。CSS文件随后可被组合来构建几何符号的共同HTML/CSS表示。

如上面已经提及的，不同的web浏览器以不同方式支持HTML和CSS，从而各个HTML和CSS文件必须满足取决于web浏览器的某些要求。本发明允许构建特定于web浏览器的CSS类以便优化符号的显示。不过，特定于web浏览器的类也可以是对于若干种(例如，最常见的)web浏览器兼容的。例如，如果两种或更多种web浏览器以相同方式支持某种CSS代码，则可将他们聚集成组以形成第一特定于web浏览器的CSS类，而针对其他web浏览器，生成第二CSS类。

优选地，该方法包括确定web浏览器的CSS支持水平的附加步骤以及相应地调整特定于web浏览器的CSS类的创建的步骤。

如上面提及的，存在许多不同的标准和标准版本，这使得信息的正确显示更为复杂。但是，不同的web浏览器通常以不同方式来解释命令，这也可能导致不同的结果。因此，通过确定web浏览器的CSS支持水平并从而相应地调整特定于web浏览器的CSS类的创建，可以对产生的HTML/CSS表示进行调整以使得其能够得到相应web浏览器的最佳处理和显示。如上面提及的，可能是下面这种情况：若干种web浏览器以类似方式支持某种CSS代码，这将产生适合于若干种web浏览器的特定于web浏览器的类。

优选的是，从泛型形状CSS类创建特定于web浏览器的形状CSS类。

泛型形状CSS类的创建能够用作生成各种特定于web浏览器的形状CSS类的基础。因此，没有必要重新创建对于创建特定于web浏览器的形状CSS类所需的基本信息，而是能够再利用已有的泛型形状CSS类。这个特征还提高了生成HTML/CSS表示的效率。

还优选的是，创建至少一个特定于web浏览器的属性CSS类的步骤还包括确定针对形状的每一者的等同属性的步骤和将这些等同属性合并成泛型属性CSS类的步骤。

这个特征甚至可以进一步减少代码量。甚至不同的几何形状(例如，圆形、三角形和正方形)也可以共享至少一些属性(例如，线条颜色或线条宽度等)。通过将这些属性聚集在单个CSS类中，代码仅需要出现一次，并且可被调用数次。从而，相比于没有教导这种确定和合并步骤的标准解决方案，能够减少代码量。

优选地，从泛型属性CSS类创建特定于web浏览器的属性CSS类。

这个特征允许从泛型类开始并产生多个不同的特定于web浏览器的类，而无需重新创建对于生成特定于web浏览器的属性CSS类所需的基本信息。这个方面类似于上面论述的特定于web浏览器的形状CSS类的生成并且具有类似优点。

优选的是，生成HTML/CSS表示的步骤包括生成针对一组预定义web浏览器的HTML/CSS表示并将该组HTML/CSS表示存储到单个文件中。

如前面提及的，不同的web浏览器可以以不同方式来解释代码。这可能导致对符号的不同视觉表示，即使使用的是相同代码。为了克服这种问题，可以预先定义一组web浏览器以便一次性创建多个HTML/CSS表示。结果，web浏览器可以例如基于文件中包括的标签来选择HTML/CSS表示的正确版本，并因而如符号创建者原先所想的那样显示符号。

优选地，以兼容XML的格式来提供符号定义。

XML标准用作几乎所有基于web的标准(例如HTML或CSS)的基础。因此，通过使用这种基本且公知的标准，能够改进复杂符号的创建。此外，XML是人类可读且可容易理解的，尤其是与复杂的编程语言相比。因而，以XML(或类似语言)定义的符号不仅可以更容易理解，而且还可快速修改，甚至无需复杂编程语言的任何知识。

在优选实施例中，HTML/CSS表示包括HTML文件，该HTML文件包括特定于web浏览器的CSS类。

可能希望预先产生针对许多种web浏览器的符号。在这种情况中，一种选择是构建单个HTML/CSS表示，例如，文件，其包括与特定于web浏览器的类相应的符号。Web浏览器随后可以确定使用多个符号中的哪个符号以便正确地显示该符号。特别地，用户可以不必确定使用文件的哪个版本。这可以由web浏览器例如基于各个HTML/CSS表示的代码中包括的标签来完成。

本发明还可以由计算机程序来实施，该计算机程序包括用于使得至少一个计算机执行根据上述实施例中的任一者所述的方法的指令。

本发明还可以由用于创建几何符号的HTML/CSS表示的系统来实现，其中所述系统包括：

a.适于处理来自文件的符号定义的处理模块；

b.适于针对所述符号定义中包括的每一个几何形状，创建特定于web浏览器的形状CSS类的创建模块；以及

c.适于生成包括一个或多个所创建的特定于web浏览器的CSS类的HTML/CSS表示的生成模块。

在本发明的详细描述中对其他从属权利要求进行了描述。

附图说明

在下面的详细描述中，参考如下附图进一步描述了本发明的当前优选的实施例，其中附图示出了：

图1：包括具有不同形状和属性的不同符号的流程流模型的示例(现有技术)；

图2：对基于位图图形的符号进行缩放的效果(现有技术)；

图3：用于缩放符号的所谓的9片方法(现有技术)；

图4：利用HTML5画布的web浏览器侧表现的示例(现有技术)；

图5a-图5i：根据本发明一个实施例的可用CSS定义的各种形状的示例；

图6：复杂符号(complex symbol)的示例；

图7：图示出根据本发明一个实施例的(例如，用XML定义的)符号向HTML/CSS表示的变换的流程图；

图8a-图8b：根据本发明一个实施例的三角形的示例定义；

图9a-图9b：根据本发明一个实施例的梯形的示例定义；

图10：根据本发明一个实施例的符号向HTML/CSS表示变换的工作流；

图11：根据本发明一个实施例的变换框架的组件；

图12：根据本发明一个实施例的作为解耦系统的变换框架的图示；

图13：根据本发明一个实施例的当在服务器侧集成时的变换框架的图示；

图14：根据本发明一个实施例的跨浏览器支持的图示；

图15：根据本发明一个实施例的当在客户端侧集成时的变换框架的图示；

图16：包括三个三角形的复杂符号的图示；

图17：具有背景色的圆角正方形的图示；

图18：包括圆角正方形、三角形和圆形的共享相同的色彩渐变的复杂图形的图示；

图19：根据本发明一个实施例的简单符号的示例；

图20：根据本发明一个实施例的平板计算机符号的示例。

具体实施方式

如在导言中已经提及的，已知的HTML/CSS方法的主要缺点之一是HTML片段以及一个或多个CSS式样的复杂性。这在以手动方式创建这些片段和式样(style)的情况下尤其成问题。在任一种情况中，代码必须是正确的，以使得将在不同的web浏览器中正确地表现出所创建的符号。本发明的思想是以比现有技术已知的方式更高效的方式将图形符号表示为HTML片段并利用CSS来对其进行式样设计。这通过下述方式来实现：以诸如XML、SVG之类的更简单、人可理解的通用语言或者相似的语言来创建符号并以高效方式将其变换成HTML/CSS表示。用户无需知道关于HTML和CSS的任何知识。

为了简单起见，描述主要涉及待处理文件中的单个符号。但是，显然也可在单个输入文件中包括任何数目的符号，该单个输入文件随后被生成为HTML/CSS表示。这允许基于以人类可读语言书写的单个输入文件来生成更为复杂的HTML/CSS表示。单个文件中包括的不同符号也可利用各种特征和这里描述的各个实施例，例如，对形状和/或属性进行合并。

参考图5a至5i，例示性地示出了若干基于基本CSS的几何形状。应当理解，下面的几何形状的列表决不意图限制可能几何形状的数目。其意图是提供对一些常见几何形状及其CSS表示的概况。下面的CSS式样可被应用于单个<div>元素以获得相应形状。

图5a示出了可用下面的CSS代码表示的圆形(circle)：

另一个基本几何形状是图5b所示的正方形(square)，并且其可用下面的CSS代码表示：

类似的几何形状是矩形(rectangle)。图5c示出了矩形的一个示例。该形状可用下面的代码表示：

如图5d所示的圆角正方形(rounded square)是通常在流程图中使用的另一个基本几何形状。圆角正方形可用如下代码表示：

例如在图5e中例示性地示出的平行四边形(parallelogram)可用下面的代码表示：

椭圆形(oval)是在流程图中经常使用的另一种形状。该形状可通过如下代码表示：

梯形(trapezia)也是在流程图中经常使用的。图5g示出了梯形的一个示例。其可通过下面的代码表示：

另一种典型几何形状是菱形(diamond)，如图5h所示。该菱形可通过下面的代码表示：

另一种几何形状是三角形(triangle)。图5i示出了具有不同朝向(上(up)、下(down)、左(left)和右(right))的三角形，其可通过下面的代码表示：

所有上面说明的基本几何形状都可被旋转、平移，并且还可被组合来形成复杂符号。此外，CSS支持阴影和透明化。另外，还可以利用不同的色彩渐变以及利用图像来填充各种几何形状。一般而言，本发明可以使用CSS提供的所有特征，即使未在这里明确提及。这使得可以创建非常复杂的符号。

上述形状非常简单，不过图6图示出了一复杂符号的示例和用于创建该符号所需的HTML/CSS代码。可见，所要求的代码非常复杂，因而易于出错。更详细而言，图6的示例由下面三种形状构成：作为符号的基本形状的圆角矩形，在符号中间的三角形，以及用于显示符号的玻璃效果的形状。以手动方式书写符号的CSS/HTML定义将以至少3个<div>元素(每一个形状一个)和3个更复杂的CSS式样定义而告终，所述CSS式样定义定义了每一种形状的外观(例如，尺寸、颜色、阴影)。

本发明提供了一种框架，该框架允许人或者甚至是计算机系统以人化语言来描述例如图6所示的符号，根据本发明一个实施例，所述符号随后可被变换框架变换为跨浏览器的HTML5/CSS3代码。这使得该代码具有支持所有常见web浏览器的一般能力。

在一个实施例中，本发明可被划分为三个部分，下面将更详细地对它们进行描述：变换框架、定义语言和符号编辑器。然而，这并不暗示所有部分对于实现本发明都是必要的。

变换框架可被认为是本发明的核心。在一个实施例中，变换框架可被实现为实施主要逻辑的一段计算机代码和适于将给定的人化定义语言变换为跨浏览器的HTML5/CSS3代码的语言处理器。然而，也可使用其他版本的标准。

现在将参考图7描述变换框架的优选实施例。但是，可能并不是下面的所有步骤对于本发明的所有实施例都是必要的。

在步骤1000中，从文件处理XML符号定义，然后将该XML符号定义解析成表示所定义的模型的内存数据结构(in-memory data structure)。内存数据结构可以是XML代码的二进制表示。在步骤1010中，将符号分解成其各个几何形状。在步骤1020中，确定用于形成符号的几何形状。作为示例，可以确定XML符号包括正方形、三角形和圆形。

在步骤1030中，创建将表示整个符号的HTML<div>元素。此外，针对每一种形状，创建嵌套的<div>元素。在HTML中，<div>标签定义了HTML文档中的分部或分片。对于<div>元素，在<div>元素中仅仅直接定义了尺寸和位置。所有其他式样设计信息是使用一个或多个CSS类来指派的。

在步骤1040中，针对每一种(不同的)几何形状(例如，矩形、三角形或圆形)，创建泛型(generic)CSS类并将该泛型CSS类指派给相应的<div>元素。如果符号定义不止一次包括某种几何形状，则仍然仅有一个针对该几何形状创建的CSS类。例如，如果XML符号包括两个正方形，则将创建仅一个针对正方形的CSS类。这个类也被称为CSS形状类。这个方法减少了生成的CSS类的代码量。泛型CSS类仅包含可被所有受支持的浏览器解释(interpret)的CSS式样。一般而言，不同web浏览器的CSS支持有良好的文档记录，使得很容易创建针对框架的一种知识库。这可通过XML文档来实现，该XML文档包含针对每一种受支持的web浏览器和与CSS支持相对应的一个或多个版本的、关于如何显示不同的形状类型以及该web浏览器中的支持效果的信息。

在步骤1050中，确定符号的目标平台(例如，特定的web浏览器类型)。在步骤1060中，确定支持的CSS水平以及特定于web浏览器的CSS支持。

在步骤1070中，特定的CSS生成引擎被实例化(instantiate)以基于先前步骤中确定的信息来生成特定于web浏览器的CSS代码。如上所述，不同的web浏览器可以以不同方式来解释命令，这可能导致对几何形状的不同显示或者甚至导致在显示几何形状时出错。因此，希望针对一种或多种特定的web浏览器对CSS形状类的创建进行调整。在步骤1080中，针对每一种几何形状生成特定于web浏览器的形状CSS类。在步骤1090，生成的CSS类被指派给相应的<div>元素。

在步骤1100中，对所定义的形状属性进行分析以确定具有相同属性类型和值的形状。在步骤1100中，框架将尽可能多的属性类型/值合并成一个CSS属性类，该CSS属性类可在随后被指派给若干形状。换而言之，如果若干种形状至少部分使用具有相同值的相同属性类型，则该试样信息将被放入相同的CSS属性类(步骤1110)。例如，变换框架可能发现两个矩形，这两个矩形具有相同的边界颜色、相同的边界宽度和相同的不透明性。在此情况中，该试样信息被放入一个CSS属性类中，该属性类随后被指派给两个矩形的<div>元素。

在步骤1120中，CSS代码再次被分解成两个部分：可被所有支持的web浏览器解释的泛型CSS代码，和依赖于目标web浏览器的一个部分。在步骤1130中，创建针对形状属性的特定于(目标)web浏览器的CSS代码，所述形状属性对几何形状的式样进行定义。在步骤1140中，生成的形状CSS类被指派给相应的<div>元素。

最后，在步骤1150，生成的HTML符号代码(HTML和CSS)被写出为最终的HTML/CSS表示。

根据本发明一个实施例可在这里使用的定义语言可以是基于XML或DOM(文档对象模型)的。符号语言的其他实现方式也是可以的，例如基于JSON的符号语言。这样的描述允许人类或系统以人化方式来描述复杂图表或符号。在此上下文中，术语“人化”意指语言使用常见、公知且用于谈话的词语来描述复杂图表或符号。定义语言还可允许使用常见的向量图形语言，这些语言可以是基于XML的或基于文本的。这种基于文本的向量语言可以是SVG、VML或EPS。在所谓的混合模式中，定义文档可以包括通过那些基于文本的向量语言中的一种或多种来描述符号的各个部分的嵌入式部分。对那些基于文本的向量语言的使用受限于使用HTML/CSS定义语言来描述形状的可能性。

下面的参考给出了基于XML的示例定义语言的概况。应当提及，下面的定义决不意图将本发明限制于这些定义。还可以如本领域技术人员所期望和所要求的，利用新的元素和属性来扩展语言。

符号(symbol)元素：

Content:[<shape>|<image>|<line>|<text>]*

</symbol>

形状(shape)元素：

矩形元素：

矩形元素利用下面的属性来扩展形状元素：

椭圆形/卵形(ellipse)元素：

椭圆形元素利用下面的属性来扩展形状元素：

对于椭圆形元素，可以忽略形状的“宽度(width)”和“高度(height)”属性。

三角形元素：

三角形元素利用下面的属性来扩展形状元素：

对于三角形元素，可以忽略形状的“宽度”属性。图8a(等腰三角形)和图8b(不等边三角形)图示出根据一个实施例可以如何定义三角形。

梯形(trapezium)元素：

梯形元素利用下面的属性来扩展形状元素：

对于梯形元素，可以忽略形状的“宽度”属性。

平行四边形元素：

平行四边形元素利用下面的属性来扩展形状元素：

图9a(简单定义)和图9b(扩展定义)图示出了可以如何定义平行四边形。

圆形元素：

圆形元素利用下面的属性来扩展形状元素：

对于圆形元素，可以忽略形状的“宽度”和“高度”属性。

菱形元素：

菱形元素利用下面的属性来扩展形状元素：

线条(line)元素：

文本(text)元素：

图像(image)元素：

属性类型定义：

现在将更详细地描述符号编辑器。符号编辑器可以是GUI(图形用户界面)，GUI允许用户在没有任何关于符号定义语言的知识的情况下绘制复杂符号。符号编辑器将(例如，以兼容XML的语言)创建符号定义作为输出，该符号定义随后可通过利用变换框架被变换成HTML/CSS图表。但是，在一个实施例中，也可使用任何其他合适手段(例如，基于文本的编辑器)来定义符号。

图10图示出了根据本发明一个实施例的完整变换工作流。在步骤1200中，用户创建符号定义1210。这可使用符号编辑器(例如，上面提到的GUI)、或者通过例如使用文本编辑器或web浏览器以手动方式创建符号定义或者通过使用第三方系统来完成。下面，符号定义1210被变换框架1220(上面已经参考图7描述了其一个实施例)解释并在编程对象模型中被变换。在步骤1230中，对符号定义进行处理。然后，在步骤1240，变换框架1220创建优化的HTML和CSS代码。在最后步骤1250中，写出HTML代码1260和CSS代码1270。HTML/CSS表示可被写入到单个文件中或者分布到若干文件。变换框架1220所执行的这些步骤可自动或半自动地执行。例如，用户可以与变换框架1220交互，以确认生成了针对特定浏览器的HTML/CSS表示。

图11是关于根据本发明一个优选实施例的变换框架1300的不同组件的概况，并示出了这些组件可以如何彼此交互。变换框架1300的主要组件是符号解释器(interpreter)1310和符号生成器1320。

符号解释器1310负责解析符号定义1330并负责创建表示符号的内存结构1340。如上所述，内存结构可以是二进制的。生成的数据结构1340是在符号生成器1320中实施的主要变换算法的输入。符号生成器1320实施该算法以将符号从人类可读定义(例如，XML)变换成基于HTML和CSS的表示。符号生成器1320还负责优化CSS结构1350和HTML结构1360并使其跨浏览器兼容。

根据本发明另一个实施例，变换框架不是利用由变换框架生成的输出的运行系统的一部分。变换框架仅被用于HTML符号描述的一次生成。这种情形在图12中被图示出，图12示出了作为解耦系统(decoupledsystem)的变换框架。其中，外部系统1400使用其例如经由网络取得的符号的HTML/CSS表示1410、1420。网络可以是本领域已知的任何类型的网络。特别地，可以是有线网络或无线网络或其组合。符号定义的变换根据上述实施例且发生在远程位置。更详细而言，变换框架1440包括符号解释器1450和符号生成器1470。符号解释器1450基于符号定义1430来生成符号数据结构1460，该符号数据结构1460随后被符号生成器1470处理以产生跨浏览器兼容的HTML/CSS表示1480、1490。在这种情形中，已经生成的符号(例如，作为符号生成器的输出的HTML和CSS文件)可以位于web服务器上，并通过来自客户端的HTTP请求而被请求。在运行时间期间不使用生成器。

在一个实施例中，代码可以在服务器(例如，web/应用服务器)或客户端侧(例如，web浏览器)运行。在如图13所示的客户端-服务器web情形中，变换框架1500是系统的集成组件。这意味着系统在应用程序运行时间期间使用变换框架1500。在这种情形中，变换框架1500可被集成在服务器1510侧或客户端(web浏览器)1520侧。下面的图示出了这种情形的一个实施例。客户端1520和服务器1510可以利用各种类型的通信手段经由网络1530通信。例如，客户端1520和服务器1510可以经由万维网通信，其中，客户端1520运行web浏览器1540并与服务器1510侧的web服务器1550通信，web服务器1550提供变换框架1500。在图示出的实施例中，包括变换框架1500的web服务器1550经由网络1530将HTML/CSS表示1560发送到web浏览器1540。

在这种情形中，还可以使用硬排列或软排列(不过，也可在本发明的任何其他实施例中使用硬和/或软排列)。在硬排列情形中，变换针对每一个支持的web浏览器创建不同的HTML/CSS文件。在运行时，web浏览器类型被确定并且相应的符号文件随后被发送到客户端。在软排列情形中，变换框架将仅创建一个HTML/CSS文件，即，一个HTML文件和一个CSS文件。该HTML/CSS文件将对每一个支持的web浏览器起作用。然而，还可以设想到可以仅创建单个文件。在软排列情况中，生成的文件将大得多并且需要更多的时间来传送到客户端。如果使用硬排列，则可以在运行时间期间确定web浏览器类型和CSS支持。

这还被图14示出，其中，在客户端侧1610经由web浏览器1600从服务器1620请求(1640)HTML符号。请求被变换框架1630取得，变换框架1630随后对该请求进行处理。在步骤1650，变换框架1630对符号定义进行处理和分析。随后，在步骤1660对发出请求的web浏览器的类型和CSS支持进行确定。为此，web浏览器可以使用HTTP协议来从服务器请求如同HTML页面或CSS文件这样的数据。HTTP请求消息的头部包含被命名为“用户代理”(参见http://tools.ietf.org/html/rfc 1945#section-10.15)的字段，该字段被通信各方用来表征客户端以及用来可选地选择合适内容。之后，可以对CSS配置引擎进行配置(步骤1670)，该CSS配置引擎然后生成优化的HTML/CSS符号代码(步骤1680)。结果，生成的HTML/CSS符号代码被写出(步骤1690)，并且最终，变换框架1630可以(直接或间接地)向web浏览器1600提供请求响应(步骤1700)，即，提供所请求的符号的HTML/CSS表示。

但是，根据本发明一个优选实施例，还可以在客户端侧执行变换，这在图15中被示出。其中，服务器1800(例如，web服务器1820)可以例如经由万维网1840(或本领域技术人员所知晓的任何其他合适的通信手段)向客户端1810发送符号定义1830。该客户端可以包括web浏览器1850，web浏览器1850运行变换框架1860。不过，变换框架1860可以不被直接集成到web浏览器中。在这种情况中，web浏览器将调用变换框架1860。变换框架1860随后生成从web服务器1820接收的符号定义1830的HTML/CSS表示1880。最后，web浏览器1850可以利用生成的HTML/CSS表示以便显示取得的符号定义。以这种方式，可将要传输的数据量保持为相对较低，这是因为web浏览器1850自身创建HTML/CSS表示。没有必要传输一组HTML/CSS表示，随后web浏览器从中选择合适的HTML/CSS表示。

下面的部分提供可利用根据上述本发明的实施例中的任一者的变换框架创建的符号的一些示例。

图16的形状包括三个三角形1900、1910和1920。三角形1910和1920共享相同的边界颜色，而三角形1900具有不同的边界颜色。然而，这些三角形是从单个CSS类得出的，该CSS类可由下面的代码表示：

三角形1900、1910和1920的属性中的一些对于所有三角形都是必须的，而一些属性却不同，例如尺寸或颜色。对于图16所示的三角形，这产生6个CSS类：

这是包括由所有三角形1900、1910和1920所共享的属性的最一般的CSS类：

#triangle{

width:0；

height:0；}

下面的代码表示三角形1900的颜色：

下面的代码表示三角形1900的尺寸：

下面的代码表示三角形1910的尺寸：

下面的代码表示三角形1920的尺寸：

下面的代码表示三角形1910和1920两者使用的颜色。

从上面的代码可见，可对代码进行合并以使得在不同的形状之间共享尽可能多行的代码。在图16的示例中，所有三角形1900、1910和1920共享一个CSS类，而三角形1910和1920还共享另一个CSS类(即，定义颜色的类)。

图17示出了圆角正方形1950。下面，对根据本发明一个实施例的特定于web浏览器的CSS类的连续创建进行说明。

首先，创建基本的圆角正方形，其可由下面的代码表示：

在第二步骤中，创建特定于式样的类。如上所说明的，该类可按需由其他形状再利用。作为一个示例，这个类可由下面的代码表示：

在第三步骤中，创建特定于实例的类，该类定义了形状的尺寸：

然而，如上所说明的，不是所有web浏览器都以相同方式支持所有命令。因此，一些命令必须以特定于web浏览器的方式来定义。取决于web浏览器，这可由下面的代码表示：

#rounded_square_id01_ff7{

-moz-border-radius:20px；

}

最后，所有创建的类都被指派给与形状相对应的<div>元素。

图18示出了一个更复杂不过是例示性的示例。符号包括三种不同形状：圆角正方形2000、圆形2010和三角形2020。在这个示例中，所有形状都具有不同类型、尺寸，并且具有不同的边界颜色，不过使用完全相同的色彩渐变。在创建了所有的CSS类(根据这里描述的任意实施例)之后，生成器对所有的类式样进行评估以便确定共同且可再使用的定义。这些可再使用的定义随后被提取出并被放入单独的类。

下面的代码表示圆角正方形2000的式样的一部分：

圆形2010可由下面的代码表示：

三角形2020可由下面的代码表示：

从上面的代码可见，并且如上所说明的，所有三种形状共享相同的色彩渐变。因此，相应代码可被提取出并被放入包括共同的式样特征的新CSS式样文件：

以这种方式，表示这三种不同形状的式样的这个共同部分所需的源代码量得以减少。

图19的符号是三个形状的组合：一个矩形2500和两个圆形2510、2520。在这个示例中，矩形形状2500可以具有蓝色渐变。圆形形状2520也具有蓝色渐变，而圆形形状2510具有“抠图式样”并且被填充以灰色。下面的定义是根据本发明一个实施例以符号语言来定义符号所必须的。

下面的代码将被根据本发明一个实施例的变换框架生成：

符号语言与产生的HTML/CSS表示之间的复杂性的区别立即变得一目了然。这阐明了本发明的优越解决方案。

下面是平板计算机符号的示例。图20示出了这个符号的图形表示。该符号包括具有“卡片式样”的矩形形状2600，其中，颜色从灰变为白。此外，还具有“抠图式样”的填充了灰色的矩形形状2610和“光泽式样”且没有填充颜色的矩形形状2620。最后，符号包括“抠图式样”的填充了灰色的小矩形形状2630。下面的定义是定义该符号所必须的：

可通过再利用针对不同符号生成的CSS类来优化若干符号的生成。例如，在两个符号包含类似形状的情况中，可对生成的CSS代码进行概括以使得对于这些形状不需要两种不同的CSS定义。

上面已经表明，本发明提供了一种用于创建复杂符号的HTML/CSS表示的用户友好且简便的解决方案。

此外，本发明的解决方案在从基础的人可读代码生成HTML/CSS代码方面也是高效的。例如，可以几乎毫无延迟地在运行于标准硬件上的常见web浏览器中显示包含3000个例如图6所示的符号的HTML文档。这使得可以使用这种技术来表示大多数常见web浏览器中的大而复杂的模型。

Claims

1.一种用于创建几何符号的HTML/CSS表示的方法，其中所述方法包括：

a.处理(1000)来自文件的符号定义；

b.针对所述符号定义中包括的每一个几何形状，创建特定于web浏览器的形状CSS类(1080)；以及

c.生成(1150)包括一个或多个所创建的特定于web浏览器的CSS类(1080、1130)的HTML/CSS表示。

2.根据权利要求1所述的方法，其中，步骤b还包括针对所述几何形状中的每一者创建至少一个特定于web浏览器的属性CSS类(1130)。

3.根据前述权利要求中的任一项所述的方法，还包括确定web浏览器的CSS支持的水平的步骤(1060)和相应地调整所述特定于web浏览器的CSS类的创建的步骤(1070)。

4.根据前述权利要求中的任一项所述的方法，其中，所述特定于web浏览器的形状CSS类是从泛型形状CSS类创建的(1040)。

5.根据前述权利要求中的任一项所述的方法，其中，所述创建至少一个特定于web浏览器的属性CSS类的步骤(1130)还包括确定针对所述形状中的每一者的等同属性的步骤(1100)和将所述等同属性合并成泛型属性CSS类的步骤(1110)。

6.根据前一权利要求所述的方法，还包括从所述泛型属性CSS类创建所述特定于web浏览器的属性CSS类的步骤(1120)。

7.根据前述权利要求中的任一项所述的方法，其中，所述生成HTML/CSS表示的步骤(1150)包括生成针对一组预定义的web浏览器的HTML/CSS表示以及将该组HTML/CSS表示存储到单个文件中。

8.根据前述权利要求中的任一项所述的方法，其中，所述符号定义对应于兼容XML的格式。

9.根据前述权利要求中的任一项所述的方法，其中，所述HTML/CSS表示包括HTML文件，所述HTML文件包括所述特定于web浏览器的CSS类。

10.根据前述权利要求中的任一项所述的方法，其中，所述HTML/CSS表示的创建是在从客户端(1520)取得符号定义的服务器(1510)处被执行的，并且其中，所述服务器将所创建的HTML/CSS表示发送给所述客户端。

11.一种包含机器可执行指令的计算机可读介质，所述机器可执行指令在被执行时用于使得至少一个计算机执行根据权利要求1至10之一所述的方法。

12.一种用于创建几何符号的HTML/CSS表示的系统，其中所述系统包括：

a.适于处理来自文件的符号定义(1000)的处理模块；

b.适于针对所述符号定义中包括的每一个几何形状，创建特定于web浏览器的形状CSS类(1080)的创建模块；以及

c.适于生成(1150)包括一个或多个所创建的特定于web浏览器的CSS类(1080、1130)的HTML/CSS表示的生成模块。

13.根据前一权利要求所述的系统，其中，所述创建模块还适于针对所述几何形状中的每一者创建至少一个特定于web浏览器的属性CSS类(1130)。

14.根据权利要求12或13所述的系统，其中，所述系统还包括适于执行权利要求1至10中的任一者的步骤的装置。

15.根据权利要求12至14中任一项所述的系统，还包括符号编辑器，所述符号编辑器包括可用于绘制几何符号的GUI，并且还适于将所述几何符号存储在文件中以使得能够生成所述HTML/CSS表示。