Lab 9 - Advanced GUIs, Composition

In this lab, you'll explore how to create a visual control class and utilize composition to make a complex class that contains other visual controls.

Here are the steps:

  1. Build a Book class
  2. Create a VisualBook class that encapsulates/wraps the Book class
  3. Create a VisualSection class that consists of many VisualBooks
  4. Create a VisualBookstore class that consists of many VisualSections
  5. Put it all together and create a program that uses the VisualBookstore class

Step 1 - Build the Book class

The Book class is simple - it consists of a Title, Author, Genre, and ID.  To keep things simple, you can make all of these attributes strings, but you can also create an enumeration (enum) for the Genre and place options like Fiction, Non_Fiction, Reference, and Self_Help.

Click here to see a solution for this step of the lab.


Step 2 - Create the VisualBook class

Now that you have the Book class defined, create a class VisualBook that encapsulates the Book class.  This class should inherit from class Control, and it should also override its OnPaint method so that it displays the book's information (title, author, etc.).  Be creative here.

It would also be  helpful if you defined a constructor that took in the needed information to initialize the author, title, genre, and ID.

If you instantiate the VisualBook in the Form1, you should see something like this:

Click here to see a solution to this step of the lab.


Step 3 - Create the VisualSection class

Now use composition to make a VisualSection class that consists of a set of VisualBooks.  We'll assume that all books in this section are of the same genre, so have a genre attribute of this VisualSection class (make it a string).  Also, this class should inherit from Control and override the OnPaint method; it should simply display the genre as a string in the upper left.

I'd recommend using the Controls collection to manage the VisualBooks collection; define an AddBook method that instantiates a VisualBook  and adds it to the controls collection.  Also, define a RemoveBook method that takes in an ID and removes the corresponding book with that ID.

When you add a VisualBook into the section, you'll need to remember to set its top, left, height, and width properties.  Using some math, you can calculate the left value by spacing them based upon how many VisualBooks are already in the controls collection; the other properties can be constant.

If you instantiate the VisualSection in the Form1, you should see something like this (assuming you call AddBook twice):

Click here to see a solution to this step of the lab.


Step 4 - Create the VisualBookstore class

Again, utilize composition to create a VisualBookstore class that is made up of multiple VisualSections.  Additionally, provide the bookstore with a name property that is displayed within its OnPaint method.

You will also need to provide the means by which sections can be added (providing a genre and then having the method create the section).  You should also provide a means by which a book can be added (provided a title, author, genre, and id) that is added to the proper section (based upon genre); if the genre isn't already covered within the bookstore, a new section should be created).

Click here to see a solution to this step of the lab.


Step 5 - Utilize the VisualBookstore in a Windows application

Now that you have defined the VisualBookstore, instantiate one in the constructor of the Form1 and place it onto your Form1 by adding it into the Controls collection of the form.  Don't forget to set the Top, Left, Width, and Height of the VisualBookstore object.

If you add three books to the Bookstore, you should see something like this:

Click here to see a solution to this step of the lab.


Wrapping it all up

There are some improvements we could make to this program.  Clearly, the controls would need to resize if there were more books than could be displayed (i.e., the VisualSection would need to widen), and the bookstore would need to increase in height if there were many sections.  Also, if a book is removed, some other VisualBooks might need to be adjusted in their left positions.  But this is a good start in exploring how visual controls can be composed of other visual controls and used as containers.  Feel free to expand on this program to explore.

Click here to see the finished ZIPed solution.