Visual Studio LightSwitch HTML: mainly for mobile

Microsoft’s Visual Studio LightSwitch is an innovative development tool that lets you build multi-tier database applications without ever designing the user interface directly. Instead, you work with defining the database and the the features you want on your screens. LightSwitch generates the user interface for you. You can also add code snippets, and advanced developers can create custom controls and extensions.

The thinking behind LightSwitch was to make it easy for non-developers to create database applications, though it is not the most intuitive of tools and in reality it is developers looking for rapid application development who are most likely to use it. There is a lot to like in the way it is designed, like the data-first approach and the easy to use database designer, but this is spoilt by some odd decisions. One is that the LightSwitch team are seemingly averse to reference documentation, preferring to deliver various how-to walkthroughs, which is frustrating if you want to find out in detail how it is meant to work.

The initial release of LightSwitch, as well as the new edition in Visual Studio 2012, generates only a Silverlight client, making it useless for mobile devices and somewhat annoying on desktop PCs since you have to install the Silverlight runtime. Microsoft has addressed this by creating an HTML client update, which lets you generate an HTML user interface. This is now at Preview two, and I downloaded it to have a look.

Since LightSwitch generates the user interface from metadata, you might hope that the HTML version would let you take a project created for Silverlight, and simply generate a functionally equivalent HTML application instead. Even if some touching up was needed, such as rewriting C# snippets in JavaScript, this would be a nice option. However that is not the approach Microsoft has taken. It has added an option to create an HTML client for a LightSwitch project, but you have to redo all the screens. In addition, the HTML client is intended mainly for mobile, and is designed for touch control, as explained by Microsoft’s Joe Binder here:

We are not expanding the HTML client’s scenario target to include desktop in our first formal release.  The first release will be based exclusively on JQueryMobile and be optimized for building touch-oriented apps.  We’ll stay tuned to your feedback to sort out where/when we go after that, but we still have some issues to sort out for our mobile story and we’ll remained focused until we feel confident that we have a viable mobile offering.

Of course it is still HTML, and will run on modern desktop browsers, though the generated user interface uses JQuery Mobile extensively. Another of the issues here is that HTML 5 may be better supported on smartphones running WebKit-based browsers than on desktops such as Windows XP running Internet Explorer 8, creating problems for LightSwitch. It is also hard to create a user interface that is equally well suited to touch control as to keyboard/mouse interaction; this issue is a common complaint about Windows Store apps on Windows 8.

The HTML client is still interesting, more so than the original LightSwitch with its Silverlight web or desktop clients. Rapid database app development for mobile devices is an key area, as businesses work to enable their mobile users to access company data.

After installing the preview, I built a quick HTML client app, based on a contact database.

image

It did not take long to build a working application, though there are some puzzles. My first effort at creating a contact list only displayed the firstname of each record. Apparently that is the “summary” layout, and I cannot see any quick way to change the summary definition to something more useful. Instead, I changed it to a Rows Layout which shows all the fields, but lets you delete those which are not required. Then I added an Edit contact button, though it appears as plain text without even an underline to show that it is a hyperlink, and I cannot see quickly how to change this:

image

The button’s “Appearance” properties are not helpful:

image

I also found an annoyance that may be a bug. I created several new contacts via a Contact details form (the first illustration above). I saved each contact with the tick button, whereupon they appear in the contact list. However they are not yet really saved. To save the contact to the database, you have to execute the save action, which is a built-in button on the BrowseContacts form. When I tried to save, the phone number fields (defined as Phone Number fields) failed validation, even though they would be valid phone numbers in the UK, and the records were not saved. Fair enough I suppose, but why did they pass validation in the Contact Detail form?

I am sure there are easy fixes for all these niggles, but I mention them to illustrate the point about this not being the most intuitive of tools.

The general approach also takes some mental adjustment. Here is a tool that makes web apps, but you cannot use a web design tool to customise the user interface.

As a tool for building mobile web apps, LightSwitch does show promise and I look forward to the final release. That said, it would be good if Microsoft could adapt the HTML output so you can make it suitable for desktop browsers as well.

VN:F [1.9.18_1163]
Rate this post
Rating: 6.5/10 (2 votes cast)
Visual Studio LightSwitch HTML: mainly for mobile, 6.5 out of 10 based on 2 ratings

Related posts:

  1. Visual Studio LightSwitch to get HTML5 support
  2. Ten things you need to know about Microsoft’s Visual Studio LightSwitch
  3. Hands On with Visual Studio LightSwitch – but what is it for?
  4. Microsoft’s Visual Studio LightSwitch: does it have a future?
  5. Visual Studio LightSwitch – model-driven architecture for the mainstream?

3 comments to Visual Studio LightSwitch HTML: mainly for mobile