With LightSwitch, you can build Silverlight-based “desktop” applications that run either on desktops or inside browsers. These applications work well on PCs and are characterized by rich features such as data grids, data-export functionality, and tight integration with the desktop. Here are the main topics that I’ll cover in this chapter:

• the pros and cons of Silverlight versus HTML client applications
• how to create screens, layout controls, and configure screen navigation
• how to present data using built-in data controls

In this chapter, I’ll show you how to develop a desktop application with the same functionality as the HTML application you created in Chapter 3. Just like the previous chapter, this chapter emphasizes the simplicity of LightSwitch by intentionally containing no code.

What This Chapter Covers

In the first part of this chapter, I’ll show you how to build a desktop version of the Help Desk application. The application includes Data Entry screens for both engineer and issue records. To manage existing records, we’ll add Grid screens to display multiple records and Search screens to help users find existing records. When a user clicks a record in a grid, the specified record opens in a separate screen. Just like the HTML application, the Issue screen will include a picker control that you can use to assign an engineer, and the Engineer screen will contain a grid that shows the issue records that are assigned to the engineer. Figure 4-1 illustrates some sample screens and highlights the typical look and feel of a desktop application.

What Are the Benefits of Desktop Applications?

Before moving on, let’s examine some reasons why you would choose to develop a desktop application. This question is particularly pertinent. You can just as easily build HTML client applications that are compatible with a wide range of devices, and given that HTML5 has a more certain future compared to Silverlight, what exactly are the benefits of building a desktop application?  

A big benefit of desktop applications is that they cater to corporate users who prefer the familiarity of a desktop application. But that’s not the only advantage. Unlike the HTML client, you can tightly integrate desktop applications with other programs that run on the client PC, such as Microsoft Office, or devices such as barcode scanners or receipt printers. Desktop applications can also include richer user interfaces, such as grids, and a tabbed, multi-document interface. These features are valuable for office workers, because they allow users to multi-task and to more easily compare and work with multiple records.

For you, the developer, the benefit of Silverlight is that you can write your application with .NET code throughout. Unlike with HTML client applications, you don’t need to use .NET on the server and then switch to JavaScript when you work on the client. To build more sophisticated applications with the HTML client, you need to understand HTML, CSS, and jQuery. So, for developers who are just starting out, desktop applications are simpler to understand.

Finally, if you want to manipulate and work with data on the client, Silverlight provides the ability to use LINQ. Manipulating data with JavaScript on an HTML client application without the use of LINQ is a much more difficult proposition.

Creating a Desktop Client

Let’s now begin to build our desktop application. The first step is to create a project. You can either create an entirely new project using the New Project template or you can add a desktop (Silverlight) client to your existing HTML project (Figure 4-2). Be aware that if you do the latter you won’t be able to host your existing HTML client in SharePoint.

Setting the Application Type

You can configure your application as either a desktop or a web application. To set the application type, right-click your client project, select Properties, and configure the Client Type setting, as shown in Figure 4-3.

Just so that there’s no confusion, the Web radio option in Figure 4-3 configures your application as a Silverlight browser-based application, rather than as a full-fledged HTML web application.

As I mentioned in Chapter 1, the biggest benefit that a desktop Silverlight application provides over a web-based Silverlight application is rich integration with other desktop applications through COM automation.

If your intention is to build an application that runs in a browser, you could choose to create an HTML Client application as opposed to a Desktop Web application. An obvious question is “Why choose a Silverlight web application as opposed to an HTML client application?”

One benefit is that you can create an application entirely using strongly typed .NET code. There’s no need to learn JavaScript, jQuery, CSS, or other web languages that you may be unfamiliar with. Another benefit is that desktop applications are based on a tabbed, multi-document interface and include support for grids. The ability to view and work with multiple records is a feature that many office workers appreciate.

The biggest disadvantage of a web-based desktop application is that the end user needs to install the Silverlight runtime, and this dependency restricts the devices on which your application can run. For instance, your application won’t run on an Apple iPad because this device doesn’t support the Silverlight runtime.

Choosing a Screen Template

