开始VS2013中LightSwitch系列的第三部分：我们该选择哪个屏幕模板？

[原文发表地址] Beginning LightSwitch in VS 2013 Part 3: Screen Templates, Which One Do I Choose?

[原文发表时间] 11/4/2013 3:00 PM

说明：本文是之前很受欢迎的LightSwitch 博文系列之Visual Studio2013的更新 . 若要查看以前版本，请点击下面 ：

• Visual Studio 2012: Part 3: Screen Templates, Which One Do I Choose?
• Visual Studio 2010: Part 3: Screen Templates, Which One Do I Choose?

欢迎来到开始Visual Studio 2013中 LightSwitch 系列的第3部分！在第 1 和第 2 部分，我们学习了LightSwitch中的实体和关系以及如何使用数据设计器来定义它们。如果您错过了它们：

• Beginning LightSwitch in VS 2013 Part 1: What’s in a Table? Describing Your Data
• Beginning LightSwitch in VS 2013 Part 2: Feel the Love - Defining Data Relationships

在这篇文章中，我想谈谈屏幕。屏幕在日常生活中是一种常见的术语，通常指电视或电脑屏幕——我们观看并与设备进行交互的闪光的东西。LightSwitch屏幕将数据呈现给用户,并且形成应用程序的用户界面（UI）。

商用应用程序的屏幕允许用户去搜索，编辑，插入和删除后端数据源中的数据。LightSwitch通过提供给您可选择模板使得屏幕创建非常的简单。然后，您可以按原样使用模板，或进一步按照您的需求来自定义。一旦您拥有了一些已定义好的实体（如你在之前的帖子中了解到的），那么您就可以准备创建屏幕了。

LightSwitch的HTML客户端屏幕被优化以支持触摸为主的设备，如：平板电脑和手机。然而，你也可以使用任何现代的（HTML5功能）浏览器与应用程序交互。 LightSwitch为您做的工作是运用响应设计原则，让屏幕适应不同形式的因素。例如，由于屏幕变得更小，项目的多列布局将会分裂成一个单一的列，页边距，行距，标题和图标的大小将减少。

这意味着，当你创建一个LightSwitch应用程序时，它会自动调整为用户设备的大小 —— 可以是台式机，平板电脑，或电话这些形式的设备 —— 所以你可以为多种类型的设备和操作系统写一个应用程序。

关于LightSwitch如何使用响应式设计的更多信息， 请参看：多形式因素的设计

选择屏幕模板

以客户的视角，您可以通过单击数据设计器顶部的“+ Screens…”按钮或者右键点击解决方案资源管理器里的Screens文件夹，然后选择“Add Screen...”将屏幕添加到项目中。

当执行此操作时，会弹出“Add New Screen”对话框，要求你选择一个屏幕模板，以及你想要在屏幕上显示的数据。这里为HTML客户端提供三个可用的屏幕模板，Browse Data屏幕，View Details屏幕，以及Add/Edit Details屏幕。根据你所选择的屏幕模板，右边的“Screen Data”部分中的选项也将随之变化。

展开Screen Data下拉列表时，您可以选择您要应用在屏幕上的实体。对于您所选的任何一个屏幕模板，其控制均是以类似查看实体定义的方式创建。例如，标签继承自字段名。此外，默认情况下，屏幕使用的是匹配了基础数据类型的控件。因此，举例来说，一个可编辑的String属性由一个TextBox控件表示，一个布尔变量变为一个触动开关控件，一个网络地址类型得到的是网络地址的控件，这就是为什么在创建屏幕之前正确地模拟你的数据是如此重要。虽然你可以用基于屏幕到屏幕的方式去自定义大多数东西， LightSwitch还是会读取您的数据模型中的设置去创建智能的默认设置，加快创建应用程序所花费的时间。

让我们看看屏幕模板的列表以及一些为什么会选择他们的指导原则。

浏览数据屏幕

当你想要在一个屏幕中的一个表格里看到一个包含所有记录的列表时， 您可以使用Browse Data屏幕。默认情况下，当用户滚动列表时, 屏幕上包含一个简单的异步加载数据页面的列表。像所有具有多行数据的屏幕一样，默认情况下, 查询可以在每一页上返回45行数据（你可以去屏幕属性里改变此设置）。数据列表也可以由一平铺列表或一个表格来表示, 对于每个记录，多列显示数据这会更好点。

