Heavily Caffeinated

ASP.NET SignalR and LightSwitch (VS 2012 Update 2)!!!

Matt Sampson — Thu, 14 Mar 2013 19:13:00 GMT

Update - I uploaded the code and project to MSDN Code Gallery here: http://code.msdn.microsoft.com/LightSwitch-and-SignalR-4d7ff7a8

SignalR? What is that?

SignalR is described as “Incredibly simple real-time web for .NET”.

It’s a great way for a JavaScript client to call directly into Server side methods, and a great way for the Server to push up updates or notifications to the JavaScript client.

I heard a couple people raving about SignalR recently, and figured it was time to see if we could get LightSwitch and SignalR to meet.

LightSwitch…meet SignalR

We’re going to make a simple LightSwitch (LS) application here. And then we are going to use SignalR to push up some real-time notifications to the LightSwitch HTML Client.

We’ll end up with a LS HTML App that receives a notification every time a new entity is inserted or updated.

This would allow for any user to know when ever data has been changed.

Let’s start out with a simple “Contacts” LS app. Everything here should be pretty basic if you’ve done any LS stuff before.

Create a new project – LightSwitch HTML Application (Visual C#)
Call it - “ContactsSignalR”
Add a table – call it “Contact”
The table should look something like this when you are done:
Now let’s make a simple HTML Browse Screen around the “Contacts” data
In the screen designer, select “Screen | Browse Contacts (Browse Screen)” and set the property “Behavior – ScreenType” to “Edit”. This will enable the “Save” button to show on our screen.
Now let’s add a data item to our screen – so in the Screen Designer click your “Add Data Item…” button
That’ll open up a dialog – let’s call this property “updates” and make sure “Is Required” is unchecked. It should look like this:
Now drag and drop your updates data item onto your screen – put it right below the “Command Bar” so that it looks like:
Select the “updates” control on the screen designer and set the following properties:

Label Position: Hidden
Font Style: Large

We’ll use this control later on to post our “real-time” updates to the screen
Now I’d like to be able to Add and Edit new Contacts entities here, so select the Command bar, right click and say “Add button”
Select Contacts.addAndEditNew and Navigate To: New Screen like this:
This is a easy way to quickly create a new Add/Edit screen for the Contacts entity
Important! - After the screen is created your Screen Designer changes to show the AddEditContact screen. Make sure you double click the “BrowseContacts” screen again to set focus back.
Do the same thing again – add an EditSelected button this time for the existing screen you just made, like this:

Basic App is done. Onto SignalR

At this point, we’ve basically made a simple LS App to add and edit new Contacts.

Now we need to shove in some SignalR. To do that we first need to “NuGet” our projects.

In the Solution Explorer toolbar switch to “File View” like so:
Now right click the HTMLClient project and select Manage NuGet Packages:
Now select Online packages, search on SignalR and install the below entry:
This will add the SignalR JavaScript references to your HTML Client
But we need to add them to the default.htm file as well, so open up that file and these two lines:

The first line is a reference to the SignalR library
The second line is actually a reference to some JavaScript that will be dynamically generated by our SignalR server later on.
Now right click the Server project, and select “Manage NuGet Pacakages…”
This time we want to install the SignalR package for .NET server components:

NuGet is done. Put SignalR code into the Server!

We’ll need to add some Server side code here to start up the SignalR Server Hub. And to allow for the client and the server to talk to each other.

Right click the Server project again and say “Add –> New Item”
Add a Global.asax file to our project – we will need this to put in some custom application start up code
Right click the Server project again and say “Add –> New Item”
This time add a “Web Api Controller” class to our project.

We only do this because it will automatically pull in some dll references for us that we’ll need later.

Open up your Global.asax.cs file and paste in the follow code:

        protected void Application_Start(object sender, EventArgs e)
        {
            var config = new Microsoft.AspNet.SignalR.HubConfiguration
            {
                EnableCrossDomain = true
            };
            RouteTable.Routes.MapHubs(config);

            RouteTable.Routes.MapHttpRoute(
                name: "DefaultApi", routeTemplate: "api/{controller}/id", 
                defaults: new { id = System.Web.Http.RouteParameter.Optional }
            );
        }

This code will get called when our LS app starts. It starts up the SignalR server hub so that the clients can connect to it.
Right click your Server project and add one more file – a class file and call it ContactHub
Past the below code into your class:

namespace LightSwitchApplication
{
    public class ContactHub : Hub
    {
    }
}

All we are doing is creating our own Hub here that we’ll use later to talk to the client from the server.

Put SignalR into the Client!

We need to put some basic JavaScript code into our Browse screen so that it can modify the “updates” label, and so that the Server has a function to call on the Client.

Open up the Browse Contacts screen
Select the Write Code – create method:
This is where we’ll add our basic JavaScript. So copy and paste the below code into the BrowseContacts.js file

/// <reference path="../GeneratedArtifacts/viewModel.js" />
/// <reference path="../Scripts/jquery.signalR-1.0.1.js" />

myapp.BrowseContacts.created = function (screen) {
    // Write code here.
    $(function () {
            
        contact = $.connection.contactHub;
        contact.client.broadcastMessage = function (message) {
            screen.updates = message;
        };     

        $.connection.hub.start()
        .done(function () {
        })
        .fail(function () {
            alert("Could not Connect! - ensure EnableCrossDomain = true");
        });
    });
};

Here’s what this does:

$.connection.contactHub <- This is our connection to the ContactHub we made on our server
contact.client.broadcastMessage <- this is the JavaScript function we are going to invoke from the Server (which we’ll do shortly). This function will set the “updates” screen item with some text.
$.connection.hub.start() – this just “starts” up the connection from the client to the SignalR Hub

Almost done! Let’s have the Server call the Client.

We need one final piece here – call into the JavaScript client every time a Contact is inserted or edited.

So double click the Contact’s entity.
Select Write Code – > Contacts_Inserted
Paste in the below code:

        partial void Contacts_Inserted(Contact entity)
        {
            string message = "A contact for " + entity.FirstName + " " + entity.LastName + " was just created";
            var context = GlobalHost.ConnectionManager.GetHubContext<ContactHub>();
            context.Clients.All.broadcastMessage(message);      
        }

This will call the the “broadcastMessage” JavaScript function we wrote earlier for ALL active LightSwitch clients when a Contact is inserted. When that function is called – the updates label will automatically be updated to show our message.
Do this again for the Contacts_Updated method. So open up the entity again. Select Write Code –> Contacts_Updated.
Paste in the below code:

        partial void Contacts_Updated(Contact entity)
        {
            string message = "A contact for " + entity.FirstName + " " + entity.LastName + " was just updated";
            var context = GlobalHost.ConnectionManager.GetHubContext<ContactHub>();
            context.Clients.All.broadcastMessage(message);
        }

Same thing here as the Inserted method, except it will only be called when a Contact is updated.

That’s it! F5 it and hang on.

F5 the LS app to build it and run it.

A browser should launch.

Go ahead and create a new Contact and Save it. You should see something like this after you save.

This is cool…BUT try this with 2 browsers opened to really blow your mind.

So launch another instance of your web browser.

Copy and paste your http://localhost:NNNN/HTMLClient URL from your first browser into the second browser’s address bar.

Now create another record again. You’ll see this:

Both browsers got updated at the same time!

That’s pretty awesome, IMO.

So awesome, that I had to make a YouTube video for it:

Please feel free to leave any feedback, and I’ll post my app up on Code Gallery for others to check out (will update this once the application is available).

Technorati Tags: SignalR,LightSwitch,Visual Studio

Thanks All!

LightSwitch – 10 Performance Tweaks Anyone Can Do

Matt Sampson — Fri, 28 Dec 2012 19:19:35 GMT

“HOW can I improve performance in my LightSwitch app?” – is a question that pops up in the MSDN Forums frequently enough (like here and here).

I’ve got some basic tips below that show how to make some some simple tweaks to your LightSwitch app that could improve your performance:

1) Non active "tabs"

If you have non active “tabs” on your screen, you should know that they still execute HTTP queries over your network to retrieve data. . One work around for this is to break out your tabs into separate screens.

2) Data columns you don’t care about

IF you have control over the data model, consider breaking out columns that you don't show on the screen into separate tables, and then create a 0..1 relationship with that table. For example, let's say you have a Customers entity that has a picture of the current customer, but you don't show that picture on the screen. That picture data is still going to be requested and thus hurt performance. A way around that would be to refactor the data model and place the picture data into a separate table that is related to customers by a 0..1 relationship.

Reference properties on your entities are another piece of data that can slow down your performance. If you have reference properties on your entity, but you don’t care about them, then consider removing them from your screen

3) Computed Properties and Validators

Avoid performing queries in computed properties and validators. Or consider "persisting" computed properties IF it makes sense (I do just that on my blog here: OData Apps In LightSwitch, Part 1)

4) Editable Grid Screens vs. List and Details

As a general rule, List and Details screens perform better than a Editable Grid screen.

5) A bit more advanced IIS Server tweaks

There are other options that you could consider on the IIS Server (assuming there is one). Enabling dynamic compression could be helpful if you have CPU cycles to spare on the IIS Server, and you suffer from limited available network bandwidth.

Having your data tier machine (for example the SQL Server) and your IIS Server on the same machine, if possible, would obviously reduce network latency issues.

6) Screen methods