Once you add a desktop project, you can begin to add screens. Just like with the HTML client, you can create screens by opening the Add New Screen dialog and choosing a screen template. But unlike the HTML client, the choices of templates are quite different, as you can see illustrated in Figure 4-4. Most notably, there isn’t a Common Screen Set template. This means that you can’t quickly add three screens in one go as you could with the HTML client (i.e., Browse, Add/Edit, and View screens). There’s also no Add/Edit Screen template. Instead, you typically must create separate View and Add/Edit screens using the Details Screen and New Data Screen templates.

In most cases, the template names describe the purpose of each template. And if you need further explanation, the help text in the center of the dialog provides a fuller explanation. One screen template that warrants a bit more explanation is the List and Details Screen template. This template creates a screen that’s split into two main sections. The left part of the screen displays a list of records. When a user selects a record in the list, an editable version of the record appears in the right-hand pane. The Search Data Screen template is another template type that doesn’t exist in the HTML client. This template creates a screen that enables users to search for records. The screen shows the search results in a grid.

Whichever template you choose, the Add New Screen dialog includes a Screen Data drop-down you can use to set the data source for your screen. If the data source you choose is related to other tables, the dialog shows checkboxes you can select in order to add the additional data to your screen. If you want to create a screen that isn’t bound to any data, choose the New Data Screen template and leave the Screen Data drop-down empty.

Walkthrough 4-1. Creating New Data Screens

To demonstrate how to add Data Entry screens, this walkthrough will show you how to build two of them: one for entering engineer records and another for entering issue records. By building an application that contains two different entity types, you’ll see how to use auto-complete boxes and how to create screens that show related data.

Before continuing, you’ll need to create the engineer and issue tables from Chapter 2. Once your project contains these two tables, you can create the Engineer Data Entry screen by following these steps:

1. First, open the Add New Screen dialog (as shown in Figure 4-4). From this dialog, select the New Data Screen template, choose Engineer from the Screen Data drop-down, and keep the default screen name of CreateNewEngineer. Because a relationship exists between the engineer and issue tables, the “additional data to include” section includes a checkbox you can use to select “Engineer Issues.” Make sure to choose this checkbox. When you click the OK button, LightSwitch adds the new screen to your client project and opens the screen in the designer.
2. For the time being, don’t make any changes to your screen. Instead, create a New Data screen for the Issue table by opening the Add New Screen dialog and selecting the Issue table from the Screen Data drop-down.
3. If your solution contains an HTML client, right-click your desktop project in Solution Explorer and select the “set as start-up project” option.

You can now run your application by clicking the debug button in the toolbar or by pressing the F5 key.

Figure 4-5 shows the application at runtime and highlights the appearance of the Create New Engineer screen. By default, this application uses the Cosmopolitan shell and theme. This shell features a menu in the top part of the screen that users can use to open Data Entry screens in your application. At present, this menu includes links that open the Create New Engineer and Create New Issue screens. Note that if you create screens that are based on the Details Screen template, they will not appear in this menu.

In Figure 4-5, notice how the data-entry controls are arranged in rows and columns. This arrangement is achieved through the use of group controls. The bottom part of the screen includes a command bar section that contains Save and Refresh buttons. By default, these two buttons appear on all the screens that you create. Finally, you’ll also notice that each screen opens in a separate tab. In desktop applications, users can open multiple screens at the same time and switch between open screens by using the tab control.

Designing Screens

Let’s now open the screen designer and look at how to customize the screens that the screen templates generate. Figure 4-6 shows the Create New Engineer screen in design view.

The screen designer looks almost identical to the HTML client screen designer that I described in Chapter 3. As you’ll recall, the screen designer consists of a tree structure that includes group controls (such as row and column layouts) and data controls.

Pertinent parts of the screen designer include the left-hand screen member list. This contains a list of the tables, queries, and properties that you can use on your screen. You can use the Add Data Item button from the toolbox to add items to this list. When you subsequently add new properties to a table, you can use the Reset button on the toolbox to reset the controls in a container block back to their default states. This saves you from having to manually add new fields to your screen one by one.

