主-详细信息屏幕与LightSwitch HTML客户端
[原文发表地址] Master-Detail Screens with the LightSwitch HTML Client
[原文发表时间] 2013-03-21 9:01 AM
自从几周前我们发布了最新版本的LightSwitch HTML Client，团队就已经在LightSwitch Team blog加了一些很好的关于新的功能以及怎么用的内容。并且还会有更多。
如果你是刚开始接触HTML客户端，参见：Getting Started with LightSwitch in Visual Studio 2012 Update 2 。
在这篇博文中我想给你展示如何用LightSwitch Screen Designer来创建你想要的主-详细信息屏幕。你只要稍加练习就可以用屏幕设计器非常灵活地自定义屏幕布局。事实上，屏幕设计器上有如此多的好东西我不会涵盖所有你可以做的（查找相关的视频很快）。相反我想将重点放在一些不同的你可以用来显示主-详细信息屏幕的方法上。是Heinrich在Designing for Multiple Form Factors 上的一篇精彩文章激发了我写这篇文章，那篇文章解释了LightSwith是如何承担起为你决定根据屏幕的尺寸来布局屏幕内容的最佳方法的重任的。
我将展示一些不同的可以设计主-详细信息屏幕的方法来实现你的创作梦想，但是记住这些只是建议。最后你可以完全灵活地用你脑海中的的数据和用户任意地创建屏幕。
安装我们的数据模块
我将准备用一个在Beginning LightSwitch Series上生成的应用程序并且扩展了它的移动客户端。它是一个用来管理联系人或者商业合作伙伴的非常简单的应用程序。这通常是一个大的业务系统的一部分，但是在这里作为例子它足够了，因为有多个一对多关系。Download the Sample App并且在家里随时跟着做。
下面是我们的数据模型。一个Contact与它的PhoneNumbers, EmailAddress, Addresses有着一对多的关系。
添加HTML客户端“Home”屏幕
首先我们需要升级这个应用程序以便充分利用新的HTML客户端，然后我们将可以添加一个用户运行这个程序时就可以看见的屏幕。
在Solution Explorer， 右键工程并选择“Add Client…”。
给客户端命名为“HTMLClient”并且单击OK键。这样将会使你的工程从LightSwith版本2升级到版本3。在Solution Explorer中你将会看到一个叫做“HTMLClient (startup)”的节点。右键它并选择“Add Screen…”再选择Browse Data Screen模板。选择“SortedContacts”查询作为ScreenData并且命名屏幕为“Home”然后单击OK。
下一步，让我们修改我们的列表中的显示。在屏幕设计器中将Summary control改成Columns Layout。Summary control显示的是在Data Designer上对实体中定义的第一个字符串。然而我们想看到的是FirstName和LastName，因此可以用Colums Layout来实现。
运行这个应用程序（F5）。因为这个例子中已经有一些数据，你将会看到一些联系方式显示在列表中。
现在让我们看下一些让我们既可以显示详细的联系方式信息又可以显示它们的相关数据，PhoneNumbers，EmailAddress和Addresses 的方法。
主—详细信息选项卡控件
关掉应用程序并且回到屏幕设计器的主屏幕上。选中List控件并且在Properties窗口中通过单击链接来设置Item Tap的行为。
然后选中SortedContacts.viewSelected方法并且单击OK来创建新的屏幕。
这样将会打开熟悉的Add New Screen对话框并且已经选中了View Details Screen。确保选中additional data以包含the EmailAddresses, PhoneNumbers and Addresses。然后单击OK。
默认情况下，LightSwitch会设置contact的详细信息以及所有的相关的孩子信息在各自的选项卡控件中。当我们再次运行应用程序时，这些选项卡会出现在顶部的可滚动的/可拉动的容器中。
当我们打开每个选项卡，你将看到一个简单列表中显示的项目。
让我们看看我们如何把这些列表自定义的更好点，这样用户一眼就能看到所有的数据以及更好的数据格式。
回到屏幕设计器ViewContact屏幕，首先选中Email Addresses List并且更改为Tile List。这将把Summary控件自动更改成Rows Layout并且将会设置Email字段按照格式化显示，可单击的邮件地址。让我们同时通过设置Font Style为“Small”来缩小 Email Type字段。
对Phone Number和Addresses重复同样的过程。Address，为了把City State和ZIP平铺在同的一行中显示，选中Rows Layout并且在字段列表中单击+Add，选择New Group。然后更改控件为Columns Layout并且天添加City State和ZIP字段到那个组中。最后，你的屏幕内容树看起来应该像这样。
现在当我们运行它，你将看到我们的数据显示出来而且格式更好。
当你有可能有很多子数据要显示或者你是针对更小的移动设备比如手机时，为主-详细信息屏选用选项卡控件是个不错的选择。这限制了用户必须马上查看（可能绝大多数）信息的数量。
更改选项卡里的数据
现在让我们看看我们如何用Tab设计来修改数据。回到ViewContact屏幕并且展开Details 选项卡下方的Command Bar，单击+Add添加一个button。选择已经存在的方法Contact.edit并且单击OK来创建新的屏幕。
当Add New Screen对话框将打开时，Add/Edit详细信息屏幕模板已经被自动选中而且带有我们想要的数据。这次我不会选中所有相关联的孩子因为我们将在这次设计中分别修改每一个tab数据。
单击OK这将打开设计器中的Add Edit Contact屏幕。单击设计器的上方左手边的回退箭头回到ViewContact屏幕。
选中我们刚刚添加的Edit Contact按钮并且将icon修改为“Edit”。
现在当我们运行应用程时你将看到Edit Contact按钮在command bar中，单击它将会出现为我们的联系方式修改屏幕。
现在让我们来为其他选项卡提供数据数据。回到ViewContact屏幕选中Email Addresses的Tile List control并且修改它的Tap action为一存在的方法：EmailAddresses.editSelected并且单击OK来创建新的屏幕。
在Add New Screen对话框中单击OK来接受默认值。这将屏幕设计器跳转到新的AddEditEmailAddresses屏幕。拖拽Email和Email Type字段到Command Bar下面并且删除Columns Layout控件。我们没有必要向用户显示Contact，这在上一个屏幕为我们自动设置了。
现在让我们再单击设计器的上方左手边的回退箭头回到ViewContact屏幕。接下来直接选中在Tile List上方的Command Bar并且添加一个新的按钮。选择已存在的方法EmailAddresses.addAndEditNew。注意LightSwith会正确建议说我们在使用同一个刚刚创建的屏幕。单击OK。
选中按钮并且这次在属性窗口中将Icon更改为“Add”。对剩余的其他选项卡重复对PhoneNumbers和Addresses的相同步骤添加编辑和添加功能。现在当我们运行它并且编辑一个Contact, 你将会看到在每一个选项卡的command bar中都有一个按钮，它允许你添加新的子记录。如果你单击在Tile List上的一项，你将会看到编辑屏幕。
正如我提到，当需要向用户显示大量的数据并且只有很有的小型移动设备时允许有针对性的修改各自的tabs数据技术是非常有用的。尤其是用户不输入大量数据而是“tweaking”(做一些小的修改)已有的数据。
然而屏幕设计器并不仅限于这个屏幕流程。如果你想显示更多的数据在屏幕上你完全可以做到。 比如，在我们的例子中一个联系人不会有超过三个phone numbers, email addresses或者addresses。它把所有的信息都显示在一个屏幕上可能更合理，即使它只是一只手机，只要用户垂直滚动屏幕就可以。或者可能我们是主要针对平板电脑用户并且我们不想逼迫他们在小屏幕上输入数据时过多得单击Save按钮。如果我们输入联系人信息，然后最有可能我们想马上捕获所有数据。让我们来看看我们该怎么做。
主-详细信息全屏幕二选一
首先让我们修改我们的View Contact屏幕。先拖拽所有子Tabs Command Bars下的Add按钮到上方的Command Bar。然后拖拽每个Tile Lists到Details Tab里，然后删除现在所有空的子tabs。最后，选中Tile Lists并且在属性窗口中勾选“Show Header”复选框。
这样允许用户马上看见所有的信息。 LightSwitch将会根据我们调整浏览器的大小自动调整屏幕布局。这个样例对于少量数据非常有效因为我们从来不会有五个以上的子数据。
这儿是我在我的手机上滚动到孩子数据时看起来的样子。注意command bar总是显示在底部不管你怎么滚动。如果我按了email连接它会开始自动开始一封邮件和当我按phone number连接手机会播这个号码。但是如果我按在tile上，它将会打开关联的Edit屏幕。
你也可以添加特定的按钮来编辑lists以此代替要求用户按tiles。事实上，你甚至不需要在Command Bar上放按钮。在屏幕设计器中，你可以通过简单得右键内容树上的任何一项以在屏幕的任何地方添加按钮或者通过在屏幕设计器的上方选中“Add Layout Item”并且选择“Button…“。
添加新的contact又怎么样呢？让我们回到我们的主屏幕并且添加那功能。既然用户在添加新的联系人时可能随时要添加额外的数据，那我们就创建一个新的屏幕允许我们在添加新联系人时在一个对话框中输入这些信息。
具体到此示例，是往联系人表中插入的权限检查。如果我们想测试这个工程，我们将需要保证在调试模式下有权限，因此打开工程属性并且在Access Control tab在app-specific权限上勾中“Granted for Debug”。
现在打开Home Screen并且在Command Bar上添加一个按钮。选择存在的方法SortedContacts.addAndEditNew然后为Navigate to选择（New Screen…）。
这次继续包含所有在屏幕上的相关数据，更改屏幕名称为AddContact。单击OK。
我们将设置屏幕与ViewContact屏幕非常相似但是这次我们将允许修改所有数据字段。首先添加“Add”按钮到上方的Command Bar以便用户可以在同一个屏幕上把所有Email Addresses，Phone Numbers和Addresses添加到新的联系人。选择已存在的方法.addAndEditNew并且Navigate To 屏幕就用我们之前建议已经添加的屏幕。
现在就像从前那样，修改Lists为Tile Lists为了能将所有字段在Tile中显示出来。不过这一次，修改字段控件为editable controls。
接下来把每一个Tile Lists拖拽到Details Tab里然后删除现在空的子选项卡。最后，选中Tile Lists并且在 属性窗口中勾选“Show Header”复选框。
以上完成后你的屏幕内容树看起来像这样。
现在当我们运行这个并且添加一个Contact，你能够一次性在一个屏幕中输入所有的数据。
默认情况下所有的编辑屏幕都以对话框的形式显示出来。随着屏幕尺寸的缩小，LightSwith会将对话框全屏显示，然而，在这个例子中我们也许想要强制它始终将尽可能多的屏幕显示给用户。特别是对于大屏幕的平板电脑外形，最好是全屏显示。
我可以通过打开屏幕设计器并且选中在上方的屏幕节点，然后在属性窗口中不选“Show as Dialog”来来强制屏幕以全屏显示。
现在当我们再次运行应用程序并且添加一个新的contact，屏幕占据了浏览器的完整宽度和高度。
完成
我希望我给你们展示了一些你可以用LightSwitch HTML client来创建主-详细信息屏幕（并且我们做到了没有写任何代码！）的不同方法。当然你可以挑选哪种适合你的情况的技术或者想出完全不一样的方法。重点是屏幕设计器在它可做的东西上非常灵活，而且只需要一点练习。
最后，这儿有一些提示要记住：
- LightSwitch将根据不同的外观来自动调整屏幕的布局。
- 当你将可能有很多子数据要显示或者你针对的是更小的移动设备比如手机时，针对主-详细信息屏幕使用Tab控件是很好的想法。不过这会限制用户一次性可查看/修改信息的数量。
- 在一次不会有不过超过五个子数据要同时查看/编辑的（就像我们的例子中那样）时或者当你的用户在使用像平板电脑这样的大屏幕设备时，在屏幕上一次性显示所有的小批量数据可以工作地很好。
我亦要指出有很多的种方法可以用于创建自定义控件和根据你的特定情况选择你的应用程序风格，或许我会在以后的博文中深入挖据。
希望你会喜欢！