在 5 分钟内为 LightSwitch 解决方案构建一个 HTML 客户端

[原文发表地址]  Building an HTML Client for a LightSwitch Solution in 5 Minutes

[原文发表时间] 2012-11-22 8:42

如果你还没听说，我们上周发布了 HTML客户端预览版 2，其中添加了能够为你的 LightSwitch 解决方案创建基于 HTML5/JavaScript 的客户端的功能。我想通过添加一个HTML配套应用程序到我的Contoso Construction示例中来演示如何快速构建这些客户端将是个不错的做法。

Contoso Construction是一个示例，它使用了 LightSwitch 扩展和稍微高级的编码技术，以此与邮件服务器相集成、 自动化 Word 和 Excel、创建地图可视化效果、 提供高级的数据筛选以及连接到 OData 源。Silverlight 客户端是在桌面上运行的，用于建筑公司管理建设项目。

此应用程序的功能之一就是添加施工现场的照片。

然而目前，它的工作方式是工地上的人必须得将图片带回办公室上传，或人员需要随身携带一台笔记本电脑来运行这个丰富的桌面应用程序。因此，我们希望能够提供通过任何现代的移动设备上传照片的功能。那就让我们看看如何在几分钟内创建此配套客户端。

添加一个客户端

我们需要做的第一件事是添加一个新的移动客户端到我们当前的项目中。(你将需要首先安装 LightSwitch HTML 客户端预览版 2来得到此功能。请记住，此版本仍处于预览中，所以请确保不要这样对任何产品应用程序使用它 — — 请使用副本;)）。

右击项目节点，选择" Add Client…（添加客户端）"

然后选择 HTML 客户端，将客户端命名为"MobileClient"。

这样做了以后，LightSwitch 将会升级你的项目以支持预览版 2 中的新功能。请记住，一旦升级，你将不能在另一台机器上打开此项目，除非已经安装了预览版 2。

添加 "Home" 屏幕

当用户首次打开应用程序时，我们希望他们看到当前项目的列表，就像他们在桌面应用程序上的Home（主页）屏幕上看到的一样。若要添加一个屏幕，右击 MobileClient （它现在被设为调试时的启动项目），并选择" Add Screen（添加屏幕）..."。

这将会打开Add New Screen（添加新屏幕）对话框。选择Browse Data Screen（浏览数据屏幕）模板，然后选择 CurrentProjects 查询作为Screen Data（屏幕数据），并将屏幕命名为" Home "。然后点击OK。

这将打开屏幕设计器。因为此特定的查询有一个可选的参数，它可检索系统中的所有项目，所以LightSwitch 也将在屏幕上放置参数输入。就这种情况而言，我们只想要显示当前项目，所以删除此控件。

如果此时你按 F5来运行该应用程序，我们将在Home屏幕上看到当前项目的列表。

添加一个View Details屏幕

现在我们想要一个屏幕来显示项目的详细信息以及照片。因此再次右击 MobileClient ，选择" Add Screen（添加屏幕）..."。这次选择View Details Screen（查看详细屏幕）模板。选择Project作为屏幕数据，并确保包括了相关的图片。

在此屏幕上，我们还想要移动用户能够更新Notes字段，如果他们需要的话。所以将Notes字段更改为TextArea控件。

添加Tap事件

为了打开详细信息屏幕，我们需要为Home屏幕上的列表框添加tap事件。打开Home屏幕，选择Current Project列表，在Properties（属性）窗口的Actions项下，通过点击链接添加一个Tap操作。

这将弹出一个对话框，让我们调用详细信息屏幕。选择"Choose an existing method（选择一个现有的函数）"，然后选择"showViewProjectDetail"。最后，你将需要指定 CurrentProject.selectedItem被发送到详细信息屏幕。

现在如果按 F5 来运行此应用，我们可以点击列表中的项目，然后View Project Detail屏幕将出现。请注意Pictures（图片）的子关系会自动显示在单独的选项卡中。

平铺显示图像

接下来，我们想要当用户打开Pictures选项卡时，以平铺列表形式显示照片。打开ViewProjectDetail 屏幕，先将Picture摘要控件设置为Rows layout（行布局）。这将显示图像 & 说明控件。

下一步，将List控件更改为Tile List控件。

按 F5 来运行该应用程序，选择第一个项目，然后选择Pictures选项卡，你将看到平铺的图片列表的缩略图。

添加一个对话框来上传图片

现在是时候添加主要功能部分到此应用程序中了。我们想要允许用户上传新照片。现在通过使用预览版 2， 我们需要添加一些自定义代码来执行此操作。幸运的是我们需要的所有代码都可以在 HTML客户端教程里找到。以下几个教程里的文件就是我们需要纳入到项目中的：

Sample Resources\image-uploader.js
Sample Resources\image-uploader-base64-encoder.aspx

我们需要手动把这些添加到我们的客户端项目中。要做到此，只需切换到" File View（文件视图）"来查看该解决方案的物理布局。

下一步，打开 MobileClient 节点，将现有文件添加到 \Scripts 节点。

选择image-uploader.js和image-uploader-base64-encoder.aspx。下一步通过双击打开根路径下的default.htm，并在脚本块的末尾添加以下引用：

 <script type="text/javascript" src="Scripts/image-uploader.js"></script>