To continue, I’ll summarize the more notable items that are shown in Figure 4-6.

Setting Screen Properties

You can configure various aspects of a screen by right-clicking the first node in the tree and using the settings in the property sheet (Figure 4-7).

A prominent setting you can set is the display name for your screen. At runtime, LightSwitch shows this piece of text in the screen’s tab title and also in the screen navigation menu. Note that you can override the display name setting in code, and, by default, screens that are based on the Details Screen template do this.

The “Allow Multiple Instances” checkbox controls the ability of users to open multiple instances of a screen. If this is unchecked and the user attempts to open more than one instance, LightSwitch moves the focus to the screen that’s already open.

Grouping and Laying Out Controls

Just like with the HTML client, you can use group controls to organize and position the data controls (e.g., text boxes, labels, checkboxes) on your screen. But unlike the HTML client, the desktop client provides a large choice of group controls. There are five controls: rows layout, column layout, tabs layout, group box, and table layout. The drop-down next to the node allows you to change control type; Figure 4-8 shows how these control types affect the screen layout at runtime.

To add a new group control, right-click a section of the tree and choose the “Add Group” option. You can change the group-control type by using the drop-down that appears next to the control.

As Figure 4-8 shows, the rows layout container arranges controls, one beneath the other, whereas the columns layout places the controls side by side. The table layout arranges your controls in a tabular fashion. Each table layout contains one or more TableColumn layouts, and you add your data controls as child controls within a TableColumn layout.

The group controls that exist only in the desktop client are the tab and group box layout controls. The tab control organizes your screen by separating groups of controls into separate tabs. To use the tab control, add a tab layout to your screen. Next, add child groups beneath the tab control—typically, you would add rows layout groups beneath the main tab control group. LightSwitch will render each group beneath the tab control as a separate tab, and it sets the tab title using the display name property you define for the group (Figure 4-9).

The group box control tidies the appearance of your screens by placing a border around the child controls. The display name property of the group box control sets the title that appears on the control. In the example in Figure 4-9, the display name property of the group box is set to Personal Details.

Choosing Data Controls

The Silverlight client provides a range of data controls you can use. These are UI elements that users can utilize to view and edit data. Although there are plenty of data controls, don’t worry if you can’t find a control that suits your needs. In such circumstances, you can create your own custom control.

Table 4-1 shows a list of data editing controls. A popular one is the text box control. This is the default control that’s selected for editing string data. You can use a control only if it’s supported by the underlying data type. For example, you can’t assign the check box control to a string data property. So that you understand the appearance of some of these controls, Figure 4-8 shows the image, date picker, email, money, and phone number controls at runtime.

The image editor control allows users to upload an image. When the user clicks on the control, it shows a Load Image button that opens a file-browser dialog.

The date picker control opens a pop-up calendar when the user clicks the control. Users can then use the calendar to select a date.

The email and money controls enable data entry and validate the data that’s entered.

When users click the phone number control, it reveals a drop-down panel that contains separate data-entry controls for each part that makes up a phone number. The list of permissible formats is specified in the table designer, and you can refer to Chapter 2 to find out more. By default, LightSwitch includes only US formats, so you’ll want to review the phone number formats if you’re building applications for non-US users.

Displaying Multi-line Text Using the Text Box Control

The text box control renders text using a single-line text box. A change you often need to make is to configure a textbox for multi-line data entry, including the entry of line breaks. An example of a field that requires multi-line text is the Description field in the issue table. To configure a text box to accept multi-line text, set the lines property to a value greater than 1 (Figure 4-11).

Displaying Data Using Data-Item Containers

LightSwitch provides three data-item containers that you can use to lay out data in a pre-formatted fashion. They contain placeholders that are bound to data items on your screen.

The data-item containers you can use are the address editor, modal window, and picture and text controls. Figure 4-12 compares the appearance of these controls at both design time and runtime.

The address editor contains placeholders that you can assign to any address fields you define in your table. The display name for the control is shown on the address editor label at runtime.

