You are here:   Blog
Register   |  Login

LightSwitch News

Aug 17

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

image

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?).

image

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

 

Data Binding

image

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.

image

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.

image

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

image

A Scope in Angular is like a screen in LightSwitch.

image 

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

image

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

 

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

 

image

When we run the application the value shows.

 

Functions

image

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

image

You use Add Data Item to create a Method.

image

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.

image

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;
};

 

image

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

 

Directives

image

 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.

image

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.

image

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. ";
};

 

image

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;
    });
};

 

image

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

image

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.

image

In LightSwitch we can add a table.

image

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.

image

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";
};

 

image

When we run the application the records show.

image

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

image

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.

image

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

image

We design a query that takes a search Parameter.

image

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.

image

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)

Tags: VS2013
Categories:

2 comment(s) so far...


Gravatar

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

This is excellent. What a great way to draw in people who otherwise would not become familiar with what LightSwitch can do.

By Richard Waddell on   8/18/2013 6:22 AM
Gravatar

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

@Richard Waddell - I think it also shows LightSwitch developers what LightSwitch can do :)

In creating the code for the article I found myself doing things I never did before in LightSwitch such as "screen.findContentItem("ctrlShow").isVisible = screen.boolShow;"

By Michael Washington on   8/18/2013 6:30 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 

Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation