Sep 5

Written by: Michael Washington
9/5/2013 6:35 AM 

I have used Visual Studio LightSwitch HTML Client for a number of years.  Here I am listing the top 10 things, in order of importance, that in my opinion, you need to know how to use to create applications:

1. Data binding
2. Promises
3. WCF RIA Services
4. ServerApplicationContext
5. Before Open and After Close
6. How to implement JavaScript plug-ins
7. How to create records dynamically
8. Custom Control (Creating a DIV)
9. Client side queries
10. Server side security

Note: All of this is covered in my book: Creating Web Pages Using the LightSwitch HTML Client In Visual Studio 2012.

 

Data Binding

If you have been programming for a long time you may be used to event based programming. A user clicks a button, and you have a handler in your code to respond to that event.

With data binding, a user changes a value, and other properties and controls bound to that value, respond to the change in that value.

Not only does this provide for cleaner easier to maintain code, but with client-side programming, you have to use asynchronous calls that you can’t be assured of when, or if they will ever, return. When you set bindings, you are simply saying “when the value I am binding to changes, no matter what changes it, or how it changes, do this thing…”.

Understanding data binding in LightSwitch means that you are not constantly fighting the framework. An important thing you want to understand about LightSwitch is that it is an SPA framework. This means that you do not have post backs where a button click causes the entire page to be refreshed and redrawn. A button click is just a button click that may or may not communicate with the server.So, if you want to change a label when a button is clicked, you bind the label to a value, and you have the button click change the value. The label will automatically update on the screen.

Links:

Writing JavaScript / The Binding Pattern

The LightSwitch Data Binding Framework Using EaselJS

Custom Controls and Data Binding in the LightSwitch HTML Client (Joe Binder)

 

Promises

As the LightSwitch team pointed out to me:

• In order to communicate with remote resources from code, you need to write asynchronous code.
• Promise objects are one possible way of managing asynchronous work that LightSwitch has adopted.
• WinJS Promise objects represent the specific implementation of Promises that the LightSwitch runtime understands.

A Promise object really only has one interesting method, the then method. With the then method, you can specify code that is called when the asynchronous work has completed (either with an error or successfully).

When you make a server-side query in LightSwitch, it will be exposed client-side as a Promise object.

When you make a client-side call to the LightSwitch data layer it returns a Promise object:

You can wrap your own calls in Promise objects:

Promises, Promises, everywhere .

Next to data binding it is most important thing you need to know.

Links:

Using Promises In Visual Studio LightSwitch

 

WCF RIA Services

The only people I have met that do not like WCF RIA Services in LightSwitch are people who have not actually tried them .

WCF RIA Services have been a part of LightSwitch since the very beginning. When they were described to me I wanted to avoid them because WCF is normally very complicated. Once I finally tried using WCF RIA Services in LightSwitch, I realized that they are very easy and, in my opinion, are required to create LightSwitch applications with optimal performance.

The things that would normally cause you to use a WCF RIA Service:

1. The result is comprised of more than 1 data source (please don't ever try that in a Preprocess query) even if that other data source is an internal table.
2. You are performing calculations (the performance of a WCF RIA Service can be massively better and its results are searchable, sortable, and updateable).
3. You are accessing a resource outside of the LightSwitch database (another database, the file system, a web service, a COM object, ect.)

The important thing to know is that when you retrieve data in LightSwitch it transmits the entire row. Normally this is not a problem, but sometimes you can have one or more columns in the row of data, for example a large comment field, that causes a performance issue due to the large about of data that you may not need at the time.

A WCF RIA Service allows you to quickly and easily shape the entity to eliminate any unneeded data.

Links:

Creating a WCF RIA Service for Visual Studio 2012 (Update 2 and higher)

LightSwitch HTML Picture Manager Using WCF RIA Services

WCF RIA Service: Combining Two Tables

Shape Your LightSwitch OData Using WCF RIA Services

Creating a Simple LightSwitch RIA Service (using POCO)

 

ServerApplicationContext

ServerApplicationContext allows your server-side code access the LightSwitch middle-tier’s data workspace. Using this API method has the following benefits:

• The code is ASP.NET code that will show compile-time errors if you, for example, change the schema of a table.
• You have full control over the structure and organization of the code to assist in the management of a large code base.

My recent article: Integrating PayPal With Visual Studio LightSwitch uses ServerApplicationContext extensively. If you want to see a real world example of it, that is a good place to start.

Links:

Using the LightSwitch ServerApplicationContext API (Matt Evans)

A New API for LightSwitch Server Interaction: The ServerApplicationContext (Joe Binder)

Using LightSwitch ServerApplicationContext and WebAPI to Get User Permissions (Beth Massi)

 

Before Open and After Close

The Visual Studio LightSwitch HTML Client creates Single Page Applications. This design essentially means that when an end user arrives at your LightSwitch application, a thin JavaScript framework loads, and only the data is transferred back and forth when a user views and saves data. The screen is not redrawn each time, instead HTML DIVs are shown and hidden.

This allows us to easily write code that performs functionality that is not possible with non SPA programming:

• When we navigate from one screen to another, we have the ability to run code in the context of the screen we are moving from, that sets values on the screen we are moving to.
• We can write code that runs in the context of the screen we are moving from that obtains values from the screen we are moving to, that when we return, will set values on the screen we are moving from.

That may seem confusing, but the key is “in the context of”. We have access to all values we need at all times.

Links:

Visual Studio LightSwitch Screen Navigation and Advanced JavaScript Examples

 

How to implement JavaScript plug-ins

Visual Studio LightSwitch allows you to implement any JavaScript plug-in. Implementing plug-ins provides an enormous amount of functionality for your applications.

Links:

Using The Clippy Agent in the Visual Studio LightSwitch HTML Client

Implementing The Wijmo Radial Gauge In The LightSwitch HTML Client

LightSwitch Employee Vacation Tracker Using The ComponentOne HTML Scheduler Control

 

How to create records dynamically

Creating an object in JavaScript is simple, however, when you create records in JavaScript in LightSwitch you can save the data to the database by simply calling save:

This allows you to manage data in the database easier than any other JavaScript framework.

Links:

Dynamically Creating Records In The LightSwitch HTML Client

 

Custom Control (Creating a DIV)

Modern web applications use DIVs that are displayed, hidden, and updated programmatically.

LightSwitch allows you to easily create a DIV when you use the Custom Control.

You can completely control the contents of the DIV:

You can easily programmatically manipulate the DIV:

Links:

How To Perform Angular.Js Functionality Using Visual Studio LightSwitch HTML Client

 

Client-side Queries

While you may find that calling server-side queries, client-side works in most situations, sometimes you have situations where you want to write a client-side query that obtains server-side data. Don’t worry all server-side security is still enforced.

Links:

HUY Volume II - Visual Studio LightSwitch Advanced JavaScript Examples

 

Server side security

As with any client-side framework you must enforce all security server-side. LightSwitch provides a rich API to accommodate any business logic you require.

Links:

OData Security Using The Command Table Pattern And Permission Elevation

Integrating PayPal With Visual Studio LightSwitch