LightSwitch in Visual Studio 2012 Proves Effective as RAD Tool

 
 
By Jeff Cogswell  |  Posted 2013-02-12
 
 
 

LightSwitch in Visual Studio 2012 Proves Effective as RAD Tool


In December, I reviewed the new Visual Studio 2012, and I briefly mentioned that it includes a new version of Microsoft LightSwitch.

LightSwitch first came on the scene two years ago, and although I felt it had a certain amount of promise, I had serious reservations about suggesting it would take off in sales. Essentially it’s a rapid application development (RAD) tool for building database applications quickly and easily with no programming, while allowing advanced developers to actually go in and write C# code.

But there was a problem with it that I, personally, felt was a serious flaw: The final programs ran under the Silverlight runtime. But now they’ve changed that, with a new “HTML5 Client” version.

This makes sense. Since the first LightSwitch came out, Microsoft seems to have, on one hand, backed off a bit from Silverlight, instead focusing on the HTML5 features of Internet Explorer, but at the same time including Silverlight support in Windows 8.

Either way, I, as a developer, would not want to release a browser-based app that requires Silverlight. First, most of the things we do today in the browsers can be accomplished with JavaScript and especially with the new HTML5 features. And second, if we’re going to use a plug-in, why not use the one that most people have, Flash?

However, that doesn’t mean I develop for Flash. I don’t. But it is available and it makes more sense for somebody to choose something as ubiquitous as Flash over Silverlight to develop browser plug-ins.

In this review, then, I’m taking a look at the HTML5 Client version.

Creating the Project

LightSwitch is built right into Visual Studio 2012 as a project type. In the New Project dialog box, there’s a section called “LightSwitch” and it has four types: LightSwitch Application for Visual Basic, LightSwitch Application for C#, LightSwitch HTML Application for Visual Basic and LightSwitch HTML Application for C#.

The first two are Silverlight applications, and the second two are HTML5 applications. For these tests I’m using the HTML5 C# project.

After creating the initial project, you get to set up the data. This is where the tool is supposed to be easy for non-technical people. You can either attach the application to an existing database or use a simple modeling tool to create your tables. You still have to have a basic understanding of what tables and relationships are. However, I’m not sure how easily a non-technical person could handle it (or even be willing to).

If you create the tables, you choose the names for the fields. The tables automatically get an ID field that’s an integer and a unique key, which as far as I could determine in this project, you can neither change nor remove.

For the rest of your fields, you can choose between a large set of data types, such as numbers, dates and strings, but also higher-level fields such as Money, Percent, Email Address, Phone Number and Web Address.

LightSwitch in Visual Studio 2012 Proves Effective as RAD Tool


Each field also gets various other properties accessible through the Properties window, including Display Name, which specifies how it shows up by default in the screens. (Remember, this is a tool for high-level database app development, so there are a lot of things that happen automatically for you.)

You can set up multiple tables and create relationships between them. This was a little strange, because normally when you create database apps and create relationships, you create the fields in the table that become foreign keys in other tables. That’s not how it works here, though. Instead, you don’t create a foreign key field. You simply create a relationship between the two tables and LightSwitch automatically creates the foreign key field for you.

I suspect the reason is that it’s more of a high-level concept than purely technical. Whereas a technical person might see tables in terms of outer joins and what-not, a non-technical person might see it as “drilling down” or “sub data.” For example, you might have a table with customers, and inside that you might drill down to see any one customer’s orders.

The orders might feel conceptually as sub-tables. And that’s more or less how the data is presented here. And while modeling data, you choose the name used for each field when it’s displayed, and whether it’s displayed at all. Yes, you’re mixing data and presentation, but again, this isn’t a tool for developing highly sophisticated, custom software.

As for attaching to external data sources, LightSwitch includes a data provider for Microsoft’s OData protocol as well as for SQL Server and most other .NET data providers you have already installed on your computer. (For example, I had installed MySQL Connector/Net, so MySQL is available to me.)

The OData protocol was invented by Microsoft and is based on the Representational State Transfer (REST) and the JavaScript Object Notation (JSON) protocols for connecting to remote data sources. It works pretty well. I was able to connect to a free, read-only version of the Northwind Database that Microsoft has made available.

All I had to do was provide the URL to make the connection. Other companies have embraced the protocol, as well. For example, Netflix has its entire catalog accessible online through the protocol. I tried that one too and was able immediately to model the entire catalog of movies. (LightSwitch did reject a couple of the data types in the catalog, however, and skipped those fields.)

Creating Screens

After you’ve modeled your data, you create application screens. This is where things have partly improved over the Silverlight approach, but also aren’t as good. When you create your screens, they will ultimately get rendered in the browser. That worked out pretty well. But I found the controls were severely lacking compared with the Silverlight version.

