- Creating a New Application
- Creating a New Data Source
- The User Interface: Implementing Screens
- Testing the Application on the Development Machine
- Input-Data Validation
- Default Validation of Business Types
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
The User Interface: Implementing Screens
The Contact entity and the Contacts table represent your data structure. A professional standalone application needs a graphical user interface that enables users to enter and retrieve data easily from the database. In LightSwitch applications, the user interface has the form of screens, which are what users see. You may think of screens as of windows made of fields you fill in with data, of grids showing lists of data, and of buttons (or other controls) bound to perform some actions such as saving or searching data. You do not need to build screens manually because LightSwitch ships with a number of full-feature, reusable screen templates that satisfy most of the needs in a business application. Such templates implement fields, buttons, grids, and all other user interface elements required to work with data. Default command buttons are organized inside tabs exposed by a Ribbon Bar control (which mimics the Microsoft Office user interface). If you ever developed applications with Microsoft Access, you can easily compare LightSwitch screens to Access forms. Offering predefined screen templates is another benefit in Visual Studio LightSwitch because these enable you to quickly build the user interface for an application without writing a single line of code or without any work from the developer. At a higher level, you can customize screens as follows:
- Rearrange predefined controls, moving them to different positions on the screen
- Add tabs and buttons
- Style screens with different themes
- Add custom Silverlight controls
- Delete the entire content tree and add data items manually or create an empty screen and still add items manually (Chapter 8, “Aggregating Data from Different Data Sources,” provides an example)
So, what you basically cannot do is lay out the screen pixel by pixel, as you would do in other development environments, but this makes sense in LightSwitch development: The goal of LightSwitch is to provide tools to build fully functional business applications in the quickest way possible, extending such an experience to novices and nonprofessional developers, as well. The idea is that you do not want to (or need to) waste your time in building the user interface; you just take advantage of what LightSwitch has ready to run. Visual Studio LightSwitch currently offers five screen templates. In this chapter, you use only two of them. In Chapter 4, “Building More-Complex Applications with Relationships and Details Screens,” you begin to work with the other three templates. The reason for this is that in this chapter, you are working with a single table database and therefore you will learn about screens that work well in this scenario. This approach is also useful for understanding how screens work, how you can customize their properties, and how binding data to screens is really straightforward. In Chapter 4, you learn how to build master-details applications, and thus you will also learn about screens that enable you to work with one-to-many relationships. In the current scenario, our users need a way to add new contacts to the database and one to show the list of available contacts.
Controls Overview
The user interface of any application is made of controls.
Each control is a graphical element that the user can easily associate with a particular action in the application. Buttons and text boxes are examples of controls. These are typically arranged within containers (or panels). For example, the main application’s window is the root container for nested control containers and controls. In Visual Studio LightSwitch, screens are made of controls, too. Because screens are based on a predetermined set of templates, LightSwitch offers a common set of controls that you interact with at both design time and at runtime. This section provides a brief overview of common controls in LightSwitch so that you can have a general idea about which elements are actually used within screen templates. Table 3.3 summarizes controls in LightSwitch.
Table 3.3. Common Controls in LightSwitch
|
Control |
Description |
Supported Data Type |
|
Screen Command Bar |
A control that replicates the Microsoft Office Ribbon UI and that is a container for buttons organized in tabs |
At the screen level |
|
Button |
A clickable button that executes a particular action |
At the screen level |
|
TextBox |
A field where the user can enter text |
String, ShortInteger, Integer, LongInteger, Double, Decimal, Guid |
|
Date Picker |
A control for easily selecting dates |
Date |
|
Date Viewer |
A control that displays date according to specific formatting rules |
Date |
|
DateTimePicker |
Works like the Date Picker but also allows users to select a time of day |
DateTime |
|
DateTimeViewer |
Works like the Date Viewer but also displays a time of day |
DateTime |
|
Label |
A control used for displaying simple text messages |
String, ShortInteger, Integer, LongInteger, Double, Decimal, Guid |
|
Image Editor |
A control used for uploading images to the application |
Image |
|
Image Viewer |
A control able of displaying images stored inside the database |
Image |
|
Email Address Editor |
A special text box used to enter and validate email addresses |
Email Address |
|
Email Address Viewer |
A special control used to display well-formed email addresses |
Email Address |
|
Phone Number Editor |
A specialized text box to enter, validate, and format phone numbers |
Phone Number |
|
Phone Number Editor |
A read-only text box that displays phone numbers according to specific formatting rules |
Phone Number |
|
DataGrid |
Shows the content of data coming from an entity collection in a tabular representation |
Entity collection |
|
DataGridRow |
Represents a single row (that is a single entity) in a DataGrid |
Single entity |
|
List |
Shows the content of data coming from an entity collection under the form of a scrollable list |
Entity collection |
|
Money Editor |
A specialized text box where you can enter monetary information |
Money |
|
Money Viewer |
A read-only text box specific for displaying monetary information, including the currency symbol and localized information such as the symbol used for the decimal point |
Money |
|
CheckBox |
A control that allows users to select a true or false condition |
Boolean |
This set of controls is the most common in LightSwitch development and covers the needs for almost any business application. Of course, you can create and add custom Silverlight user controls, which you learn in Chapter 7, “Customizing Applications with Buttons, COM Automation, and Extensions.” You first need to understand how to create, manage, and customize screens. Let’s begin by creating a data entry screen, which is the place where users enter data and is also the first contact you have with screens in LightSwitch.
Creating a Data Entry Screen
To add a screen to the project, you use one of the following options:
- Right-click the Screens folder in Solution Explorer and select Add Screen.
- Click the Screen button in the Entity Designer.
- Select Project, Add Screen.
Whichever option you use, you are prompted to specify a screen template, a screen name, and screen data in the Add New Screen dialog, shown in Figure 3.6.
){kind=link}
)
Figure 3.6. You can add new screens to the project in the Add New Screen dialog.
On the left side of the dialog, you see the list of available templates. Select the New Data Screen one. Notice that in the center of the dialog, you can see a preview of what the screen looks like. Next, you need to specify the data source that will be associated with the screen. In the Screen Data combo box, pick up the table you want to associate with the screen. Basically, here you see the list of all the entities you defined in your project. Currently, there is only the Contact entity, so just select this one. After you select the screen data, a check box becomes visible. In this case, it is named Contact Details and, if you check it, the resulting application will also allow editing the entity’s details. When you choose the data source, LightSwitch automatically changes the content of the Screen Name text box, providing a more meaningful value (CreateNewContact) in the current example. Now click OK. At this point, Visual Studio LightSwitch switches to the Screen Designer view. As explained in Chapter 2, you will not get an interactive designer for the screen; instead, you get a list of controls laid out in a content tree comprising the screen’s user interface. Figure 3.7 shows the Designer screen for the CreateNewContact screen.
){kind=link}
)
Figure 3.7. The Screen Designer for the CreateNewContact screen.
The user interface composition is shown in a hierarchical fashion. At the top is an element named Rows Layout that specifies how the user interface is globally organized. Nested are the Screen Command Bar (that is, the Ribbon) with two buttons (one for saving data and one for refreshing controls) and an element named Rows Layout that contains all controls that allow user input. In particular, you can see a number of text boxes that accept input from the user, a control named Email Address Editor that is specific for accepting email addresses, a Phone Number Editor control that can accept and format phone numbers, and an Image Editor control that allows uploading an image. Rows Layout consists of two containers of controls that are part of a major set that is described later. For now, you need to understand how the user interface is organized and that you have no form designer as in Visual Studio 2010. It is worth mentioning that the new screen now appears in Solution Explorer (see Figure 3.7). On the left side of the designer, you have an element named ContactProperty that represents a single contact on the screen. This element is expanded to show the data properties, which basically are the same properties you defined in the Contact entity. There are also some elements referring to buttons (Close, Refresh, and Save).
There is nothing else to do. With a simple sequence of mouse clicks, you successfully added a new screen to your project. But adding data is not the only requirement in this application; we also need to enable users to display and search available data.
Creating a Search Screen
Every business application must provide some user interface for displaying the data stored inside the database. In addition, it should enable users to easily search data. Visual Studio LightSwitch provides a screen template that includes such requirements. Open again the Add New Screen dialog and select the Search Data Screen template (see Figure 3.8).
){kind=link}
)
Figure 3.8. Selecting the Search Data Screen template.
Select the Contacts data from the Screen Data combo box so that the Screen Name box’s content is also updated to SearchContacts. Notice that you have now specified a table rather than a single entity. This is because the search screen is for showing a list of entities.
After you click OK, the Screen Designer displays the composition of the search screen, as shown in Figure 3.9.
){kind=link}
)
Figure 3.9. The Screen Designer shows the composition of the search screen.
As you can see, the screen consists of the following components:
- A container of type Rows Layout, which allows arranging nested controls.
- The Screen Command Bar element, representing the Ribbon user interface, with nested buttons.
- A Data Grid control, which provides the ability of displaying tabular data.
- Nested controls such as a Command Bar, which contains action buttons, and a Data Grid Row element. This represents a single entity (one contact in our scenario), and it is made of several nested elements, each representing a field in the contact definition. In particular, you can see labels and specific viewers (Email Address Viewer, Image Viewer, and Phone Number Viewer) for business data types.
On the left side of the designer, you can see the data source composition. There is a Contacts element that, as its name implies, represents a collection of items of type Contact. Basically, a collection of items is nothing but a .NET representation of a database table. The Contacts object is the data source for the screen, and each item is data-bound to a single row on the screen itself. LightSwitch performs this work for you. Then the Selected Item property from the collection represents a single entity that is selected within the search screen at runtime, and this is why in the designer, you see the list of properties exposed by your entity. Now that you have added the second necessary screen, the application is ready to run. In a few minutes, you have built a business application that can add, edit, and display your favorite contacts. Now it is time to see how your application works.