LightSwitch Beta1 Now Available, Building Your First App

Introduction

When we introduced LightSwitch earlier this month we promised a broadly available beta of the product on 8/23.  I’m happy to announce that LightSwitch Beta 1 is now available for download.  I’ve included a detailed walk through (including setup instructions) to help you get your first LightSwitch application up and running.  Before we do that, I want to answer a few of the most common questions I’ve been asked about the product.

Who Should Use LightSwitch?

LightSwitch is primarily targeted at developers who need to rapidly product business applications.  It is part of the Visual Studio family and when you get into writing code you are in the VS IDE.  At the same time we have found that most line of business applications follow a standard pattern (see Architecture below) and LightSwitch is optimized for helping you leverage those patterns.

Access

There have been a lot of questions about how LightSwitch relates to Microsoft Access.  Microsoft Access is for business end users who want to report, track, and share information across groups either from their desktop or, if desired, SharePoint.  LightSwitch is part of the Visual Studio family and is primarily targeted at developers; it is not an Access replacement.  One of the key differences you will run into is when you start to work on your coding assets.  LightSwitch uses the full Visual Studio shell and editor and gives you direct access to the .NET Framework.  Note that for Beta 1 LightSwitch does not yet attach to Access database files but this feature will be added before the product ships.

Architecture

Our goal with LightSwitch is to help you rapidly produce line of business applications by optimizing for the most common application patterns (data + screens + code).  LightSwitch allows you to create desktop applications (the default) or browser applications.  The applications you produce follow a classic three-tier architecture and are built on top of .NET (Entities, WCF RIA Services), Silverlight, ASP.NET, with access to multiple sources of data like SQL Server and SharePoint:

Limitations

Our architectural goal is to follow best practices for three-tier business applications.  The architectural blog series outlines the approach.  One piece of feedback we’d like to hear on the beta is any place where you have feedback on our design goals or where you’ve found the actual product does not live up to the goals.  There are several things that we are not trying to do with LightSwitch.  For example because the architecture is more prescriptive, we don’t include the ability to create your own custom work flows, web services, or other advanced features (you can, of course, build all of these with Visual Studio Pro or above).  Also while you can open LightSwitch applications in Visual Studio Pro (and above), you don’t leave the LightSwitch architecture or tools behind. Instead you use VS Pro to implement extensibility points (like domain types, shells, and controls) which can then be used by the LightSwitch tooling.  Beyond that you have access to full .NET and you can make some basic XAML edits to customize screens.  In general the more you are able to stick with the core architecture the easier it will be to maintain your application.

Growing Up Applications

Many posts for my introduction blog expressed concerns about the ability to upgrade applications.  There are a few things we are trying to do with LightSwitch to make this easier to accomplish.  First and foremost, the architecture is based on the same technology you are using for a custom built business application.  That means it is designed to scale from the start.  Second, the tool is designed to help you build good data and screens using smart defaults and removing the need for over customization.  Third, extensibility points are clean and separated from the basic requirements of application building.  So for example if you are using advanced controls from a vendor today, you can expect to see the same professional quality extensibility solutions offered for LightSwitch in the future.  Now all that said we cannot prevent someone from opening up an editor and writing bad code.  But then again bad code is written all the time today and LightSwitch is not unique in its ability to provide flexibility :-)  If you have concerns about this one I’d be very interested in your (concrete) feedback on the beta itself and places where you think we could be doing more to make things successful.

You may find the following links useful as you dig further into LightSwitch.

Now on to the tutorial.  For the rest of this post we will build an application from scratch.

Part 1:  Installation

There are two installation options available, a web installer and a DVD ISO image:

Visual Studio LightSwitch, Beta 1 (x86) - DVD (English) ISO image which can be burned to a disc and used by multiple users (or mounted using a utility).
Visual Studio LightSwitch, Web Install Beta 1 (x86) - (English) Web installer will download all components incrementally and install them on a single machine.

Unless you plan to take the bits with you or hand around a DVD to co-workers, I recommend using the web installer which will lower your bandwidth requirements and eliminate the need to burn a DVD or mount an ISO.

SNAGHTML2ccc42b5

A goal of LightSwitch is to remove a lot need for configuration, so all you really have to do is click “Install Now” to get going.  After all components are installed, you can simply click the [Run] button:

SNAGHTML2d1ed111

Note that if you had VS2010 already installed, then you will find the new LightSwitch templates in your installation.

Part 2:  Creating a New Project

When we ship software at Microsoft, we get a new sticker for our “Ship It” plaques (I have filled 3 plaques with stickers dating back to ~93 when the program started).  For this application, I want to build out a simple application which will track the employees who worked on our product as well as the versions of the products we are shipping.  In a future tutorial we can also keep a SharePoint list of people’s t-shirt sizes allowing them to fill out their own data.  That way when we ship a new product, we can add people into the list and order t-shirts for the ship party.  This is an example of a simple application that you generally wouldn’t spend IT budget on to produce.  But it is also very easy to crank out and will demonstrate the LightSwitch concepts for this tutorial.