If you are doing filtering of data in one of your screen methods, consider doing that on the server tier if possible. That way, by filtering the data on the server side, you can reduce the amount of data that is sent across the network since that additional data that you filtered out won’t get sent over to the client now.

Another one to be careful of is the Screen_InitializeDataWorkspace() method. Keep in mind that any code you run in that method has to complete before the any of the screen queries will be executed. It can be a bit of a bottleneck if used incorrectly.

7) Profiling

Don't be afraid to use profilers to profile your client, and middle tier logic. Use SQL profiler to analyze the queries you application is executing. Use Fiddler to track the number of middle tier requests and the response sizes.

8) Load Testing

Load testing is a great and easy way to get some data on how your LightSwitch application will perform in the real world. Visual Studio Ultimate has some great tools for doing your own load testing (and there are a number of 3rd party tools as well).

9) Giant screens with lots of data

Probably obvious by this time, but keeping your LightSwitch screens small as possible, and not too complex will almost certainly help you avoid many a performance issue.

10) Queries (the messy ones)

Queries can be difficult to get “right” sometimes. They can be messy and just slow everything down. That is a blog post by itself, and fortunately my smart co-worker Beth Massi has already written one - check it out - LightSwitch Tips & Tricks on Query Performance.

That’s it for now. We’ve been working on some awesome stuff here at the Fargo office, and I’m looking forward to blogging on that shortly. But first I’ve got some more testing to do.

Let me know if this helps (or not).

Thanks a lot – Matt Sampson

Finding Your LightSwitch Produced OData Services (Visual Studio 2012)

Matt Sampson — Wed, 13 Jun 2012 18:31:52 GMT

With the latest version of LightSwitch in Visual Studio 2012 you can now consume as well as produce OData services from the data sources managed by the LightSwitch middle-tier. But if we want to interact with the OData services that LightSwitch produces we need to know how to reference them directly.

We’re going to learn how to do this today with a custom Silverlight control for our LightSwitch applications to help us easily view the OData service that LightSwitch produces for each data source on our application.

(If you want some more detailed info on how LightSwitch makes and uses OData services, then John Rivard has a good article on just how LightSwitch uses OData services - LightSwitch Architecture: OData).

Where is my OData Service?

If I make a LightSwitch application with a couple of data sources, like NorthwindData and ApplicationData, and build then we will have two OData services that will be automatically created for us. These OData services will be named: NorthwindData.svc and ApplicationData.svc. This is the important bit - each data source gets its own OData service. The diagram below illustrates this well:

These OData services are used by the LightSwitch client to communicate with the LightSwitch server. But maybe you want to query these OData services directly yourself with your own OData client (like Power Pivot for example), or maybe you’re just curious what these services look like.

If you launch a published LightSwitch web application you will see the url look something like: http://MyServer/MyLightSwitchApplication/. And if you wanted to directly query the OData service for the Northwind data source directly you could just modify the url like so: http://MyServer/MyLightSwitchApplication/NorthwindData.svc/.

As you can see, the format for referencing the OData service is http:// + server name + application name + OData service name:

To know what the OData service name is however, you would need to know the data source names. You probably don’t have this knowledge unless you were the developer of the data model, and even then perhaps you’ve published your LightSwitch application several months ago and now you no longer recall the data source names.

Find it with a custom control

We can simplify finding the LightSwitch produced OData service by creating a custom Silverlight control, adding it to our screen, then clicking a button to launch our OData service.

Our custom Silverlight control will utilize the LightSwitch API to determine what the name of our OData service is, and then it will launch a new browser window with the OData service as the URL.

If you haven’t used custom controls before, it just takes a few steps to add it to your screen.

1) Follow the basic steps over on my Code Gallery post, Custom Silverlight Control to find LightSwitch OData Services, to build the custom Silverlight Control into a .dll that we will use later

2) Create a LightSwitch Web application, add some data and add a screen (I created a table called “MyBook” to the ApplicationData data source)

3) Add a screen

4) Add a custom control to the screen like so:

Step 1 – Select Add –> New Custom Control-

Step 2 – A dialog pops up asking where the custom control is. Click “Add Reference”.

Step 3 – Click the “Browse” button and find the .dll for the custom Silverlight control that you made in the beginning. Hit OK.

Step 4 – Expand the reference that was added to select the actual custom control name. Hit OK.

Step 5 – You can modify the control’s properties to give it a name like “OData Service:” as I did below:

Step 6 – F5 it! You’ll see the control at runtime on your screen. Click the drop down arrow to see a list of your OData services that are available to you.

And viola! A new browser window opens up with your OData service.

Quick look at the code

Let’s take a look at the Silverlight custom control code.

In the constructor code below, which is invoked when the control is created, we are doing a few things:

1) We are looking through the list of Modules available to the client. The one we want specifically is called LightSwitchCommonModule

2) We get all the EntityContainers off of the LightSwitchCommonModule and store them in a List object which we wil use later. An EntityContainer will be our data source (e.g. ApplicationData, NorthwindData, etc.)

3) The List object we populated with Data Source names is bound to the custom Silverlight control. That is the data the user will see at runtime available as a drop down list.

Control Constructor
  public ODataFinder()
        {
            InitializeComponent();
 
            try
            {
                IModuleDefinition module = ClientApplicationProvider.Current.Details.GetModules().Where(i => i.Name.Contains("LightSwitchCommonModule")).First();
 
                // EntityContainer objects will be things such as ApplicationData, NorthwindData,...
                foreach (LightSwitch.EntityContainer globalItem in module.GlobalItems.OfType<LightSwitch.EntityContainer>())
                {
                    ServicesDropDownList.Items.Add(globalItem.Name);
                }
            }
 
            catch (Exception)
            {
                // if we fail then we just won't populate any data sources
            }
        }
 

Our custom control is a drop down list. When the drop down is closed we will try to launch the OData service URL in a browser.

This method below does that in the following way:

1) Get the URI of the Host machine, which will be something like “http://myServer/myApp/App.xap”

2) We parse off the name of the Host machine, and the name of the application

3) We combine the host name + the application name + the data source name selected by the user to form a URL. Something like http://myServer/myApp/ApplicationData.svc/.

4) We launch the URL in a web browser (the way we launch it in a web browser varies a bit on whether or not we are in a Desktop client or a Web client)

Control Closed Method
  private void ServicesDropDownList_DropDownClosed(object sender, EventArgs e)
        {
            try
            {
                string absoluteUri = Application.Current.Host.Source.AbsoluteUri;
                System.UriBuilder appUri = new UriBuilder(absoluteUri);
 
                string host = Application.Current.Host.Source.Host;
                int indexOfHost = absoluteUri.IndexOf(host);
                int indexOfEndOfHost = absoluteUri.IndexOf("/", indexOfHost + host.Length);
                string dataServiceUri = absoluteUri.Substring(0, indexOfEndOfHost);
 
                if (host.Contains("localhost"))
                {
                    dataServiceUri = dataServiceUri + "/" + ServicesDropDownList.SelectedItem.ToString() + ".svc" + "/";
                }
                else
                {
                    //Example format: http://IISMachine/AppName/Web/Application18.Client.xap?v=1.0.2.0?v=1.0.2.0
                    int indexOfEndOfAppName = absoluteUri.IndexOf("/", indexOfEndOfHost + 2);
                    int lengthOfAppName = indexOfEndOfAppName - indexOfEndOfHost;
                    string appName = absoluteUri.Substring(indexOfEndOfHost, lengthOfAppName);
 
                    dataServiceUri = dataServiceUri + appName + "/" + ServicesDropDownList.SelectedItem.ToString() + ".svc" + "/";
                }
 
 
                // Check to see if we are running in the Desktop
                if (AutomationFactory.IsAvailable)
                {
                    var shell = AutomationFactory.CreateObject("Shell.Application");
                    shell.ShellExecute(dataServiceUri);
 
                }
                // Else we are running in a web client
                else
                {
                    //Open up the OData service in a new web page
                    System.Windows.Browser.HtmlPage.Window.Navigate(new Uri(dataServiceUri), "_blank");
                }
            }
 
            catch (Exception)
            {
                // if we fail then just don't display anything
            }
        }
 

Bring it all together

We’ve covered a couple things here:

a) How you can go about manually finding your OData services that LightSwitch produces for each data source

b) How you can make this a bit easier by adding a custom Silverlight control your LightSwitch applications to find and display the OData service for you.

Check out my Ccode Gallery post, Custom Silverlight Control to find LightSwitch OData Services, for the code and for some more details on how to make this custom SL control.

Thanks all, and please let me know if you have any feedback.

-Matt Sampson

OData Apps in LightSwitch (With Custom RIA Data Sources and Many to Many!), Part 3

Matt Sampson — Mon, 30 Apr 2012 13:49:00 GMT

Update again: Attaching to a database to many to many relationships is now supported (in Visual Studio 2012 RTM) and the relationships will display in the entity designer just like any other relationship. As a result it's possible to do the below scenario without a RIA Data Source and instead just use LightSwitch built in functionality.

Update: I've posted the sample application in the MSDN Code Gallery here - http://code.msdn.microsoft.com/Consuming-OData-in-7df2ef7b

--------------------------------------------------------------

Welcome back! In this post we are going to wrap up the OData application we started back in Part 1 and continued in Part 2.

To refresh everyone on how we got here, we started with the idea that we would use some new features in LightSwitch for Visual Studio 11 (Beta) that would allow us to attach to an OData service. Specifically we are attaching to the Commuter API OData service.

