Hello LightSwitchers! I hope you’re all having fun and building cool stuff with RTM. I apologize for the delay of this conclusion of the Course Manager series. In case you missed it, here are the previous posts:
- Part 1: Introduction
- Part 2: Setting up data
- Part 3: User permissions & admin screens
- Part 4: Implementing the workflow
- Part 5: Detail Screens
In this post, we will walk through how to design a “Home” screen.
In LightSwitch, you can indicate a screen to be the “start-up screen” of the application. Meaning, the screen will be automatically launched when you start the application. In our case, we want to create a home screen that provides some entry points for different workflows when the user first starts the application.
Creating a blank screen
Let’s first create blank screen to be our home screen. To create a blank screen, you can pick any screen template in the Add New Screen dialog and leave the Screen Data to be “(None).” In our case, we will pick list-detail screen template, name the screen “Home,” and leave the Screen Data “(None).”
Setting the start-up screen
Double click on Properties node in Solution Explore to open the application designer.
Select the “Screen Navigation” tab in the application designer. In the menu structure tree, select “Home” and click “Set” at the bottom. This will set the “Home” screen as the start-up screen of the application. Finally, use the up/down arrow buttons on the right to move the “Home” screen to the top of the menu.
If you hit F5 now, you will see the “Home” screen is automatically opened when you launch the application. The menu on the left also reflects the ordering you specified in the application designer.
We have a blank canvas on start-up. It’s time to use some creative juice in designing our home screen. Before we start, let’s draw out what we want to build… and this is what we have:
To sum up, we want:
- A pretty logo on top
- A title (for the application)
- A subtitle (for welcome message)
- A description (for instructions, news, etc.)
- An entry point (link) to each of our 4 main workflows (covered in my previous posts)
- Search students
- Create student
- Register course
- Course catalog
Let’s draw some boxes around the picture and see how we could create this structure. There are essentially 2 big groups vertically stacked on top of each other:
- Top group: Contains an image and a text group. They are horizontally stacked.
- Bottom group: Contains a tab group that encloses a 4 x 2 table
Let’s go back to the IDE. Double click on “Home” in Solution Explorer to open the screen designer. We will first create the top and bottom group. Since they will be vertically stacked, change the root from “Columns Layout” to “Rows Layout.” Set the Vertical Alignment to “Top” in Properties window, so things will not stretch vertically.
Use the “Add” dropdown to add 2 groups under the Home screen node.
Since the top group horizontally stacks the logo and the text group, change the top group from Rows Layout to Columns Layout. The bottom group is a tab group, so we will use the Tabs Layout.
Adding a static image
Next, we want to add a logo to the top group. This logo will be a static image. Meaning, it is an image file that you supply.
In LightSwitch, every visual element you find on the screen content tree needs to bind to some data. In most cases, they are data from the database (such as a student list or grid), or in our case, a static data property.
To create a static data, we need to add a local property. Click “Add Data Item” on the command bar to add a piece of data. In our case, we want a local property of type Image. Name the property “Image_Logo” and click OK.
In the screen designer, drag and drop the newly created Image_Logo to the screen content tree. Let’s put it under the top group we created earlier.
If you run the application now, you will see an image field on the screen:
This is great but not exactly what we want. First, we don’t need a label for “Image Logo.” Second, this is a static image, so we don’t want user to be able to update an image. We can easily take care of these. In the screen designer, change the image control from “Image Editor” to “Image Viewer.”
In Properties (with the Image Logo node selected), set Label Position to “None.”
While we’re at it, we can also change the image size.
If you run the application again, you will now see a blank image on the screen:
This is more like it… well, except there is no image.
Supplying an image file
Now, we need to wire up the Image_Logo property we created to an image file on the computer.
This process requires a bit of coding. In screen designer, click “Write Code” button in the command bar and select Home_InitializeDataWorkspace.
In the body of the method, assign Image_Logo property to an image file (I have a file called “logo.png”):
Image_Logo = GetImageByName("logo.png")
GetImageByName is a helper function that converts an image file into a byte array. Copy and paste the following helper functions to the screen code.
Private Function GetImageByName(fileName As String) As Byte()
Dim assembly As Reflection.Assembly = Reflection.Assembly.GetExecutingAssembly()
Dim stream As Stream = assembly.GetManifestResourceStream(fileName)
Private Function GetStreamAsByteArray(ByVal stream As System.IO.Stream) As Byte()
Dim streamLength As Integer = Convert.ToInt32(stream.Length)
Dim fileData(streamLength – 1) As Byte
stream.Read(fileData, 0, streamLength)
Now, we need to add the image file to the project (logo.png). In the Solution Explorer, switch from Logical View to File View.
Right click on the Client node. Select “Add” then “Existing Item.” This will launch a dialog for you to navigate and select your image file.
In this dialog, I will select my “logo.png” file and click Add. The image file will appear under the Client node.
With the image file selected, set the Build Action to “Embedded Resource” in Properties window.
If we run the application again, you will now see the image file you supplied in the screen.
Adding static text
Now we’d like to add some text next to the logo. We will first create a new group to hold this text (title, subtitle, and description). In the screen designer, add a new group below the logo node.
Adding static text follows the same concept as adding a static image. We will first create a piece of static data, in this case, a String (rather than an Image). Click “Add Data Item” button in the command bar, add a local property of type String. Name the property Text_Title and click OK.
Drag and drop the newly created property to the content tree (under the text group).
Change the control from Text Box to Label. Set Label Positions to “None” in Properties window. LightSwitch provides a set of pre-defined text styles for text-based controls. Let’s also set the Font Style property to “Heading1.”
We now need to assign the Text_Title property to some value. Click on Write Code button on the command bar. In screen code, add the following in Home_InitializeDataWorkspace method:
Text_Title = "School of Fine Art – Office of Registrar"
If we run the application now, you will see the title appear on the screen in a larger and bold font.
You can follow the same steps to add a subtitle and description (with different font styles) to the screen.
Creating a table layout
We’re now ready to move on to the bottom group. Before we begin, create some static images and text data to use for the bottom group. If you look at the Course Manger sample, I’ve added 4 additional images and 4 additional texts.
Now, if you look back at our drawing, we need a table under the tab control. The table consists of 4 columns and 2 rows. Why do we use a table layout instead of rows and columns layout here? Well, you certainly can. Table layout, however, lines things up better in this case. For example, if you need a larger margin between and image and text, you can adjust it for the entire column at once (instead of lining it up one by one). Plus, I need an excuse to show you the table layout J
Add a new group under the tab group. Change the control to Table Layout. Set the Horizontal alignment to “Left” in the Properties window.
Add 4 groups under the Table Layout. These groups will automatically be using the TableColumn Layout. They represent the 4 columns in our table.
The first column contains 2 images. So I will drag and drop 2 image data to the content tree.
Similarly, drag and drop 2 texts to the 2nd column, 2 images to 3rd column, and 2 texts to the 4th column. Change the controls from Image Editor to Image Viewer and Text Box to Label. Set their Label Position property to “None.” If you also set the Height property of the Label to “Auto,” the text will wrap nicely within a table cell.
Let’s run the application and see where we are.
Adding a link to a screen
We’re almost there! We just need to add a link for each workflow. We can achieve this by adding a command that navigates to a workflow screen. Right click on the Text Search node and select Add Button.
In the dialog, name the method SearchStudents and click OK.
A command will be added. Change the control from Button to Link.
Double click on the command to go to the code. Write the following to launch the SearchStudent screen when the user clicks on the command.
Private Sub SearchStudents_Execute()
Follow the same steps to add the rest of links. Let’s run the application to see the home screen!
In this post, we learned how to set the start-up screen. We added static images and texts (with different fonts). Finally we use the table layout to line up items on our home screen. If you’ve been following the previous blog posts, you have just created the Course Manager app from scratch!
This concludes our Course Manager Sample series. Thank you very much for following!