When you create a screen with lots of controls, you can hide some of them by using a modal window control. This control displays a button on the screen. When a user clicks this button, LightSwitch opens a modal window popup that includes the controls that exist beneath the modal window control.

The picture and text or text and picture controls allow you to display an image and various pieces of associated text.

Using Data-Selection Controls

The New Issue screen in our application includes an auto-complete box that enables users to assign an engineer to an issue (Figure 4-13). There are two controls users can use to view or select related entities. These are the auto-complete box and modal window picker controls. Let’s look at these two controls in more detail.

Using the Auto-Complete Box Control

The auto-complete box is a control that’s similar to a drop-down box, in that it allows users to select from a list of drop-down values. However, it’s more powerful than a normal drop-down box because users can type into the control, and the control then filters the items by the text that the user enters.

When a user types into the control, LightSwitch searches throughout all records in the underlying table. You can restrict the records that LightSwitch searches by writing your own query and assigning it to the auto-complete box’s choices property. You’ll find out how to create a query in Chapter 5.

The Filter Mode property (Figure 4-14) controls the way that the matching works. You can configure the control so that it performs an exact match, or performs a partial match by using the contains operator. You can also configure the case sensitivity of matches, or turn off filtering altogether by choosing the “none” option.

At runtime, the auto-complete box shows a summary for each row by using a summary control. However, you can show additional properties by changing the summary control to a columns layout and adding the additional properties that you want to display. Figure 4-15 illustrates the appearance of a drop-down row with the phone number property appended to the end.

Using the Modal Window Picker Control

The modal window picker control renders a button on the screen. When the user clicks this button, LightSwitch opens a pop-up window that enables the user to search for and select a record (Figure 4-16).

Just like with the auto-complete box, you can configure the fields that appear in the picker by editing the child items of the modal window picker control.

Displaying Static Text and Images

With desktop applications, you can easily add static text and images onto your screen. You can use this feature to add screen titles, headers, and company logos to your screen. To add a static item, click the Add button that appears beneath a group control and choose the “Add Image” or “Add Text” options (Figure 4-17).

Setting Control Appearances

For each control you add to a screen, you can adjust its size and position through the settings in the sizing section of the Properties sheet. Figure 4-18 shows the properties that you can set—these are similar to the properties you saw in the HTML screen designer.

Depending on the control you choose, additional sizing options may be available. For example, you’ll find an “Is Resizable” option in some of the layout controls. This allows the user to resize the contents using a splitter control. Figure 4-19 illustrates the effect of checking the “Is Column Resizable” checkbox on the group controls beneath the main columns layout. By checking this option, a splitter control appears between the columns at runtime.

Most of the remaining sizing options are self-explanatory. The width and height settings default to Auto. This means that LightSwitch chooses an optimal width and height based on the space that’s available. If you want to specify a definite size, the units that you can use are pixels or characters and lines. Depending on the control you choose, additional appearance options may also be available.

Positioning Control Labels

For each data control you add to your screen, LightSwitch automatically displays a label. If you add a surname text box to your screen, for example, LightSwitch displays a surname label next to the text box. The text that appears in the label comes from the display name value that you define in the table designer.

Figure 4-20 shows the Label Position dialog. Again, most of these options are self-explanatory. An interesting pair of options you can choose are None and Collapsed.

If you want to hide a label, you can set the Label Style to None. However, the label still takes up space on the screen, even though it’s not shown. If you choose the “Collapsed” option, the label doesn’t take up any space. This is illustrated in Figure 4-21.

Styling Labels and Static Text Controls

In general, you can’t change the fonts that individual LightSwitch controls use. This is because the font settings are designed to be configured using the theme you define for your application. The benefit of a theme is that you can easily maintain a consistent look and feel throughout all screens in your application.

A nice feature of the label control is that you can set the font style to one of six predefined styles. Figure 4-22 shows the available font styles and illustrates how they appear at runtime.

Making Controls Read-Only

If you want to make parts of your screen read-only, the easiest way to do so is to replace your text boxes with labels.

The settings in the Properties sheet for group controls include a “Use Read-only Controls” checkbox. If you set this to true, LightSwitch replaces all child data controls with labels or their read-only equivalents.