通常情况下，您将用一个Browse Data屏幕作为您应用程序的主屏幕 —— 作为用户导航到您的应用程序时的第一个显示的屏幕。您可以轻松地连接一个“Tap”事件，以便当用户触摸（或点击）列表中的一个项目时，您可以导航到一个详细的屏幕去。如果您选择Browse Data屏幕模板，并立即运行了（ F5 ）您的应用程序，您会看到一个简单的列表。对于较小的展示设备（如手机），列表更利于控制，或当您只显示一行文字，并且想让它占据整个屏幕的宽度时。正如我们在第一部分中讨论的, 在默认情况下，列表显示你所定义在实体中的摘要属性。默认情况下，摘要属性是表中的第一个字符串字段，但你可以在Data Designer中改变它。

如果你想显示多个字段，可以考虑平铺列表或表格控制。

您还可以使用预定义操作, 如: 添加, 编辑和查看, 在命令栏（或屏幕上的其他地方）添加按钮，这些操作可以带给你适当的屏幕模板,（下面我们将讨论）。

View Details屏幕

View Details屏幕允许你查看来自一个表中的单行数据 , 并选择性地显示任何相关的数据。当你想显示一个实体的所有细节，就使用View Details屏幕。默认情况下，LightSwitch将读取您实体字段的顺序，将它们分为两列，基于属性类型选择适当的视图控制。您也可以选择把相关的子数据包含在一个“View Details屏幕”中。默认情况下，每个相关数据的集合将显示在屏幕上一个单独的Tab上, 这在小的显示设备上运行很好，或当你有很多相关数据要显示的时候效果都很好。

但是，如果您正在使用较小的数据集或您的用户通常有更大的屏幕，这时您可以把所有的数据放在一个页面上, 只需把子选项中的列表拖动到Details选项卡中。

Add/Edit Details屏幕

Add/ Edit Details屏幕允许您添加或编辑表中的单行数据，并选择性地显示任何相关数据。Add/Edit Details屏幕模板和View屏幕非常相似，除了在默认情况下，它的字段是可编辑的。该屏幕可用于编辑当前记录以及增加新记录。

当你想添加或编辑一个实体的详细信息时，需使用Add/Edit Details屏幕。默认情况下， LightSwitch将读取实体字段的顺序，将它们分为两列，根据类型属性选择适当的编辑控制器。您也可以选择包含相关子数据在Add/Edit Details屏幕上， 就像一个View Details屏幕一样，将每套相关的数据集显示在一个单独的Tab上。然而，您可能希望设计你的屏幕工作流程，以便在同一时间有针对性地对较小的数据集进行编辑，尤其是当您的目标是小输入设备。因此，即使您可以编辑屏幕上的这些相关数据，可能您还是决定向用户呈现View屏幕，并添加按钮去单独编辑每个部分会比较好。

View Details屏幕和Add/Edit Details屏幕之间的主要区别是，后者是可编辑的及在屏幕上会有Save和Cancel图标。默认情况下，这个屏幕也会显示为一个对话框，但你可以通过取消选中Screen Designer上属性窗口外观部分中的“Show As Dialog”对话 ，让屏幕占满整个浏览器的整个宽度。

初看起来，三个屏模板可能像工作在一个小的集合里。然而要记住，这些只是您可以充分自定义的起点。对于屏幕上数据（以及相关的数据）的布局显示，您有很多的灵活性。一次显示多少数据，以及如何显示完全取决于您自己。

出于设计的考虑，特别是相关的数据集，请参阅：使用LightSwitch HTML客户端控制的Detail Screens

添加Screens到地址簿应用程序

现在您清楚了每个屏幕模板能为您提供什么，让我们为这一系列创建的地址薄应用程序构建一些模板。在上一篇博文的最后，我们使用Browse Data和Add\Edit Details屏幕，以便我们可以快速地测试我们的数据模型。

然而，如果我们想管理成千上万的商务联系人并允许多个用户访问这些数据，把用户放入一个工作流中可能会更好，那里他们首先搜索联系人， 然后可以一次编辑一个用户或当他们没有找到所寻找的联系人时添加一个新的。创建一个简单的应用程序应该如何工作的流程图总是很好的：

首先使用Browse Data屏幕搜索一个联系人，如果发现了联系人，就打开View Details屏幕，它将显示所有相关数据。这个屏幕也将让他们对任何联系人的详细信息或者相关数据进行有针对性的编辑。一旦用户保存，View Details屏幕只会简单重新显示直到他们导航回Browse 屏幕。如果用户无法找到他们正在寻找的联系人，便可以打开Add Contact屏幕，它允许用户只通过联系人实体就可进入。当他们保存时，Contact View Details 屏幕将打开，如果他们需要便可以完成输入任何相关数据。