We wanted to solve 4 basic problems:

Where is my stop? (we solved this in Part 1 and 2 with a Bing maps extension)
When is my train arriving? (we solved this in Part 1)
How do I get there? (we solved this in Part 1 and 2 with Route information and maps)
How many escalators will be broken today? (we saved this problem for Part 3)

To find a solution to this last problem we are going to pull in data from the “Incidents” entity in the OData service. This entity contains all the information regarding broken escalators and things of that nature.

Retrieving “Incidents” data

If we open up our OData app and look at the Incidents entity in the Entity Designer, it should look like this:

Note: If you don’t have the Incidents entity in your entity designer, then right click on the TransitDataData data source and select “Update data source”. Then you will be able to import the Incidents entity.

You can see we don’t have any relationships on this entity. There are indeed relationships defined on this entity in the OData Service, but they are all “many to many” relationships. And LightSwitch does not provide support for many to many relationships out of the box.

That’s too bad, but it’s not a deal breaker. I would really like to relate the Incident data with our Stops data so that on our Stops List and Detail screen we could show all the incidents related to that stop (for example, the Metro Center stop has a broken escalator, and trains are all delayed because of snow).

Fortunately for us we can still make this work and pull in information for the Incidents entity and relate it to a specific Stop by creating a Custom RIA Data source. In general, Custom RIA Data Sources are beneficial for a wide array of problems, like aggregating data. Our custom RIA data source is going to enable us to create our own query to pull in the Incidents data from the Transit Data OData service and relate it with a corresponding Stop.

Custom RIA Data Source – Creation

Let’s get started on making our basic Custom RIA data source.

First of all, make sure, in Visual Studio, under Tools –> Options –> Projects and Solutions that you have the “Always show solution” checkbox checked.

Now, right click on your solution and select Add –> New Project.

Let’s just add a “Class Library” (I’m using a C# Class Library because my LightSwitch project is a C# project). Call the new project “RiaService” and click OK.

In our new project, double click on the “Properties” icon and change the Target Framework to .NET Framework 4.0. This will be important later on when we try to attach to our Custom RIA data source (I’ll explain when we get there).

Now right click our new project and select Add –> New Item. Select Visual C# Items –> Web –> Domain Service Class. Call it TransitData and hit OK. The only reason why I chose this file type is because it automatically adds a bunch of project references that we are going to need (you certainly could have just selected a basic Class file and added the references yourself). We still need to add one more reference to our project. So right click the References node and select Add Reference. Add a reference to System.Data.Services.Client.dll.

Your list of References should look like this:

Now we need to add a service reference to the Transit Data OData service. Right click the References node again and select “Add Service Reference” and use this OData service - http://transit.cloudapp.net/DevTransitODataService.svc (this is of course the same one that we attached to with our LightSwitch application in Part 1). Call the namespace TransitDataServiceReference. It should look something like this -

Once you hit OK it will attach to that OData service and generate code for the corresponding entities in the service. You’ll see now in a minute how we have an Incidents entity available to us in our custom RIA data service project. It’s important to understand that we are in NO way using any code right now from our LightSwitch project, or am I referring to the Incidents entity that is available in our LightSwitch project under the TransitDataData source. The Transit Data service that we just attached to and the Incidents entity that we have generated code for is specific to this RIA project.

At this point we have a basic custom RIA data service. We just have to add a bit of code at this point before we can add the RIA service to LightSwitch as a data source.

Custom RIA Data Source – Adding Code

Let’s add some code now to the TransitData.cs file. Copy and paste the below code into your file:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.ServiceModel.DomainServices.Hosting;
using System.ServiceModel.DomainServices.Server;
using RIAService.TransitDataServiceReference;
 
namespace RIAService
{
    publicclassTransitDomainService : DomainService
    {
        [Query(IsDefault = true)]
        publicIQueryable<Incident> GetIncidents()
        {
            returnnull;
        }
 
        [Query]
        publicIQueryable<Incident> GetIncidentsByStop(string stopId)
        {
            TransitData myTransitData = newTransitData(newUri("http://transit.cloudapp.net/DevTransitODataService.svc"));
            return myTransitData.Stops.Where(s => s.StopId == stopId).SelectMany(s => s.Incidents);
        }
    }
}
 
namespace RIAService.TransitDataServiceReference
{
    [MetadataType(typeof(Metadata))]
    publicpartialclassIncident
    {
        publicclassMetadata
        {
            [Key]
            publicstring IncidentId
            {
                get;
                set;
            }
        }
    }
}

That’s it for code that we’ll need to write. Now let’s go over it:
Note how we have a “using TransitDataServiceReference” statement at the top. When we generated code for our service reference that we added we put all that code under the TransitDataServiceReference namespace. This will allow us to directly reference the Incident entity and the TransitData class.

For a custom RIA data service we need to have a default query type which is what the GetIncidents() method is. This query would typically be the “All” query or the query that returns all of the records for the entity. For our purposes we don’t need to do anything more than just return null here.

The GetIncidentsByStop() method we define as a “Query” as well. This means that when we attach to this RIA Data service through LightSwitch that this query will show up in the Query designer. This is really the query that’s going to do all our work. The code in this method is:

Creating a new instance of the TrainsitData data service (for which you have to pass in the Uri to the actual OData service)
Querying on all of the “Stops” and retrieving all the Incidents that have a “StopId” corresponding to the “stopId” that was passed into the method. (For example, if we pass in the Metro Center stop it will retrieve all the Incidents that are related to that stop).
Those incidents related to the stopId are then returned

At the bottom of the code snippet you’ll notice that we have a separate class. The Incidents entity that was generated does not have a primary key defined on it. We are going to need one before we try to attach to this RIA data service with LightSwitch. So we need to specify which field is the primary key, which is all we are doing here.

Extending upon the “Incident” class that was generated we define an inner class called Metadata. Then we specify that the IncidentId property is the primary key by giving it the “Key” attribute.

More information on partial classes: Partial Classes and Methods (C# Programming Guide) and Partial (Visual Basic)

More information on creating a metadata class for RIA services: How to Add Metadata Classes

More information on the “Key” attribute: A guide through WCF RIA Services attributes

Add Our RIA Data Source

Go ahead and build our RIAService project. Remember we made our RIA project target the .Net 4.0 framework? That was important otherwise you will get an error when trying to attach to it here, since the LightSwitch project is also targeting the .NET 4.0 Framework.

Open up the LightSwitch project, and let’s add this data source to it, like so:

If the RIA service doesn’t show up here, then select Add Reference –> Solution –> Projects and select the RIAService project.

Click Next, select all the entities and queries (there should only be the Incidents entity and GetIncidentsByStop query).

We should now have the data source, entity and query in our designer:

Modify our Stops List and Detail Screen

We’ll need to modify our Stops List and Detail screen now to include the Incidents information that we want (my screen is specifically called StopsDCMetroListDetail).

Double click on our screen to bring it up in the screen designer. With the screen designer open, select “Add Data Item…” and select the GetIncidentsByStop query like so:

Hit OK and it will be added to the screen designer.

Now drag and drop the data for GetIncidentsByStop onto our screen so that it looks like this:

Now we’ll need to bind our stopId query parameter to whatever Stop we currently have selected on our screen.

So, double click on the stopId query parameter, and then in the “Properties” window bind it to StopsDCMetro.SelectedItem.StopId so that it looks like this:

This effectively says that the “stopId” query parameter is going to be equal to whatever Stop we currently have selected on our screen.

And that is it! Save it, and re-build the solution.

F5 IT!

F5 it and open up the Stops DC Metro List and Detail screen. You should see a list of Incidents beneath the Details for the Stop. So it will look something like this now:

You can see in this instance that not even the Pentagon is immune to the ubiquitous broken escalator problem.

Wrapping it Up

To summarize what we’ve done here, I showed you how to create a RIA Service wrapper around a data source that has many to many relationships. We specifically utilized this RIA Service to relate data between the Stops and the Incidents entity (so that we can tell how many escalators will be busted at our Metro stop).

That pretty much does it for our OData sample app. I will be publishing all this code (C# and VB.NET) out on the MSDN Code Gallery and will update the blog as soon as I have that done.

Please let me know if you have any questions or requests for future topics.

Thanks all!

-Matt Sampson

OData Apps In LightSwitch, Part 2

Matt Sampson — Mon, 02 Apr 2012 16:16:42 GMT

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:

Add some automatic refreshing to our Arrivals screen
Customize the “Stops” screen so that it can provide us with a map of the Stops location

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.

Open up the Arrivals screen in the screen designer (should be called MetroByArrivalTimeListDetail)
Right click the screen in the Solution Explorer, and select select “View Screen Code”
We should now be in the code editor
Add a using statement for the System.Threading since we will need to use some classes from that namespace

Copy and paste the below code into your screen’s class

Code Snippet
 private Timer myTimer;
partial void MetroByArrivalTimeListDetail_Closing(ref bool cancel)
{
    this.myTimer.Dispose();
}
 
partial void MetroByArrivalTimeListDetail_Created()
{
    TimerCallback tcb = MyCallBack;
    this.myTimer = new Timer(tcb);
    myTimer.Change(120000, 120000);
}
 
public void MyCallBack(Object stateInfo)
{
    this.Details.Dispatcher.BeginInvoke(() =>
    {
        this.Refresh();
    }
    );
}
 

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:

Code Snippet
 partial void Location_Compute(ref string result)
{
    result = this.Lat + " " + this.Lon;
}
 

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

OData Apps In LightSwitch, Part 1

Matt Sampson — Mon, 19 Mar 2012 21:21:00 GMT

Oh, Data!

One of the cooler features that comes with LightSwitch in Visual Studio 11 Beta is it’s support for attaching to OData Services and exposing it’s own data as an OData Service.

OData stands for Open Data Protocol. It’s an open protocol that defines how to expose your data for querying and updating. This enables consumers (like LightSwitch) to connect to an OData service like it would with other data sources, for example SQL.

There’s more and more places out there exposing their data through an OData service (see some at http://odata.org/producers).

One of the slickest ones that I have found is the Public Transit Data Community (PTDC) service. This OData feed is combining all the different public transit data feeds from around the United States and exposing them through one well defined OData feed.

The PTDC has made some nice progress so far and is exposing transit information for over a dozen different agencies. I’ve got a favorite agency on this list and that would be the Washington DC Metro agency or ‘WMATA’ for short.

If you’ve ridden the DC metro (or any subway system) more than a couple times you’ve probably found yourself wondering a few things like:

1) Where is my metro stop?		2) When is my train arriving?
3) How the heck do I get there?		4) My personal favorite – how many escalators will be broken today?