To get started, choose File, New Project.  If you installed VS2010, you will need to select the LightSwitch templates:

SNAGHTML2de11c76

You can choose from Visual Basic or C#.  I’m going to pick VB and call the application “LightSwitchDemo”.  Then hit [OK].  After a few moments your new project will come up and we can start adding data.

Step 3:  Layout our Data

To get started we need to track the employees.  Because working with data is such a basic operation, the initial designer screen gives you those options right away.  We’ll get started by clicking on “Create new table”:

SNAGHTML2eb2d1c4

This will bring up a default table designer.  Start by changing the name of the table to ‘Employee’, which you can do by simply typing in the title bar:

image

Next edit the fields for the table to store the typical data about an employee.  Note the usage of domain types like EmailAddress and PhoneNumber which will give us built-in validation logic and some additional editing help on the screens we create in a later step.

image

Next we will need a table that tracks the software projects I could get a Ship It sticker for.  To get started, right click the “Data Sources” item in the Solution Explorer and choose Add Table:

image

Edit the table name to ‘Project’ and add new columns to track the project title and ship date:

image

At this point we need to create some screens to allow us to edit the table data.

Step 4:  Creating Screens

The most common activities for business applications are laying out your data and creating screens to work with that data.  In this step we will create a couple of screens to allow us to edit the table data.  To start, right click the Screens folder in the Solution Explorer and choose Add Screen:

image

There are a very common set of screen patterns for working with data and LightSwitch includes those default patterns by default.  Screen templates are also an extensibility point for LightSwitch, so you should expect Visual Studio partners to add new patterns in the future (or you can create your own with Visual Studio Professional). 

For our application let’s create a “New Data Screen” so we can edit our employee list.  On the Add New Screen dialog, select “New Data Screen” then select Employee from the Screen Data combo box:

SNAGHTML2ec2caa3

Notice that as you select the Employee table the default Screen Name updates itself to give you a reasonably unique screen name.  You can always choose to update this name field yourself if you have your own naming pattern you want to follow.  Once you have made the changes, click [OK].

SNAGHTML2ec467bd

The screen editor now appears.  We’ll look at this designer in a future post.  For now let’s just hit F5 (or Debug, Start Debugging from the menu).  This will kick off a build of the application and start the running app:

SNAGHTML2ec8ebca

By default your application will be a Windows desktop application.  Beta 1 includes an Office style chrome with a basic task list and ribbon.  As you saw in the keynote, this application shell is another extension point for LightSwitch and we have Visual Studio partners working on creating new ones.  This means in the future you’ll be able to select from a set of shells to build an application that looks cool (kind of like selecting PowerPoint slide deck templates).

I’ll start by adding myself to the database.  When done, just click the Save ribbon button:

SNAGHTML2ecbffd7

After the record is saved, it is given an Id automatically and the Save ribbon item is grayed out (there is nothing to save).  Go ahead and add a few more records for people in your team and then close the application.

Our only screen makes it easy to create new data, but it is not designed to allow us to view all of the employees or search for them.  Let’s add a screen for that as well.  Right click the Screens folder and choose Add Screen:

SNAGHTML2ed80775

Select the “Search Data Screen” template and then select the ‘Employees’ table from the Screen Data combo box then hit [OK].  Once again the screen designer will appear.  Let’s just hit F5 again:

SNAGHTML2edae7f4

When you select SearchEmployee from the Tasks list, you will get the list of all the employee data you have entered.  Because we picked the Search template, we have search built into the application by default:

SNAGHTML2edd26d7

Another default feature of the desktop application template is Office integration.  In this case I can click on the Export to Excel link and get my data opened as a spreadsheet:

image

image

So far my application is looking pretty decent and LightSwitch is doing all the work for me.  One annoying behavior we now have though is that by default our app contains the CreateNewEmployee screen which means it is trying to create a new one every time we launch the application.  We won’t be creating an employee that often so let’s remove it from the default Task list.  Right click the project in the Solution Explorer and choose Properties:

image

On the property designer page, select Screen Navigation which will allow us to edit the menu structure for the application:

image

We want to make the SearchEmployee the default start screen which will avoid trying to add a new record every time we execute the application.  To do this, select the SearchEmployee task and hit the up arrow button to move it to the first task.  Then click the [Set] button to make SearchEmployee the startup screen.  Finally you can select CreateNewEmployee and hit the [Clear] button.  When you are done, the designer should look like the following:

image

Now when we execute the application, the employee list comes up first and we do not get a new employee screen unless we explicitly click on that Task.

