Aug 17

Written by: Michael Washington
8/17/2013 10:08 PM 

Jesus Rodriguez wrote a great article titled Why Does Angular.js Rock?. It is an excellent work and really demonstrates the power of  Angular. As I read through the article I realized that the functionality he demonstrates can of course be done in LightSwitch because LightSwitch contains a full featured JavaScript data binding framework to allow you to build SPA (Single Page Applications).

The thing that sets LightSwitch apart from other JavaScript data binding frameworks such as Angular, is that LightSwitch has advanced tooling in Visual Studio. For example, it has a data designer and a screen designer. It provides tight coupling for maximum efficiency when interacting with data  (you can connect to any data source using WCF RIA Services).

What this means is that it is very easy to perform functionality in LightSwitch that can be challenging using other frameworks. Make no mistake, the end result is the same whether you use LightSwitch or another SPA framework (see: How Does A LightSwitch HTML Client Application Work?).

I created a sample application that you can download that demonstrates the examples in this article.

 

Data Binding

The first example covers data binding. The Angular example does not require very much coding. However, the LightSwitch example does not require any coding at all.

With LightSwitch we simply add a Property to the the View Model (the left hand side of the screen) and drag the Property to the screen twice, to create two controls bound to the same property. In one control we set as a text box, in the other we set as a label.

When we run the application, enter text in the text box, and click or tab away, the value is shown in the label.

Note: In Jesus’s example he raises the data binding on each keystroke. While this is possible with LightSwitch it would require code. The vast majority of the time you would not want the data binding raised on each keystroke. You would want it raised after the user has completed entering the value they desire. This is why I chose to show the most common situation.

 

Scope

A Scope in Angular is like a screen in LightSwitch.

 

In LightSwitch you can simply bind a label control to a Property in the View Model…

… and select Write Code and use the following code to set the value:

 

myapp.bShowMessage.created = function (screen) {
    screen.Message = "Hello, World";
};

 

When we run the application the value shows.

 

Functions

In Angular you can define and call Functions. In LightSwitch, Functions are called Methods.

You use Add Data Item to create a Method.

It will show in the View Model (shown in blue), and you can drag and drop it on the Screen designer to bind it to controls if needed.

To write code to define the Method, we right-click on it in the View Model and select Edit Execute Code.

We use the following code:

 

myapp.cWhatIsYourName.greet_execute = function (screen) {
    screen.Greeting = "Hello, " + screen.Name;
};

 

When we run the application and enter a value, and click the button, the Method is executed and the result shows.

 

Directives

 Angular has Directives. LightSwitch uses Properties, Methods (Commands) and Collections (including Queries).

However, any functionality you can do in Angular, you can do in LightSwitch.

In Jesus’s example, he displays a DIV when the button is clicked.

In LightSwitch when we lay out the screen, notice the boolShow property is not bound to any control on the screen. It will only be used programmatically.

To make a DIV we use the Custom Control control. We set it by selecting Edit Render Code in its Properties.

We use the following code:

 

myapp.dShowMessage.ctrlShow_render = function (element, contentItem) {
    // Sets the content of the Div
    element.innerText = "I am only visible when show is true. ";
};

 

We set the code for the Method raised by the button using the following:

 

myapp.dShowMessage.btnShow_execute = function (screen) {
    // Change the value of boolShow to the opposite
    screen.boolShow = !screen.boolShow;
};

 

Finally we create a data binding on the boolShow property that will be raised when anything changes its value:

 

myapp.dShowMessage.created = function (screen) {
    // Create a Listener for changes in boolShow 
    screen.addChangeListener("boolShow", function (e) {
        // Show or hide the Div
        screen.findContentItem("ctrlShow").isVisible = screen.boolShow;
    });
};

 

When we run the application, we can click the button to display the DIV.

Note: You can read more about data binding in LightSwitch at the following link: Writing JavaScript / The Binding Pattern.

 

Data

Now we get to the examples where LightSwitch really shines, working with data.

In Jesus’s example, he creates an array of data and displays it.

In LightSwitch we can add a table.

The table is our Model. It can be a database table or, if using WCF RIA Services, a web service, the server hard drive, or even an Excel file.

We add the entity (table) to the screen and use a Custom Control in its layout.

We then select the Custom Control and select Edit Render Code and use the following code:

 

myapp.eShowPeople.RowTemplate_render = function (element, contentItem) {
    var Person = contentItem.value;
    var itemTemplate = $("<div></div>");
    var FinalName = $("<h2>").text(Person.Name + ' from ' + Person.Country);
    FinalName.appendTo($(itemTemplate));
    itemTemplate.appendTo($(element));
};

 

We can create records using the following code:

 

myapp.eShowPeople.created = function (screen) {
    var PersonOne = new myapp.Person();
    PersonOne.Name = "Jesus";
    PersonOne.Country = "Spain";
    var PersonTwo = new myapp.Person();
    PersonTwo.Name = "Dave";
    PersonTwo.Country = "Canada";
    var PersonThree = new myapp.Person();
    PersonThree.Name = "Wesley";
    PersonThree.Country = "USA";
    var PersonFour = new myapp.Person();
    PersonFour.Name = "Krzysztof";
    PersonFour.Country = "Poland";
};

 

When we run the application the records show.

When we try to leave the page, we are prompted to save the records because LightSwitch automatically implements a data workspace and change tracking.

Clicking save, will save the records to the database, no extra code is needed.

 

Filters

Jesus demonstrates using filters with Angular.

In the LightSwitch example we will perform a server side search that can even handle a database with millions of records.

In LightSwitch, we simply click the Edit Query link next to the collection we want to filter.

We design a query that takes a search Parameter.

We create a property connected to the Parameter and connect that property to a textbox that the user will be able to fill to perform the search.

Without the need to write a single line of code we have a server side search.

 

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

(you must have Visual Studio 2013 (or higher) installed to run the code)