light switch simple bookstore application

Visual Studio LightSwitch 2011: Bookstore


Table of Contents

Visual Studio LightSwitch 2011: Bookstore ............................................................................. 1

Exercise 1 Exploring LightSwitch .................................................................................................................................... 2

Exercise 2 Working with Table Relationships .............................................................................................................. 15


Page 1 of 30


Objectives

After completing this lab, you will be better able to:

Create a new LightSwitch application

Create Tables to represent the Authors and Books in your application

Display the data from Tables in Screens

Create relationships between Tables

Scenario

Visual Studio LightSwitch is a new development tool designed to simplify and shorten the development of typical forms-over-data business applications. LightSwitch simplifies the development process, letting you concentrate on the business logic and doing much of the remaining work for you. By using LightSwitch, an application can be designed, built, tested, and in your user’s hands quickly.

Most business applications are forms-over-data applications, that is, a user interface for viewing, entering and editing data. With most development tools, much of your time is spent doing the same tasks repeatedly.

Estimated Time to Complete This Lab

45 Minutes

Computers used in this Lab Lightswitch

The password for the Administrator account on all computers in this lab is: pass@word1


Page 2 of 30

Exercise 1 Exploring LightSwitch

Scenario In this exercise, you will learn how to create a Table and use a Screen to display its data.

Tasks Detailed Steps

Complete the following task on:

Lightswitch

1. Creating a New Project

Note: In this task, you will create a book store application using LightSwitch. In future tasks, you will update the application to use tables to store the data about the books and authors, and create different screens to display that data.

a. Open Microsoft Visual Studio LightSwitch from Start | All Programs.

b. On the File menu click New Project. The New Project dialog box appears.

c. In the Installed Templates list, select the LightSwitch node.

d. In the center pane, select the LightSwitch Application (Visual Basic) template.

Note: In general, you can choose either Visual Basic or C# as the programming language for the project. The language that you select is a matter of personal choice, as LightSwitch’s capabilities are the same in both languages. The project’s language cannot be modified once it has been created.

e. Change the application’s Name to BookStoreApplication and click OK. The LightSwitch Designer window is displayed, and the necessary folders for your project are added to the Solution Explorer window.

Note: There is no need for you to change the location where the solution will be created, but you can do it if you want to.


Page 3 of 30


f. Review the structure of the project. The default Solution Explorer view is the Logical View. You will notice two folders, named Data Sources and Screens. The Data Sources folder will contain the different tables required by your application while the Screens folder will contain the screens used by it.

g. Verify the Microsoft LightSwitch Extensions is added to the project. In Solution Explorer, right-click the BookStoreApplication project node and select Properties. In the property window, select the Extensions tab and make sure the Microsoft LightSwitch Extensions is checked.


Page 4 of 30



Lightswitch

2. Adding a New Authors Table

Note: In this task you will create a table using LightSwitch’s Table Designer to represent a book Author in the application. To do this, you will add properties to the table.

a. Right click the Data Sources folder, in Solution Explorer, and select Add Table.

b. Update the table’s name to Author. To do this, in the Properties window, located in the bottom right corner of Visual Studio, change the value of the name field to Author. Note that the value for the Plural Name changes automatically. This can be seen in the following picture.

c. Add a new property, named FirstName, to the Authors table. To do this, click the <Add Property> text and type FirstName. Note that the property is automatically assigned with the String type as you can see in the Type column. As the FirstName property should be of type String, there is no need to take any action.


Page 5 of 30


d. Add a new String property, named LastName, to the Authors table using the same procedure as in the previous step.

e. Add a new property, named Email, to the Authors table.

f. Modify the property type to use the EmailAddress type. To do this, click the dropdown button in the Type column and select Email Address. Using the Email Address type automatically enables validation to verify that user input for that field is a valid e-mail address.

g. Clear the Required option for the Email property. Marking a property as not required will enable you to create new authors without the need to provide an e-


Page 6 of 30


mail address for them. By default properties are created as required. Required properties must be filled by users and cause validation errors to be displayed when they are not completed.

h. Add a new property, named PhoneNumber, to the Authors table.

i. Modify the property type to use the PhoneNumber type. To do this, click the dropdown button in the Type column and select PhoneNumber.

j. Clear the Required option for the PhoneNumber property. The outcome of the Authors table is shown in the following figure.

k. Save all files.


Page 7 of 30



Lightswitch

3. Displaying Authors' Data in an Editable Grid Screen

Note: In this task, you will create a LightSwitch screen to display the Author table’s data. As the table will be initially empty, you will also use the screen to populate it. Finally, you will learn how to export the data from a LightSwitch screen to a Microsoft Excel document.

a. Create a new screen to display the Authors' information. In Solution Explorer, right click the Screens folder and select Add Screen. The New Screen dialog box appears.

b. Use the Editable Grid Screen as the screen's template. To do this, click the Editable Grid Screen option in the template list.

c. Set the Authors as the Screen Data. To do this, in the Screen Data dropdown list, select the Authors table. Note that the Screen Name is automatically updated, as shown in the following figure.


