Course Manager VS 2012 Sample Part 6 – Home Screen (Andy Kung)

Course Manager VS 2012 Sample Part 6 – Home Screen (Andy Kung)

Rate This
  • Comments 11

Hello LightSwitchers! I hope you’re all having fun and building cool stuff with RTM. In case you missed it, here are the previous posts:

Course Manager VS 2012 Sample Part 1 – Introduction
Course Manager VS 2012 Sample Part 2 – Setting up Data
Course Manager VS 2012 Sample Part 3 – User Permissions & Admin Screens
Course Manager VS 2012 Sample Part 4 – Implementing the Workflow
Course Manager VS 2012 Sample Part 5 – Detail Screens

You can download the sample available in both VB and C# online here:

Download the LightSwitch HTML Client Preview

LightSwitch Course Manager End-to-End Application (Visual Studio 2012)

In this post, we will walk through how to design a “Home” screen.

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).”

image

Setting the start-up screen

Double click on Properties node in Solution Explore to open the application designer.

image

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.

image

If you hit F5 now, you will see the “Home” screen is automatically opened when you launch the application. The menu on the top also reflects the ordering you specified in the application designer.

image

Design Layout

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:

image

To sum up, we want:

  • A title (for the application)
  • A subtitle (for welcome message)
  • A description (for instructions, news, etc.)
  • An image icon and 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:

  1. Top group: Contains 3 rows of text
  2. Bottom group: Contains a group box that encloses a 4 x 2 table

image

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.

image

Use the “Add” dropdown to add 2 groups under the Home screen node.

image

The bottom group is a group box, so we will use the Group Box Layout (which is a new addition in Visual Studio 2012). Change the display name of the group box to “Common Tasks” via Properties.

image

Adding static text

Now we’d like to add some title text to the screen. In our previous release, you would need to create a local property, write code to initialize the property, and add the control on the screen to achieve this. In Visual Studio 2012, LightSwitch has improved the experience for adding static text and images on the screen. To do so, select the group in which you’d like to add a text. Click the “+ Add” button and select “Add Text…”

image

Enter the text in the dialog and click OK.

image

That’s it! A label control (for displaying the text) is now added to the group.

image

Since we’re adding a title, we can choose a bigger font style from Properties.

image

If you run the application now, you will see the title appear on the screen in a larger and bold font.

image

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. If you look back at our drawing, we need a table under the group box 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 :-)

image

Add a new group under the Group Box group. Change the control to Table Layout. Set the Horizontal alignment to “Left” in the Properties window.

image

Add 4 groups under the Table Layout. These groups will automatically be using the TableColumn Layout. They represent the 4 columns in our table.

image

Adding a static image

Now we’d like to add some images to the first and third column of the table. Similar to adding a static text, select the column node and click on “+ Add” button. Select “Add Image…” in the list.

image

Select an image from your computer and click OK.

image

An Image control is added under column 1. Set the image size to 80px x 80px via Properties.

image

Add another static image below the first. This image will appear as the 2nd row of column 1.

image

Follow what you’ve learned, add two rows of text in column 2, two rows of images in column 3, and two rows of text in column 4.

image

Let’s run the application and see where we are.

image

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 first static text (for searching students) and select “Add Button…”

image

In the dialog, name the method SearchStudents and click OK.

image

A command will be added. Change the control from Button to Link.

image

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()
    Application.ShowSearchStudents()
End Sub

Follow the same steps to add the rest of links. Let’s run the application to see the home screen!

image

Conclusion

In this post, we learned how to set a 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. For more LightSwitch training resources please head to the LightSwitch Developer Center. Thank you very much for following!

-andy

Leave a Comment
  • Please add 2 and 4 and type the answer here:
  • Post
  • I have been working with LightSwitch for awhile, and studied many samples and books.  This series has been excellent, and really lays out the process for developing an app beautifully.

    Your depth on a number of topics has helped me understand processes that other authors have included, but not explained.  I look forward to using this new knowledge to re-design several apps, and make them truly easier for my clients.

  • Andy, I cannot agree more with Tim's comment. Excellent update for VS2012. Keith.

  • Thanks forr a greate series of Articles, It would be good to add some reporting to this app... :)

  • Great job, Andy!!! However, I think you need to add some reporting functionality to this...reporting will just make it COMPLETE...Cheers!!!

  • Maybe reporting via Office Integration Pack ...

  • Execellent demonstration project Andy!  I really like the style of icons you have chosen.  May I ask where you found them so that I can use the same style in a project I am building?

    Thank you, Gary.

  • Excellent. Enjoyed the 'Home' screen layout post. You made it so easy.

    Thanks!

  • Andy, what are you using for mockups?

  • Awesome tutorial, Andy. Definitely the best one I've done about Lightswitch.

    To deanvanrooyen: you can use Balsamiq, it's a great App for mockups.

  • I so wish I had seen this earlier - Fantastic!

    Would you consider showing loading of sample data, and a way to clear all the files in the project regardless of constraints and a a simple method to work with say 7days of the week for any month columns with their headings.

  • Any plans to extend this sample with an LS HTML front-end?

Page 1 of 1 (11 items)