ComponentOne Starter Kit: Movie Collection Reloaded

Applies To:

Studio Enterprise

Author:

John Juback

Published On:

6/14/2006

The Movie Collection Starter Kit is a sample application included with Visual Studio 2005 designed to help you track your collection of movies. With this kit, you can organize movies in your collection, rate them, and look up information about them. Plus, you can change the application any way you want and see the source code.

Using this kit as a starting point, ComponentOne has released an enhanced version called the C1 Movie Collection Starter Kit, which takes advantage of the improved developer and end-user experience made possible by the Studio Enterprise suite of controls. The primary database-enabled control, C1TrueDBGrid, offers a wealth of sorting, filtering, grouping, and presentation options simply not possible with the standard DataGridView control. Additional enhancements such as printing, reporting, and charting were added with minimal effort. The code is ready-to-run, and with full source code included you can dig in and see how it all works.

Note that the application contains several references to online features using the Amazon.com Web service. These features are not enabled in this version.

To install the C1 Movie Collection Starter Kit, click the following link:

[http://helpcentral.componentone.com/c1kb/upload/C1MovieCollection.vsi](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2006/6/C1MovieCollection.vsi)

The first step to getting your movie collection application up and running is loading the starter kit project by choosing the C1 Movie Collection Starter Kit template in the New Project dialog box. On the left side of the dialog, click Starter Kits under the Visual C# node, then locate the C1 template under My Templates in the list on the right.

NOTE: This version of the C1 Movie Collection Starter Kit contains a Visual C# project template only. A Visual Basic project template will be available soon.

After you have created the new project, Visual Studio will open the project's documentation file, which contains instructions for running the application, a brief summary of the files and folders that comprise the project, and some hints for making your own modifications.

To see the application in action, press F5. You should see a screen containing sample data that looks something like this:

The C1 Movie Collection application consists of several forms. MainForm.cs is the starting point for the application. Almost all of the customizations performed by ComponentOne are contained in a custom control and a standalone form:

C1ListDetails.cs

This control is where you view details about your collection. The information comes from the Movie Collection database.

C1ChartForm.cs

This form is where charts are displayed along with a toolbar containing chart-related functions.

You can customize the text or images of the form or any of the controls by setting properties in the Properties window. Or, you can update properties by editing the code associated with the forms. This version of the Starter Kit already contains a number of customizations to take advantage of the ComponentOne Studio Enterprise suite of .NET controls:

The C1TextBox Control

The text boxes in the main form have been replaced with C1TextBox control instances. This offers convenient features such as null value placeholder, edit mask, data type (string, integer, etc.), string trim (start and/or end), validation, and formatting (not all features are used in all instances). Without C1TextBox, these enhancements would be possible only by subclassing the native TextBox control, and only with extensive logic in many cases. Dragging these controls onto the form, data-binding to the associated data fields, and setting the various properties is quick, easy, and requires no code.

The C1TrueDBGrid Control

Replacing the original DataGridView control with the C1TrueDBGrid control provides a large of number of features that deliver a richer end-user experience with a minimum of work for the developer. Extensive formatting control such as alternating row formats, gradient fills, row/column selection, empty row suppression, and more provide a highly customizable appearance. The built-in filtering capability allowed a text box, event handler, and custom code to be able to be removed from the original application. The filter bar adds text fields above each column for filtering the list based on one of more columns. Setting one property (FilterBar) makes this simple. The filtering of individual columns can be enhanced by changing to a drop-down based approach showing unique values in the column, similar to Excel's filtering.

Adding grouping, a feature not natively available with the DataGridView control, is also simple. By setting the DataView property to GroupBy, the rows are grouped based on selected columns, while the underlying rows retain their original layout within each group. Customizations make it easy to group in various ways. For instance, the Title column is grouped alphabetically, rather than by the full name. Other columns can behave differently. Grouping can be set programmatically or by the user.

The C1TrueDBDropdown Control

Another feature just not possible with native Visual Studio controls is the C1TrueDBDropdown control. This control presents a data-enabled grid as a dropdown control. When dropped down, all rows and columns, along with full formatting, are visible. By setting the selection mode to row, the control can be used as a complex row selection tool for foreign relations between tables. In this application, the control is used to present the finite list of MPAA ratings in the Rated column of the main grid. A secondary description column provides a brief explanation of each rating. This requires no code.

The C1Spell Control

Adding spell checking to an application would typically be considered a difficult task. With the ComponentOne C1Spell control, spell checking can be added with a trivial amount of code. Underlining misspelled words in C1TextBox controls, displaying suggestions, and maintaining a user dictionary requires little effort. Observe spell checking in action with the Description and Comments fields. The effect is very similar to the "squiggle" seen in Microsoft Word.

The C1BarCode Control

Many applications have a reason to render barcodes, but the logic to create these manually, especially given the variety of types, is difficult to create. The C1BarCode control can render a string as a given bar code type (eight types supported) with no code in many cases. For the Starter Kit specifically, simply databinding the Text property to the UPC column in the dataset was sufficient to render the correct layout. This control can also be used in reports, or for printing purposes.

The C1Chart Control

Charting is a complicated feature to add to applications. Not only the complexity of rendering data graphically, but providing enough flexibility to present data in a variety of ways can quickly become overwhelming. The C1Chart control handles all of this functionality in a straightforward manner. A wizard walks you through choosing the chart type, setting headers, footers, axis labels, and data-binding as desired. For many applications, no code will be required. The C1 Movie Collection allows the user to change the chart style at runtime, and to cycle between two different data sets. The code required for this scenario is minimal.

The C1Report Control

Reporting is another area of software development that can be daunting. Not only summarizing data effectively, but presenting that data with attractive layout and formatting can be tedious and often less than rewarding in the end. The C1Report control makes it easy to select a data source, layout, grouping, and optionally add parameters for user interaction. Fitting the data to the page, repeating headers as appropriate, and lining up and formatting fields is all taken care of automatically. The developer retains full control over the summary and presentation of the data. Report definitions are created in the Report Designer and saved to XML files. Reports can be jump-started through the use of a wizard, or created from scratch in the WYSIWYG designer.

The C1PrintPreviewDialog Control

Printing a report requires very little code. Associating the underlying document in a C1Report control with a C1PrintPreviewDialog control allows a developer to present the report visually for viewing or printing.

This section describes the inner workings of the C1 Movie Collection Starter Kit, with emphasis on the use of grid, chart, and report controls.

Working with the Grid

The core element of user interaction for the interface is the grid control. As an instance of C1TrueDBGrid, a wealth of features are available for creating a dynamic, attractive presentation of the data. One of the powerful attributes of the grid is the ability to completely change the layout of the rows. A traditional grid displays columns and rows in the manner of a spreadsheet. The C1TrueDBGrid control also offers form-based and grouping views, among others. The form-based view (Form) displays one record at a time with each column now displayed as a side-by-side label/text field view. The grouping view (GroupBy) displays a traditional grid, but provides a region at the top of the control for dragging column headers. The dragged headers become groups, similar to Microsoft Outlook grouped views. The code to switch between these views is a single line. In the Starter Kit, a drop-down box was used to present three options, so the style is set based on the option selected:

private void viewToolStripMenuItem_Click(object sender, EventArgs e)  
{  
    if (sender == gridViewToolStripMenuItem)  
    {  
        titlesC1TrueDBGrid.DataView = C1.Win.C1TrueDBGrid.DataViewEnum.Normal;  
    }  
    else if (sender == formViewToolStripMenuItem)  
    {  
        titlesC1TrueDBGrid.DataView = C1.Win.C1TrueDBGrid.DataViewEnum.Form;  
    }  
    else  
    {  
        titlesC1TrueDBGrid.DataView = C1.Win.C1TrueDBGrid.DataViewEnum.GroupBy;  
    }  
}

As another presentation option, preset groups are already defined and laid out in a drop-down list. Selecting an option switches the grid into GroupBy mode, automatically adding columns for grouping based on the selection:

private void groupingToolStripMenuItem_Click(object sender, EventArgs e)  
{  
    titlesC1TrueDBGrid.DataView = C1.Win.C1TrueDBGrid.DataViewEnum.GroupBy;  
    titlesC1TrueDBGrid.GroupedColumns.Clear();  
    if (sender == groupYearToolStripMenuItem)  
    {  
        titlesC1TrueDBGrid.GroupedColumns.Add(titlesC1TrueDBGrid.Columns["YearReleased"]);  
    }  
    else if (sender == groupTitleToolStripMenuItem)  
    {  
        titlesC1TrueDBGrid.GroupedColumns.Add(titlesC1TrueDBGrid.Columns["Title"]);  
    }  
    else if (sender == groupGenreToolStripMenuItem)  
    {  
        titlesC1TrueDBGrid.GroupedColumns.Add(titlesC1TrueDBGrid.Columns["Genre"]);  
    }  
}

Finally, printing the grid is a single line of code. For direct printing, the Print method can be used. Alternatively, a print preview dialog can be displayed for previewing or printing by using the PrintPreview method:

private void printToolStripButton_Click(object sender, EventArgs e)  
{  
    titlesC1TrueDBGrid.PrintInfo.PrintPreview();  
}

Charting the Data

The C1Chart control makes it easy to plot data in a variety of visual styles. At design time, use the wizard to choose the chart type, data, and labels. At run time, no additional steps are required, assuming that the data table is populated. For the Starter Kit, two options were presented in a drop-down box in a toolbar above the chart. Select "By Genre" or "By Rating" in order to switch the charted data. This will trigger a refilling of the table using its DataTableAdapter object for the given dataset. As an extra step, the chart footer is also modified to reflect the change:

private void chartDataToolStripComboBox_SelectedIndexChanged(object sender, EventArgs e)  
{  
    if (chartDataToolStripComboBox.Text == "By Genre")  
    {  
        chartDataTableAdapter1.FillByGenre(dvdCollectionDataSet.ChartData);  
        c1Chart1.Footer.Text = "Titles by Genre";  
    }  
    else  
    {  
        chartDataTableAdapter1.FillByRating(dvdCollectionDataSet.ChartData);  
        c1Chart1.Footer.Text = "Titles by Rating";  
    }  
}

A second drop-down list in the toolbar offers the ability to select one of three chart types. Once again, only a single line of code is required to actually change the chart type. There are thirteen different types from which to choose, and subtypes beneath each of them. An application could choose a single type, databind to the enumerated list of types, or present a limited set of choices as in this application:

private void chartStyleToolStripComboBox_SelectedIndexChanged(object sender, EventArgs e)  
{  
    if (chartStyleToolStripComboBox.Text == "Bar")  
    {  
        c1Chart1.ChartGroups.ChartGroupsCollection[0].ChartType = C1.Win.C1Chart.Chart2DTypeEnum.Bar;  
    }  
    else if (chartStyleToolStripComboBox.Text == "XYPlot")  
    {  
        c1Chart1.ChartGroups.ChartGroupsCollection[0].ChartType = C1.Win.C1Chart.Chart2DTypeEnum.XYPlot;  
    }  
    else // Radar  
    {  
        c1Chart1.ChartGroups.ChartGroupsCollection[0].ChartType = C1.Win.C1Chart.Chart2DTypeEnum.Radar;  
    }  
}

Feel free to experiment with selecting different chart types in order to see their impact on the data.

Reporting on the Data

Authoring reports using the included Report Designer is easy and intuitive. A wizard walks you through setting up the basic features. In many cases, this will be all that is required, while for more complex needs you have full flexibility to add, modify, or remove elements, or even work directly with the underlying XML file if necessary. Once the report definitions are created, you create instances of the C1Report control in Visual Studio, attach a definition, and you can preview or print the contents.

Using the C1Report control, three custom reports are included with the Starter Kit. You can view a report of titles grouped by genre, titles grouped by year, or a catalog of titles with thumbnail images and summary descriptions.

In the Starter Kit, a drop-down list is displayed in the toolbar above the grid. Each report menu item references its associated report object using the Tag property. Rendering a report is a matter of linking to the correct dataset and passing the report document to a C1PrintPreviewDialog control:

private void viewReportToolStripMenuItem_Click(object sender, EventArgs e)  
{  
    C1.Win.C1Report.C1Report r = (C1.Win.C1Report.C1Report)((ToolStripMenuItem)sender).Tag;  
    r.DataSource.Recordset = new DataView(dvdCollectionDataSet.DVDs);  
    reportsC1PrintPreviewDialog.Text = r.Document.DocumentName;  
    reportsC1PrintPreviewDialog.Document = r.Document;  
    reportsC1PrintPreviewDialog.ShowDialog();  
}

The C1 Movie Collection Starter Kit demonstrates how you can use the controls in ComponentOne Studio Enterprise to add charting, reporting, and spell checking to your WinForms applications. This reduces your development costs while delivering increased functionality to your end users.