Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Anatomy of a LightSwitch HTML Project
LightSwitch HTML project files have the extension .ls3proj. The ls3 literal means something important: With Visual Studio 2012 Update 2, LightSwitch has reached version 3. If you create a LightSwitch application without the HTML client, the project file version is based on LightSwitch v2. If you decide to add an HTML client later, Visual Studio will need to upgrade the project to version 3. But version 3 is the default if you create a new project starting from the HTML application template.
You also need to understand other parts of the anatomy of a LightSwitch HTML project, in case you want to do any of the following:
- Customize the look-and-feel of the application
- Write additional code
- Add libraries via NuGet, the Visual Studio library manager
To understand the important parts that make up an HTML project, in Solution Explorer click the Toggle View button to enable the File view. Figure 1 shows how Solution Explorer looks at this point.
)
Figure 1 Solution Explorer shows the anatomy of an HTML project.
Notice that the Content folder in Figure 1 contains a lot of Cascading Style Sheets (CSS) files. These files define the layout of items and controls; you can customize the CSS files for a LightSwitch HTML project with different settings to provide a custom look. (I'll discuss how to do so later in this article.)
Next, take a look at the Scripts folder. It contains JavaScript files based on the jQuery and jQuery Mobile libraries. Visual Studio LightSwitch uses these files to produce the application infrastructure, and they must never be edited manually.
Finally, the default.htm file is the HTML document that presents the application to the end user. You can edit this file if you know how to work with the HTML markup language, such as for editing some parts of the user interface. If you double-click default.htm, Visual Studio LightSwitch shows the typical web designer that should be familiar if you already have some experience with the ASP.NET platform. Figure 2 shows how the designer looks like with the Split view enabled.
)
Figure 2 Editing the HTML document.
The HTML document makes the appropriate JavaScript invocations; this is where you can change the theme. (Comments in the markup code will help you understand what each snippet does.) For instance, since the page title and the application title are generated based on the project name (OrdersManagement), you might want to change both values by adding a space between Orders and Management. For the page title, you can simply edit the <title> tag as follows:
<title>Orders Management</title>
To change the application's title, simply locate the appropriate <div> tag inside the <body> tag and change it to read like this:
<div>Orders Management</div>
You can easily understand how the HTML document works at debugging time. While the debugger is attached to the web browser, the DOM Explorer window in Visual Studio LightSwitch helps you to understand what's going on in the application. As Figure 3 shows, when the mouse pointer hovers over parts of the Document Object Model (DOM), the web browser highlights the appropriate piece of the user interface (UI) and displays some information at the top of the window.
Knowledge of the HTML markup language is important to help you understand the information returned by this tool.
)
Figure 3 Debugging the HTML document with the DOM Explorer window.
The server side of the project is still the same. This is where you can write business logic that runs on the middle tier (such as server-side validation and queries).
Next I'll show you how to customize the user interface of an HTML client.