切换回Logical view（逻辑视图），然后打开 ViewProjectDetail 屏幕。选择底部的Dialogs（对话框）节点，然后选择Add Dialog（添加对话框）。在属性窗口中，将对话框的名称更改为 ImageUploader。

从屏幕设计器 （视图模型） 的左侧，将Pictures的 SelectedItem 节点拖动到新的对话框。删除Project项。

下一步选择新添加的Selected Item节点。在属性窗口中，将宽度和高度设置为Fit to Content（适用于内容）。将Note的类型更改为Text Area。

下一步， 有趣的部分--编写一些 JavaScript 代码:)。将对话框的Picture字段从Image（图像）切换到Custom Control（自定义控件）。

在属性窗口中，选择Edit Render Code超链接，或选择设计器右上方的" Write Code（编写代码）"按钮，然后选择 _render函数。

添加以下代码 （以粗体显示):

myapp.ViewProjectDetail.Image1_render = function (element, contentItem) {

       // Write code here.

      createImageUploader(element, contentItem, "max-width: 300px; max-height: 300px" );

};

此调用将所有重头部分重定向到我们所添加的image-uploader.js 文件中。可自定义的样式语句 ("max-width: 300px ； max-height ： 300px" ） 指定了图像预览的大小。现在我们需要做的就是调用此对话框。让我们在屏幕选项卡上添加一个按钮来实现。选择Pictures选项卡，然后选择Add（添加），New Button（新按钮）。

在Add Button（添加按钮）对话框中，选择Pictures.AddAndEditNew函数，将Image Uploader作为" Navigate To "对话框。

设置数据的默认值

接下来，我们需要添加代码以便当上传一张图片时，自动设置" Updated "字段。这是 Contoso Construction架构的特定要求，Picture.Updated 字段是必需的，不过它是内部的，所以不会显示在屏幕上。选择Projects实体来打开数据设计器。你将注意到现在数据设计器的底部有不同的视图。服务器视图是你的所有商务逻辑驻留的地方。这是中间层数据服务，是像数据验证和复杂的数据处理代码驻留的地方。这就是为什么我们可以用最少的代码将 HTML 客户端添加到一个现有的项目，因为你的大部分代码已经在这里。

为了在我们的 HTML 客户端上添加默认值，我们需要选择"MobileClient"视图，然后选择Updated字段。然后下拉" Write Code（编写代码）"按钮，并选择"created（创建）"函数。这样，你就可以在 JavaScript 客户端上设置默认值。

编写此代码 （以粗体显示):

myapp.Picture.created = function (entity) {

       // Write code here.

      entity.Updated = new Date();

};

运行它！当我们按 F5 键来运行我们的应用程序时，它将定位到一个项目，然后选择pictures选项卡，我们现在就可以点击屏幕底部的" Add Picture（添加图片）"按钮来添加一个新的图像和一些注释。

单击右上角的确定校验标记，新图片将会被加入到列表中。当你完成了图像上传，请点击屏幕右上方的Save（保存）按钮来保存。

请注意当用户尝试离开屏幕时，他们会被提示保存或放弃更改，就如你所期望的一样。

添加公司徽标

最后，让我们添加公司徽标到移动客户端中，这样看起来既专业，也突出了公司品牌。在Solution Explorer（解决方案资源管理器）中切换到文件视图。然后展开 MobileClient 项目节点，查看Content/Images项下的东西，你将看到一个user-logo.png 文件。只需将该文件替换为你想要的徽标就好了。

你也可以替换user-splash-screen.png，从而在加载应用程序时显示不同的图像。现在当我们运行该应用程序时，我们将在Home屏幕的左上角看到一个Contoso Construction图标。

部署到 Azure 网站

既然我们已经有一个 HTML 客户端应用程序了，我们可以在3 分钟内将其部署到 Azure 网站，正如我在这里所介绍：

几分钟内轻松将你的 LightSwitch 应用程序部署到 Azure 网站

我还鼓励你从头到尾浏览 HTML客户端教程来查看关于如何端到端地构建一个HTML配套客户端 并 将它部署到 Azure上。一旦应用程序被部署到互联网上，建筑人员就可以在其智能手机和平板电脑上使用HTML 客户端应用程序。

总结

正如你所看到的 ，LightSwitch 使得构建 HTML 客户端变得超级简单和快速。你只需要知道一点点 HTML5 & JavaScript 知识来像我们一样自定义UI。LightSwitch 一直专注于能让开发人员编写提供了商务值（自定义控件，商务规则）的代码，而不用担心所有管道（如数据访问，服务实现等）。添加了 HTML 客户端后仍是如此。

尝试一下 并让我们知道你的想法。

希望大家喜欢 ！

Comments

• Anonymous
  November 28, 2012
  惨死了， LightSwitch V2做出来的东西客户接受不了性能，今天客户决定停用LightSwitch based ERP 对机器要求太高， 双核是最起码的要求了，否则性能一塌糊涂。  这样的产品没发用， 建议先LS Team先把性能问题重视一下， 至少要给出一个工作站机器标准对不对， 你怎么对得起使用你们这个产品的开发人员呢？