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.)
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.
To change the application's title, simply locate the appropriate <div> tag inside the <body> tag and change it to read like this:
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.