图形用户界面生成方法及系统 【技术领域】
本发明涉及与计算机、通信有关的互联网领域中终端显示图形的生成方法及系统，尤其是在互联网的网站中以网页形式出现的图形用户界面的生成方法及系统。
背景技术
随着互联网的迅速普及，以互联网为核心的电子商务、电子政务等网络业务或服务也在不断发展，这使得互联网的网站在企业商务流程和政府办公流程中的地位越来越重要。通过网站，企业和政府部门不仅可以实现以电子商务或电子政务为中心的商务信息和政务信息的管理和交换，还可以方便快捷地发布各自的重要信息。因此，网站建设和管理的效率和规范性将直接影响以互联网为核心的电子商务、电子政务等网络业务或服务的开展。
在网站的建设和管理中，内容管理是一个非常重要的部分。所述内容管理的一个非常重要的方面就是信息采编，即网站工作人员在网站的图形用户界面中录入有关信息并进行信息的管理。在这个界面中，包含了录入信息和管理信息需要的各种数据输入模型对应的业务数据。对于不同类的管理信息，例如新闻类信息，其业务数据对应的界面显示内容就包括信息的标题、作者、内容等；而对于企业网站来说，在其提供的图形用户界面上，所包含的业务数据对应地界面显示内容则可能包括产品的名称、价格、介绍等。即对于不同的行业领域，其业务数据对应的界面显示内容往往存在很大的差别，因此对于绝大多数网站提供的图形用户界面而言，很难使用一个统一的数据模型满足不同客户的需求，即很难用一个统一的用户管理界面提供的数据模型处理不同的业务数据。
因此，在目前的图形用户界面的生成方法及系统中，首先确定不同类的管理信息的业务数据及其数据类型，然后依据所述的业务数据及其数据类型进行二次开发，即根据用户的实际需求进行网站的定制，这个阶段包含根据用户的业务领域划分网站的频道，并针对不同的频道进行具体的业务数据建模以及数据库设计，然后开发对应的编辑采编管理信息的图形用户界面。由于现有的方法存在一个二次开发阶段，在这个阶段中通常需要非常熟悉系统的开发人员针对不同类的管理信息所包含的业务数据进行，而且这个过程往往是比较繁琐、复杂，极其容易出错。
因此，现有方法的二次开发阶段大大降低图形用户界面的生成效率，且具有相当复杂程度，很高成本消耗，而且没有通用性。
【发明内容】
本发明解决的问题是提供一种通用性较好、效率较高、而复杂度较低的图形用户界面的生成方法及系统。
为解决上述问题，本发明图形用户界面的生成方法包括以下步骤：
1)元数据模型建立步骤，根据业务数据、业务数据类型及界面元素确定元数据类型，并确定各元数据类型与业务数据及界面元素的对应关系；
2)业务数据模型生成步骤，使用元数据类型描述所需的具体业务数据，生成相应业务数据模型；
3)图形用户界面生成步骤，通过业务数据模型并利用元数据类型与界面元素的对应关系，生成图形用户管理界面。
相应地，本发明图形用户界面的生成系统包括：
1)元数据模型，包括根据业务数据、业务数据类型及界面元素所确定的元数据类型，以及各元数据类型与业务数据及界面元素的对应关系；
2)业务数据模型，包括通过元数据类型所描述过的具体业务数据；
3)图形用户界面生成装置，用于通过业务数据模型并利用元数据类型与界面元素的对应关系，生成图形用户管理界面。
与现有技术相比，本发明具有以下优点：
1)消除了内容管理系统实施过程中的用户界面开发工作。将大量的手工配置、开发过程变为通过界面自动进行，降低了操作难度，提高了系统的界面友好性。
2)通过界面自动生成技术，二次开发人员就不必针对具体的业务数据模型开发采编管理界面，只需要使用元数据类型定义业务数据模型，就能够自动的产生用户见面，从根本上消除了用户界面定制、开发的工作。
3)大幅降低了二次开发的工作量，提高了工作效率，降低了实施成本。
由于消除了用户界面定制、开发的工作，所以大大消减了二次开发的工作量，降低了技术难度，这样就降低了系统实施的成本，提高了利润率。
4)降低了系统维护的难度，缩减成本。
在没有应用本技术的情况下，一旦用户界面需要做小的调整，就必须由二次开发人员参与，这就增加了系统维护的难度。但是使用了界面自动生成技术后，调整界面的工作就变得非常简单，而且用户可以随时调整用户界面的界面元素。这样，就不必由二次开发人员参与，只需要对客户进行简单培训，就可以进行系统维护。
【附图说明】
图1本发明图形用户界面生成系统映射关系示意图。
图2本发明布局管理器一实施例示意图。
图3本发明一实施例的界面生成示意图
图4是本发明用户使用流程图
【具体实施方式】
请参照图1所示，是本发明图形用户界面生成系统映射关系示意图也是本发明的基本思想，即通过建立数据模型映射的方式实现从业务数据模型2到用户管理界面3的映射，最终生成图形用户管理界面3。其中可以通过布局管理器(后文将会详细描述)控制界面的显示布局。
用户使用时，只需要进行业务数据模型2的设计，并选择一种适合的界面布局风格，系统会自动实现从业务数据模型2到用户管理界面3的映射，自动生成实际可用的信息采编用户管理界面3。其中，业务数据模型2采用数据库表(如图1中的表21、22)存储。
本发明图形用户界面生成系统包括
1)元数据模型1，包括根据业务数据、业务数据类型及界面元素所确定的元数据类型，以及各元数据类型与业务数据及界面元素的对应关系；
2)业务数据模型2，包括通过元数据类型所描述过的具体业务数据；
3)图形用户界面生成装置(未图示)，用于通过业务数据模型2并利用元数据类型与界面元素的对应关系，生成图形用户管理界面3。
由图1可知，在实际的网站内容管理系统中，可以根据需要为每一个频道定义一个或多个业务数据模型2(如，元数据子模型11相应映射到用户管理界面31、表21，而元数据子模型12则相应映射到用户管理界面32、表22)，系统会根据这个元数据模型1自动地生成频道的信息采编管理界面3，以及生成对应的后台数据库表结构(如图1中的表21、22)，同时，在用户进行信息维护时，系统可以将用户提交的处理请求自动地转化到数据库的操作中。
相应地，本发明图形用户界面生成方法包括以下步骤：
1)元数据模型1建立步骤，根据业务数据、业务数据类型及界面元素确定元数据类型，并确定各元数据类型与业务数据及界面元素的对应关系；
2)业务数据模型2生成步骤，使用元数据类型描述所需的具体业务数据，生成相应业务数据模型2；
3)图形用户界面生成步骤，通过业务数据模型2并利用元数据类型与界面元素的对应关系，生成图形用户管理界面3。
元数据模型建立：
首先，应根据实际需要(可对需求分析进行归纳)提炼出一套符合要求的元数据类型，使这些类型应能完全描述应用领域的业务数据。
然后，定义各元数据类型与业务数据以及用户界面元素的对应关系。针对网站内容管理系统，则是定义元数据类型与HTML显示的界面元素的对应关系。
在完成这两步后，一个能够通过元数据类型定义业务数据模型，并自动生成用户界面的系统的雏形就形成了。
元数据类型的归纳：
在通常情况下，内容管理系统都使用关系数据库存储业务数据，因此业务数据模型通常可以采用数据库表来存储，业务数据模型2中的元素则对应着数据表中的字段，因此，业务数据模型2中的元素的数据类型就对应着数据库中的数据类型，如“数值型”、“字符型”等；而在用户管理界面3中，描述界面的元素则是界面的界面元素，如“静态文本”、“文本输入框”、“文件选择框”等。
为了能够统一的描述业务数据模型2与用户管理界面3中的界面元素，从二者中抽象出一个统一的数据模型——元数据模型1。通过元数据模型1中的元数据类型，实现从业务数据模型2到用户管理界面3的映射，即元数据模型1在业务数据模型2一端对应着数据库中的业务数据类型，而在用户管理界面3一端则对应用户管理界面3的界面元素。通过这种方式，就可以通过元数据类型描述网站的业务数据，从而根据元数据模型1动态生成对应的用户管理界面3。
考虑到不同应用领域的差别，所需要的元数据类型可能存在差异。元数据类型除了要能够实现数据模型到用户管理界面的映射，还要能涵盖具体应用领域的业务数据模型，针对内容管理系统，则是指能够包含内容管理系统所包含的满足不同需要的界面元素，即即使是同一种显示样式的界面元素，为了满足不同的需要，也可能会被映射为不同的元数据类型(例如，同样是输入框，输入数值型数据的输入框与输入文本内容的输入框，就需要映射为不同的元数据类型，这是因为，数值类型与文本类型在底层的数据库中对应着不同的存储类型)。
表1给出了一个内容管理系统所采用元数据模型的例子：
表1：元数据模型表
表1给出元数据类型的基本定义，从表1中可以看到，通过元数据类型实现了用户管理界面3的界面元素与业务数据类型之间的映射，而且这种映射关系是可以扩充的，可以根据不同的业务需要对元数据类型进行扩展。在业务数据类型增加时，扩充所述元数据类型，以建立新的元数据类型与业务数据及界面元素的对应关系。
另外，元数据类型对应的界面元素，只是定义了一些基本的信息，如哪种界面元素(在实际应用，界面元素可以以控件的形式出现)，并没有定义界面元素的详细属性，如颜色(color)、风格(style)、字体(font)等，这些属性都可以显示出来，供用户配置，最大限度的提供界面风格的多样性。
元数据模型1的建立可以根据需要采用不同的方式，下面给出一个用XML的建立元数据模型1例子：
＜/style＞＜/meta＞＜meta name＝″INPUT_NUM″desc＝″数值输入″＞ ＜style＞ ＜input name＝″″type＝″text″value＝″″/＞ ＜/style＞＜/meta＞＜meta name＝″FILE_CHOOSER″desc＝″文件选择″＞ ＜style＞ ＜input name＝″″type＝″file″value＝″″/＞ ＜/style＞＜/meta>＜meta name＝″INPUT_DATE″ desc＝″时间输入″＞ ＜style＞ ＜input name＝″″type＝″text″value＝″″/＞ ＜/style＞＜/meta＞＜meta name＝″COMBO_TEXT″ desc＝″″文本下拉框″＞ ＜style＞ ＜select name＝″″＞ ＜option value＝″″/＞ ＜/select＞ ＜/style＞＜/meta>＜meta name＝″COMBO_NUM″desc＝″数值下拉框″＞ ＜style＞ ＜select name＝″″＞ ＜option value＝″″/＞ ＜/select＞ ＜/style＞＜/meta＞＜meta name＝″LIST_TEXT″desc＝″文本列表框″＞ ＜style＞ ＜select name＝″″size＝″″＞ ＜option value＝″″/＞ ＜/select＞ ＜/style＞＜/meta＞＜meta name＝″LIST_NUM″desc＝″数值列表框″＞ ＜style＞ ＜select name＝″″size＝″″＞ ＜option value＝″″/＞ ＜/select＞ ＜/style＞ ＜/meta＞ ＜meta name＝″INPUT_TEXTAREA″desc＝″文本区域输入框″＞ ＜style＞
从上面给出的元数据模型1的建立可以看出，不同的元数据类型可能会对应相同的界面元素(如，元数据类型中LIST_TEXT和LIST_NUM都对应着界面元素中的列表框)，这是为了将显示数据与底层数据库(用于存储业务数据模型2)中的数据格式统一起来，从而保证在进行数据存储是不会产生冲突的问题。
在元数据类型定义中，页面的显示样式(“style”元素中包含的部分)只定义了数据存储、显示的界面元素的控件代码，而没有定义诸如颜色、字体等显示风格，这部分用户可以根据需要自己进行调整。
另外，在上面的元数据类型定义中，只是列出了元数据类型与用户管理界面中界面元素的对应关系，并没有给出元数据类型与数据存储类型的对应关系，这是因为，不同的数据存储层存在着比较大的差异，例如在采用关系数据库作为数据存储层的情况下，不同的数据库提供的数据类型差别是很大的，因此，在数据存储层，需要对应不同的数据库类型定义不同的元数据类型对应关系，根据对应关系，就可以元数据类型描述的业务数据模型生成数据库结构。
创建业务数据模型
业务数据模型2采用数据库表存储，且业务数据类型2与数据库中的数据类型相对应。
在建立元数据模型1后，就可以使用元数据类型描述具体地业务数据，这个工作应该由对业务比较了解的人来做。在使用元数据类型描述完毕所需的业务数据，就生成了元数据模型1对应的业务数据模型2。业户数据模型2包含所有数据信息，同时利用元数据模型1中的元数据类型也对应了用户管理界面3中的界面元素。这样，就可以由根据元数据模型1生成的业务数据模型2生成用户管理界面3，在业务数据模型2中每个数据元素都会被分配一个唯一的标识，通过这个唯一标识可以在用户界面中唯一的确定一个界面元素，这样就能够将用户提交的数据对应地保存到后台的数据库中。本实施例中，这个唯一标识对应着用户界面中界面元素的名称，对应到WEB开发中，也就是控件的名称，在一个Form中，通过这个唯一标识保证了界面元素的唯一性。
在网站内容管理系统中，可以根据需要设置业务数据模型2的颗粒度大小，例如，对于一个较小的网站，一个频道就可以对应一个业务数据模型2，而对于规模比较大的网站，业务数据模型就有可能要细化到栏目一级。下面给出了一个针对频道的业务数据模型的例子，这里也采用了XML的格式：
--> meta_name＝″STRUCT_ID″name＝″column_id1″/＞ ＜column default＝″true″desc＝″权重″hidden＝″false″ meta_name＝″COMBO_NUM″name＝″importance″＞ ＜item name＝″普通新闻″value＝″0″/＞ ＜item name＝″频道首页新闻″value＝″1″/＞ ＜item name＝″首页要闻″value＝″2″/＞ ＜item name＝″首页图片要闻″value＝″3″/＞ ＜/column＞ ＜column default＝″true″desc＝″新闻作者″hidden＝″false″ meta_name＝″INPUT_TEXT″name＝″author″/＞ ＜column default＝″true″desc＝″新闻标题″hidden＝″false″ meta_name＝″INPUT_TEXT″name＝″title″/＞ ＜column default＝″true″desc＝″新闻正文″hidden＝″false″ meta_name＝″INPUT_TEXTAREA″name＝″contents″/＞ ＜column default＝″true″desc＝″上传时间″hidden＝″false″ meta_name＝″INPUT_DATE″name＝″up_date″required＝″true″/＞ ＜column default＝″true″desc＝″采编者″hidden＝″true″ meta_name＝″SHORT_TEXT″name＝″publisher″/＞ ＜column default＝″true″desc＝″新闻来源″hidden＝″false″ meta_name＝″COMBO_TEXT″name＝″news_source″＞ ＜item name＝″财经时报″value＝″财经时报″/＞ ＜item name＝″新华社″value＝″新华社″/＞ ＜item name＝″体坛周报″value＝″体坛周报″/＞ ＜/column＞ ＜/model_def＞]]>
在上面给出的业务数据模型2定义文件中，每一个column元素对应着业务数据模型2中的一条记录，同样也对应着用户管理界面3中的一个界面元素。column中的name属性对应着用户管理界面中表单元素的name属性，同时也对应着数据库表中的字段名称，因此，在本实施例中，业务数据模型2中，name属性不能重复，通过name属性可以唯一地确定一条记录。因此，在用户管理界面中也可以通过这个name属性唯一地标识一个界面元素，并可以通过这个属性获得用户提交后的数据，以进行相应的处理。当然，这种唯一标识也可以不采用name属性，而使用数值ID等形式进行标识。
创建布局管理器，用于对图形用户界面进行风格及布局的控制。
业务数据模型2中包含了业务所需要的所有数据，但是如果只是根据这些数据顺序地生成用户界面，那么用户界面就可能是一些界面元素按照先后顺序杂乱无章的堆砌在一起，这样生成的用户界面，是很难令用户满意的。因此，为了能够生成整洁、有序、美观的用户界面，在图形用户界面生成装置(未图示)中加入了布局管理器，通过布局管理器控制界面的风格布局。布局管理器的作用是按照一些事先约定好的规则对界面元素进行有条理的布置，从而使生成的界面整洁、美观。
根据实现机制的不同，布局管理器可以划分为两类：
1)无模版布局管理器
无模版布局器是指界面元素的位置完全由布局管理器控制，并不使用模版。布局管理器按照一定的原则(如出现顺序或界面元素的大小等)自动安排数据元素的显示位置。
2)有模版布局管理器
有模版布局管理器是指界面元素的显示位置由布局管理器根据用户提供的模版设置的。用户可以将模版划分为若干个显示区域，并将业务数据模型中的数据元素分配到不同的数据区域中，布局管理器就可以按照用户的设计生成显示界面。就实现方式而言，模版可直接采用HTML语言编写，在设定的显示区域部分，使用特殊的标记代替(在本系统中，使用的标记为“${DisplayAreaname＝″***″}$”，name属性指定区域的名称)。
上面的两种布局管理器是可以结合起来使用的，可以在有模版布局管理器内使用无模版的布局管理器，也就是说，在将一些数据元素分配到一个显示区域后，可以再给它们指定一个无模版的布局管理器，进一步配置它们的显示样式，通过这样的方式，可以更有效地控制面风格。另外，在只使用无模版布局管理器的情况下，系统会自动使用一个缺省的模版生成固定的显示代码。
下表给出了几个常用的布局管理器：
表2：布局管理器布局管理器的名称作用说明顺序布局管理器按照元数据模型中数据元素出现的次序布置界面元素，即首先出现的元素出现在用户界面的前面，而后出现的则依次排在后面。顺序布局管理器要求用户按照期望的次序加入数据元素分类布局管理器按照元数据模型中数据元素对应的界面元素所占区域的大小进行分组排序，如按照由小到大的顺序对界面元素进行排序。模板布局管理器这种布局管理器是基于模板的，即用户必须首先定义一个页面布局模板，在布局模板中对页面区域进行了划分，用户可以根据需要将不同的数据元素分配到不同的显示区域中。
创建布局管理器实施步骤
在进行布局管理器配置之前，必须首先完成业务数据模型2的建模。对于无模版的布局管理器，其配置过程非常简单，只需要从可用列表中选择一个布局管理器即可。因此，这里给出一个使用模版布局管理器的例子：
1)设计布局模版
根据需要设计一个页面布局模版，本实施例中模版采用的是HTML的格式。在设计好HTML的风格后，将其中设置为显示区域的部分用标记替换掉，其效果如图2所示。
其中，该模版建立两个显示区域，一个名称为“area1”，另一个为“area2”。
2)向显示区域中分配业务数据模型2的数据元素
这一步，根据需要将业务数据模型2中的数据元素分配到期望的显示区域中，简单起见，将新闻正文放到“aera2”区域中，剩下的都放到“area1”区域中。另外，也可以根据需要为显示区域设定一个无模版的布局管理器，缺省情况下，系统会使用顺序布局管理器。这里，使用缺省的布局管理器。
经过上面这两步，布局管理器的配置就完成了，对于上面给出的模版，生成的界面如图3所示。其中，图3最下面的submit和cancel按钮是由系统自动生成的。
请结合参照图4，用户使用流程如下：
1)执行步骤401，进入频道信息采编管理页面
2)执行步骤402，读取业务数据模型2
元数据模型1预先建立，并在满足相关业务数据情况下，重复使用，即并不是每次需要生成用户管理页面时都要建立元数据模型1。
分析其中每个数据元素，并得到对应的元数据类型，以及相应的对应关系及属性。
3)执行步骤403，创建对应的布局管理器
这一步首先要得到元数据模型对应的布局管理器，如果是有模版的布局管理器，获取模版，如果是无模版的布局管理器，则使用缺省模版。
4)执行步骤404，布置界面元素的界面布局
这一步，根据布局管理器，将数据元素填充到模版中。
5)执行步骤405，输出固定界面元素
这一步，向模版中填充一些固定的界面元素，如提交按钮等。同时也会加入处理流程的逻辑代码。
6)执行步骤406，完成整个界面并显示
综上所述，本发明解决业务数据模型到用户管理界面映射的一种非常有效的方案，通过本发明，简化了用户界面开发的工作，它不仅是用于内容管理系统中，而且也适用于管理信息系统(MIS)、报表系统等的用户界面设计中。
使用本发明，二次开发人员就不必针对具体的业务数据模型开发采编管理界面，只需要使用元数据类型定义业务数据模型，就能够自动的产生用户见面，从根本上消除了用户界面定制、开发的工作，且提高图形用户界面的生成效率，降低复杂度和成本，减少二次开发阶段的工作量。