结束 Visual Studio LightSwitch 2013 HTML5应用程序

分享于 

23分钟阅读

Web开发

  繁體

从这里下载项目的费用: http://code.msdn.microsoft.com/vstudio/An-End-To-End-Visual-ef8d9a61

实时演示:https://endtoendexample.lightswitchhelpwebsite.com/Client/default.htm ( 使用你的用户名和密码 http://LightSwitchHelpWebsite.com )

注意:你可以看到有关在以下位置创建这里应用程序的报告的文章:使用 ActiveReports (。使用参数和内部数据) 命令创建一个LightSwitch报告。

在本文中,我们将以 LightSwitch 为代价创建一个end-to-end的HTML应用程序。 目的是演示LightSwitch如何让你创建专业的商业应用程序,让开发者每天去创建一个专业的商业应用程序。 你可以在一个小时内创建这样的应用。

你可以在以下位置下载 : 你必须为 Visual Studio 2013 - 2014年03月 更新安装http://www.microsoft.com/visualstudio/en-us/lightswitch ( 或者更高) Office 开发工具工具。

场景

在本示例中,我们将负责生成满足订单跟踪系统以下要求的应用程序:

  • 产品
    • 添加产品
    • 编辑产品
  • 订单
    • 添加订单
    • 编辑订单
      • 添加订单详细信息
      • 编辑订单详细信息
      • 删除订单详细信息
    • 删除订单
  • 业务规则
    • 允许当前用户只查看他们的订单
  • 功能
    • 显示用户的订单数量
    • 显示订单的订单详细信息数量

image

应用程序允许你创建一列收费的产品。

image

可以编辑产品

image

可以创建订单

image

一个收费的订单由多个收费的订单细节组成。

image

订单详细由产品组成,从可用的产品列表中选择,并以为单位数量。

创建应用程序

image

打开 Visual Studio 并选择 File,然后项目

image

创建新的应用程序

image

将创建应用程序。

image

应用程序将显示在解决方案资源管理器中。

image

Server项目中,右键单击的数据源文件夹,然后选择添加 table。

image

点击 table NAME 来编辑它。

将 table NAME 更改为

image

AAlso,向 table 添加 ProductName 和 fields。

image

点击强保存按钮保存 table。

image

创建订单 table ( 图像 上面 中的字段)。

image

创建收费的OrderDetail table。

创建关系

你总是希望在表相关时建立关系。 这使得最佳的> LightSwitch应用程序构建。 创建查询时,定义的关系允许你简单地键入一个周期("。") 并从一个实体传递到另一个实体。 这样可以节省大量编码工作并减少编码错误。

当创建用户界面时,定义关系可以节省大量的编码工作,因为 LightSwitch 可以自动 associate associate associate Order订单详细信息与相关的收费。

image

点击 Relationship 按钮创建关系订单细节和Product产品 table 之间的关系。

image

将出现一个框。选择 Product table,然后单击 ok ok ( 确保其他字段 MATCH 显示图像 上面 )。

image

你将看到已经创建了一个关系。 你可以双击双击编辑关系。

image

点击 按钮,并与收费 table。

创建筛选器

我们需要实现的一个特性是只显示用户自己的订单( 并允许管理员查看所有订单)。 我们必须记住 all applications应用程序通过OData公开所有数据,所以我们必须始终在客户端代码( 例如的HTML 或者的Silverlight LightSwitch客户) 中设置服务器端代码的安全性。

image

我们要做的第一件事就是打开安全。

image

接下来,我们打开订单,并选择编写代码,然后 Orders_Filter。

将以下代码用于该方法:


 partial void Orders_Filter(ref Expression<Func<Order, bool>> filter)


{


 // Only show the Orders for the current user


 filter = (x => x.UserName == this.Application.User.Name);


}




访问这里 table的所有数据都将通过这里筛选器。

设置默认值

记住,必须设置与服务器端代码相关的所有内容,使用服务器端代码来设置当前用户的用户名,这样就不能正确设置用户的用户名。

image

打开强订单,并选择编写代码,然后 Orders_Inserting。 将以下代码用于该方法:


 partial void Orders_Inserting(Order entity)


{


 // Set the Username


 entity.UserName = this.Application.User.Name;


}




Orders_Updating 事件执行相同的操作。

稍后,我们还将使用客户端代码设置用户名,但是服务器端代码总是运行并覆盖任何值集客户端。

