Building Mobile, Touch-Oriented Business Apps with the HTML Client in Visual Studio LightSwitch 2012
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
What Users See: Screens in the HTML Client
The user interface of the HTML client is still made up of "screens." This means that you still follow the same approach as with the desktop client. Three screen templates are available:
- Browse Data Screen. Generates a screen that's useful for displaying lists of items.
- View Details Screen. Typically used to display details for a data item.
- Add/Edit Data Screen. Gives users the ability to add or edit data items.
The first screen you provide at this point typically would be a Browse Data Screen. Why? In a mobile app, you might want to show a list of items first, rather than asking users to add or edit a data item as the first task. In Solution Explorer, right-click HTML Client (Startup) and select Add Screen. In the Add New Screen dialog, select the Browse Data Screen template, and select Customers as the data source, as shown in Figure 6.
)
Figure 6 Adding the startup screen.
In this way, users will see the list of customers when starting the application. Later they'll be able to display customer details and add/edit orders.
When the new screen is added, the Screen Designer appears. You'll feel at home here, because the designer is the same one you met when working with the desktop client. There are certainly some differences, such as the number and types of available controls. Don't forget that controls you use (or embed) at this point are HTML controls. By default, the Browse Data Screen template uses the List control, which displays the summary property for each item in the list. If you leave the List control unchanged, the screen will show the company name for each customer. As an alternative, you can use the Tile List control, which recalls the Windows Phone interface, with a list of tiles where you can specify which properties you want to display. For instance, you can decide to show only the company name and the contact name for each customer. For this example, change the default control to the Tile List, as shown in Figure 7.
)
Figure 7 Changing the default control to display a list of items.
All the properties of the Customer entity are listed inside the Tile List. Leave CompanyName and ContactName, but remove the other properties.
At this point, you can decide what the application should do when the user selects an item in the list. In a desktop environment, this action would probably be a "click", but in a mobile application this is a "tap," and Visual Studio LightSwitch's terminology has been updated to reflect the new scenario. If you select the Tile List control in the Screen Designer, in the Properties windows you'll find an element called ItemTap. By clicking this item, you can choose what to do. One good idea is displaying customer details, including orders per customer. The Edit ItemTap Action dialog allows selecting among a number of built-in actions and methods, or creating a custom method in JavaScript. In our case, you can simply choose the viewSelected method from the Choose an Existing Method drop-down list (see Figure 8).
)
Figure 8 Editing the ItemTap action without writing code.
Visual Studio LightSwitch already knows how to handle this scenario and will ask you to specify only the details to be included in a new screen of type View Details Screen, as demonstrated in Figure 9.
)
Figure 9 Specifying the data source details for the new screen.
Be sure to select both Customer Details and Customer Orders in the checklist at right. When you click OK, a new screen will be generated for you—and you haven't written a single line of code!
Next you should implement a screen that allows users to add/edit customers and related orders. The HTML client provides an application bar that recalls the app bar in Windows Phone and Windows 8, and you can customize it by editing the Command Bar element in your screens. Continuing the current example, open the BrowseCustomers screen in the designer. Expand the Command Bar node, located under the first Root Layout item. Click Add to add a new button (see Figure 10).
)
Figure 10 Adding a button to launch an Add/Edit screen.
Similarly to what you saw previously, LightSwitch will ask you to supply the name and details for a new Add/Edit Details Screen (see Figure 11). Be sure to select both Customer Details and Customer Orders.
)
Figure 11 Specifying details for the new Add/Edit screen.
Click OK to generate the new screen. You can make changes in the designer according to your needs. It's worth mentioning that, once again, you didn't write any code.
The new button will appear in the application bar of your mobile app. LightSwitch assigns a default Star icon to buttons, but you can change the default icon to one that's more compelling. Select the newly added button in the designer. In the Properties window, locate the Icon property. It provides a convenient drop-down list of available icons. Change the default Star icon to Add.