开始VS 2013中LightSwitch的第六部分：更多的管理！使用JavaScript和CSS自定义应用程序

  • Article

[原文发表地址]：Beginning LightSwitch in VS 2013 Part 6: More Control! Customizing the app with JavaScript & CSS

[原文发表时间]：2014-01-29 10：15 AM

注释：这是在最受欢迎的一系列开始LightSwitch文章中对Visual Studio 2013的更新。更早的版本请查看：

欢迎进入在Visual Studio 2013系列中开始LightSwitch！的第六部分。在第一至第五部分，我们建立了一个地址簿应用程序并且学习了所有关于一个Visual Studio LightSwitch 应用程序的主要构件块—实体，关系，屏幕，查询和用户权限。如果你忽视了它们，查看：

在这篇文章中我想要谈论的是一些不同的方式，你可以通过添加JavaScript代码和CSS来自定义你的HTML客户端应用程序。

当然你可能在学习，LightSwitch是完全关于快速构建移动商务解决方案--定义自己的数据模型，业务规则和一套内置控件直接创建屏幕。忽略它的所有无聊的管道，因此你可以专注于你应用程序的真正价值。但是LightSwitch也允许各种自定义设置所以你不要抨击那个臭名昭著的“玻璃天花板”。在HTML客户端我们可以利用早已存在的庞大的互联网生态系统，因此添加自定义和找到所需的JavaScript库并将其连接到你的应用程序一样容易。

LightSwitch基于 jQuery 和 jQueryMobile产生单页应用（SPAs）。这些是用于HTML客户端的基本库。LightSwitch接着在msls.js脚本中提供数据/数据绑定和最重要的查询功能。jQueryMobile CSS是用来控制应用程序外观的。

在HTML客户端工程中的这些文件对你是可视的。样式表是位于内容子文件夹中，JavaScript文件是在脚本子文件夹中：

image

关于jQuery及其在LightSwitch HTML客户端的上下文中的语法的一个介绍可查看：

jQuery应用程序定制的介绍

让我们看一下一些有趣的快速自定义HTML客户端的方法。

改变主题

HTML客户端伴随着可用的两个主题框出现，或者根据你的所需完成改变—一个亮的主题和一个暗的主题。默认的，亮主题被应用在新工程中。为了将主题改变成暗主题，在HTML客户端工程中打开default.htm文件然后做如下改变：

 <!-- Change light-theme-2.0.0.css and msls-light-2.0.0.css to dark-theme-2.0.0.css and msls-dark-2.0.0.css respectively to use the dark theme.  Alternatively, you may replace light-theme-2.0.0.css with a custom jQuery Mobile theme. -->
    <link rel="stylesheet" type="text/css" href="Content/dark-theme-2.0.0.css" />
    <link rel="stylesheet" type="text/css" href="Content/msls-dark-2.0.0.css" />

让我们将这一改变应用于地址簿应用程序中，这一程序是在这一系列文章中我们已经建立的。当我们运行我们的程序的时候我们可以看到它是暗主题，它有一个黑色/灰色背景并且有白色的文本和图标。

image

使用主题编辑器

当然我们不是仅限于这样两种主题，我们可以设计我们自己的主题。然而，如果你没有设计本领或你不是CSS奇才，我建议你使用jQueryMobile 主题编辑器 去保存你花大把时间所下载的东西。

为了开始使用主题编辑器头，参考https://jquerymobile.com/themeroller/。为了使它变得容易，你可以引进一个样式设置然后调整所需的元素。因此，在Visual Studio中打开我们正在使用的样式设置/内容/暗主题-2.0.0.css 并且拷贝所有内容到你的剪贴板。使用主题编辑器，选择版本1.3，点击屏幕上方的进入按钮，将内容粘贴在CSS中，再然后点击进入：

image

这将使暗主题加载到设计图面上的样本中。现在你可以通过改变左侧属性栏的属性自定义任意元素。或者，你可以从各种预置主题和颜色中选择并且将它们拖到样板中。

image

当你完成这些，通过点击主题编辑器顶部的下载按钮并且为新主题命名的方式来输出主题。这样将会下载一个ZIP格式的主题（ZIP是包括空白和具有可读性的最小版本）。

解压ZIP内容，在主题文件夹下，拷贝CSS文件（我命名为我的原始主题），在Visual Studio中将其粘贴到其他样式表的内容文件夹。最后打开default.htm文件并且将暗主题替换成我们定义的主题。

 

<link rel="stylesheet" type="text/css" href="Content/orange-theme.css" />