We can figure all this out by making a LightSwitch app that consumes this OData Service.

We’ll keep it simple for this blog post, and then expand on some features over a couple more blog posts. Here’s the rundown of what we are going to accomplish in this blog post (we’ll add some more functionality in the next post):

Consume a popular real-time public OData feed

Create custom queries to limit the data to just DC Metro

Create computed properties that query a cached entity set

Use the new Web Address data type

Attach To It

For those of you familiar with LightSwitch V1, you’ll find that consuming OData with LightSwitch is just as easy as if you were consuming a SQL database.

Let’s get started walking through the creation of our simple app to simplify our life on the DC Metro.

Open up Visual Studio 11 Beta

Create a new project and select LightSwitch Application (Visual C#)

Call the app “MyDCApp”

We should see a screen something like this now:
Click on “Attach to external Data Source” and you will see this:
Click “Next”

Use the url: http://transit.cloudapp.net/DevTransitODataService.svc

Select “None” for the authorization method

Click “Next”

Import the following entities for now: Agencies, Arrivals, Entrances, Incidents, Regions, Routes, Stops, and Vehicles

Select “Finish”

We should have something like this now (minus the screens which we add later):
Open up the Routes entity designer

Change the KML propery from a “String” type to a “Web Address” type.

This is a new type in LightSwitch and since the KML property is really a web address it makes sense to use it here

Change the “Summary Property” value to RouteName

Open up the Stops entity

Change the “Summary Property” value to Name

Create Some Queries

We need to limit the data that we get back to be specific to the DC Metro for the purpose of our app. To do that we can create some queries based off the entities to limit it to just the DC Metro agency.

Right click on the Arrivals entity and select “Add Query”

Call the query MetroByArrivalTime

Add two filters on the query, both filters will compare against a “Literal”:

RouteType=Metro

AgencyAbbreviation=WMATA

Add a sort: ArrivalTime=Ascending

Add a query on Routes entity, call it RoutesDCMetro.

Add two filters on the query, both filters will compare against a “Literal”:

RouteType=Metro

AgencyAbbreviation=WMATA

Add a query on Stops entity, call it StopsDCMetro

Add one filter on the query, the filter will compare against a “Literal”:

Type=Metro

You should have three queries now, one each under entities: Arrivals, Routes, and Stops.

Each query makes sure that we only get data for the DC Metro system. Additionally the Arrivals query makes sure that we get the data returned to us in order of their arrival time with the “arriving” trains coming back first.

Add Computed Properties

The Routes entity has a FinalStop0Id and a FinalStop1Id. These two properties represent the two different ending “Stops” of the Metro route. These aren’t very intuitive when viewed on a screen and we need to clean these up a little bit to give them a proper readable name.

We’ll add some computed properties now to accomplish this. Add two properties to this entity called FinalStop0Name and FinalStop1Name. After this is done, right click the table entity “Routes” and select View Table Code.

Code Snippet
private static Dictionary<string, string> cachedFinalStops;
 
public static Dictionary<string, string> GetCachedFinalStops(DataWorkspace myDataWorkspace)
{
    if (cachedFinalStops == null)
    {
        cachedFinalStops = new Dictionary<string, string>();
        IEnumerable<c_Stop> myStops = myDataWorkspace.TransitDataData.StopsDCMetro().Execute();
        
        foreach (c_Stop myStop in myStops)
        {
            cachedFinalStops.Add(myStop.StopId, myStop.Name);
        }
    }
 
    return cachedFinalStops;
}
 
partial void FinalStop1Name_Compute(ref string result)
{
    Dictionary<string, string> cachedStops = GetCachedFinalStops(this.DataWorkspace);
    result = cachedStops[this.FinalStop1Id];
}
 
partial void FinalStop0Name_Compute(ref string result)
{
    Dictionary<string, string> cachedStops = GetCachedFinalStops(this.DataWorkspace);
    result = cachedStops[this.FinalStop0Id];
}

There’s a couple things going on here. The FinalStopName_Compute methods find the Route’s two different stop’s name instead of just using the Id. They do this by using a LINQ query which says: For some variable q, find me all the stops on the Stops entity that have the same Id value as this Route’s stop.

The only trick here is that we cached all of the stops on the Stops entity the first time that we launched our screen. We do this because Metro Stops don’t ever change their names. So we can safely cache this information and then our Compute methods can query against the cached list of Stops which will speed things up a bit.

I want to stress here though that this method of caching is really ONLY appropriate for "static" data. That is data that we know won't be changing. I felt comfortable caching the names of the Metro Stops as I said, because that really is data that won't change. But you obviously would NOT want to cache, for example, the "Arrivals" entity this way because that data is definitely not static and using this method would result in you having old data in your cache.

You should have a Routes entity that looks something like this:

Create Some Screens

Let’s create some screens around the queries that we made now.
These screens will be read only, because the OData service we are querying against is read only. So we will want to remove our insert, edit, and delete buttons. Also, we’ll clean up our screens a bit to remove some useless data.

Create a List and Details screen for the MetroByArrivalTime query.
Change the “Summary” List to be a Columns Layout with the following fields:

Arrival Time, Status, Route Name, and Stop Name

Delete the Add, Edit, and Delete buttons under the command bar since we won’t need them
You can customize the “Details” portion of the screen however you like, but below is what mine ended up looking like:
Create a List and Details screen for the RoutesDCMetro query and for the StopsDCMetro query
Delete the Add, Edit, and Delete buttons under the command bar since we won’t need them

You can customize the screens however you like, my RoutesDCMetro and StopsDCMetro screens are displayed below respectively:
- Note how the “Routes” screen has the Kml property set to “Web Link” for the data type”- RoutesDCMetro
- StopsDCMetro

Run It

Hit F5 now in Visual Studio to run it and check out some of the features of the application and what LightSwitch provides.

The Metro By Arrival Time screen shows us the arriving metro trains, how many cars are arriving, what the status is (BRD for Boarding or ARR for Arriving), and what the destination stop is.

The Routes screen has the stop information for each route, as well as a clickable map of the route. If you click on the Kml link it will open up in an application like Google Earth and provide an overview of the route (see below).

KML Link:

And lastly the Stops DC Metro screen displays the location and name of each stop.

Concluding Part 1

To summarize what we’ve covered up to this point - we gave a basic example of how Visual Studio Light Switch can attach to a public OData feed. We showed the new web address data type. We utilized computed fields with caching to improve our performance. And we used queries to narrow down our data.

We still have a few problems we need to get to in the next blog post. We will customize the Stops screen so that it can provide us with a map of the Stops location instead of just latitude and longitude coordinates. The Incidents data contains all the information we want regarding broken escalators, so we will need to hook that up too so that we can retrieve that information for each given stop. Also, since this data is done in “real time” it’d be nice to add some automatic refresh to our application so that our data we are viewing doesn’t get too stale.

I’ll be looking to update the blog again sometime next week, until then feel free to leave any comments or questions and I’ll do my best to get back to them.

Thanks a lot, Cheers -

CODE IS UPLOADED NOW FOR VB.NET

How Do I: Import and Store a Data File

Matt Sampson — Mon, 23 May 2011 17:47:00 GMT

Today’s post is going to be a short one about how to import a file through a Visual Studio LightSwitch application (Desktop or Web) and store the data on the backend (e.g. SQL Server).

Sometimes we want to upload files in binary format and store them in the database, like a Word document or PDF file or any other file containing unstructured data. LightSwitch already has the built-in ability to store and retrieve images, but if you want to store other types of files we have to write a small bit of code.

Backstory

This post is really just me picking out various pieces of code from my other posts and cramming it together to make a new post. Which is a nice break for me, since writing a post often takes about a week (after I write the code and write up a draft blog, then get feedback, and double check the code several times). But with this one I should be done in a day leaving more time to enjoy the very brief Summers we have up here in Fargo, North Dakota.

Create the project and a table

Alright, let’s get started making a simple LightSwitch Web Application.
Let’s create the project, and a table that will hold our file data.

Launch Visual Studio LightSwitch and create a new C# Visual Studio LightSwitch project
Call the project: ImportFiles
In the Solution Explorer, right click “Properties” and select Open.
Change the Application Type from “Desktop” to “Web”
1. Note - this sample will work as a Desktop application as well
Add a table called “FileInformation” and add the following fields to the table:
1. Name | String |
2. Miscellaneous | String |
3. Data | Binary |
You should have a table now that looks like this:

Create the screen

Add a screen using the “Editable Grid Screen” template and tie the screen to the FileInformation table.
In the screen designer, under Rows Layout –> Data Grid –> Data Grid Row delete the “Data” control so that it won’t display when we run the application
1. It doesn’t make much sense for us to display this field on the screen since it just the file’s binary data.
In the screen designer, under Rows Layout –> Screen Command Bar, add a button called “ImportAFile”
You should now have a screen that looks something like this:
Right click the ImportAFile button and select “Edit Execute Code”
1. We do this to create the “User” folder where we will be placing some custom user code. We’ll come back and add our button code later

Add a custom Silverlight dialog

In the Solution Explorer we need to switch to the “File View” mode so we can add some custom code.
After switching to the File View mode, navigate to the Client project and open up the User Code folder
We are going to add our custom Silverlight dialog just like we did in the last blog post. We need our own custom Silverlight dialog because we want to display an OpenFileDialog to the user and we are running inside a LightSwitch web application. (For the longer explanation please read my previous blog post).
Right click UserCode folder and select “Add-> New Item”
Select “Text File” in the “Add New Item” dialog. Call the file “SelectFileWindow.xaml”

Now copy and paste the below code into the “SelectFileWindow.xaml” file:

<controls:ChildWindow x:Class="LightSwitchApplication.UserCode.SelectFileWindow"


           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 


           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 


           xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"


           Width="394" Height="305" 


           Title="Select File Dialog" >


    <Grid x:Name="LayoutRoot" Margin="2">


        <Grid.RowDefinitions>


            <RowDefinition />


            <RowDefinition Height="Auto" />


        </Grid.RowDefinitions>



        <Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="1" />


        <Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" />


        <Button Content="Browse" Height="23" HorizontalAlignment="Left" Margin="291,92,0,0" Name="BrowseButton" VerticalAlignment="Top" Width="75" Click="BrowseButton_Click" />


        <TextBox Height="23" HorizontalAlignment="Left" Margin="66,92,0,0" Name="FileTextBox" VerticalAlignment="Top" Width="219" IsEnabled="True"/>


    </Grid>


</controls:ChildWindow>

This Silverlight dialog code contains 4 controls – an OK button, Cancel button, Text field, and a Browse button. The Browse button will launch an OpenFileDialog dialog which will let the user select a file to import, and the text field will display the name of the file about to be imported.
We need to add some code for our Silverlight dialog, so right click the “UserCode” folder and select “Add-> Class”

Name the class “SelectFileWindow.cs” and copy the below code into the class:

//' Copyright © Microsoft Corporation.  All Rights Reserved.

//' This code released under the terms of the 

//' Microsoft Public License (MS-PL, http://opensource.org/licenses/ms-pl.html)

using System;

using System.IO;

using System.Windows;

using System.Windows.Controls;


namespace LightSwitchApplication.UserCode

{

    public partial class SelectFileWindow : ChildWindow

    {

        public SelectFileWindow()

        {

            InitializeComponent();

        }

        

        private FileStream documentStream;

        public FileStream DocumentStream

        {

            get { return documentStream; }

            set { documentStream = value; }

        }


        private String safeFileName;

        public String SafeFileName

        {

            get { return safeFileName; }

            set { safeFileName = value; }

        }


        /// <summary>

        /// OK Button

        /// </summary>

        private void OKButton_Click(object sender, RoutedEventArgs e)

        {

            this.DialogResult = true;

        }

        /// <summary>

        /// Cancel button

        /// </summary>

        private void CancelButton_Click(object sender, RoutedEventArgs e)

        {

            this.DialogResult = false;

        }

        /// <summary>

        /// Browse button

        /// </summary>

        private void BrowseButton_Click(object sender, RoutedEventArgs e)

        {

            OpenFileDialog openFileDialog = new OpenFileDialog();

            if (openFileDialog.ShowDialog() == true)

            {

                this.FileTextBox.Text = openFileDialog.File.Name;

                this.safeFileName = openFileDialog.File.Name;

                this.FileTextBox.IsReadOnly = true;

                FileStream myStream = openFileDialog.File.OpenRead();

                this.documentStream = myStream;

            }

        }

    }

}

The SelectFileWindow class contains the following code:
1. The methods for our button controls
2. The browse button has code in it to create a System.Windows.Controls.OpenFileDialog object which we use to open up our Open File Dialog to allow the user to pick any arbitrary file to import.
3. A public FileStream property which will contain the data for the file we want to import
4. A public String property which will contain the name of the file we want to import
We need to add a reference to the Silverlight dll we are using, so in Solution Explorer, navigate to “Client –> References”, right click and select “Add Reference…”
Add a .NET reference to the System.Windows.Controls assembly

Add our screen’s button code

Let’s switch back to the “Logical View”
Open up the screen designer for the EditableFileInformationsGrid
Right click the “ImportAFile” and select “Edit Execute Code”
Copy and paste the below code into the EditableFileInformationsGrid.cs:

//' Copyright © Microsoft Corporation.  All Rights Reserved.

//' This code released under the terms of the 

//' Microsoft Public License (MS-PL, http://opensource.org/licenses/ms-pl.html)

using System;

using System.Collections.Generic;

using System.IO;

using System.IO.IsolatedStorage;

using System.Linq;

using LightSwitchApplication.UserCode;

using Microsoft.LightSwitch;

using Microsoft.LightSwitch.Framework.Client;

using Microsoft.LightSwitch.Presentation;

using Microsoft.LightSwitch.Presentation.Extensions;

using Microsoft.LightSwitch.Threading;


namespace LightSwitchApplication

{

    public partial class EditableFileInformationsGrid

    {

        partial void ImportAFile_Execute()

        {

            // To invoke our own dialog, we have to do this inside of the "Main" Dispatcher

            // And, since this is a web application, we can't directly invoke the Silverlight OpenFileDialog

            // class, we have to first invoke our own Silverlight custom control (i.e. SelectFileWindow)

            // and that control will be able to invoke the OpenFileDialog class (via the Browse button)

            Dispatchers.Main.BeginInvoke(() =>

            {

                SelectFileWindow selectFileWindow = new SelectFileWindow();

                selectFileWindow.Closed += new EventHandler(selectFileWindow_Closed);

                selectFileWindow.Show();

            });

        }


        /// <summary>

        /// Invoked when our custom Silverlight window closes

        /// </summary>

        void selectFileWindow_Closed(object sender, EventArgs e)

        {

            SelectFileWindow selectFileWindow = (SelectFileWindow)sender;


            // Continue if they hit the OK button AND they selected a file

            if (selectFileWindow.DialogResult == true && (selectFileWindow.DocumentStream != null))

            {

                byte[] fileData = new byte[selectFileWindow.DocumentStream.Length];

                using (StreamReader streamReader = new StreamReader(selectFileWindow.DocumentStream))

                {

                    for (int i = 0; i < selectFileWindow.DocumentStream.Length; i++)

                    {

                        fileData[i] = (byte)selectFileWindow.DocumentStream.ReadByte();

                    }

                }


                // Create a new record for this file, and store the data, name and length

                FileInformation fileInformation = this.DataWorkspace.ApplicationData.FileInformations.AddNew();

                fileInformation.Name = selectFileWindow.SafeFileName;

                fileInformation.Miscellaneous = "Size of file in bytes: " + fileData.Length;

                fileInformation.Data = fileData;


                selectFileWindow.DocumentStream.Close();

                selectFileWindow.DocumentStream.Dispose();

            }

        }

    }

}

There are two methods in this class:
1. ImportAFile_Execute() – since we are inside of button code here we are NOT inside the main UI thread anymore. So we need to switch back to the main UI thread only because we want to display our own UI dialogs (like our custom Silverlight dialog and an OpenFileDialog). This method switches to the main UI, invokes our Silverlight dialog, and adds an EventHandler to the “Closed” event. So that when the dialog is closed, we call our own method to do some additional work.
2. selectFileWindow_Closed() – this method is invoked once our Silverlight dialog closes. It reads in the file from the SelectFileWindow.DocumentStream public property we mentioned earlier. And stores the data from this FileStream into a byte array. We then create a new record for our FileInformation table, and set the Name field to the name of the file, the Miscellaneous field is set to the size of the file, and the Data field is set to the value of the byte array. The Data field is what actually contains our imported file.

Run it and import some files

In Solution Explorer, right click the ImportFiles project, and select “Build”.
After the build, press F5 to run your project
You should see the inside the command bar on the screen a button called “Import A File”
Click the “Import A File” button to display our custom Silverlight Dialog
Select the “Browse” button and select any file you wish to import
Click “OK”
Our code to import the data will now run and we will get a new record created on our screen
As you can see, we display the file’s name and it’s size in bytes
You can now save the data to persist it to the database by clicking the “Save” button on the command bar

Additionally, there is an extension that can be added to Visual Studio LightSwitch called Document Toolkit for LightSwitch, which handles importing and viewing Word Documents. It will only work for Desktop applications, and it isn’t free, but other than that it looks like a slick extension.

That’s it for this brief post. I've included a zip file below of the C# code.

Again, love to hear if there are any questions, and if you think something is wrong with this code (or the title) then you are probably right so please let me know.

-Matt Sampson

How Do I: Import Data While Running a LightSwitch Web Application

Matt Sampson — Tue, 10 May 2011 14:00:00 GMT

Importing data into a Microsoft Visual Studio LightSwitch application can be a bit tricky, especially if we are talking about a LightSwitch web application. Since I’ve heard several people ask how to import data using a web application, I figured now would be a good time to blog about this.

I’m going to teach you some tips and tricks on importing data into a web application. It can get tricky in this scenario because web applications typically have additional security issues you need to deal with. But I think you’ll find once we are done, that there is very little code, and it’s easy to understand.

Overview

Some other LightSwitch people have already blogged about importing data into a LightSwitch application (e.g. Dan Seefeldt and the LightSwitch team). These are some awesome posts for the basics of importing and exporting. But for our slightly more specialized scenario we want to:

Create a web application
Let the user select a comma separate file (e.g. *.csv) to import
Populate our LightSwitch data with data from the comma separated file

The real issue we need to work around is the fact that we have a web application and NOT a desktop application. Because of that we are going to have to do a couple of extra steps to make this work.

Let’s get started!

Create a Simple Web Application

Because I’m lazy, we are going to make another application to manage “Contacts” for this example (like we did for the last blog post).

Launch Microsoft Visual Studio LightSwitch
Create a new C# Project (I’ll include some VB.NET code for VB fans at the end of this blog)
Call the project “ImportDataFromAWebApp”
In the Solution Explorer, right click the “Properties” icon and select “Open”:
In the Properties window that opens, select the “Application Type” tab, and pick “Web” to switch from a Desktop application to a Web application for this project
1. Note - Our code will also work in a Desktop application as well

Add the Table

In the Solution Explorer, right click the Data Sources node and select “Add Table”
Name the table “Contact” and populate it with the following fields (formatted like [Field Name | Data Type | Required]):
1. FirstName | String | Required
2. MiddleName | String |
3. LastName | String | Required
4. AddressLine1 | String |
5. AddressLine2 | String |
6. City | String |
7. State | String |
8. ZipCode | String |
9. Country | String |
10. PhoneNumber1 | Phone Number |
11. PhoneNumber2 | Phone Number |
12. BirthDate | Date |
13. MiscellaneousInformation | String |
The table should look something like this when we are done:

Add the Screen

In the Solution Explorer, right click the Screens node and select “Add Screen…”
Pick the “Editable Grid Screen” template
For the Screen Data – select the table we just created “Contact”
Accept the defaulted screen name (should be “EditableContactsGrid”)
Click “OK”
In the Screen Designer, navigate to “Rows Layout –> Data Grid –> Command Bar” and add a button under the Command Bar.
Call the button method name “ImportData”
You should now have a screen that looks something like this:
Right click the “Import Data” button and select “Edit Execute Code” to generate the button method stub
1. Doing this will generate the “User Code” folder for us that we’d like to have for our next steps.
2. We’ll add code to this button method later on.

Add a Simple Silverlight dialog

Now comes the unusual part of this example. We are going to add our own Silverlight dialog to our LightSwitch application. The “Import Data” button is going to invoke this Silverlight dialog. (I am not the first to go adding Silverlight dialogs to a LightSwitch application – see Eric Erhardt’s blog post on this.)

I used Visual Studio Ultimate to make my own very simple Silverlight dialog which we are going to import into our Visual Studio LightSwitch project. The Silverlight dialog contains 4 controls:

A “Browse” button which will open up a “OpenFileDialog” window and allow the user to select a .csv file
An “OK” button to accept the file you selected
A “Cancel” button to abort
And a text control that displays the name of the file you selected

Let’s add the dialog now, and then I’ll give the technical reasons for why we are doing it this way.

In Solution Explorer, click the drop down arrow on the “Logical View” button and select “File View”
In Solution Explorer, navigate to “Client –> UserCode”
Right click the “UserCode” folder and select “Add –> New Item…”
Select “Text File” in the “Add New Item” dialog. Call the file “SelectFileWindow.xaml”.

Now copy and paste the below code into the “SelectFileWindow.xaml” file (you may need to open up the .xaml file with Notepad to add this code):

<controls:ChildWindow x:Class="LightSwitchApplication.UserCode.SelectFileWindow"

           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

           xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

           Width="394" Height="305" 

           Title="Select File Dialog" >

    <Grid x:Name="LayoutRoot" Margin="2">

        <Grid.RowDefinitions>

            <RowDefinition />

            <RowDefinition Height="Auto" />

        </Grid.RowDefinitions>


        <Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="1" />

        <Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" />

        <Button Content="Browse" Height="23" HorizontalAlignment="Left" Margin="291,92,0,0" Name="BrowseButton" VerticalAlignment="Top" Width="75" Click="BrowseButton_Click" />

        <TextBox Height="23" HorizontalAlignment="Left" Margin="66,92,0,0" Name="FileTextBox" VerticalAlignment="Top" Width="219" IsEnabled="True"/>

    </Grid>

</controls:ChildWindow>

This Silverlight xaml code contains the metadata information for the dialog, and for the 4 controls we discussed earlier.
We need to do another step to add some code for the Silverlight control, so let’s add another file.
Right click the “UserCode” folder and select “Add –> Class”

Name the class “SelectFileWindow.cs” and copy the below code into the class:

//' Copyright © Microsoft Corporation.  All Rights Reserved.

//' This code released under the terms of the 

//' Microsoft Public License (MS-PL, http://opensource.org/licenses/ms-pl.html)

using System;

using System.IO;

using System.Windows;

using System.Windows.Controls;


namespace LightSwitchApplication.UserCode

{

    public partial class SelectFileWindow : ChildWindow

    {

        public SelectFileWindow()

        {

            InitializeComponent();

        }


        private FileStream documentStream;


        public FileStream DocumentStream

        {

            get { return documentStream; }

            set { documentStream = value; }

        }


        /// <summary>

        /// OK Button

        /// </summary>

        private void OKButton_Click(object sender, RoutedEventArgs e)

        {

            this.DialogResult = true;

        }


        /// <summary>

        /// Cancel button

        /// </summary>

        private void CancelButton_Click(object sender, RoutedEventArgs e)

        {

            this.DialogResult = false;

        }


        /// <summary>

        /// Browse button

        /// </summary>

        private void BrowseButton_Click(object sender, RoutedEventArgs e)

        {

            OpenFileDialog openFileDialog = new OpenFileDialog();

            // Limit the dialog to only show ".csv" files,

            // modify this as necessary to allow other file types

            openFileDialog.Filter = "csv files (*.csv)|*.csv";

            openFileDialog.FilterIndex = 1;


            if (openFileDialog.ShowDialog() == true)

            {

                this.FileTextBox.Text = openFileDialog.File.Name;

                this.FileTextBox.IsReadOnly = true;

                System.IO.FileStream myStream = openFileDialog.File.OpenRead();

                documentStream = myStream;

            }

        }

    }

}

This partial class for our “SelectFileWindow” Silverlight dialog contains a few basic things:
1. The methods for our button controls
2. The Browse button has code in it to create a System.Windows.Controls.OpenFileDialog object which we use to open up our Open File Dialog to allow the user to select a .csv file. Once we open the file we store the file’s data into a FileStream property on our SelectFileWindow class.
3. A public FileStream property called DocumentStream that contains the data for the .csv file we want to import
We need to add a reference to the Silverlight dll we are using, so in Solution Explorer, navigate to “Client –> References”, right click and select “Add Reference…”
Add a .NET reference to the System.Windows.Controls assembly

Add a Simple Class to Parse the .CSV File

For the sake of modularity and encapsulation we will create a separate class to handle the parsing of the .csv file.

Add a new User Code class – in Solution Explorer, right click the “Client->UserCode” folder, and select “Add –> Class”.

Name the class “ImportDataFile.cs” and add the below code:

//' Copyright © Microsoft Corporation.  All Rights Reserved.

//' This code released under the terms of the 

//' Microsoft Public License (MS-PL, http://opensource.org/licenses/ms-pl.html)

using System;

using System.Collections.Generic;

using System.IO;


namespace LightSwitchApplication.UserCode

{

    public class ImportDataFile

    {

        /// <summary>

        /// Import data from a comma delimited stream

        /// And using the workspace that was passed in, insert the imported data

        /// so it displays on the user's screen

        /// </summary>

        static public void ImportCommaDelimitedStream(FileStream fileStream, DataWorkspace dataWorkspace)

        {

            List<string[]> parsedData = new List<string[]>();


            using (StreamReader streamReader = new StreamReader(fileStream))

            {

                string line;

                string[] row;


                while ((line = streamReader.ReadLine()) != null)

                {

                    row = line.Split(',');

                    parsedData.Add(row);

                }

            }

            AddData(parsedData, dataWorkspace);

        }


        /// <summary>

        /// Take in a list of string arrays which contains

        /// all the parsed data for our Contacts entity

        /// </summary>

        static private void AddData(List<string[]> dataList, DataWorkspace dataWorkspace)

        {

            foreach (string[] row in dataList)

            {

                Contact contact = dataWorkspace.ApplicationData.Contacts.AddNew();


                contact.FirstName = row[0];

                contact.MiddleName = row[1];

                contact.LastName = row[2];

                contact.AddressLine1 = row[3];

                contact.AddressLine2 = row[4];

                contact.City = row[5];

                contact.State = row[6];

                contact.ZipCode = row[7];

                contact.Country = row[8];

                contact.PhoneNumber1 = row[9];

                contact.PhoneNumber2 = row[10];

                contact.BirthDate = DateTime.Parse(row[11]);

                contact.MiscellaneousInformation = row[12];

            }

        }

    }

}

This class contains two basic methods:
1. The AddData() method which iterates over a List of string arrays, and creates a new Contact in our DataWorkspace for each string array.
The ImportCommaDelimitedStream() method takes in a FileStream object (our .csv file, which we can get off our SelectFileWindow class that we just made), and a DataWorkspace object. The method reads the lines in the FileStream object, parses off each “comma”, stores each line in a string array and then invokes the AddData() method.

Add Import Data Button Code

Let’s do the final bit of coding now by adding the code to our “Import Data” button.

To get to our button, switch the back to “Logical View”
Open up the Screen Designer for the EditableContactsGrid screen
Navigate to the Import Data button, right click and select “Edit Execute Code”
1. We should now be in the EditableContactsGrid partial class
We need a “using” statement for our Client UserCode that we added, so add the following using statement to this class: “using LightSwitchApplication.UserCode”
We also need another using statement so we can reference the “Dispatchers” class, so add the following using statement to this class as well: “using Microsoft.LightSwitch.Threading”

Paste the following code into your ImportData_Execute() button method

        /// <summary>

        /// Import Data button method

        /// </summary>

        partial void ImportData_Execute()

        {

            // To invoke our own dialog, we have to do this inside of the "Main" Dispatcher

            // And, since this is a web application, we can't directly invoke the Silverlight OpenFileDialog

            // class, we have to first invoke our own Silverlight custom control (i.e. SelectFileWindow)

            // and that control will be able to invoke the OpenFileDialog class (via the Browse button)

            Dispatchers.Main.BeginInvoke(() =>

            {

                SelectFileWindow selectFileWindow = new SelectFileWindow();


                selectFileWindow.Closed += new EventHandler(selectFileWindow_Closed);

                selectFileWindow.Show();

            });

        }


        /// <summary>

        /// Invoked when our custom Silverlight window closes

        /// </summary>

        void selectFileWindow_Closed(object sender, EventArgs e)

        {

            SelectFileWindow selectFileWindow = (SelectFileWindow)sender;


            // Continue if they hit the OK button AND they selected a file

            if (selectFileWindow.DialogResult == true && (selectFileWindow.DocumentStream != null))

            {

                ImportDataFile.ImportCommaDelimitedStream(selectFileWindow.DocumentStream, this.DataWorkspace);

                selectFileWindow.DocumentStream.Close();

            }

        }

Here’s what’s going on at a high level when the Import Data button is clicked:

1. The button is clicked
2. An instance of our Silverlight dialog, SelectFileWindow, is created
3. The dialog is opened by calling the Show() method
4. An EventHandler is added to the SelectFileWindow Closed event so that the “selectFileWindow_Closed()” method is invoked after the dialog is closed

Optional Reading – Here is a lower level explanation of what is going on in this button method:

Technical Stuff: Since the Import Data button code does NOT by default run inside the Main UI thread, we have to invoke the “Main” thread (or Dispatcher) before calling our Silverlight dialog. That is the reason for wrapping this code inside the Dispatchers.Main.BeginInvoke() method.

So why can’t we just open the OpenFileDialog directly? Why do we have to open a Silverlight dialog which then launches an OpenFileDialog?

Well, this is really what makes the web application scenario different from the Desktop application. If you try to directly launch the OpenFileDialog you will get a “Dialogs must be user-initiated” error message. This is because Silverlight dialogs (like OpenFileDialog) can only be opened from “user actions”, like a button clicked event handler. The reason why this won’t work with LightSwitch is because we invoke the button logic asynchronously, so the Import Data button code is not considered to be “user-initiated”.

Run That Thing!

In Solution Explorer, right click the ImportDataFromAWebApp project, and select “Build”.
After the build, press F5 to run your project
You should see inside the Editable Contacts Grid screen’s command bar an “Import Data” button:
Click the button, and you should see the SelectFileWindow Silverlight dialog we created
Click the “Browse” button inside our SelectFileWindow dialog to open up the OpenFileDialog
Select a .csv file to import (I have one at the end of this blog which can be used)
Click “OK” to import the data
You should now see your data displayed inside your workspace

The C# and VB.NET code is available on MSDN Code Gallery here: http://code.msdn.microsoft.com/Visual-Studio-LightSwitch-1f8aa17e

Let me know if you have questions. Enjoy!

Matt Sampson -

How Do I: Export Data to a Word Mailing Labels Document

Matt Sampson — Tue, 26 Apr 2011 04:55:00 GMT

I’m going to start off my first “How Do I” post with a simple application that exports the application’s data to a Word Mailing Label Document. At the end of the blog you’ll find links to the the VS LightSwitch project code for both C# and VB.Net.

Back Story

I was sending several dozen birth announcements recently to friends and family, and realized that I needed a better way to manage all the addresses and contact information I had floating around my house. That, and needing to brush up on my Visual Studio LightSwitch (LS) skills, led to the creation of a Contacts manager application.

I was able to quickly create an application using LS which I thought would meet everyone’s needs. But my wife insisted she wasn’t interested in using it unless it could export all the contact information to a Word Document. Fortunately, I was able to get a start on figuring out how to add this functionality by reading Beth Massi’s blog post on creating reports in Word for LS.

Using the System.Runtime.InteropServices.Automation.AutomationFactory class I was able to do just what I needed all from the Client side.

So let’s get started creating a very basic application to manage our contacts, then add some functionality to create a mailing label document using the COM Object and the AutomationFactory class..

Step 1 – Create our simple Contacts table and screen

Create a Visual Studio LightSwitch C# or VB Project
Add a table – Contact, with the following properties:
1. FirstName | String | Required
2. MiddleName | String
3. LastName | String | Required
4. AddressLine1 | String
5. AddressLine2 | String
6. City | String
7. State | String
8. ZipCode | String
9. Country | String
10. PhoneNumber1 | PhoneNumber
11. PhoneNumber2 | PhoneNumber
12. BirthDate | Date
13. MiscellaneousInformation | String
Add a List and Details screen, called Contacts, which uses the Contacts table data
OPTIONAL - I made some minor changes to the “List” portion of the screen
1. In the screen designer, navigate to Columns Layout-> Rows Layout –> List and change “List” to “Data Grid” using the drop down arrow
2. Under Columns Layout –> Rows Layout –> Data Grid –> Data Grid Row remove all fields except for “First Name” and “Last Name”
In the screen designer, under Columns Layout –> Screen Command Bar add a button
Call the button “Export to Word Mailing Label Document” (we’ll add the code later)
Your screen designer and Solution Explorer should look something like this now:

Step 2 – Add Client side code to generate our Word document

In Solution Explorer, click the drop down arrow next to the “Logical View” button and select “File View”
1. The Solution Explorer tree switches to the File View mode which displays all the code under the Client, Common and Server projects
We are going to add our own User Class to the Client project, so right click the Client project, and select Add –> Class.

Add a new Class called ExportToWord. Paste the below code into the class:

//' Copyright © Microsoft Corporation.  All Rights Reserved.

//' This code released under the terms of the 

//' Microsoft Public License (MS-PL, http://opensource.org/licenses/ms-pl.html)

using Microsoft.LightSwitch;

using Microsoft.LightSwitch.Framework;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.IO;


namespace LightSwitchApplication.UserCode

{

    class ExportToWord

    {

        /// <summary>

        /// Create a mailing label document based upon our Contacts and their corresponding address information

        /// </summary>

        /// <returns>A byte array containing the generated Word Mailing Label Document</returns>

        public static byte[] ExportToMailingLabelDocumentWithCOM()

        {

            Object fileName = String.Concat(

                Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments),

                @"\Contacts_" + System.DateTime.UtcNow.ToFileTimeUtc() + ".docx");

            Object labelName = "8660 Easy Peel Address Labels";


            dynamic wordObject = System.Runtime.InteropServices.Automation.AutomationFactory.CreateObject("Word.Application");

            wordObject.Documents.Add();


            // Create an empty mailing label document

            dynamic mailingLabelDoc = wordObject.MailingLabel.CreateNewDocument(ref labelName);

            try

            {

                // Format the contacts address information

                List<string> contacts = FormatContactsAddressInformation();


                // Populate the word document with labels

                PopulateLabels(contacts, mailingLabelDoc);


                // Save our label doc as the default word format (i.e. docx)

                mailingLabelDoc.SaveAs2(ref fileName);

            }


            catch (Exception e)

            {

                throw new InvalidOperationException("Failed to create document", e);

            }


            finally

            {

                // Wait for Word to shut down to ensure the document is released

                if (mailingLabelDoc != null)

                {

                    mailingLabelDoc.Close();

                }

                if (wordObject != null)

                {

                    wordObject.Quit();

                }


                // Cast our wordObject as IDisposable so that we can 

                // invoke .Dispose() and be sure the COM object is released

                IDisposable disposable = wordObject as IDisposable;

                if (disposable != null)

                {

                    disposable.Dispose();

                }

            }


            // Take our newly created word document, and stick into our a Byte[] array

            byte[] buffer = File.ReadAllBytes((string)fileName);


            // Delete the file now that we are done with it

            // We'll pass back the byte[] buffer and let the user choose a filename and location

            File.Delete((string)fileName);


            return buffer;

        }


        /// <summary>

        /// Formats each contacts address information and stores the data into a List

        /// </summary>

        private static List<string> FormatContactsAddressInformation()

        {

            // Populate a List with our contacts and their address information

            List<string> contacts = new List<string>();


            EntitySet<Contact> contactsSet = Application.Current.CreateDataWorkspace().ApplicationData.Contacts;

            foreach (Contact contact in contactsSet.OrderBy(x => x.LastName))

            {

                string formattedAddress = contact.FirstName + " " + contact.LastName + Environment.NewLine + contact.AddressLine1 + Environment.NewLine;

                if (!String.IsNullOrEmpty(contact.AddressLine2))

                {

                    formattedAddress += contact.AddressLine2 + Environment.NewLine;

                }


                formattedAddress += contact.City + " " + contact.State + " " + contact.ZipCode + Environment.NewLine;


                if (!String.IsNullOrEmpty(contact.Country))

                {

                    formattedAddress += contact.Country;

                }


                contacts.Add(formattedAddress);

            }


            return contacts;

        }


        /// <summary>

        /// Populate the Labels in a given word document with our Contact's information

        /// </summary>

        private static void PopulateLabels(List<string> contacts, dynamic wordDocument)

        {

            dynamic docTable = wordDocument.Tables[1];


            // Starting at row 1, iterate through each row and column in the Mailing Label's Table

            // And for each cell, insert our Contact's address information

            int row = 1;

            int currentContactIndex = 0;

            while (currentContactIndex < contacts.Count)

            {

                // Skip even numbered columns since they are "divider" columns and not intended for cell text

                for (int column = 1; column <= docTable.Columns.Count; column += 2)

                {

                    // If we've run out of Contacts, break out

                    if (currentContactIndex >= contacts.Count)

                    {

                        break;

                    }

                    docTable.Cell(row, column).Range.Text = contacts[currentContactIndex];

                    docTable.Cell(row, column).Range.ParagraphFormat.Alignment = 1;

                    docTable.Cell(row, column).Range.Cells.VerticalAlignment = 1;

                    docTable.Cell(row, column).Range.Rows.Alignment = 1;

                    currentContactIndex++;

                }

                // Keep track of what row we are on in our table

                row++;


                // Check to see if we've run out of rows in our table

                if (row > docTable.Rows.Count)

                {

                    // Add a new row to our table

                    docTable.Rows.Add();

                }

            }

        }

    }

}

