Switch on the Light – Bing Maps and LightSwitch (Part 1/2)

Introduction

Microsoft Visual Studio LightSwitch has just been released as public beta and it claims to be the “SIMPLEST WAY TO BUILD BUSINESS APPLICATIONS FOR THE DESKTOP, WEB AND CLOUD”. That’s quite a bold statement and it certainly deserves a closer lock. And while we’re at it we will of course have a look at the use of Bing Maps in LightSwitch projects – both for desktop and web applications. Yes, that’s right! At the end of this you will see the Bing Maps Silverlight Control in a desktop application:

image

Prerequisites

You will find the download of LightSwitch here. On MSDN you will also find a couple of “How Do I?” videos, tutorials and a great training kit. I will come back to this training kit a little bit later. If you already have Visual Studio 2010 installed, LightSwitch will snuggle into the existing environment, otherwise it will create a new installation of Visual Studio 2010.

The First Steps

Once you installed LightSwitch you will find a new template for VB.NET and C# development in your Visual Studio:

image

Let’s start our journey by creating a new project. I choose the Visual Basic template but you will find out shortly that it doesn’t really matter because you can do a lot of things without writing any code at all.

Once the project is created the designer prompts you to start off with a data source.

image

We can either create a new table which would then be stored in SQL Server Express or connect to an external database. Let’s go the whole way and create a table. In this table we will be storing address information. We can enter the name of the table in the header and then just add the columns we need:

image

For each of the columns we can set properties such as the

  • data types
  • requirement to enter data
  • a display name that we will see in the UI
  • the visibility in the UI
  • the integration in a full text search that will automatically be available in the UI
  • data validation rules

We can also populate “Choice Lists” with data that will be available throughout the application for use in ComboBoxes. Let’s use a “Choice List” for the column CountryRegion in the table above and also modify the property “Display Name“ as appropriate.

image

Once we’re happy with our table, we right-click in the “Solution Explorer” on “Screens” and select “Add Screen” from the context menu.

image

In the dialog that pops up we can select from various screen-types. We select for this example the “List and Details Screen” and our data set as screen data.

image

Once we click OK we will see the screen in the designer view:

image

We see that the display-names are picked up from the table design and that the wizard also automatically recognized fields with choice lists and created a ComboBox for us.

Let’s it F5 to see what we achieved so far and enter some data:

image

Notice the button at the top-right corner. While the application runs you can switch into the “Customization Mode” and make some changes. Yes, that’s right. To change the design of the screen you don’t even need to stop the application and you can look at all changes in a real-time preview of the screen in the top-right corner.

image

Isn’t that great? Without writing a single line of code we have created a database and a front-end to view, add, edit and delete data.

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s