The other read-only controls that LightSwitch provides are shown in Table 4-2. This table also shows the supported data types.

In Table 4-2, notice how there isn’t a read-only checkbox. If you want to make a checkbox read-only, you need to write code to do so. You’ll see how to do this in Chapter 9.

Including Related Data Items

When we created the Add Engineer screen, we chose the checkbox option to include related issue data. By choosing this option, the screen template adds a data grid control that users can utilize to add related issue records to an engineer (Figure 4-23).

If you didn’t select the checkbox item to include related issue records, you can do so afterward by clicking the link that appears in the screen members list (Figure 4-24). LightSwitch shows “Add” links for each table that’s related to the parent table.

Once the Issues collection appears in the screen members list, you can add a data grid of issues by dragging the Issues collection onto your screen. An important point that might catch you out is that you can only add related data to sections of the screen that are outside the main parent group. For example, you can’t add a data grid of issues to the group that contains the parent engineer data—the option to do that doesn’t appear (Figure 4-25).

Using the Data Grid and Data List Controls

There are two controls you can use to display collections of data: the data grid control and the data list control. The main difference between these two controls is that the data list control is designed to show read-only data.

The data grid control displays editable data in a grid that contains rows and columns. Users can sort the data in the grid by clicking on the column header. You can add or remove the columns that appear in the data grid by adding or deleting the child nodes beneath the Data Grid node.

In contrast, users sort the items in a data list through a drop-down box in the header. By default, it uses a summary control to display each entry in the list. If you want to display additional properties, you can change the summary control to a rows layout and then add your additional fields to that. These two controls are illustrated in Figure 4-26.

Creating an Editable Grid Screen

The Editable Grid template creates a screen that contains just a data grid. This type of screen is particularly versatile because it provides add, edit, update, and delete features in a single screen. Users find Editable Grid screens really useful because they can quickly work with multiple records and easily compare the data between rows. To create an Editable Grid screen for a table, open the Add Screen dialog, select the Editable Grid template, and select the required table from the drop-down.

Figure 4-27 shows the appearance of an Editable Grid screen for the Engineer table at design time. The screen members list shows the Engineer data collection. Unlike the Add New screens, the data source for this screen is a query, rather than a property. Because of this, you can click the Edit Query link to filter the data that appears in the data grid or to apply different sort settings.

Figure 4-28 shows the appearance of this screen at runtime. Notice how the data grid includes a button to export the contents of the grid to Excel. Note also that this button doesn’t appear for browser-based desktop applications.

Configuring Data Grid Settings

If you want to customize the data grid and data list controls, it’s important to understand that these are configured in two places—via the screen query and the properties of the data grid or list.

It’s useful to remember where these settings are configured. Otherwise, you could spend a considerable amount of time hunting around the Properties sheet of a data grid trying to find a setting that actually belongs to the query.

The screen query represents a data source and is an object of type VisualCollection<T>. Figure 4-29 shows the properties that you can set. These include Auto Execute Query, paging, sort, and search options.

The Auto Execute Query property configures whether or not LightSwitch executes the query when it first opens the screen. To illustrate the purpose of this property, Figure 4-30 shows a hypothetical Data Entry screen that allows engineers to enter timesheet entries. It’s designed as a Data Entry screen that displays only the entries that an engineer enters during a session. When the screen initially loads, you don’t want the data grid to be populated with any previous timesheet entries. You can achieve this behavior by setting the Auto Execute Query property of the timesheet query to false.

The paging, sorting, and search checkboxes control whether or not LightSwitch shows these options on the data grid.

The second place you can configure data grid settings is through the Properties sheet for the data grid (Figure 4-31). The settings here control the visibility of the Export to Excel button, which appears in the data grid toolbar (for desktop applications only), and also control the add-new row behavior.

When you uncheck the “Show Add-new Row” checkbox, LightSwitch hides the empty row placeholder that appears at the bottom of the data grid. However, unchecking this doesn’t disable the option to add new records altogether. Users can still add records by clicking on the Add button that appears in the command bar section of the data grid (Figure 4-32). In the next section, I’ll show you how to configure the items on the command bar.