Here’s the breakdown of what the ExportToWord’s class methods are doing:
- PopulateLabels():
  1. Iterates over the table cell’s in a Word document instance.
  2. Populates each cell with a Contact’s address information.
- FormatContactsAddressInformation():
  1. Iterates over each Contact in the SQL database, ordering the contacts by LastName .
  2. Takes the necessary address information from each contact and formats it into a nice looking string.
  3. Each string is added to a List of address information.
- ExportToMailingLabelDocumentWithCOM():
  1. Creates a Word.Application COM Object.
  2. Creates an empty Mailing Label Document based off the “8660 Easy Peel Address Labels” template.
  3. Calls FormatContactsAddressInformation() and PopulateLabels()
  4. Now the mailing labels are populated with the correct data
  5. Save the document and then store it in a byte array
  6. Delete the original document, and pass the byte array back to the calling method

Step 4 – Add Button code to call into our ExportToWord class

We are now going to add code to our button to invoke the code we added in the previous steps.
In the screen designer, under Columns Layout –> Screen Command Bar, right click the “Export to Word Mailing Label Document” button and select “Edit Execute code”

Paste the following code into the your button’s method :

            // Call into our Client User Class to create the word document, then return it as a byte array

            byte[] wordDocument = ExportToWord.ExportToMailingLabelDocumentWithCOM();


            this.DisplaySaveAsFileDialog(wordDocument);