Building the screens is pretty easy. I wanted to try out the Netflix library. In the Solution Explorer there’s an add screen menu item, which opens the Add New Screen dialog. Here you can create three different types of screens (but you have even more control later). You can choose between Browse Data Screen, View Details Screen and Add/Edit Details Screen.

LightSwitch in Visual Studio 2012 Proves Effective as RAD Tool


This is where I got a bit confused at first, until I realized the whole navigational approach to the LightSwitch apps. Unlike a traditional HTML app where you might create a page with links to other screens, here you have to first create a “home” screen. These screens aren’t just HTML pages. Rather, they’re visual representations of some part of the data (i.e. the “presentation”). So for my Netflix app, I started with a Browse screen and attached it to the Genres table.

At this point, I stopped and ran that application so I could see the defaults. Sure enough, I saw a list of all the Genres. I couldn’t yet drill down into the data, but it appeared in the browser.

But it was a bit strange looking. It wasn’t like the grids that were available in the older Silverlight versions. Instead it actually looked sort of like something you would see on a smart phone. But it turns out there’s a reason for that: Behind the scenes, the Lightswitch HTML apps are powered by jQuery Mobile. It’s hard to say exactly why Microsoft chose this approach, but my suspicion is they want us building apps that are more for phones and tablets.

The apps run using the new IIS (Internet Information Server) Express, although you can wire them into the IIS server by installing the LightSwitch runtime extensions. However I haven’t tested that feature yet. What I did try out, however, was configuring my firewall and then using my iPhone to connect to my app.

It worked, but it involved a hack of sorts. I had to go into the IIS Express’s configuration XML file and change the domain name to allow all incoming domains, not just localhost. Once I did that, I put my computer’s IP address and the app’s port number into the iPhone browser and there it was. It looked good on the phone, too.

You can also use the built-in designer (which is not a WYSIWYG designer) to customize your screens even more. For example, instead of displaying data in rows, you can display your data in a block format that looks—no surprise—very much like the new Windows 8 interface with colored boxes.

In order to add drill-down capabilities to my NetFlix screen, I had to first create a second screen that shows the details. Since my main screen shows genres, the details for a genre will show the titles for that genre. To do so, I clicked the Add Screen menu and quickly created another screen, this time again choosing Browse Data Screen, but this time for the data I chose the Titles table.

The next step is to cause the Titles screen to open when I click on an individual genre in the home Genre screen. This again shows where Microsoft’s focus is for app development. You don’t add a “click” event as you do in other development platforms. Here, you add a “tap” event. Yes, that’s a tiny technicality, but it does indicate Microsoft expects that future development will be concentrated on tablets and mobile devices.

LightSwitch in Visual Studio 2012 Proves Effective as RAD Tool


Adding the tab event is easy. You get a dialog box that includes default actions you can choose from, one of which is called showBrowseTitles. This appeared in the list after I added my Titles browse screen. I chose that one and then I had to choose the type of “task.” This one threw me for a loop until I realized what it meant: Each subsequent screen you navigate to can have buttons in the upper-right corner. A screen where you might enter and save data could have a Save button. A screen that doesn’t have that would just have a “Back” button. In this case, I chose the “Back” task.

That was it.  Now when I ran my app, I could click on (or “tap”) a Genre and go to a screen showing me the titles available under that genre—or at least that was the theory. I apparently incorrectly configured my data and instead of seeing a title, I’m seeing an ID. That’s okay; in other apps I configured the data correctly.

Adding subsequent screens was just as easy. Instead of adding a Browse screen, I did a Details screen where it would display details of a title, and so on. I couldn’t add data with the NetFlix data source, but I could with my own custom data. Screens for adding data worked nicely, and included drop-downs for dates. And, of course, they all performed well on my iPhone.

Working With LightSwitch

While using LightSwitch for various tasks, I noticed some things that were a bit odd. Whereas with a normal programming tool, you create a new file and then you save it before closing it. If you close without saving, you lose your changes. That’s true not with programming tools, but with most tools, including this word processor I’m working with.

But with Lightswitch, closing automatically saves. So if you create a new table, but then decide you don’t want the table and close it without saving—too late. It’s already there and it’s given a generic name. You have to then right-click on it in the solution explorer and delete it. Also, if you make changes and decide you want to abort, you don’t want to just close it, thinking you’ll get rid of your changes. Your changes will be saved. Instead, you need to use the Undo feature.

Conclusion

What would you use this for? It’s best for in-house apps. In the past I’ve said the same thing for LightSwitch and my view there was partly based on the Silverlight requirements. But still, even though it can now run in basically any browser and it looks decent on the small mobile screens, it’s still a quick RAD tool and the apps look like they were made by one. But if you are looking for an effective RAD tool, this one definitely works well. While LightSwitch lets you quickly assemble applications, you can drop down to the code level to make more complex apps with it.

Rocket Fuel