Setting Data Grid Header Buttons

If you want to remove the Add button that appears in the command bar or modify the items that appear in this part of the grid, edit the nodes beneath the Command Bar node. You can delete buttons by selecting the button in question and choosing the right-click “delete” option.

If you want to add a button to the command bar section, use the Add drop-down that appears beneath the Command Bar node, as shown in Figure 4-33.

This figure shows the command types you can add. Most notably, you can add buttons to allow users to add, edit, or delete the selected record in the grid. The AddAndEditNew and EditSelected buttons open the selected record in an auto-generated dialog (Figure 4-34). One caveat is that the controls in the auto-generated dialog may not look very neat. For example, in Figure 4-34, notice how the auto-generated dialog renders the Problem Description field as a single-line text box when, ideally, a multi-line textbox would be preferable. For this reason, you might want to consider removing the option to edit.

Another command type you can choose from the Add drop-down is the New Button… button. This is particularly useful, because you can use this to write custom .NET code to perform a bespoke task.

An interesting set of command types are the DeleteSelected and RemoveSelected items. These two command types sound very similar, but there is a significant difference between the two. The DeleteSelected item marks the selected record for deletion, whereas the RemoveSelected item disassociates the selected record from a parent item. To give an example of how this works, imagine a screen that shows an issue status record and a data grid of issue records that are associated with the issue status record in question. The DeleteSelected command on the data grid would delete the selected issue record, but the RemoveSelected command would disassociate the selected issue record from the issue status record. The actual issue record would still remain in the database.

Creating a List and Details Screen

The List and Details Screen template creates a screen that shows a list of items on the left part of the screen and the details for the selected item on the right. The screen that this template generates provides a great example of how LightSwitch keeps track of the selected data item whenever you work with collections of data.

To create a List and Details screen for the Engineer table, open the Add Screen dialog, select the List and Details Screen template, and select the Engineer table from the Screen Data drop-down. Figure 4-35 shows the view that you should see in the screen designer.

The screen this template creates includes a list control that binds to the Engineers collection. In the screen member list, you’ll find a node beneath the Engineers collection that’s labeled ”Selected Item.” The controls in the details section of the screen bind to the properties of the selected item. So, at runtime, when a user changes the selected item by selecting an engineer from the list control, the detail controls automatically refresh themselves to reflect the selected record (Figure 4-36).

Creating a Search Screen

The Search Screen template creates a screen with simple search functionality. To create this type of screen, open the Add Screen dialog, select the Search Data Screen template, and select a table or query from the drop-down.

Figure 4-37 illustrates a screen that’s based on the Search template. The key feature of this template is that it includes a search text box. At runtime, a link appears against each search result item. This link opens the selected record in a Details screen, but if you haven’t created a details screen, LightSwitch opens the record in an auto-generated screen.

The search operation matches all records that contain the search criteria (as opposed to an exact match, or a “begins with” match). This operation searches throughout all string fields in the underlying table where the Is Searchable property is set to true.

Behind the scenes, LightSwitch uses the Search operator, which is exposed via the IDataServiceQueryable query property of the screen’s data source.

In the current version of LightSwitch, you can’t configure the matching technique that the search feature applies. For instance, if you want to return all records that begin with the criteria value that the user enters, you need to create a custom Search screen.

The search feature only matches against the string properties of an entity. It won’t match the search criteria against numeric properties or navigation properties.

Creating Details Screens

Details screens are designed to show individual, existing records. Unlike the screens you’ve seen so far, Details screens are launched from other screens and can’t be opened directly. As I mentioned in the previous section, one way a user can open a Details screen is through the results grid of a Search screen. Through the table designer (in the client perspective), you can define the default Details screen for each table. Your application uses the screen you define here whenever it needs to open a record of that particular type.

The absence of a Details screen for any given table doesn’t prevent LightSwitch from displaying data. If a default screen doesn’t exist, LightSwitch displays the data using an auto-generated screen. However, the auto-generated screens can’t be customized in any way (just as with the auto-generated screens in the data grid) and may not render data in the most presentable fashion (Figure 4-38). Therefore, the advantage of using a custom Details screen is that you can better customize the appearance of your screen.