This won’t compile now until we add the DisplaySaveAsFileDialog() method to the same class as well. So copy and paste the below method into the class:

        /// <summary>

        /// This method will display a SaveAsFileDialog to the user to save

        /// a given file buffer

        /// </summary>

        private void DisplaySaveAsFileDialog(byte[] fileBuffer)

        {

            // Need to switch back to the Main UI thread before we can pop up any dialogs.

            // We need to do this, because by default the button code operates outside of the main

            // UI thread, and the only way the user is going to see a Dialog box is for it to 

            // appear inside the main UI thread.

            Dispatchers.Main.BeginInvoke(() =>

            {

                SaveFileDialog dialog = new SaveFileDialog();

                dialog.DefaultExt = ".docx";

                bool dialogResult = (bool)dialog.ShowDialog();


                if (dialogResult == true)

                {

                    using (FileStream fileStream = (FileStream)dialog.OpenFile())

                    {

                        fileStream.Write(fileBuffer, 0, fileBuffer.Length);

                        fileStream.Close();

                    }

                }

            });

        }

And then, we will need to add these using statements.

using System.Windows;

using System.Windows.Controls;

using Microsoft.LightSwitch.Threading;

//Namespace of our ExportToWord class

using LightSwitchApplication.UserCode;

In addition to invoking the ExportToWord.ExportToMailingLabelDocumentWithCOM() method we wrote, this button code will display a Save File Dialog so that the user can decide where on their client side machine they want to save the Word document.
To create the file, the Save File Dialog will read in the byte[] array which we returned earlier from the ExportToMailingLabelDocumentWithCOM() method.
As the code comments in DisplaySaveAsFileDialog() state, to invoke the Save File Dialog, we have to switch to the main UI thread since the button’s code operates outside the main UI thread. And if we want to do something like pop up a dialog, it has to be done in the main UI thread.