品牌化 

 作为变换主题的扩展，你可能也想要添加你公司或者产品的标识到你的应用程序中。如果你不想深入CSS做到这一点，你可以只是简单地替换存在的图片。当应用程序被下载一个标识将显示出来，另一个则显示于你主屏幕顶部左边。

 仅仅只打开内容\图片文件夹并替换用户标识和用户画面图片。

image

将这些应用于我们的地址簿应用程序给我们一个好的展示：

image

可视的CSS数据指示器

在商业应用中我们经常需要做一些UI验证，比如基于其价值改变数据的颜色。这些要求发生在客户端。LightSwitch让你和屏幕设计器中的控件挂钩以至于你可以根据你的所需去改变控件或是使之完全呈现你自己的设计。

也就是说我们想要根据他们是男性还是女性来改变我们主屏幕上联系人的颜色。我们可以在联系人列表中的行模板使用 _postRender方法做到这一点。打开浏览联系人屏幕，选择联系行布局，然后展开“编写代码”按钮选择_postRender方法。

image

这种方法传递两个参数，element是DOM元素而contentItem是在内容树中屏幕的内容项。contentItem.value是在我们事例中的实体联系。

我们将要用特殊的风格来修饰元素以便于对此元素使用jQuery addClass方法。

image

首先我们创建我们想要的风格。注意在内容文件夹中有一个user-customization.css文件。在这里你可以调整一些常见的风格以及添加自己的风格。让我们添加：

 .male { background-color: blue; }
.female { background-color: purple; }

现在回到_postRender你可以添加代码去查看Gender的值并且应用正确的风格。

 myapp.BrowseContacts.RowTemplate_postRender = function (element, contentItem) {
    // Write code here.
    if (contentItem.value.Gender == "M") {
        $(element).addClass("male");
    } else {
        $(element).addClass("female");
    }    
};

当我们运行它时，我们可以看到我们所正确应用的风格：

image

然而在业务应用中数据往往是变化的J.在这种情况下，联系人的性别可能不会变化，但是当我们进入一个联系人时，我们犯了一个错误怎么办？当数据的值改变时，如果你想要更新视觉样式，你可以用dataBind方法来实现它。

此代码将根据性别的变化来设置要调用的函数。

 myapp.BrowseContacts.RowTemplate_postRender = function (element, contentItem) {
    // Write code here.
    contentItem.dataBind("value.Gender", function ()
    {
        if (contentItem.value.Gender == "M") {
            $(element).addClass("male");
            $(element).removeClass("female");
        } else {
            $(element).addClass("female");
            $(element).removeClass("male");
        }    
    });
};

自定义控件自定义UI界面

为了插入任何你想要的到DOM中，你也可以接收你屏幕上控件的完整呈现。LightSwitch HTML应用程序是基于jQuery 和 jQueryMobile的，在LightSwitch中存在很多的插件可以供你使用。哪些你要使用完全取决于你想要提供给用户什么和你所需要支持的设备。

首先，自定义控件添加到屏幕内容树的所需位置。然后，下拉代码编写按钮并选择 _render方法。举个简单的例子，我们想要添加一些文本到我们联系人列表的浏览联系人屏幕中。首先添加自定义控件：

image

然后在内容项参数中选择你想要添加的数据。默认是整个屏幕，但是你可以选择屏幕中存在的其他数据项。

image

然后选择_render方法并编写你的代码。

image

对于这个简单的例子，让我们输出找到的联系人的数量。因为数据不是同步地被下载，我们需要用数据绑定来再次查看以至于在联系人被加载到屏幕之后我们的代码将被触发。

 myapp.BrowseContacts.Contacts_render = function (element, contentItem) {
    // Instead of Screen, we passed Contacts as the contentItem. 
    var contacts = contentItem.value;

    // Set up the callback function to fire after the data is loaded.
    contentItem.dataBind("value.isLoaded", function ()
    {
        if (contacts.isLoaded) {
            //Create the HTML control
            var template = $("<b> " + contacts.count + " contacts found.</b>");
            //Append it to the DOM
            template.appendTo($(element));
        }
    });   
};

实际上：

image

更多的资源

关于如何实现更高级的控制已经有许多的文章涉及了。我建议你查看以下这些。

当然还有结束了的在Visual Studio 2013系列中开始LightSwitch！感谢阅读并且希望有兴趣使用LightSwitch建立移动 商务应用程序。有关更多的信息，请访问LightSwitch 开发中心 和 LightSwitch 组博客.

希望喜欢！

下载完成的应用程序模板