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
Testing the Application
The sample application has a good number of features and is ready to be tested. Figure 14 shows the startup screen containing a list of items.
)
Figure 14 The sample application, finally in action.
As you can see, this is a rich mobile HTML client. Following is a list of important considerations:
- The user interface is specifically designed to work with touchscreens. Tiles, application bar, and the way buttons are designed demonstrate this fact.
- The user interface is dynamic, automatically adapting its layout to fit the screen dimensions. Figure 15 shows an example, simulating the size of a mobile phone. Controls and items are automatically rearranged and resized.
- The user interface recalls the Modern UI style, which is typical in Windows 8 and Windows Phone.
- The HTML client home page can be reached by adding the name of the client at the end of the web address (refer to the browser's address bar in Figure 14). You might want to use this feature if you have multiple clients and need a way to distinguish the locations of both (Silverlight and HTML) clients.
As a consequence of relying on HTML, styles are made of CSS files compliant with the jQuery Mobile standards. Such CSS files can be completely customized, as I'll show in Part 2 of this series.
)
Figure 15 Automatic rearrangement of items and controls.
If you click or tap the Add Customer button in the application shown in Figure 15, you can add a new customer. Figure 16 shows an example and demonstrates how the HTML client automatically handles some data validation without your having to write a single line of code.
)
Figure 16 Adding a new item. By default, input is automatically validated.
This screen appears as a pop-up. It includes buttons that are placed in appropriate locations if the application runs on a mobile device. You can switch between details and related items via convenient tabs at the top of the screen. In fact, you can click or tap ORDERS at the top of the screen to move to a view where you can enter order information, as demonstrated in Figure 17.
)
Figure 17 Adding related items.
Notice that the HTML client automatically formats data based on the underlying business type. This is the case for the Amount property, of type Money, which displays the currency symbol ($). The HTML client also uses the appropriate controls depending on the underlying type, such as for the Order Date and Delivery Date fields, which implement specific HTML date viewers.
After you save your data, the application returns to the home screen. If you click or tap a customer, you'll access customer details, as in Figure 18.
)
Figure 18 Displaying item details.
At this point, the HTML client offers a back button (the left-pointing arrow) at the upper-left corner of the screen, which you can use to go back to the previous page. This kind of built-in navigation framework has been implemented for you automatically, without any additional effort. You can also view details from related items easily by using the tabs at the top of the screen (see Figure 19) to see the orders for the selected customer.
)
Figure 19 Displaying details for related items.
I'll leave it to you as an exercise to experiment with the BrowseUpcomingOrders screen, because it will display some data only after you enter a number of orders.