Step 6 – Run it

Compile and run our Contacts application now.
Enter in some Contact information.
We should have a screen looking something like this:
Now if we click the “Export to Word Mailing Label Document” button, our application will display a “Save As” File dialog.
After specifying a name for our file, we should be able to open it and see our mailing labels.
1. I specified the 8660 Easy Peel Address Labels in our code when generating the Word document, but you could customize this code for a different mailing label template if needed.

Code samples are here: http://code.msdn.microsoft.com/Visual-Studio-LightSwitch-d2ca025e

In the near future I should have another blog post on how to create a document on the Server side (allowing you to take advantage of Intellisense) and transfer that document back to the Client.

Let me know if you have any questions!

Thanks - Matt Sampson

Fargo VS LightSwitch Team

Matt Sampson — Thu, 14 Apr 2011 13:00:00 GMT

Hello All,

Time to start a new chapter in my life at Microsoft. I officiall started on the Visual Studio Lightswitch team here in Fargo, ND on April 4th.

I should be posting some good stuff about Lightswitch on this blog shortly.

Stay tuned.

Matt Sampson

Heavily Caffeinated

ASP.NET SignalR and LightSwitch (VS 2012 Update 2)!!!

SignalR? What is that?

LightSwitch…meet SignalR

Basic App is done. Onto SignalR

