65.9K
CodeProject 正在变化。 阅读更多。
Home

为元数据生成 UI

Pramirez
starIcon
emptyStarIcon
starIcon
emptyStarIconemptyStarIconemptyStarIcon

1.44/5 (3投票s)

2007年11月17日

CPOL

4分钟阅读

viewsIcon

29201

downloadIcon

230

使用HTML模板生成数据的编辑/查看用户界面

Sample Image

引言

很多人在谈论SaaS。SaaS应用很酷，但对我们——那些创建和维护它们的人来说，它带来了新的挑战，因为我们必须改变编码和架构解决方案的方式。

一个开发和架构完善的SaaS应用必须是

  • 多租户
  • 可配置。
  • 可扩展性

本文简要讨论了多租户和可配置性，并提供了一个工具来帮助开发人员实现可配置性。

有关SaaS应用的更多信息以及如何构建SaaS应用，请阅读 此处。

背景

多租户并不是一个普遍接受的概念。但是，作为开发人员，您可以将多租户视为一个应用程序，该应用程序可以由许多具有相同基本需求但需求不同的人使用。用户可以同时使用该应用程序，也可以不使用，因此，该应用程序必须能够满足这些特定需求。例如，想象一个由公司内部或不同公司的帮助台部门使用的应用程序。可以想象，每个部门/公司都需要存储不同的数据，并且每个部门/公司都需要个性化的UI。

解决不同数据需求的一种方法是使用 元数据。在此示例中，DB使用以下表

  • Issue
  • MetadataCatalog
  • 元数据

抱歉，MetadataCatalog 和 Metadata 表名不够理想。更合适的名称应该是MetadataCatalog->Metadata 和Metadata->IssueExtensionData。代码目前可以正常工作，但我将这个修复留给您。

这个数据库设计解决了个性化数据的问题。现在我们需要解决个性化UI的问题，这个示例代码提供了一个您可以用来解决这个问题的工具。

Using the Code

示例代码的作用是什么？它接受数据集和HTML模板作为参数，并根据HTML模板和数据集的数据类型渲染UI。因此，例如，如果模板包含一个显示名为Field1 的字段的标签，代码将生成适合该数据类型的控件，即字符串和数字的TextBox ，布尔值的CheckBox ，日期时间的Calendar ，等等。

注意：本文主要关注SaaS应用程序的可配置性问题，因此请不要关注我加载数据的方式。

要测试代码，首先需要创建数据库和表。项目提供了两个脚本（在DB_Scripts文件夹下），一个用于创建表，另一个用于插入一些示例数据。

创建一个名为CITSS 的数据库。运行CreateTables.sql脚本，然后运行CreateDemoData.sql脚本。检查是否有任何错误。

现在您需要设置数据库连接。转到CITSS.UI.Base 项目，并在Code文件夹中打开IssueHelper.vb文件。修改以下行以满足您的需求

Private Const DBConn As String = _
    "Server=127.0.0.1;Database=CITSS;uid=user;pwd=password;"

代码的核心位于Code文件夹下的UIHelper 类中。有两种生成UI的方法：作为HTML字符串，或者将控件添加到某个ControlCollection 中。这些是您将使用的函数

Public Shared Function CreateUI(ByVal Data As DataSet,_ 
    ByVal Template As String, ByVal LoadData As Boolean) As String

Public Shared Sub CreateUI(ByRef Controls As Web.UI.ControlCollection, _
    ByVal Data As DataSet, ByVal Template As String, _
    ByVal LoadData As Boolean)

这两个Function 在代码中都有注释，请查看一下。

该文件（UIHelper.vb）中使用了一些常量——这些常量与元数据和扩展表FIELD 的名称相关。如果您想使用其他FIELD 名称，也请在此处更改。

'Metadata Catalog Table

Public Const CatalogColumnFieldID As String = "FieldID"         
'Metadata Catalog Table

Public Const CatalogColumnFieldName As String = "FieldName"     
'Metadata Catalog Table

Public Const CatalogColumnFieldType As String = "FieldType"     
'Metadata Catalog Table

Public Const CatalogColumnLenght As String = "Length"           
'Extended Table

Public Const MetaDataColumnValue As String = "Value"            
'Extended Table

Public Const MetadataColumnFieldID As String = "FieldID"

为了更好地理解这些字段的含义，请运行应用程序并检查数据库中的值。注意：元数据目录使用一个名为FieldType 的字段，该字段的值必须是系统类型，例如Int32，String，DateTime，Double等。

在此示例中，有（UITemplates文件夹下）两个可用的模板和（CSSFiles文件夹下）两个可用的CSS文件。模板是一个包含我们UI定义的HTML文件。要显示UI中的某些字段，请使用以下语法

For a normal field inside a normal table use:  
    <#TableName.TableField#>, example <#Issue.IssueDate#>
For an extended field use : 
    <#[CatalogTable.ExtendedTable].FieldName#>, 
    example <#[MetadataCatalog.Metadata].CompanyPhone|ReadOnly#>

Now, if your field is an ID and you want to use a combobox 
to enter the value, use the following syntax:
For a normal table field: 
    <#TableName.TableField->FillFromTable.TableFieldID(FieldToShow)#>, 
    example <#Issue.IssueTypeID->IssueType.IssueTypeID(IssueTypeName)#>
For an extended field use: 
    <#[CatalogTable.ExtendedTable].FieldName->
        FillFromTable.TableFieldID(FieldToShow)#>, 
        example <#[MetadataCatalog.Metadata].AssignedToID->
        Users.UserID(UserName)#>

If you want to make the field read only, just add |ReadOnly to the field tag, 
    example, <#[MetadataCatalog.Metadata].CompanyPhone|ReadOnly#> 
    <#Issue.IssueDate|ReadOnly#>

该项目有两个Web窗体，DataEdit2.aspx和DataEdit.aspx，两者都可以工作。它们唯一的区别是，在DataEdit2.aspx中，我们将创建的控件添加到了一个Panel中，而在DataEdit.aspx中，我们接收CreateUI 函数的返回结果作为字符串，然后将其设置为某个div 的InnerHTML。

关注点

代码有很多可以改进的地方，例如，目前UI只生成TextBox、Calendar、Checkbox 和ComboBox，您可以实现更多控件或添加自定义控件。此外，没有进行任何验证，您需要实现某种方式来保存数据。

历史

  • VB.NET 代码 V1.0
© . All rights reserved.