You are here:   Blog
Register   |  Login

LightSwitch News

 

Jun 8

Written by: Michael Washington
6/8/2013 6:46 AM  RssIcon

image

After using the Visual Studio LightSwitch HTML Client, you may wonder, how does it work? How does it turn the program we designed into an actual web application?

image

We will explore the application created in the tutorial: Online Ordering System (An End-To-End LightSwitch Example).

image

The tool that will be most helpful will be Fiddler, available here: http://fiddler2.com. This program will allow us to monitor the traffic that is transmitted between the web server running the LightSwitch application and our web browser.

image

When we run Fiddler and monitor the web traffic created by the End-To-End application (running at: https://endtoendexample.lightswitchhelpwebsite.com/HTMLClient), we  see that is loads a number of files.

Note: the 404 errors in the image above are due to the sample application not employing any Localization.

image

All of these files are required to display the first page. We will also see that as we use the application, it will transmit only a small amount of information. Primarily, only the data required to display or update the application.

 

The HTML Page

image

Everything starts with the HTML page.

 

image

When we look at the contents of the page, we see that it loads the .css files and .js scripts that the LightSwitch application requires.

The JavaScript library files that it loads are:

  • jquery/ jquery.mobile
    • JavaScript libraries that provide cross browser functionality
  • msls
    • The primary LightSwitch framework library that provides the application functionality
  • winjs
    • A helper library for things such as Promise objects that handle asynchronous calls
  • datajs
    • Used to provide OData communication

 

msls.js and winjs.js

image

The msls.js library is the heart of the LightSwitch framework. There is an enormous amount of functionality in this file. Much of it you can reference in your custom code.

 

image

The best way to explore it, is to open the msls-vsdoc.js file in the Scripts directory and read the comments.

There is a project by Soft Landing, inc that is documenting this library. You can get more information about that project at this link: http://softlandingcanadaforums.com/yaf_postsm49_HTML-Client-API-Discovery-and-Extension-Framework.aspx.

 

GetAuthenticationType

image

During the application start-up process, the msls.js library makes a call to the SecurityData.svc service to determine what the authentication type for the application is. If Forms Authentication is detected, the LightSwitch client will display the logout button.

 

generatedAssets.js / usercode.js

image

The generatedAssets.js file is referenced in the default.htm page.

It contains code that loads other required JavaScript libraries and files.

 

image

The usercode.js file (loaded by the generatedAssets.js file) loads the JavaScript files that contain custom code that we have created.

 

model.json

image

In the LightSwitch Silverlight client, the structure of the application is contained in .lsml files. In the running LightSwitch HTML Client, the structure of the application is contained in the model.json file.

 

image

The model.json file is created each time we build the LightSwitch application.

 

image

The file is in JSON format and describes the entire application. When this is loaded, the application has all the information it needs to run, except for the data.

 

The Screen

image

When we look at a screen in the LightSwitch designer, we see that it consists of Properties, Collections and Commands. This is consistent with the MVVM (Model-View-View Model) structure of the Silverlight Client.

image

When we look at the same screen in the model.json file we see that it defines the structure of the screens.

 

image

The viewModel.js library defines the JavaScript representation of the screens and allows programmatic access to the screens.

 

 

The Data

image

The data.js library contains a representation of all the data assets in the LightSwitch application.

It also contains the location of the .svc services that are used to actually retrieve the data from the server.

 

image

The msls.js library, at this point, has access to all the information needed to obtain the data needed by the application.

In this example, it knows from the model.json library that the first page contains the orders collection. It constructs a query using properties from the data.js library to retrieve the data.

 

Updating Data

 

image

The application is very efficient at this point. It only needs to contact the server to retrieve data and images.

Clicking the save button, when adding a single order detail…

image

… causes only one small request to the server.

image

Inserting, or updating in the application requires only a small data payload.

image

After inserting and updating several records, only the data service calls are needed.

 

Special Thanks

A very special thanks to LightSwitch team member Stephen Provine for his valuable assistance.

Codeproject

3 comment(s) so far...


Gravatar

Re: How Does A LightSwitch HTML Client Application Work?

Sometimes you'd won't see all of the files being downloaded Fiddler as LS tries to cache as many files as possible. You'll only see all of the files being downloaded the first time you run your app ...and possibly after a complete rebuild of your solution.

By Michael Herman on   6/10/2013 9:48 AM
Gravatar

Re: How Does A LightSwitch HTML Client Application Work?

Nice post! Thanks for posting it

By Jay Turpin on   6/18/2013 4:00 PM
Gravatar

Re: How Does A LightSwitch HTML Client Application Work?

Nice Information. Thanks

By Ravi Patel on   8/12/2014 8:43 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