NuGet is done. Put SignalR code into the Server!

Put SignalR into the Client!

Almost done! Let’s have the Server call the Client.

That’s it! F5 it and hang on.

LightSwitch – 10 Performance Tweaks Anyone Can Do

1) Non active "tabs"

2) Data columns you don’t care about

3) Computed Properties and Validators

4) Editable Grid Screens vs. List and Details

5) A bit more advanced IIS Server tweaks

6) Screen methods

7) Profiling

Don't be afraid to use profilers to profile your client, and middle tier logic. Use SQL profiler to analyze the queries you application is executing. Use Fiddler to track the number of middle tier requests and the response sizes.

8) Load Testing

9) Giant screens with lots of data

10) Queries (the messy ones)

Finding Your LightSwitch Produced OData Services (Visual Studio 2012)

Where is my OData Service?

Find it with a custom control

Quick look at the code

Bring it all together

OData Apps in LightSwitch (With Custom RIA Data Sources and Many to Many!), Part 3

Retrieving “Incidents” data

Custom RIA Data Source – Creation

Custom RIA Data Source – Adding Code

Add Our RIA Data Source

Modify our Stops List and Detail Screen

F5 IT!

Wrapping it Up

OData Apps In LightSwitch, Part 2

Adding Auto Refresh

Adding Bing Maps

Check it out

OData Apps In LightSwitch, Part 1

Oh, Data!

Attach To It

Create Some Queries

Add Computed Properties

Create Some Screens

Run It

Concluding Part 1

How Do I: Import and Store a Data File

Backstory

Create the project and a table

Create the screen

Add a custom Silverlight dialog

Add our screen’s button code

Run it and import some files

How Do I: Import Data While Running a LightSwitch Web Application

Overview

Create a Simple Web Application

Add the Table

Add the Screen

Add a Simple Silverlight dialog

Add a Simple Class to Parse the .CSV File

Add Import Data Button Code

Run That Thing!

How Do I: Export Data to a Word Mailing Labels Document

Back Story

Step 1 – Create our simple Contacts table and screen

Step 2 – Add Client side code to generate our Word document

PopulateLabels():

FormatContactsAddressInformation():

ExportToMailingLabelDocumentWithCOM():

Step 4 – Add Button code to call into our ExportToWord class

Step 6 – Run it

Fargo VS LightSwitch Team