Page 8 of 30


d. Click OK to create the screen and then save all files. Note that the new screen has been added to the Solution Explorer under the Screens folder.

e. In case it is not already open, open the EditableAuthorGrid designer. To do this, in the Solution Explorer double-click the EditableAuthorGrid file under the Screens folder. The Screen Layout properties will be displayed in the Properties window, as shown in the following figure.


Page 9 of 30


f. Update the Display Name to Authors. To do this replace Editable Authors Grid text in the Display Name textbox with Authors, as shown in the following figure.


Page 10 of 30


g. Press F5 to run the application. Note that the application’s main window (also known as Shell) is divided in three main areas, as shown in the following figure. These are:

Ribbon: This area provides quick access to common operations that are performed in a LightSwitch application. The default operations are saving all current changes and refreshing the data source.

Navigation Pane: Contains the Navigation View, which has a list of the application’s screens. Clicking any one of them will display the screen in the Main Pane.

Main Pane: The active working screen is shown in this area. To show a different screen, select another screen in the Navigation View.


Page 11 of 30


Note: You may be prompted for a username and password when the application starts. If so, enter the credentials of your local machine and click OK.

h. In the Authors screen, click the FirstName cell in the first empty row of the grid and enter a name for the author.

i. You can also click the Add ( ) button in the screen command bar which will open a popup dialog prompting for the new author’s information.


Page 12 of 30


j. Save the changes by clicking the Save button. Note that a validation error appears. This is because the LastName property is marked as required in the Authors table. The following figure depicts this situation.

k. Click the LastName cell in the same row where you edited the FirstName and enter the last name for the author. Note that the validation error disappears, as all required properties have a value.

l. Provide an Email for the Author. To do this, click the Email cell in the same row where you edited the FirstName property and type an e-mail address. Note that a validation error appears if the e-mail address does not have a valid format (for example: steve!!example.com), as the Email property type is the Email Address type.


Page 13 of 30


m. No validation error is shown when the e-mail address is correct

n. Provide a PhoneNumber for the Author. Click the PhoneNumber cell in the same row where you edited the FirstName property and enter the phone number for the author.


Page 14 of 30


o. Add additional Authors as desired.

p. Save the changes by clicking the Save button located on the ribbon.

q. Close the LightSwitch application.


Page 15 of 30

Exercise 2 Working with Table Relationships

Scenario In this exercise, you will learn how to create relationships between tables, and use a screen to display their data



Lightswitch

1. Using Choice List Properties

Note: In this task, you will create a table using LightSwitch’s Table Designer to represent Books in the application. While doing this, you will create a Choice List for the Category property of the Book table.

a. Open the solution file BookStoreApplication.sln, located under the C:\LightSwitchTK\Labs\BookStore\Source\Ex2-WorkingWithTableRelationships\Begin folder of this lab. This solution can be used as the starting point for this exercise. Alternatively, you can continue using the resulting solution you got from the previous exercise.

Note: You might see compilation errors which can be ignored in the Error List window. This is because Begin and End solutions do not include files that are generated automatically by LightSwitch, unnecessary for this Hands-on Lab. These errors will disappear when you first run the application in the following steps.

b. Create a new table for the Books. In the Solution Explorer, right click the Data Sources folder and select Add Tables. The Table Designer will be displayed.

c. Update the table’s name to Book, using the same procedure as in Task 2 from Exercise 1.

d. Add a new String property, named Title, to the Books table.

e. Add a new String property, named Description, to the Books table.

f. Clear the Required option for the Description property.

g. Add a new property, named FrontCoverThumbnail, to the Books table. Modify the property type to use the Image type. Using an Image type for a property will allow users to view and upload pictures. To do this, click the dropdown button in the Type column and select Image.

h. Clear the Required option for the FrontCoverThumbnail property.

i. Add a new property, named PublicationDate, to the Books table. Modify the property type to use the Date type. Using a Date type for a property will allow users to select the value for the property from a calendar. To do this, click the dropdown button in the Type column and select Date.

j. Add a new property, named Price, to the Books table. Modify the property type to use the Money type. Using a Money type for a property will show the field using the corresponding format. To do this, click the dropdown button in the Type column and select Money.

k. Add a new property, named Category, to the Books table. Modify the property type to use the Short Integer type. To do this, click the dropdown button in the Type column and select Short Integer.

l. Create a Choice List for the Category property. Choice Lists are used to represent data that must be restricted to a small set of values. Click on the Category property row. The Properties window for the Category property will be displayed, as shown in the following figure.


Page 16 of 30


m. Click the Choice List link button. The Choice List dialog will be displayed as shown in the figure below.

Note: A Choice List defines a set of fixed values valid for a property. When creating a choice list, you must specify a value that matches the property's type (in this case a numeric value) and a display name for each choice. This helps to narrow the user choices for the property value when a finite set of values is valid.

The numeric value will be stored in the database and the display name will be shown in screens.

Once the application is running, and a Book is being added or updated, the Category property will be displayed as a drop-down list containing the display names.


