65.9K
CodeProject 正在变化。 阅读更多。
Home

Visual Studio LightSwitch 初学者指南

2010年10月20日

CPOL

8分钟阅读

viewsIcon

177766

在本文中,我将通过一个示例向您展示如何开始使用 Visual Studio LightSwitch。

引言

Visual Studio LightSwitch 是一款使用 Visual Studio IDE 构建数据驱动的 Silverlight 应用程序的新工具。它可以在不编写任何代码的情况下自动生成数据源的用户界面。您也可以编写少量代码来满足您的需求。最近,我花了一些时间探索 Visual Studio LightSwitch。我用很短的时间(无需任何 XAML 或 C# 代码)创建了一个小型数据库应用程序,其中包含适当的数据插入 UI。在本文中,我将通过一个小应用程序来指导您理解它。该主题将定期发布一系列文章。阅读完整文章,了解如何使用 Visual Studio LightSwitch 创建 Silverlight 数据驱动应用程序。

设置 LightSwitch 环境

Microsoft Visual Studio LightSwitch Beta 1 是一款灵活的业务应用程序开发工具,它使所有技能水平的开发人员都能快速构建和部署专业质量的桌面和 Web 业务应用程序。要开始 LightSwitch 应用程序开发,您需要在开发计算机上安装 Visual Studio LightSwitch。为此,请按照以下步骤操作:

  • 安装 Visual Studio 2010
  • 安装 Visual Studio LightSwitch

LightSwitch 安装程序将逐个在您的 PC 上安装所有其他组件,包括 SQL Express、Silverlight 4、LightSwitch Beta 服务器等。您可以从此处下载 LightSwitch Beta 1:Microsoft 下载中心 (Visual Studio LightSwitch Beta 1)

创建 LightSwitch 项目

安装 Visual Studio LightSwitch 后,运行该产品以创建新项目。转到“文件”–>“新建”–>“项目”或按 Ctrl + Shift + N 打开“新建项目”。从左侧面板选择“LightSwitch”。在右侧窗格中,它将筛选出 LightSwitch 项目模板。这包括 VB 和 C# 类型。选择您相应的类型。这里我将使用 C# 版本。

image

在上面的对话框窗口中,输入项目名称,选择项目的合适位置,然后点击“确定”。这将通过 Visual Studio 2010 IDE 为您创建空白的 LightSwitch 项目。项目创建需要一些时间,请耐心等待。

创建数据库表

IDE 创建项目后,将打开以下屏幕:

image

您可以看到,UI 中有两个选项。您可以为应用程序创建一个新表,也可以附加外部数据库。如果您打开解决方案资源管理器,您会发现项目是完全空的。它只有两个文件夹,分别名为“*数据源*”和“*屏幕*”。“*数据源*”存储应用程序数据,即数据库表。另一方面,“*屏幕*”文件夹存储您创建的 UI 屏幕。我将在本教程后面详细介绍它们。让我们为我们的应用程序创建一个新的。点击“创建新表”继续。这将在您的桌面上显示以下屏幕:

image

在上面的页面中,您可以像在 SQL Server 中创建新表一样设计您的表结构。每个表都有一个分配给该表的“Id”,类型为“Int32”& 它是该表的主键。为表添加一些额外的列。

image

在上面的快照中,您可以看到 LightSwitch 应用程序中有几种可用的列类型(数据类型)。对于我们的示例应用程序,我们将创建 4 个额外的列,分别名为“FirstName (String)”、“LastName (String)”、“Age (Int16)”和“Marks (Decimal)”。将表的名称从“Table1Item”更改为“StudentTable”。保存表时将使用此名称。现在保存表。如果您想稍后更改表名,只需重命名表标题并保存即可。这将自动更新表名。

image

请确保将所有字段设置为“必需”字段。这将有助于验证数据。我稍后会向您展示。

创建数据录入屏幕

结构化好数据库表列后,您需要为应用程序创建 UI 屏幕以插入记录。点击顶部面板中的“屏幕…”按钮,如下图所示:

image

这将打开“添加新屏幕”对话框窗口。从屏幕模板中选择“新数据屏幕”,在右侧面板中提供一个屏幕名称,并从下拉列表中选择数据库表作为屏幕数据。

image

点击“确定”继续。这将为您的应用程序创建一个新的 UI 屏幕,供最终用户插入新数据记录。现在,在解决方案资源管理器中,您可以看到“数据源”文件夹中有一个名为“ApplicationData”的数据库,其中包含一个名为“StudentTables”的表。在“*屏幕*”文件夹中,您可以找到最近创建的数据录入屏幕,名为“CreateNewStudentTable”。您可以在下面的屏幕中更改 UI 的设计:

image

您可以添加或删除新字段或控件。您还可以重新排列 UI 中的控件。对于我们的第一个示例应用程序,我们将使用默认布局控件。

实际应用演示

太棒了!我们的应用程序已准备就绪。我们将能够从应用程序中向数据库表插入新记录。无需编写一行代码。什么?您不同意?让我们按 F5 运行应用程序。这将生成您的解决方案。编译解决方案需要一些时间。成功生成后,它将在您的桌面上打开以下 UI:

image

这是一个 Silverlight OOB 应用程序。如果您想确认,请右键单击应用程序,您将看到 Silverlight 上下文菜单弹出。天啊!!!我们什么都没做就设计了上面的 UI!Visual Studio LightSwitch 自动为您创建了屏幕,并带有“保存”和“刷新”按钮。您可以看到屏幕左侧有一个可折叠的“菜单”面板。在右侧,您将看到一个表格面板,其中包含一些标签和文本框,这些将是向您的应用程序数据库插入数据所必需的。在屏幕的右上角,您将看到一个“自定义屏幕”按钮。单击此按钮后,将弹出另一个子窗口,供您在运行时自定义应用程序屏幕。部署应用程序后,此按钮将不再可见。我们将在另一篇文章中介绍它们。

字段验证

正如我之前告诉您的,我们的应用程序已准备就绪。那么,如何为我们的应用程序编写一些简单的验证呢?等等,您不必担心。LightSwitch 会在内部为您处理。让我们来演示一下。在表单面板中,插入一些数据。我们将故意在“Age”字段中写入无效数据。我们将在年龄字段中输入一些文本,而不是年龄。如果您按 Tab 键或点击其他地方(失去焦点时),它将进行验证并显示屏幕上的错误。

image

您可以看到屏幕上出现验证错误弹出窗口,如下所示:

image

现在为所有字段输入正确的值,然后单击“保存”。这将正确保存记录。

更多关于保存

在输入框中输入正确的值后,单击“保存”以存储记录。

image

这将保存记录并在 UI 中添加一个名为“Id”的字段。Id 的值为1(一),因为这是我们的第一条记录,并且随着我们添加更多记录,它会以1递增。

image

要添加更多记录,请关闭当前选项卡,然后从左侧面板点击“CreateNewStudentTable”菜单项。

image

现在输入一些记录并点击“保存”按钮。您将看到Id在保存新记录时会自动以1递增。

image

如果您有任何未保存的记录并想关闭选项卡或添加新记录,它将打开一个消息对话框警告有关未保存的更改。它会要求您在继续之前保存更改。

image

单击“保存”将未保存的记录保存到数据库。如果您不想保存记录,请单击“丢弃”。单击“取消”停留在同一页面。

自定义屏幕

如果您想在运行时更改 UI,请单击应用程序窗口右上角的“自定义屏幕”按钮。请记住,部署应用程序后,此按钮将不可见。单击该按钮后,它将弹出自定义屏幕。在这里,您可以更改屏幕布局,插入一些新字段或删除已有的内容。目前,我们不更改布局或控件。我将在另一篇文章中介绍它们。

image

在这里,我们将更改新学生菜单项的显示名称。选择屏幕项的顶级节点,并在属性面板中,将“显示名称”从默认值更改为“新学生”。现在保存设置并重新启动应用程序以使更改生效。现在运行应用程序,您将看到菜单项的显示名称已更改为您输入的值,即“新学生”。这比默认文本更有意义。

image

如果您想在 Visual Studio IDE 中执行相同的操作,请转到下图所示的属性面板。找到“显示名称”属性并将显示名称更改为您自己的有意义的名称。运行应用程序以查看其效果。

image

您还可以从属性面板更改许多其他属性。

结束语

哦,使用 Visual Studio LightSwitch 创建数据驱动的 Silverlight OOB 应用程序太容易了。无需编写 XAML 或 C# 代码即可在 Silverlight 中创建如此专业的应用程序。希望本文能帮助您了解 Visual Studio LightSwitch,以便在不编写任何 C# 代码或 XAML 代码的情况下创建简单的数据录入应用程序。在接下来的几篇文章中,我将讨论更多关于其他屏幕的内容。我认为您很享受这篇文章,因此请提供您对此文章的反馈。

© . All rights reserved.