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

In the first part we have used Visual Studio 2010 LightSwitch to create a database and a user interface to select, add, edit and delete data without writing a single line of code. 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.

image_thumb[36]

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

image_thumb[37]

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.

image_thumb[38]

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.

image_thumb[39]

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

image_thumb[40]

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 center & 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:

image_thumb[41]

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”

image_thumb[42]

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:

image_thumb[43]

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

image_thumb[44]

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 center 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.

image_thumb[45]

Done!

image_thumb[46]

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

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