There’s only one thing I don’t like with my Employee table: I wanted a picture of the employee included.  Shut down the application and let’s go back to the Employees table designer by double clicking it in the Data Sources > ApplicationData folder.  In the designer, let’s add a new column called Picture of type Image:

image

Now Save the table.  We’ll want to be able to edit the picture as well, so double click the SearchEmployee screen.   First expand the DataGridRow | Employee and then click the + Add item:

image

Notice that the list of potential data for the screen now appears including our new Picture column.  Select this column to add it into the screen.  LightSwitch knows the column is of type Image so it picks Image Viewer as the default control automatically. 

image

 

image

Now let’s hit F5 and see what we have done:

image

Now we have a Picture column but we need to add some picture data.  If I click on the email link I get a default editing screen that includes the Picture field.  As you mouse over the image control an upload arrow appears:

image

When you click on the arrow you are given a file browser dialog where you can pick an image to upload.  After you are done you’ll now have a picture in place:

image

Step 5:  Adding More Tables and Relationships

At this point we have an Employee and Project table but we have no way to connect them.  This is a classic many to many relationship which will require a new table to track instances of employees shipping projects.  Once again we will right click the Data Sources folder and choose Add Table:

image

Name the table “ShipIt” by editing the title:

image

Next we need to add a relationship to the Employee table.  Click the “+ Relationship” tool bar button:

image

Using the Add New Relationship dialog is one of those things that reminds me why I like LightSwitch so much:  it’s just easier to use than other complicated referential integrity dialogs.  When the dialog comes up, simply change the To column of the Name row to our target table, Employee:

SNAGHTML2f37afa7

Notice that the dialog now shows you both the relational diagram of many to 1 as well as plain old fashioned text to explain what you just did (priceless).  Having worked on two databases and three database API sets I know how to edit this stuff by hand using SQL syntax, but this is just easier.  Once your edits are complete, hit the [OK] button to save the relationship.  LightSwitch now automatically adds a new column for the relationship and updates the Employee table for the foreign key:

image

Let’s repeat the step again for the Project table by click the +Relationship toolbar button again.  Now change the target Name to Project to establish the relationship:

SNAGHTML2f3d8c5f

Now click [OK] and our many to many relationship has been resolved through the ShipIt table:

image

If you double click the Employee table item on the designer your focus will change to the that table and you can see that the ShipIts column which was added for you:

image

Now let’s add a screen for the Project table so we can add a few projects.  As we did before, let’s right click the Screens folder and add a new screen.  Select the New Data Screen template and change the Screen Data to the table Project, then click [OK]:

SNAGHTML2f44e132

After the screen is created, hit F5 to run the application.  As we did for employees, we can select CreateNewProject from the task list and create new projects:

image

Step 6:  Master Detail Forms

The final step for our application is to add a screen to sign up employees for the projects they have worked on.  Once again right click the Screens folder and choose Add Screen.

SNAGHTML2f5593de

First select the Details Screen template then select the Employee table from the Screen Data list.  Finally check the [x] Employee ShipIts box which will include all of the projects the employee worked on.  Finally click the [OK] button and then hit F5 to see the new screen.  When the list comes up, select the Employee link to get the detailed edit screen:

image

 

Now we get the EmployeeDetail screen for the selected employee.  The screen has both the Employee record (master) as well as the ShiptIt collection list (detail):

image

Now we can start adding new Projects for this employee.  As you put focus in the first line of the grid, you can edit the settings and select a Project using the […] button at the end of the column cell:

image

When you click the button, a Select Project screen comes up where you can search for and select a project.  Notice that we didn’t build this screen; LightSwitch created the screen for us automatically:

image

You can continue to add records as required, the just click the Save ribbon button to commit all of your changes:

image

Summary

In this tutorial we’ve created our first working LightSwitch application completely from scratch.  I have not taken you through the steps to clean up the screen text, however I think you will find this very easy (I gave some examples in the introduction post).  There are a few more features I’d like for this application like binding data from SharePoint and using Office to fill out a t-shirt order for ship gifts.  These can be subjects of future tutorials.  Hopefully you’ll find other ways to enhance the application.

We’d really like your feedback on the beta to help us shape the final product.  Everything is fair game for your feedback.  Here are a few areas to concentrate on:

  • Thoughts on the architectural goals of the applications LightSwitch produces.  Do you like the 3-tier architecture?  Anything we missed?
  • Any comments on how well we have lived up to our goals.  For example I have given feedback that I’d like to see future client aps use less working set by default.  Anything you’d add to that list?
  • How easy is it to use the tool?  Do you have suggestions on things we can make more obvious or less user intensive?
  • How usable are the default applications that are produced?  Would you use them yourself in your department or business?  What would you change?

Enjoy the beta and thank you in advance for your feedback!