LightSwitch HTML Client, Behind the Scenes

It is always interesting to know, behind the scenes. Yes, in this article, we will explain how the LightSwitch HTML Client web application works.

Let us use the example from my last HTML Client article.

You might be wondering how the HTML Client web application looks, though it has only a few files as shown in the following figure.

The solution view shown above is the Logical View, we need to switch it to the File View. Here is my old article about Solution Explorer Views available in LightSwitch Projects.

Let us change the Solution Explorer view from a Logical View to a File View.

Lightswitch Logical View

You will get the option to change the File View if only you select the Project but not the solution.

HTML Client web application

After changing the Solution Explorer view to File View, you might see two projects named HTMLClient and Server.

The HTMLClient Project

The Content Folder

HTML Client Content Folder

The Content folder contains the required CSSs and images for the application.

The CSSs required for the mobile layouts
The CSSs required for Core LightSwitch HTML Client

The GeneratedArtifacts Folder

model.json

HTML model.json

This folder has the LightSwitch runtime generated files.

data.js: contains the functions to fetch the data from the Service [.svc]
model.json: contains the data related to the screen appearance
resources.js: contains the application resources like languages to be used with.
viewmodel.js: contains the functions to be executed when the screen actions occur.

The Scripts Folder

HTMLScripts Folder

The Scripts folder contains the scripts required to render the LightSwitch HTML Client application.

datajs: contains the necessary functions required for the data orientated tasks
jQuery: the jQuery framework for the better DOM manipulation
msls: the Core Framework for the LightSwitch
winjs: contains the helper function required by the msls framework

The UserCode Folder

The UserCode folder contains the action function written for the button action or other customized actions.

In our example, we have added a sample alert action as shown in the following figure.

HTML alert action

The Starter Page

Under the HTMLClient Project, you can see the default.aspx page that is the starter page for our application.

HTML Client Starter Page

Please look into the order of the JavaScript files added to the starter page; it is important. Since the LightSwitch HTML Client core framework requires the winjs, it's placed at the top and the user code is placed at the bottom of the scripts.

The Entry Point

HTML Entry Point

Once all the required scripts are loaded, the _run() method of the Core Framework will be executed to launch the application.

That's all about the HTML Client internals.

The Server Project

HTML Server Project

The Server Project handles the data and their related stuff.

The Service.lsml contains the XML data related to the tables we created for the application. I have created a tool to generate the SQL script from this file, in case your project/SQL Server is corrupted.
The Login and Logout pages for the app, if you opt for Forms Authentication. Please read my article on Forms Authentication for more details.

We are done with the internals of the HTML Client web application. In my future articles, we will explain how to use JavaScript + HTML5 + CSS3 effectively in a LightSwitch Application.