Hey All,

I wanted to continue making some improvements to the OData Application we started in my last post OData Apps in LightSwitch, Part 1 (which also has the sample project uploaded in VB.NET now).

At the end of the last post we had: attached to a public OData feed and pulled in data for the DC Metro, we showed off some new data types, and we utilized caching on our computed fields to improve performance.  We also added queries to narrow down our data.

There are still a few things we should wrap up on before finishing up:

1. Add some automatic refreshing to our Arrivals screen
2. Customize the “Stops” screen so that it can provide us with a map of the Stops location
3. Hook up the Incidents entity so that we can pull in data regarding all the busted escalators (and DC has a lot of them)

Let’s kick this off first by adding some automatic refreshing to our Arrivals List and Details screen.

Adding Auto Refresh

We should have an Arrivals screen that looks something like this:

This data is updated in real time, but our screen is not updated real time.  It’d be nice to not have to hit the “refresh” button every time we want to see new train information.

We can add our own Auto Refresh functionality pretty easily as you will see.

1. Open up the Arrivals screen in the screen designer (should be called MetroByArrivalTimeListDetail)
2. Right click the screen in the Solution Explorer, and select select “View Screen Code”
3. We should now be in the code editor
4. Add a using statement for the System.Threading since we will need to use some classes from that namespace
5. Copy and paste the below code into your screen’s class

Let’s go through what we’re doing with this code.

When our Arrival List and Details screen is created for the first time the Created() method gets invoked.  Inside of this method we start a Timer.  When we construct the Timer object we pass in a TimerCallBack object which specifies the method to be invoked by the timer – in this case the method is “MyCallBack”.  The MyCallback method does the actual call to “Refresh” the screen.  Keep in mind that we have to switch to the logic dispatcher before we invoke the Refresh() method.  This is because Refresh() can only be invoked from the logic dispatcher, so we are simply making sure here that we are indeed on the logic dispatcher by doing a this.Details.Dispatcher.BeginInvoke() call.

Our Timer is set to be invoked after 120,000 milliseconds (which is = 2 minutes).  And then will be invoked again every 2 minutes after that, for as long as this screen is open.  When the screen is closed we will invoke the Closing() method which will make sure we are cleaning up after ourselves and will dispose of our object.

If you F5 now, open up the Arrivals List and Details screen and wait 2 minutes you will see the auto refresh in action.

Adding Bing Maps

For our next trick we are going to do something with the latitude and longitude properties that are displayed on the Stops List and Details screen.  We can beautify this a bit and show a map instead.

Beth Massi has an awesome demo of her own on consuming OData, using the Bing Maps extension, and a dozen other things.  She also reminds us that if we are going to be using Bing Maps in our project we need to get a Bing Maps Key first.  As Beth says:

Getting the key is a free and straightforward process you can complete by following these steps:

• Go to the Bing Maps Account Center at https://www.bingmapsportal.com.
• Click Sign In, to sign in using your Windows Live ID credentials.
• If you haven’t got an account, you will be prompted to create one.
• Enter the requested information and then click Save.
• Click the "Create or View Keys" link on the left navigation bar.
• Fill in the requested information and click "Create Key" to generate a Bing Maps Key.

Hang onto your Bing Maps Key, we’ll use it later. 

The Bing Maps extension is a VSIX which you can find in the zip file here.

Double click the VSIX file after you download the zip file to install the extension.  After installing the VSIX open up the Properties designer for our application and go to the “Extensions” tab.  We need to enable the Bing Maps extension now like this:

Let’s go back to our Stops entity now in the entitiy designer.

Add a new string property to the Stops entity which will be a computed property.  Call it “Location”.

The Stops entity should look something like this now:

In the Properties for Location, click the “Edit Method” button.  We should now be in the generated computed property method.  Copy the below code into the method:

In this method we are setting up our Location computed property so that it’s value is the Latitude and Longitude coordinates of our Metro stop.  The value has to be Latitude followed by Longitude (if you invert it and make it Longitude followed by Latitude you will end up in Antarctica and will completely miss your train).

Now open up our StopsDCMetroListDetail screen.  We’ll add in the Location property now to this screen.  (I dragged and dropped it onto the screen). And then click on the drop down arrow for the property and switch it to “Bing Map Control”. 

On the property sheet for the Location field you should see an option for the Bing Maps Keys. You’ll need to paste in the value here that you got from the http://www.bingmapsportal.com site.

At this point we should be ready to F5.

Check it out

We should now have an Arrivals List and Details screen that auto refreshes every couple minutes, and a Stops List and Details screen that shows us a map of where our Metro stop is located.

Our Stops List and Details screen now:

I still want to pull in information for the “Incidents” entity so that we can keep track of all the busted escalators.

To do this will involve a blog post just by itself, since we will need to do some low level technical things to pull in all that information.  But after we do that I think we’ll be able to navigate the DC Metro system with confidence. 

Thanks for reading and let me know if you have any questions.

– Matt Sampson