Walkthrough 4-2. Using Details Screens

To demonstrate how to build and use Details screens, this walkthrough will show you how to construct a Details screen that shows the issues that are assigned to an engineer. The next part of the walkthrough will configure the Engineer Search screen so that it opens the Details screen. Figure 4-39 shows the end result of this walkthrough. Each result in the Search screen will contain two links. The first link opens the Details screen for the engineer, and the second link opens a Details screen that shows the issues that are assigned to the engineer.

Building Details Screens

The first part of this walkthrough is to create a set of Details screens: the first to show the engineer details, and the second to show the issues that are assigned to a specific engineer. Here are the steps to carry out:

1. Create a Details screen for an engineer record. To do this, open the Add Screen dialog, select the Details Screen template, and select the Engineer table from the drop-down. Keep the default name of EngineerDetail and click the OK button.
2. Create a Details screen that shows the issues for an engineer. To do this, create a second Details screen based on the Engineer table. Make sure to select the “Engineer Issues” checkbox in the “additional data to include” section while you’re in the Add Screen dialog. Name your screen EngineerIssues.
3. Configure your EngineerIssues screen so that it only shows issue data. To do this, open the screen designer and delete the engineer details so that only the Issues Data Grid remains (Figure 4-40).

Launching Details Screens

Now that you’ve added Details screens to your application, the next step of this walkthrough is to configure the Search screen so that it opens the two Details screens. The key to launching Details screens is to set up labels so that they display as a link, and to specify the name of the Details screen that you want to use.

To modify your Search screen so that it launches the Details screens, do the following:

1. Open your Engineer Search screen in the designer. Select the surname label, open the Properties sheet, and go to the appearance section. This section contains a “Show as link” checkbox and includes a Target Screen drop-down. Make sure that the Target Screen setting is set to your EngineerDetail screen.
2. Create a second link that opens the Engineer Issues screen. To do this, open the Properties sheet for the IssueCount label. Check the “Show as Link” checkbox and choose EngineerIssues from the Target screen drop-down (Figure 4-41). By doing this, each issue count cell in the search grid will be rendered as a link. When the user clicks on this link, LightSwitch will open the record using the EngineerIssues screen.

This completes the configuration of the grid, and you can now run your application. The technique that’s shown in this walkthrough can help you improve the overall navigation of your application.

Setting Application Properties

The Properties sheet of your client project (Figure 4-42) allows you to control application-level settings. It enables you to change the shell and theme of your application. As I explained in Chapter 1, changing the shell and theme alters the look and feel of your application.

You can also set your application name in the General Properties pane. LightSwitch shows the text that you enter here in the title bar of your application. In a desktop application, LightSwitch shows the server name in the title bar after the application name. This is a security feature that Silverlight imposes, and it isn’t possible to hide the server name.

The Icon settings allow you to assign icons to your application by selecting a PNG file with an ideal size of 32x32 pixels. LightSwitch displays icons depending on the application type and the shell that you choose. For example, if you choose the Cosmopolitan Shell, your logo image will appear in the banner of your application. In a desktop application that uses the Standard Shell, the application icon appears in the title bar of your application, while the logo image appears in the desktop shortcut that starts your application.

Configuring Screen Navigation

The navigation menu enables users to open the screens in your application. For applications that use the Standard Shell, this menu appears along the left-hand side of your application. If you choose to use the Cosmopolitan Shell, the menu appears across the top-most section of the window.

The Screen Navigation tab allows you to manage the items that appear in the navigation menu. In particular, you can create groups to help better organize your screens.

Figure 4-43 shows the Screen Navigation tab in the designer, alongside the corresponding menu in the running application.

LightSwitch automatically adds any new screen that you create to the navigation menu. This, however, excludes any screens that are based on the Details Screen template.

You can add multiple menu items that refer to the same screen. If you want to prevent users from opening a specific screen, right-click the screen and select “Delete.”

