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

在不到 10 分钟的时间内创建一个功能齐全的 HTML5 应用程序

2sky
emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2012年11月1日

CPOL

11分钟阅读

viewsIcon

60296

构建以数据为中心的应用通常需要开发人员编写大量跨多个层的代码；这是一项远非简单、枯燥且耗时的工作。在本文中，我们将使用最新版本的 Vidyano 在 10 分钟内创建一个功能齐全的 HTML5 应用程序。

引言

构建提供丰富用户体验的以数据为中心的应用通常需要开发人员编写大量跨多个层的代码；这是一项远非简单、枯燥且耗时的工作。如果能构建一个完整的应用程序，处理所有这些底层细节，同时提供跨所有平台一致且几乎可以在任何设备上运行的开箱即用的丰富用户界面，那该多好？

在本文中，我们将向您展示如何使用 Vidyano（一个功能齐全的开发平台，灵活用于创建从小到企业规模的以数据为中心 Web 应用程序）在 10 分钟内完成所有这些工作。正如本文将演示的，Vidyano 快速易学，非常适合所有经验水平的开发人员创建强大的应用程序！

请注意，本文仅触及 Vidyano 功能的皮毛。有关所有功能的完整列表，请访问 http://go.2sky.be/v4f

获取 Vidyano

要开始，您需要 Vidyano 的 Visual Studio 扩展。您可以直接从 Visual Studio Gallery 下载此扩展，或者通过 Visual Studio 内的“扩展和更新”对话框进行下载。