因此，我们的地址薄应用程序需要六个屏幕，一个Browse Data屏幕，一个View Details屏幕，和四个Add/Edit屏幕，它们每个都对应四个应用程序里的实体（联系人，电子邮件地址，电话号码，地址）。由于你创建的第一个画屏幕会成为主屏幕，所以我们首先将要创建Browse Data屏幕。（如果你一直有跟着做，就要先删除那两个我们在之前的博文中创建的测试屏幕）。

所以首先要通过右击解决方案资源管理器，并选择“Add Screen…”,打开“Add New Screen”对话框后，去创建Browse Contact 屏幕。选择Browse Data 屏幕模板，然后选择Contact Screen Data，最后单击OK。

接下来，我们将通过修改查询为Browse Contacts屏幕添加搜索功能。在下一篇文章中，我们将更详细的讨论查询，现在我们仅快速地修改一下屏幕查询，以使用户能可选性的搜索一个联系人，而不需要滚动列表。

在Screen Designer的视图模型的左侧点击“Edit Query”。这包含了我们所有的属性，以及屏幕上的查询和方法。

这将打开查询设计器，在这里你可以提供一个过滤器和排序。让我们允许用户用联系人姓名做一个简单的搜索。我们会用搜索姓氏和名字来匹配。因此，添加一个Where子句，选择LastName属性，contains，选择Parameter [@]，然后选择Add New... 创建一个新的参数。

为参数“FindContact”命名，在属性窗口中选中“Is Optional”。然后添加另一个where子句（Or），并选择FirstName属性。我们还提供了一个先按名后按姓的排序。查询应该如下面这样：

在左上角点击“Back to BrowseContacts”回到屏幕设计器。现在，在视图模型中我们看到FindContact屏幕属性链接到查询参数。我们可以在列表中简单地拖动屏幕属性并设置文本框控制。在属性里设置占位符为“Find Contact”和设置标签位置为“None”。这将有助于屏幕空间的节省。

我们也让列表里的摘要控制变为单列的布局，在它里面显示名字和姓氏。这就是现在的Screen Designer应该的样子。

接下来，让我们给命令栏添加一个按钮，这样当用户无法找到他们正在寻找的联系人时，我们就可以添加新的。选择命令栏，单击+Add来添加一个新按钮，并选择现有的方法，addAndEditNew。 这时LightSwitch知道我们这里需要一个新的屏幕， 所以Navigate To：（New Screen...）被选中。最后点击OK。

这将再次打开Add New Screen对话框，同时为我们的联系人自动选择Add/Edit Details屏幕模板。然后点击OK。

跳转回Browse Contacts屏幕，并选择Add Contact按钮，在属性窗口中设置图标为“Add”。您可以从约30个不同的内置图标中选择（您也可以通过CSS 改变它们——更多相关的信息，请关注后面的文章）。

接下来，让我们为联系人添加View Details屏幕。当用户轻击（单击）列表中的联系人时，将打开此对话框。选择列表，并在属性窗口中单击Tap动作的链接。然后选择一个现有的方法，viewSelected。同样，LightSwitch知道这里我们需要一个新的屏幕，所以Navigate To：（New Screen...）被选中。然后点击OK。

这个时候，选择所包括的所有相关的数据，然后单击OK。

现在，为了让用户添加和编辑剩余的子实体，我们可以重复我们所了解到的创建按钮和定义tap动作的方法去创建剩下的三个屏幕。在View Contact屏幕上首先选择Details选项卡上的命令栏, 添加一个按钮，这允许我们编辑Contact Details。我们可以重复使用我们之前创建的Add/Edit contact屏幕来添加新的联系人。

注意到现在当我们选择一个现有的方法时，我们可以看到屏幕上所有查询的所有预定义动作。

LightSwitch已经知道我们有一个可以编辑联系人的屏幕，因此这将会被自动选择。点击“OK” 。然后在属性窗口中设置Edit Contact按钮的图标为“Edit”。

（顺便说一下，你可能会注意到一些我们并没有明确添加数据设计器的字段现在出现在View Contact 屏幕上，默认情况下， LightSwitch将为新表自动添加行级的Created/Modified和CreatedBy/ModifiedBy字段，以便您跟踪后来什么时候以及谁添加或编辑过这条记录，从服务器端来看你可以在数据设计器里的实体中更改此设置。）

我前面提到的，默认情况下LightSwitch将把相关的子集按照单独的标签布局，如你在上面的截屏所看到的。对于较小外形的因子，或当您在这些子集有潜在的大量的数据时，这会是一个不错的选择。由于联系人有超过少数的电子邮件地址，电话号码或物理地址是很少见的，所以让我们把所有列表拖动到Details选项卡，然后删除其他标签。而且也已经改变列表为清单列表，并选择了想要显示的特定的字段。