Page 17 of 30


n. Click the Add Value text and type the value to be stored in a Database. Note that the value must be an integer; otherwise the following error message is displayed:

o. Click the Add Display Name text and type the text to be displayed by the application. A possible outcome is shown in the following figure.


Page 18 of 30


p. Click OK to confirm.

q. Save all files. The following figure shows the resulting Books table.


Page 19 of 30



Lightswitch

2. Creating a Relationship Between Tables

Note: In this task, you will create a relationship between the Books and Authors tables. To keep things simple, we will consider that a Book can only have a single Author. After creating the relationship between the Authors and Books Tables, each Book will have a property identifying its Author.

a. In the Solution Explorer, double click the Books table inside the Data Sources folder to open the Table Designer, if it is not already open.

b. In the top toolbar click the Relationship ( ) button to add a new relationship. The New Relationship dialog appears as it can be seen in the following figure.

c. In the Name row, select the Author option from the dropdown list located in the To column.


Page 20 of 30


d. Note that the sentences at the bottom of the dialog, which describe the relationship, match the desired scenario.


Page 21 of 30


e. Click OK.

f. Note that a new property has been added to the Books table to reflect the newly added relationship, as the following figure shows.

g. Save all files.


Page 22 of 30



Lightswitch

3. Displaying Books' Data in a List and Details Screen

Note: In this task you will create a LightSwitch screen to display the data inside the Books table. As the table will be initially empty, you will also use the screen to populate it.

a. Create a new screen to display the Books' information. In Solution Explorer, right click the Screens folder and select Add Screen. The New Screen dialog box appears.

b. Use the List and Details Screen as the screen's template. To do this, click the List and Details Screen option in the template list.

c. Set the Books table as the Screen's Data. To do this, in the Screen Data dropdown list, select the Books table. Note that the Screen Name is automatically updated.

d. Click OK to create the screen. You will notice the BookListDetail screen is added to the Screens folder.


Page 23 of 30



Page 24 of 30


e. Update the Display Name to Books. To do this replace BookListDetail text in the Display Name textbox with Books.

f. Press F5 to run the application.


g. Click the Books option in the Tasks list that is located in the navigation pane to show the BookListDetail screen in the Main Pane. The outcome is shown in the following figure.

h. Add a new Book. To do this:

i. Click the Add button located inside the Toolbar at the top of the Books view. The button is highlighted in the figure below. A dialog to add a new book will appear.


Page 25 of 30


j. Provide a Title and Description for the book. You can use the following data from the Programming Microsoft® Visual Basic® 6.0 book:

Title: Programming Microsoft® Visual Basic® 6.0.

Description: Create professional-quality applications, components, and user interfaces faster and more efficiently than ever with the powerful object-oriented programming capabilities in the Visual Basic 6.0 development system.

k. Load a FrontCoverThumbnail image for the book. Positioning the mouse pointer over the light blue square will cause two buttons to appear. Click the green arrow button, as shown in the following figure. The open file dialog will appear.

l. Select an image with from C:\LightSwitchTK\Labs\BookStore\Source\Assets.

m. Click Open. The result is shown in the following figure.


Page 26 of 30


n. Select the Book’s publication date. To do this position the mouse pointer over the PublicationDate textbox, causing a calendar button to appear. This is shown in the following figure.

o. Click the calendar button and pick a date from the calendar. Choose May 26, 1999. This is shown in the following figure.


Page 27 of 30


p. Set the Book’s Price to 23.

q. Select the Book’s Category from the dropdown list and set it to VB6. A dropdown list is provided for the Category property because a Choice List was created for it.

r. Select the Book’s Author from the dropdown list and set it to Francesco. A dropdown list is provided for the Author property because a Relationship was created for it.


Page 28 of 30


s. Click OK in the Add New Book dialog to create the Book.

t. Add additional Books, as desired using different data.

u. Save the changes by clicking the Save button.

v. Close the application.


Page 29 of 30



Lightswitch

4. Verification

Note: In order to verify that you have correctly performed all steps of the exercises, proceed as follows:

a. Press F5 to run the application. The Authors screen should be the active screen in the application. This can be seen in the following figure.


b. If you used the same solution on both exercises, verify that the displayed Authors are the ones you added in Exercise 1.

c. Click the Books item in the Tasks menu. The Books screen should be displayed and the information about the Book’s Author should be displayed as well, as shown in the following figure.

d. Verify that the Books being displayed are the ones you added in Exercise 2, and that the Authors displayed for each book are correct.


Page 30 of 30



Lightswitch

5. Summary

Note: In this Hands-On Lab you created a basic LightSwitch application and used LightSwitch’s main functionalities. You have:

Created two Tables with different properties to represent the elements (Books/Authors) of your application.

Created a relationship between Books and Authors.

Used special types such as EmailAddress, PhoneNumber and choice lists as property types for those elements.

Shown data for elements in Screens, giving users the capability to add, edit, delete and view elements.

light switch simple bookstore application

Documents