通过 Visual Studio Gallery 获取 Vidyano

  • 在 Visual Studio Gallery 上下载 Vidyano 扩展：(http://go.2sky.be/v4cp) (这将下载一个 .vsix 文件，如果已安装 Visual Studio，则可以运行它。)

  • 点击安装并启动Visual Studio

通过 Visual Studio 获取 Vidyano

  • 从 Visual Studio 的工具菜单中，打开扩展和更新…
  • 在左侧，点击联机
  • 在右上角，点击搜索 Visual Studio Gallery 并输入Vidyano
  • 点击下载、安装和立即重启

另外请注意，您的计算机上需要安装IIS Express 7.5 或更高版本。Internet Information Services (IIS) Express 是 IIS 的一个免费、简单且独立的版本，专为开发人员优化。您可以从以下 URL 下载最新版本的 IIS Express（当前为 8.0）：

http://www.microsoft.com/en-us/download/details.aspx?id=34679

步骤 1 – 创建新的 Vidyano 应用程序

如果您想遵循以下步骤并在自己的计算机上看到应用程序上线，您需要从以下 URL 下载并安装本文使用的示例数据库：http://go.2sky.be/v4cpdb

  • 启动 Visual Studio（如果尚未启动）
  • 从 Visual Studio 的文件菜单中，点击新建和项目…
  • 在左侧，点击Vidyano
  • 为您的应用程序输入一个新名称，例如MyCRM
  • 点击确定

Vidyano 对话框向导将引导您完成新应用程序的初始步骤。

  • 将应用程序的标题更改为My CRM
  • 输入并确认新应用程序的管理员密码
  • Click Next

下一个向导屏幕将要求您选择存储 CRM 数据的目标数据库。如果您已经部署了之前提供的示例数据库，现在就可以选择它。

  • 点击“连接字符串”旁边的…按钮
  • 选择您的数据库服务器，本例中为本地 SQL Server Express
  • 选择或输入包含 CRM 数据的数据库
  • 单击确定

此向导屏幕上还有更多选项，我们暂时可以忽略它们。请注意架构名称，稍后我们将引用它。只需保留默认建议值。

  • Click Next

Vidyano 将在您的数据库中创建一些额外的表，用于存储应用程序的元数据。虽然 Vidyano 不会更改您现有的表，但如果您愿意，可以选择另一个数据库。

  • Click Next
  • 点击开始！

Vidyano 现在将创建您的应用程序项目。

步骤 2 – 启动和使用新应用程序

让我们启动我们新创建的应用程序。

  • 按键盘上的CTRL-F5 键启动应用程序

系统将提示您输入用户名和密码。

  • 输入admin 作为用户名
  • 输入您在步骤 1 中提供的管理员密码
  • 按Enter 或点击登录

现在您已以管理员身份登录，可以开始构建应用程序了。让我们从添加一个菜单项来查看我们示例 CRM 数据库中的客户开始。

  • 在左上角，HOME 下方，点击+ 符号
  • 在可用的“查询”对话框中，点击客户查询

  • 点击新创建的客户菜单项

现在您将看到示例数据库中所有客户的网格视图。让我们创建一个新客户。

  • 点击操作栏左下角的新建操作按钮
  • 请注意，“名字”、“姓氏”和“是否激活”是必填字段。这由标签旁边的*指示。
  • 输入您的名字和姓氏
  • 可选：尝试输入无效的电子邮件地址。保存时，您将收到通知，告知电子邮件地址无效，需要您更改该值。
  • 点击操作栏上的保存操作，将您自己保存为新客户

您现在可以使用搜索框搜索自己。

您还可以对数据进行筛选。这通过数据库中的另一个表来说明效果最佳。与之前一样，我们将创建一个新的菜单项，这次是针对产品查询。

  • 在菜单中，客户旁边，点击+ 符号
  • 通过点击选择产品查询
  • 点击产品菜单项

与之前的客户页面一样，您将能够在此产品列表中执行各种操作。让我们筛选一下数据。

  • 在搜索框的最右侧，点击带有滤镜图标的按钮
  • 选择新建筛选…

这将在数据网格上方添加一个筛选栏。

  • 在筛选栏中，点击添加筛选列图标并选择产品类别

  • 在可用产品类别列表中，点击山地自行车
  • 通过点击添加筛选列图标添加另一个筛选列，并选择标价
  • 在标价筛选列块中，输入 < 1000

产品列表现在只显示标价低于 1000 的山地自行车。

“1000 什么？” 我们听到您在问？美元！让我们修复视图以显示货币。

  • 在操作栏的右侧，点击配置操作
  • 从弹出菜单中，选择查询持久对象

步骤 3 – 管理元数据

刚才呈现给您的视图显示了 Product 实体的元数据。Vidyano 应用程序中元数据的构建块是持久对象。持久对象功能非常强大，允许您实现高级场景，同时保持应用程序的一致、高级视图，从而简化维护并强制执行统一的编程模型。

在步骤 1 中创建应用程序后，Vidyano 会从您的目标数据库（本例中为我们的小型 CRM 数据库）自动生成一个 Entity Framework 模型。在初始运行时，Vidyano 会为模型中的每个实体在存储库表中创建一个新的持久对象元数据条目。持久对象不一定需要应用程序中对应的 .NET 对象，但这超出了本文的范围。

屏幕右半部分是所有持久对象属性，这些属性是从相应 Product .NET 对象上的可用属性推断出来的。您可以查看它们的标签、类型、业务规则、可见性等。

现在我们已经解释了您看到的内容，让我们继续之前的内容：“美元”。

  • 点击标价属性

  • 点击操作工具栏上的编辑操作

  • 在类型提示字段中，输入DisplayFormat=${0:N2}

  • 点击操作工具栏上的保存操作

  • 点击顶部的产品菜单项

现在您将看到标价以美元显示。事实上，无论何时在应用程序的任何地方显示产品的标价，都会使用此显示格式。

步骤 4 – 添加业务规则

如果您查看产品编号，您会注意到它们都以两个字母、一个连字符和一个数字序列开头。假设我们要确保在创建或更新产品时，确保它有一个有效的编号。

  • 点击管理菜单

  • 点击服务菜单项，然后选择业务规则

您已经可以看到 Vidyano 添加到应用程序的所有业务规则列表。在 Vidyano 应用程序中编写业务规则有两种方法：原生或JavaScript。在本例中，让我们添加一个 JavaScript 业务规则。

  • 点击操作工具栏左侧的新建操作

  • 在名称字段中，输入ValidProductCode

  • 将代码更改为以下内容

function rule(args, value /*, parameters*/) {
  if(!/^[A-Z]{2}-./.exec(value))
    return "{0} contains an invalid product code.";
  
  return null;
}

重要的是要注意，这段代码是在服务端执行的，而不是在最终用户的浏览器中执行，因为这会允许他们查看和/或绕过业务逻辑。上面的 JavaScript 将在运行时编译成 CLR 代码，然后再执行。您可以从这段 JavaScript 代码调用广泛的 .NET 库，您也可以提供自己的库。这将允许您在运行时进行更改，并减少部署次数。

  • 点击操作工具栏上的保存操作

现在我们有了新的业务规则，可以将它应用于任意数量的属性。让我们将其应用于产品的编号。

  • 点击crm 菜单项（crm 是开头时使用的架构名称）

这将为您提供应用程序中所有持久对象的列表

  • 点击产品

  • 点击编号属性

  • 点击操作工具栏上的编辑操作（或按 F2）

  • 在 Rules 字段中，添加;ValidProductCode （注意，规则之间用分号分隔）

  • 点击操作工具栏上的保存操作（或按 CTRL-S）

  • 点击主页菜单

  • 点击产品菜单项

  • 点击操作工具栏上的新建操作

  • 尝试在编号字段中输入任何内容，然后点击保存

您会注意到，您必须以两个大写字母开头，后跟一个连字符，然后是其他字符，这由我们的业务规则决定。

步骤 5 – 覆盖默认行为

作为最后的自定义，我们将覆盖一些默认行为。在此示例中，将禁止最终用户从我们的数据库中实际删除客户。客户将被标记为非活动状态。

  • 点击客户菜单项（注意“是否激活”列）
  • 点击操作工具栏右侧的配置操作
  • 点击查询持久对象
  • 在页面右半部分，您将看到不同的选项卡，选择操作选项卡
  • 点击OnDelete 操作

同样，我们可以使用 C# 编写此代码，但在此示例中，我们将专注于 JavaScript 代码。

function (parent, entities, query, selectedItems) {
  entities.run(function(e) { e.isActive = false; });
  context.saveChanges();
}
  • 点击操作工具栏上的保存操作

  • 点击客户菜单项
  • 通过点击网格线左侧的选择框来选择一个或多个客户
  • 点击操作工具栏上的删除操作（或按 DEL）
  • 点击删除

请注意，选定的客户并未被删除，而是被标记为非活动状态。为了完成，让我们确保客户查询只显示活动客户。

  • 点击操作工具栏上的配置操作
  • 这次，从弹出菜单中选择查询
  • 点击操作工具栏上的编辑操作
  • 在 Where 字段中，输入it.IsActive

注意：此语句将作为额外的 Where 子句传递给底层的 Entity Framework

  • 点击操作工具栏上的保存操作
  • 通过点击浏览器的后退按钮回到客户视图

请注意，非活动客户已不再出现在列表中。删除操作感觉相同，但其行为却截然不同。

步骤 6 – 发布和访问您的应用程序

  • 关闭浏览器，返回 Visual Studio

您目前在 Visual Studio 中打开的 Vidyano 项目基于纯 ASP.NET 项目。这意味着您可以使用与任何其他 ASP.NET 应用程序相同的机制发布它。

实际上，如果您将数据库迁移到 Windows Azure 上的 SQL Database，您甚至可以一键发布该项目到Windows Azure 网站。

一旦您的应用程序托管在公共域上，您就可以访问它，几乎可以在任何设备上访问，而无需更改一行代码。应用程序的用户界面将自动适应设备的性能。

有关发布的更多信息；请查看 Vidyano 文档。

步骤 7 – 获取 Vidyano 并开始开发

既然您知道如何创建 Vidyano 应用程序，为什么不自己试试呢？选择您自己的数据库，让 Vidyano 为您创建一个应用程序。

© . All rights reserved.