Switch on the Light - Bing Maps and LightSwitch

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:

01

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:

02

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.

03

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:

04

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.

05

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

06

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.

07

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

08

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:

09

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.

10

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.

The one thing that bothers me for now is that in the summary list on the left half of the screen we only have the data from AddressLine1-field.

11

I would like to have the complete address-string in this summary – partially because it is more informative but also because we will use this as the address-string that we hand over to the Bing Maps Geocoder later. To do this we need to stop the debugger and make some changes in the table itself. We create a new column – let’s call it QueryString – and set the properties

  • is visible on screen: unchecked and
  • is required: unchecked

12

My first thought was to make this a computed column but that half-broke something with the Bing Maps extension that we are going to implement later so we need to make a little detour:

We click on CountryRegion column and select “Write Code” from the menu bar of the designer. From the dropdown list we select the method CountryRegion_Changed.

13

I swear this is the only time during this walk-through that we need to write a line of code J. In the automatically generated method we create the following line of code:

QueryString = AddressLine1 + “, ” + City + “, ” + PostCode + “, ” + CountryRegion

The summary in our list-view is picked up from the column that follows Id so we drag our column QueryString simply to that position.

14

Let’s see the result. As expected we have now the concatenated address-string in the summary on the left-hand side.

15

Integrating Bing Maps

LightSwitch uses extensions in order to add new capabilities. Custom business type extensions such as the Money and Phone Number types are examples of extensions that are included in LightSwitch but we can also create our own extensions and make them available for others to use for example in the Visual Studio Extension Gallery. In order to support this extensibility, the LightSwitch framework leverages the capabilities of the Managed Extensibility Framework (MEF) to expose (and discover) extensibility points .You will find a hands-on lab on how the Bing Maps Silverlight Control is implemented as such a custom extension in the LightSwitch Training Kit.

To develop your own extensions you will additionally need the Visual Studio 2010 Software Development Kit which is available as a free download.

The example in the LightSwitch Training Kit will receive an address-string from a selected item in our list view, geocode the address and centre & zoom the map to this location. The lab is very detailed and hence we won’t go into more depth here. The result of the lab is packed into a Visual Studio extension and can be installed on your development machine.

Note: If your Visual Studio was open during the installation you need to close and restart your Visual Studio.

Once we have installed the package we can enable the extension in the properties of our project:

16

In the screen-designer we can now drag & drop our recently created QueryString column into our details view and simply switch the control type from Text to “Bing Maps Control”

17

In order to use Bing Maps Control we will need a Bing Maps Key and if you don’t have one you should get it straight away in the Bing Maps Portal. The key is then entered in the properties of our QueryString control:

18

And that’s it. Let’s see the result:

19

Whenever, we select an address in the summary view at the left the address-string is send our Bing Maps extension. The Bing Maps extension will than geocode the address and centre and zoom the map.

From the Desktop to the Web

What we have seen so far is all on the desktop and we can package and publish the application for the desktop straight from Visual Studio but what about the web? Well, be prepared for a surprise. It can’t be much simpler than this.

We just go to the project properties, select the “Application Type” tabulator and flick the switch from Desktop to Browser client.

20

Done!

21

As a free bonus we also got full-text search over all columns in the table. It can indeed not be much simpler than this. So let’s go and create some nice Bing Maps extensions for LightSwitch to do even more useful things Smile

 

Share on twitter Share on facebook Share on linkedin Share on linkedin