The Include Screen drop-down allows you to add two built-in screens called Users and Roles. These screens allow you to manage the security of your application. By default, these screens are added into the Administration group.

At debug time, the Administration group isn’t shown. This group only appears in deployed applications and is only shown to application administrators.

LightSwitch recognizes the permissions of the logged-on user when it builds the navigation menu at runtime. If a user doesn’t have sufficient permission to access a screen, LightSwitch doesn’t show it in the navigation menu (Chapter 22 shows you how to set screen-level permissions). This makes life really easy, because you don’t need to do any extra work to configure menu-item permissions.

Finally, you can set the initial screen that’s shown to your users by specifying the start-up screen. But if you don’t want any screens to be shown at start-up, you can use the Clear button to unset your start-up screen.

Designing Screens at Runtime

It’s difficult to visualize how a screen might look at runtime when you’re designing it through a series of tree nodes. To simplify this task, LightSwitch provides a runtime designer you can use to design screens at debug time. This is particularly useful when you want to configure the size and appearance of controls, because it allows you to see immediately the changes that you’re making.

To use the runtime designer, start up your application (press F5) and click on the Design Screen link or button (depending on the shell that you’ve chosen). This opens the runtime designer, as shown in Figure 4-44.

The runtime designer enables you to add and delete controls and to change the appearance properties of the controls on your screen. You can even add and delete group controls.

Although the runtime designer provides a great way to visually design your screens, it has some slight limitations. You can’t add new data items such as local screen property queries or methods. Also, you can’t move items out of their layout containers or modify the underlying VB or C# code on your screen.

One last caveat—when you deploy your application, don’t forget to change your build configuration from Debug to Release. If you forget, the link to runtime designer will appear in your deployed application.

Reducing Project Sizes

Earlier versions of LightSwitch suffered from a problem. The minimum size of each LightSwitch project was around 180 MB. This large project size made it very difficult to back up, share, or email your LightSwitch projects.

Thankfully, this situation is now much improved. A simple project in LightSwitch takes no more than around 50 MB. But if you need to reduce your project size for archiving or sharing purposes, delete the files in the <YourProject>.DesktopClientin and <YourProject>.Serverin folders. LightSwitch recreates these files when you next compile your application, so there’s no need to worry about permanently damaging your project. By deleting these files, you can compress a simple LightSwitch project down to around 15 MB. But, if you do start deleting files, make sure not to delete the files in the bindata folder, because this is the place where LightSwitch stores the Intrinsic database.

Summary

This chapter showed you how to build rich desktop applications. Compared to HTML client applications, you can do more with desktop applications. For example, you can better integrate with Office applications, take advantage of richer controls (such as grids), and write your application entirely in .NET code.

The principles of desktop screen design are the same as those for HTML client screen design. You create screens with templates and use a tree view–based interface to design your screens. Once in the designer, you can lay out your screen with group controls and use data controls to allow users to view and edit data.

The screen template types you can use include Details, New Data, Search, Editable Grid, and List/Details. New Data screens enable users to create records one at a time. Details screens show a single record and can optionally display related data. Details screens must be opened from other screens and cannot be opened directly. The other screen template types build screens to display multiple records.

To organize the layout of your screens, the group controls you can use include Rows, Columns, Tabs, Table, and Group Box.

Controls that display scalar data include textbox, label, checkbox, and a whole range of other controls that are tailored for business types. If you want a control that allows users to select a record, you can use either an auto-complete box or a modal window picker.

To display lists of related records, you can use either the data grid or data list controls. The difference between these two controls is that the data list control is designed to show data in read-only mode.

Unlike with the HTML client, you can easily add static text to your screen by right-clicking a group control and selecting the “Add Text” option.

When you add a label onto your screen, you can show the label as a link and set a target screen. This enables a user to launch a related child screen by clicking on the link.

All controls have appearance properties you can set, such as the height and width. It’s easiest to set these properties when you’re using the runtime designer, because you can see immediately the changes that you’re making.

Finally, you can configure application-level settings through the General Properties window. You can use the settings you find here to configure your application’s title, icon, and screen navigation menu items.