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.



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



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

The HTMLClient Project



The Content Folder



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

1. The CSSs required for the mobile layouts
2. The CSSs required for Core LightSwitch HTML Client

The GeneratedArtifacts Folder



model.json



This folder has the LightSwitch runtime generated files.

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

The Scripts Folder



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

1. datajs: contains the necessary functions required for the data orientated tasks
2. jQuery: the jQuery framework for the better DOM manipulation
3. msls: the Core Framework for the LightSwitch
4. 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.



The Starter Page

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



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



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



The Server Project handles the data and their related stuff.

1. 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.
2. 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.