现在列表都在一个选项卡上，我们想要添加一个标题来区分它们。选择列表，并在属性窗口的外观部分中选中“Show Header”。

现在我们需要做的是为子列表加上最终的Add/Edit屏幕。选择清单列表并为每个列表设置TAP动作为editSelected。这时，LightSwitch会知道这里我们需要新的屏幕，所以在对话框中单击OK。

为每个清单列表重复此操作三次，同时为每个选择对应的editSelected方法。

在这些画面上，我们可以删除LightSwitch将要在屏幕上放置的父联系人选择器。如果我们不是来自一个当前的联系人屏幕，这会是需要的。

最后为每个子节点的命令栏添加三个“Add”按钮，这样用户就可以将记录添加到每个列表。ightSwitch会建议我们重用我们已有的Add/Edit屏幕，这正是我们想要的。

你可能会奇怪这一点，为什么屏幕设计器不是一个典型的所见即所得的设计器。这是因为LightSwitch中有两个客户端选项 ——HTML和Silverlight ——这使我们能够保持设计体验的一致。（如果你想学习如何利用强大的Silverlight客户端去构建应用程序，请参阅2012年系列）。

然而，如果你想真正看到你所做的改变的影响，这里有一个很酷的窍门。当应用程序运行时，您可以修改任何客户端的屏幕布局或JavaScript代码！修改后，只需保存您的所有文件，然后刷新浏览器。关于这个方便的屏幕开发功能的详细信息，请参阅：加快LightSwitch的发展之“Edit & Refresh ”

使用JavaScript自定义屏幕的工作流程

当我们设计我们的屏幕工作流程，我提到过当一个新的联系人被创建后，我们应该立刻导航到View Contact屏幕，以便让用户可以输入其余的联系人详情。目前，当一个新的联系人被保存后，将会显示一个Browse Contact 屏幕。这是因为，默认情况下，当他们保存时，LightSwitch会很轻易将用户导航回到他们保存时的屏幕。因为我们是从View Contact屏幕执行他们的，所以对于其他的Add屏幕也能运作的很好。然而，我们的Add Contact按钮是位于Browse Contact屏幕上。

所有这一切意味着我们不得不编写一点JavaScript代码。在Browse Contact屏幕上，选择Add Contact按钮接着选择“Edit Action”。

然后改变“Write my own method：”的动作，并单击OK。

再次右键点击按钮，选择“Edit Execute Code”。这会带您导航到代码编辑器。现在写入下面的JavaScript代码：

  1: myapp.showAddEditContact(null, {
  2: beforeShown: function (addEditScreen) {
  3: // Create a new contact here.
  4: var newContact = new myapp.Contact();
  5: addEditScreen.Contact = newContact;
  6: },
  7: afterClosed: function (addEditScreen, navigationAction) {
  8: // If the user commits the change, show the View screen
  9: if (navigationAction === msls.NavigateBackAction.commit) {
  10: var newContact = addEditScreen.Contact;
  11: myapp.showViewContact(newContact);
  12: }
  13: }
  14: })

LightSwitch中有一个功能强大的运行时客户端，可以让你做各种事情。在以后的文章中我们将讨论更多的关于使用JavaScript和CSS定制应用程序。现在，来看看如何编写一些常见任务（从这我得到了上面的代码:-)）：如何使用代码修改HTML屏幕

运行它！

现在，我们将所有定义的屏幕按F5构建和运行应用程序，让我们来看看我们得到了什么。你会注意到，打开Browse Contact屏幕，会使我们能够找到一个联系人。在这里我只有两行测试数据，但是如果我有数以百计的联系人，LightSwitch一次只会装载45行，只有当我们滚动至列表的底部时，才会装载更多。

如果你点击列表中的联系人的名称，它会打开View Contact屏幕，这可以让我们编辑所有的联系人信息。如果我们在命令栏中点击Add Contact，它会打开Add/Edit Contact屏幕，并且当我们保存时，它会立刻转到View Contact屏幕。

到这里，所有的数据用户都可以与之交互。轻击平铺项将可以编辑相关数据，轻击命令栏按钮将会执行关联的动作。如果用户点击了一个电话号码或电子邮件链接，手机就会拨打号码或者一个新的电子邮件将打开。

总结

正如你所看到的，内置的屏幕模板为您提供了很多功能。我们现在有一个功能很全的HTML5的业务应用程序，同时写了最少的代码。这就是LightSwitch的魅力所在。它为您处理所有无聊的管道代码，而且在客户端（JavaScript）和服务器（.NET）还为您提供了丰富的API。

下一篇文章中，我们将更深入地探讨查询以及如何设计查询以便在屏幕里按照我们所需的筛选和排列数据。下一次再见！

希望大家喜欢！