创建查询

我们需要实现的另一个特性是显示当前用户的订单数量。 我们将进行一个查询,稍后我们会从客户端消费。

image

右键单击 on 订单 table,然后选择添加查询。

image

通过单击标题并编辑该查询,将查询命名为 OrdersForUser。 先保存,然后选择 OrdersForUser PreprocessQuery

将以下代码用于该方法:


 partial void OrdersForUser_PreprocessQuery(ref IQueryable<Order> query)


{


 // Only show the Orders for the current user


 query = query.Where(x => x.UserName == this.Application.User.Name);


}




创建产品的用户界面

image

我们将首先创建一个屏幕,让我们看到的产品

右键单击解决方案资源管理器的客户端节点,并选择添加屏幕。

image

使用产品 table 创建一个收费的普通屏幕集。

image

将创建屏幕。

image

以运行应用程序。

注意:调试时,你将自动以 TestUser TestUser。

image

单击 Add Add按钮添加一个的产品

image

添加产品并单击保存按钮以保存它。

image

的产品将在列表中显示。

点击产品以显示在视图细节屏幕。

image

单击编辑按钮编辑记录。

单击web浏览器按钮返回到上一页。

创建主页面

image

现在,我们将创建收费的主屏幕。

右键点击右键点击 ,然后选择添加屏幕。

image

创建一个名为的新屏幕,使用的订单 table 屏幕数据。

image

当用户点击列表中的时,我们要做的第一件事是打开一个新的屏幕。

Tile列表中单击 Tile,然后在控件的属性中选择 Tap action action action。

image

编辑ItemTap动作对话框打开时,将屏幕连接到一个新的 Edit屏幕。

选择选择现有方法

选择 Orders.editSelected

For导航到,选择 ( 新屏幕。) click ok ok ok ok ok。

image

添加新屏幕 选择订单详细信息和订单 OrderDetails,并单击 ok。

image

我们需要添加一个按钮,以创建一个新的收费订单。

页面打开命令栏并单击Add按钮to创建AddEditOrder页面( 在添加模式)。

image

主屏幕Screen点击,选择 Set Set,这样就成为我们运行应用程序时出现的第一个屏幕。

查看到目前为止的应用。

image

执行应用程序。

image

我们看到我们可以使用下拉菜单导航到的产品页面。

image

单击添加订单按钮以打开添加编辑订单对话框,用户名称将不被填充到( 它也应该是只读的)。

还应该将 Order日期设置为当前日期,作为它的默认值。

image

当我们使用订单详细信息 tab时,我们没有按钮来添加一个收费的订单细节。

关闭网页浏览器并返回的Visual Studio

创建订单详细信息编辑屏幕

image

如果要创建和编辑订单详细信息记录,请打开AddEditOrder屏幕,在订单详细信息( 制表符) select下选择 Command Command。

OrderDetails选择的addAndEditNew方法of的( 新屏幕) Navigate Navigate Navigate Navigate。

image

添加新屏幕对话框显示时,选择OrderDetail细节额外的额外数据,以包括。

image

AddEditOrderDetail屏幕打开时,单击 R Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout delete delete it。

因为我们将在用户进入这个屏幕时设置,所以我们不需要显示 Order的订单。

image

我们将创建一个按钮,允许用户编辑一个收费的订单详细信息。

返回到 AddEditOrder 屏幕。

单击 OrderDetails Tile,在属性中,选择 Item event event event。

ItemTap操作 dialog中,选择 OrderDetails.editSelected and导航到以下位置: 添加编辑顺序详细信息 ( 在上一步中创建的屏幕)。

image

运行应用程序时,我们现在有一个按钮来添加订单细节。

image

我们可以在的产品中点击 icon,以查看列表,以便我们可以选择一个的产品。

image

但是,当我们创建一个收费的订单细节时,我们会看到显示可以被改进。

关闭网页浏览器并返回的Visual Studio

格式顺序详细信息

image

我们返回到 Add Edit Edit,并将订单细节瓷砖列表控件change清单。

image

接下来,我们将按列表的c ontrol控制行的布局控制,以应付收费的自定义控件。

image

自定义控件的属性中,我们选择Edit编辑代码。

我们使用下面的代码:


myapp.AddEditOrder.rows_render = function (element, contentItem) {


 // We need to wait until the Products for the Order Detail are loaded


 // so we create a binding to"value.Product.ProductName"


 // When the data is loaded the binding will be raised


 // We will then have all the data required for our display


 contentItem.dataBind("value.Product.ProductName", function (newValue) {


 // clear the element


 element.innerHTML = "";


 // Create a template


 var itemTemplate = $("<div><div>");


 // Get the Product name and quantity


 var ProductName = contentItem.value.Product.ProductName;


 var ProductQuantity = "";


 if (contentItem.value.Quantity!== undefined) {


 ProductQuantity = ' [' + contentItem.value.Quantity + ']';


 }


 // Create the final display


 var FinalName = $("<h2>").text(ProductName + ProductQuantity);


 // Complete the template


 FinalName.appendTo($(itemTemplate));


 itemTemplate.appendTo($(element));


 });


};



( 注:这里代码使用承诺,以获得有关承诺的详细信息,请参阅:在 Visual-Studio-LightSwitch中使用 promise。 另外,请参见:在 Visual-Studio-LightSwitch中编写实现绑定 Pattern的JavaScript

image

运行应用程序时,输出按照我们希望的格式进行格式化。

.所定义的内容类型的类名

image

如果我们运行应用程序,并单击添加订单按钮。

image

。尝试创建一个收费的订单,它将不会保存。

我们丢失了的用户名。 为了让用户使用当前用户,我们已经添加了代码,但是由于我们使它成为必需的字段,它必须仍然提供。 we用户可以用文本框 ,允许用户输入它,但是我们可以使用 ServerApplicationContext 自动插入客户端端。

请参见以下文章中的分步教程: 检索LightSwitch客户端中的当前用户。

使用服务器应用程序上下文

现在我们将创建一个文件处理程序,它使用服务器应用程序上下文 API 检索当前登录的用户用户名 然后,我们将从客户端的代码调用该处理程序,以填充屏幕上的值。

image

右键单击服务器项目,并选择添加然后文件夹。

创建一个名为 Web的文件夹。

image

右键单击网站 ,然后选择添加 new Item。

image

创建一个名为 GetUserName.ashx的新的通用处理器。

注意:注意:必须从头创建文件,以便向项目添加正确的引用。 如果只复制和粘贴文件,或者将文件拖放到项目中,它将无法工作。)

对 file: 使用以下代码


using System;


using System.Collections.Generic;


using System.Linq;


using System.Web;



namespace LightSwitchApplication.Web


{


 public class GetUserName : IHttpHandler


 {


 public void ProcessRequest(HttpContext context)


 {


 using (var serverContext = ServerApplicationContext.CreateContext())


 {


 context.Response.ContentType = "text/plain";


 context.Response.Write(serverContext.Application.User.Name);


 }


 }


 public bool IsReusable


 {


 get


 {


 return false;


 }


 }


 }


}



image

按顺序打开 table,选择 HTML Client Client,Write编写代码,然后创建 method方法。

将以下代码用于该方法:


myapp.Order.created = function (entity) {


 // Set the default date for the Order


 entity.OrderDate = new Date();



 // Using a Promise object we can call the CallGetUserName function


 msls.promiseOperation(CallGetUserName).then(function PromiseSuccess(PromiseResult) {


 // Set the result of the CallGetUserName function to the 


 // UserName of the entity


 entity.UserName = PromiseResult;


 });


};



// This function will be wrapped in a Promise object


function CallGetUserName(operation) {


 $.ajax({


 type: 'post',


 data: {},


 url: '../web/GetUserName.ashx',


 success: operation.code(function AjaxSuccess(AjaxResult) {


 operation.complete(AjaxResult);


 })


 });


}



注意: 在 Visual-Studio 中使用承诺,以获得更多关于使用 msls.promiseOperation的更多信息。

image

最后,我们打开的AddEditOrder屏幕,并将用户姓名 control控件从一个的文本框改为的文本标签。

image

运行应用程序时,创建新记录时将设置用户名称和。

你现在可以创建和保存记录。

调用自定义查询

接下来,我们将调用先前创建的查询,以便显示当前用户的订单的数量。

image

打开主屏幕,选择添加数据项,并创建一个Integer的整数属性。

image

将属性从视图模型拖放到屏幕布局。

image

属性中,使标签的左对齐为磅。

image

要设置属性的值,请选择编写代码,然后选择创建的method方法。

使用下面的代码:





myapp.Main.created = function (screen) {


 myapp.activeDataWorkspace.ApplicationData.OrdersForUser().execute().then(function (results) {


 var TotalCountOfOrders = CountOrders(results);


 screen.TotalOrdersForCurrentUser = TotalCountOfOrders.toString();


 });


};



function CountOrders(Orders) {


 var TotalOrders = 0;


 var orders = Orders.results;


 orders.forEach(function (order) {


 TotalOrders = TotalOrders + 1;


 });


 return TotalOrders;


}



image

在运行应用程序时,我们看到了订单的计数。

调用自定义JavaScript查询

image

现在,我们希望显示在主页上显示订单时相关的订单详细信息的数目。

首先,我们打开的主要页面,以为单位,以为单位的用户名为,以的瓦片列表。

image

向列表中添加 Id 字段。

image

将控件更改为自定义控件

将以下代码用于控件的呈现 方法:


myapp.Main.Id_render = function (element, contentItem) {


 // Get the current OrderId


 var OrderId = contentItem.value;


 var Int32 = ':Int32';


 // Get all the OrderDetails associated with the current Order


 var filter = '(Order/Id eq ' + msls._toODataString(OrderId, Int32) + ')';


 msls.showProgress(myapp.activeDataWorkspace.ApplicationData.OrderDetails


. filter(filter)


. execute()


. then(function (result) {


 // Loop through each record in the result


 var index = 0;


 var Entities = result.results;


 Entities.forEach(function (entity) {


 // Count the Order Details


 index = index + 1;


 })


 // Set the final output


 var NumberOfOrderDetails = $('<label class=msls-label-text> Number of Order Details: ' + index + '</label>');


 NumberOfOrderDetails.appendTo($(element));


 }))


};



image

运行应用程序时,我们会看到收费的订单详细信息记录的数量。

但是,我们现在注意到,在页面刷新之前,页上的总数不会显示正确的金额。 我们可以自动刷新页面。

使用自定义按钮自动刷新页面

image

We Main Main Main Main Tile Tile Tile Tile event event event event event event event custom custom custom custom custom custom custom custom。

image

方法将显示在屏幕设计器左侧的视图模型中。

右键单击右键单击并选择编辑执行代码

将以下代码用于该方法:


myapp.Main.Orders_ItemTap_execute = function (screen) {


 myapp.showAddEditOrder(null, {


 beforeShown: function (addEditOrderScreen) {


 // Set the Order on the AddEditOrder screen


 // to the selected Order on the Main screen


 addEditOrderScreen.Order = screen.Orders.selectedItem;


 },


 afterClosed: function (addEditScreen, navigationAction) {


 // If the user commits the change,


 // update the selected order on the Main screen


 if (navigationAction === msls.NavigateBackAction.commit) {


 // *****************************************


 // Refresh the Orders


 screen.Orders.load();


 }


 }


 });


};



image

编辑记录后,将自动更新总计。

删除记录

image

命令栏中打开添加编辑订单细节屏幕并添加按钮。

为按钮制作一个的Delete method。

image

右键单击视图模型中的删除method方法,并选择 Edit。

将以下代码用于该方法:





myapp.AddEditOrderDetail.Delete_execute = function (screen) {


 screen.OrderDetail.deleteEntity();


 return myapp.commitChanges().then(null, function fail(e) {


 myapp.cancelChanges();


 throw e;


 });


};



image

当编辑的订单细节 Delete Delete按钮 now。

image

你必须单击 Add Add Edit Edit page以提交变更。

我们还可以使用以下代码向添加编辑订单 screen添加一个收费的Delete button


myapp.AddEditOrder.Delete_execute = function (screen) {


 screen.Order.deleteEntity();


 myapp.commitChanges().then(null, function fail(e) {


 msls.showMessageBox(e.message, {


 title: "Error",


 buttons: msls.MessageBoxButtons.ok


 }).then(function (result) {


 if (result === msls.MessageBoxResult.ok) {


 // Discard Changes


 screen.details.dataWorkspace.ApplicationData


. details.discardChanges();


 }


 });


 });


};



image

如果我们尝试使用价格为的订单,那么你会注意到,if订单Detail仍然是收费的Detail records记录。

image

因为我们在早期表之间创建的关系设置为不允许删除有关联的记录,因此将引发错误,这将引发错误。

先删除所有的订单细节,然后你就可以 delete 订单。

LightSwitch帮助网站文章LightSwitch团队HTML和JavaScript文章

相关文章