Download - Modul Praktek 2
-
8/12/2019 Modul Praktek 2
1/26
Contents
Overview 1
Windows Forms Controls by Function 2
Lab Scenario 4
Lab Tasks and Objectives 5
Lab: Configuring Standard Controls 6
Lab Discussion 23
Unit 2: Configuring Standard Controls
-
8/12/2019 Modul Praktek 2
2/26
Information in this document, including URL and other Internet Web site references, is subject to
change without notice. Unless otherwise noted, the example companies, organizations, products,
domain names, e-mail addresses, logos, people, places, and events depicted herein are fictitious,
and no association with any real company, organization, product, domain name, e-mail address,
logo, person, place or event is intended or should be inferred. Complying with all applicable
copyright laws is the responsibility of the user. Without limiting the rights under copyright, no
part of this document may be reproduced, stored in or introduced into a retrieval system, or
transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or
otherwise), or for any purpose, without the express written permission of Microsoft Corporation.
The names of manufacturers, products, or URLs are provided for informational purposes only and
Microsoft makes no representations and warranties, either expressed, implied, or statutory,
regarding these manufacturers or the use of the products with any Microsoft technologies. The
inclusion of a manufacturer or product does not imply endorsement of Microsoft of the
manufacturer or product. Links are provided to third party sites. Such sites are not under the
control of Microsoft and Microsoft is not responsible for the contents of any linked site or any link
contained in a linked site, or any changes or updates to such sites. Microsoft is not responsible for
webcasting or any other form of transmission received from any linked site. Microsoft is providing
these links to you only as a convenience, and the inclusion of any link does not imply endorsement
of Microsoft of the site or the products contained therein.
Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual
property rights covering subject matter in this document. Except as expressly provided in any
written license agreement from Microsoft, the furnishing of this document does not give you anylicense to these patents, trademarks, copyrights, or other intellectual property.
2006 Microsoft Corporation. All rights reserved.
Microsoft, Active Accessibility, Active Directory, BizTalk, Excel, MSDN, PowerPoint,
Visual Basic, Visual C#, Visual Studio, Win32, Windows, Windows CE, Windows NT, and
Windows Server are either registered trademarks or trademarks of Microsoft Corporation in the
United States and/or other countries.
All other trademarks are property of their respective owners.
-
8/12/2019 Modul Praktek 2
3/26
Unit 2: Configuring Standard Controls 1
Overview
*****************************ILLEGAL FOR NON-TRAINER USE******************************
IntroductionThis unit introduces many of the controls that you can use from the MicrosoftVisual Studio
Toolbox. It teaches you how to add and configure these controls and explains how you can groupthem into different categories by function.
ObjectivesAfter completing this unit, you will be able to:
Explain the functions of the major categories of Windows Forms controls. Create a form to select and view images by using the SplitContainer, TreeView, PictureBox,
ToolStrip, and other controls.
Create a form to specify report criteria by using the TableLayoutPanel, ListView,MonthCalendar, ComboBox, and other controls.
Create a form to view a Hypertext Markup Language (HTML) Help file by using a WebBrowsercontrol.
-
8/12/2019 Modul Praktek 2
4/26
2 Unit 2: Configuring Standard Controls
Windows Forms Controls by Function
*****************************ILLEGAL FOR NON-TRAINER USE******************************
You add controls to a form to create the interface of an application. You can then manipulate theproperties, methods, and events of the controls to define their appearance and behavior.
The Visual Studio 2005 Toolbox provides a large number of controls that you can add to forms.The following table describes many of these controls, categorized by function.
Controls that are new to Visual Studio 2005 are in italics.
Function Control Description
TextBox Displays text entered at design time or run time
RichTextBox Enables text to be displayed with formatting
Text edit
MaskedTextBox Constrains the format of user input
Label Displays text that users cannot directly edit
LinkLabel Displays text as a Web-style link to another window or a Web
site
Text display (read-
only)
StatusStrip Displays information about the applications current state by
using a framed window
-
8/12/2019 Modul Praktek 2
5/26
Unit 2: Configuring Standard Controls 3
(continued)
Function Control Description
CheckListBox Displays a list of items through which users can scroll, each
accompanied by a check box
ComboBox Displays a drop-down list of items
DomainUpDown Displays a list of text items through which users can scroll by
using up and down buttons
ListBox Displays a list of text and graphical items (icons)
ListView Displays items in one of four different views
NumericUpDown Displays a list of numerals through which users can scroll by
using up and down buttons
Selection from a
list
TreeView Displays a hierarchical collection of node objects that can
consist of text with optional check boxes or icons
Graphics display PictureBox Displays graphical files, such as bitmaps and icons, in a frame
Graphics storage ImageList Serves as a repository for images
CheckBox Displays a check box and a label for text
RadioButton Displays a button that can be turned on or off and a label for
text
Value setting
Trackbar Enables users to set values by moving a slider along a scale
DataGridView Displays rows and columns of data in a grid that users can
customize
Content display
WebBrowser Enables the user to browse Web pages inside a form
DateTimePicker Displays a graphical calendar to enable users to select a date or
a time
Date setting
MonthCalendar Displays a graphical calendar to enable users to select a range
of dates
MenuStrip Displays application commands and options that are grouped
by functionality
Menu controls
ContextMenuStrip Displays a shortcut menu when the user right-clicks the
associated control
Button Provides options to start, stop, or interrupt a process
NotifyIcon Displays an icon in the status notification area of the taskbar
that represents an open application
Commands
ToolStrip Provides toolbars and other user interface elements that support
many appearance options
Panel Groups a set of controls on an unlabeled frame through whichusers can scroll
FlowLayoutPanel Arranges controls in a flow layout automatically
GroupBox Groups a set of controls (such as option buttons) in a labeled
frame through which users can scroll
TabControl Provides a tabbed page to organize and enable users to access
grouped objects efficiently
TableLayoutPanel Arranges controls in a table layout automatically
Grouping controlstogether
SplitContainer Provides two panels separated by a movable bar
-
8/12/2019 Modul Praktek 2
6/26
-
8/12/2019 Modul Praktek 2
7/26
Unit 2: Configuring Standard Controls 5
Lab Tasks and Objectives
*****************************ILLEGAL FOR NON-TRAINER USE******************************
There are three tasks in this lab. The Resource Toolkit provides resources to help you complete thetasks.
The tasks in this lab are:
Create the EmployeeViewer form. In this task, you will create the EmployeeViewer form and theuser interface for this form. You will add the controls SplitContainer, TreeView, PictureBox,
and ToolStripand set the relevant properties of the form and its controls. The resources for this
task are titled Controls to Use on Windows Forms, How to Load Custom Information into a
TreeView Control, and How to Determine Which TreeNode the User Clicked.
Create the ReportGenerator form. In this task, you will create the ReportGenerator form. You willadd various controls to this form to create the required user interface. These controls include
TableLayoutPanel, ListView, MonthCalendar, ComboBox, and NumericUpDowncontrols.
The resources for this task are titled Controls to Use on Windows Forms and Caching and
Retrieving Information from Controls at Run Time.
Create the ReportGeneratorHelp form. In this task, you will create the ReportGeneratorHelp form.This form will display a static HTML Help file in a WebBrowsercontrol. The resources for this
task are titled Controls to Use on Windows Forms and How to Create an HTML Document
Viewer in a Microsoft Windows Forms Application.
The resource document Lab 2 Screen Shots contains a screen shot of each of the preceding forms.
You can use these screen shots as a visual guide to the design of each form and its controls.
-
8/12/2019 Modul Praktek 2
8/26
6 Unit 2: Configuring Standard Controls
Lab: Configuring Standard Controls
*****************************ILLEGAL FOR NON-TRAINER USE******************************
After completing this lab, you will be able to:
Create a form to select and view images by using the SplitContainer, TreeView, PictureBox,ToolStrip, and other controls.
Create a form to specify report criteria by using the TableLayoutPanel, ListView,MonthCalendar, ComboBox, and other controls.
Create a form to view an HTML Help file by using a WebBrowsercontrol.
Estimated time to complete this lab: 105 minutes
Important You can complete this workshop by using either Microsoft Visual Basicor
Microsoft Visual C#. Code samples and lab solutions are provided in both languages.
Lab SolutionsThere are Visual Basic and Visual C# solution files for the labs in this workshop. You can find thelab solution files in the folder E:\Labfiles\Solution on the virtual machine.
Lab Setup
For this lab, you will use the available MicrosoftVirtual PC environment. Before you begin thelab, you must:
1. Start the Virtual PC environment.
2. Log on to the Virtual PC with the user name Studentand the password Pa$$w0rd.
-
8/12/2019 Modul Praktek 2
9/26
Unit 2: Configuring Standard Controls 7
Exercise 1Creating the EmployeeViewer FormIn this exercise, you will create a form that displays employees departments and names in aTreeViewcontrol. When the user selects an employee name, a photo of that employee will appearin a PictureBoxcontrol on the form. The form will also contain SplitContainercontrols that
enable the user to resize areas of the form. Other controls added to the form include a ToolStripand a TableLayoutPanel.
ScenarioYou are a developer in the Adventure Works cycle manufacturing company. You have been asked
to assist in the creation of an application that will enable members of the human resourcesdepartment at Adventure Works to view the details of the employees of the company.
Your first task is to create the EmployeeViewer form for the application. You must provide aninterface that enables a user to select an employee from a TreeViewcontrol and view a photo of
that employee on the form.
The high-level tasks for this exercise are:
Create the EmployeeViewer form. Design the interface of the form. Create a method named getDatato load data into the TreeViewcontrol on the form from an .xml
file.
Add code to run the getDatamethod when the Load DataToolStripButtonis clicked. Add code to clear the contents of the form when the Clear DataToolStripButtonis clicked. When an employee is selected in the TreeViewcontrol, add code to display the photo of the
currently selected employee in a PictureBox.
The resource document Lab 2 Screen Shots shows the proposed layout of this form.
Tasks Supporting information
1. Start Visual Studio 2005,
and then open the starter
project.
Open the solution AWEViewerVB.sln, located atE:\Labfiles\Starter\VB\AWEViewerVB, or AWEViewerCS.sln,
located at E:\Labfiles\Starter\CS\AWEViewerCS.
2. Add a new Microsoft
WindowsForm to the
application.
Form name: EmployeeViewer
3. Specify properties for the
EmployeeViewer form.
Specify properties of the form to accomplish the following: The title bar of the form must contain the text Employee Viewer. The form must appear in the center of the screen when opened. The initial size of the form must be 550 pixels wide and 485 pixels
high.
-
8/12/2019 Modul Praktek 2
10/26
8 Unit 2: Configuring Standard Controls
(continued)
Tasks Supporting information
4. Add bitmaps to the project
resources.
Two bitmaps are required for the icons of the ToolStripButtonsthatyou will add to the EmployeeViewer form. Add the files
Database.bmpand RolledBack.bmpto the project resources by using
the following steps:
Display the properties of the project from the Projectmenu. On the Resourcestab, click Add Resource, and then click Add
Existing File.
Browse to E:\Labfiles\Starter. Select the files Database.bmpand RolledBack.bmp, and then
click Open.
Save the project, and then close the Project Properties window.5. Design the EmployeeViewer
form.
a. Add a SplitContainercontrol to the EmployeeViewer form, and then
set properties of the control as follows:
Name: horizontalSplit Orientation:Horizontal
b. Add a second SplitContainercontrol to the upper panel of the first
SplitContainercontrol, and then set properties of the control as
follows:
Name: verticalSplit Orientation: Vertical (default)
c. Add a ToolStripcontrol to the top of the upper-left panel formed by
the SplitContainercontrols. This ToolStripwill display buttons for
loading data into the TreeViewcontrol and for clearing the TreeView
control of data. Set the name of the control as follows:
Name:viewerToolStripd. Add a TreeViewcontrol panel that contains the ToolStripcontrol, and
then set properties of the control as follows:
Name: employeesTreeView Dock: Fill
e. Size the panels of the SplitContainercontrols such that the TreeView
control takes up approximately one quarter of the form.
f. Add a PictureBoxcontrol in the upper-right panel formed by the
SplitContainercontrols, and then set properties of the control as
follows:
Name: employeePictureBox Dock: Fill
g. Size the panels of the SplitContainercontrols such that the
PictureBoxcontrol takes up approximately one quarter of the form.
-
8/12/2019 Modul Praktek 2
11/26
Unit 2: Configuring Standard Controls 9
(continued)
Tasks Supporting information
5. (continued) h. Add a Panelcontrol in the lower-left area of the lower SplitContainer
control. Add a RadioButtoncontrol and a Buttoncontrol to the Panel.
These controls will open a separate form displaying all employee
details. This form will be created in a later phase of development. Set
properties of the controls as follows:
Panel Name: viewAllPanel RadioButton Name: detailsRadioButton RadioButton Text: View All Details Button Name: goButton Button Text: Go
i. Add a TableLayoutPanelcontrol in the lower-right area of the lower
SplitContainercontrol. The controls inside this TableLayoutPanel
will display phone and e-mail details for the employee selected in the
TreeViewcontrol. This functionality will be added in a later phase of
development.
Set the name of the TableLayoutPanelcontrol toviewerTableLayout.
Add a Labelcontrol to the upper-left-hand cell of theTableLayoutPanel. Set properties of the control as follows:
Name: phoneLabel Text: Phone
Add a Label control to the lower-left hand cell of theTableLayoutPanel. Set properties of the control as follows:
Name: emailLabel Text: E-mail
Add a TextBoxcontrol to the upper-right hand cell of theTableLayoutPanel. Set the name of the control as follows:
Name: phoneTextBox Add a TextBoxcontrol to the lower-right hand cell of the
TableLayoutPanel. Set the name of the control as follows:
Name: emailTextBox Set the TableLayoutPanelcolumns to AutoSize.
j. Add a Buttonat the lower-right corner of the form that users can click
to close the form. Set properties of the control as follows:
Name: closeButton Text: Close Form
See the following resources in the Resource Toolkit:
Controls to Use on Windows Forms Lab 2 Screen Shots
-
8/12/2019 Modul Praktek 2
12/26
10 Unit 2: Configuring Standard Controls
(continued)
Tasks Supporting information
6. Configure the ToolStripon
the EmployeeViewer form.
a. Add a ToolStripButtonto the ToolStripcontrol. Set properties of the
control as follows:
Name: loadDataToolStripButton DisplayStyle:ImageAndText Text: Load Data Image: Database.bmp
a.Click the ellipsis button ()on the Imageproperty of theToolStripButton.
b.Click Project resource file.c.Select the file Database.bmp, and then click OK.
b. Add a second ToolStripButtonto the ToolStripControl. Set
properties of the control as follows:
Name: clearDataToolStripButton DisplayStyle:ImageAndText Text: Clear Data Image: RolledBack.bmp
See the resource in the Resource Toolkit, Controls to Use on
Windows Forms.
7. Add an ImageList
component to the
EmployeeViewer form.
a. Add an ImageListcomponent to the EmployeeViewer form. Thiscomponent will hold the images that are displayed next to the items in
the TreeViewcontrol. Configure the control as follows:
Name: viewerImageList.
Images: OrgChart.bmp, Checkbox.bmp, and user.ico. Thesefiles are located in the folder E:\Labfiles\Starter.
Image Indexpositions: OrgChart.bmp (0), user.ico (1),Checkbox.bmp (2).
TransparentColor: Magenta.b. Set the relevant property of the TreeViewcontrol so that the
ImageListis assigned to the TreeView.
See the resource in the Resource Toolkit, Controls to Use on
Windows Forms.
8. Create a Clickevent handlerfor the Close Formbutton
on the EmployeeViewer
form.
a. Create a Clickevent handler for the Close Formbutton on theEmployeeViewer form.
b. Add code to the Clickevent handler to close the EmployeeViewer
form when the Close Formbutton is clicked.
-
8/12/2019 Modul Praktek 2
13/26
Unit 2: Configuring Standard Controls 11
(continued)
Tasks Supporting information
9. Add the EmployeeNode
class to the application.
a. Add the existing EmployeeNodeclass to the application. You will use
this class to create derived TreeViewnodes.
In Solution Explorer, right-click the project name, click Add, andthen click Existing Item.
File Location: E:\Labfiles\Starter\CS\EmployeeNode.cs orE:\Labfiles\Starter\VB\EmployeeNode.vb.
b. Examine the contents of the EmployeeNodeclass. This class inherits
from the base TreeNodeclass.
10. Add a reference to the
System.Xmlnamespace.
a. Add a reference to the System.Xmlnamespace in your project if it is
not already referenced. Your code will use this reference when you
create the method to load the contents of an .xml file into the
TreeViewcontrol.
In Solution Explorer, right-click the project name, and then clickAdd Reference.
On the .NETtab, scroll down and select the System.Xmlnamespace, and then click OK.
b. In the Code Editor for the EmployeeViewer form, import the
System.Xmlnamespace at the top of the window.
[Visual Basic]
Imports System.Xml
[C#]
using System.Xml;
11. Add Employees.xmlto the
Supporting Files folder inthe project.
a. Add Employees.xmlto the Supporting Filesfolder. The file is located
in E:\Labfiles\Starter.
b. Open the Employees.xmlfile, and then examine its contents. This file
contains details of employees and their departments.
12. Create a method to load the
contents of Employees.xml
into the TreeViewcontrol
on the EmployeeViewer
form.
a. Add the existing getData method to the Code Editor for the
EmployeeViewer form. You will add two statements to the method to
complete the code.
In the Code Editor window, position the cursor after thecloseButton_Click method and then insert a blank line.
On the Editmenu, click Insert File As Text. Browse to the following location:
E:\Labfiles\Starter\CS\getDataCS.txtor
E:\Labfiles\Starter\VB\getDataVB.txt.
Click Opento insert the contents of the text file.
-
8/12/2019 Modul Praktek 2
14/26
12 Unit 2: Configuring Standard Controls
(continued)
Tasks Supporting information
12. (continued) b. Examine the contents of the getDatamethod. This method carries out
the following actions:
Loops through all of the departments and employees in theEmployees.xml file and adds them to the TreeViewcontrol on the
EmployeeViewer form.
Uses the EmployeeNodeclass that inherits from the TreeNodeclass.
Displays the image OrgChart.bmp next to the department name inthe TreeViewat all times.
Displays the image User.ico next to the employee name when aname is not selected and the image Checkbox.bmp when a name is
selected.
c. Locate the following comment in the getDatamethod:
TODO Create a new instance of the EmployeeNode class.d. Beneath the comment, add code to carry out the instruction in the
comment, using the variable name of tNode.
e. Locate the following comment in the getDatamethod:
TODO Add the Dept node to the nodes collection of the TreeViewcontrol.
f. Beneath the comment, add code to carry out the instruction in the
comment.
g. Remove the word TODO from the comments.
See the resource in the Resource Toolkit, How to Load Custom
Information into a TreeView Control.
13. Create a Clickevent handler
for the Load Data
ToolStripButton.
a. Create a Clickevent handler for the Load Data ToolStripButton.
b. Add code to the Clickevent handler to do the following:
Check whether any content is currently in the TreeViewcontrol.c. If the TreeViewcontrol does not contain any content, the code must
call the getDatamethod to load data into the TreeView.
14. Create a Clickevent handler
for the Clear Data
ToolStripButton.
a. Create a Clickevent handler for the Clear Data ToolStripButton.
b. Add code to the click event handler to do the following:
Clear the nodes of the TreeViewcontrol. Clear the current image in the PictureBoxcontrol.
See the resource in the Resource Toolkit, Controls to Use on
Windows Forms.
-
8/12/2019 Modul Praktek 2
15/26
Unit 2: Configuring Standard Controls 13
(continued)
Tasks Supporting information
15. Add the existing files
containing employee photos
to the application.
a. Create a new folder in Solution Explorer at the same level as the
Supporting Files folder.
Folder name: Photos.b. Add the existing bitmap files containing employee photos to the
Photosfolder. These files are located in the folder
E:\Labfiles\Starter\Photos.
16. Create an event handler for
the AfterSelectevent of the
TreeViewcontrol on the
EmployeeViewer form.
a. Create an event handler for the AfterSelectevent of the TreeView
control.
b. Add code to the AfterSelectevent handler to do the following:
Retrieve the currently selected node in the TreeViewcontrol.c. If a photo exists for the current employee, the code must load the image
into the PictureBoxfrom the Photos folder.
d. If a photo does not exist for the current employee, the code must load
the file NA.bmp into the PictureBoxcontrol.
Tip Use System.IO.File.Exists to determine if a photo exists for
an employee.
See the resource in the Resource Toolkit, How to Determine
Which TreeNode the User Clicked.
17. Add a Buttonto the Main
form to open the
EmployeeViewer form.
a. Open the Main form.
b. Add a Buttoncontrol to the FlowLayoutPanelon the Main form.
c. Specify properties of this button as follows:
Name: employeeViewerButton
Size: 113, 24(or sized appropriately to fit the FlowLayoutPanel) Text: Employee Viewer
18. Create a Clickevent
handler for the
employeeViewerButton
on the Main form.
a. Create a Clickevent handler for the employeeViewerButton.
b. Add code to the Clickevent handler to open the EmployeeViewer
form.
[Visual Basic]
EmployeeViewer.Show()
[C#]
Form newEmployeeViewer = new EmployeeViewer();
newEmployeeViewer.Show();
Note You can also use the following C# code:
[C#]
newEmployeeViewer().Show();
-
8/12/2019 Modul Praktek 2
16/26
14 Unit 2: Configuring Standard Controls
(continued)
Tasks Supporting information
19. Test the application. a. Run the application. The user name User1and password User1appear
as default values in the Logon form. Click OKto accept the default
values.
b. Click the Employee Viewerbutton on the Main form.
c. Click the Load Databutton to load data into the TreeViewcontrol.
d. Expand the TreeView, and then select an employee name.
e. Check that the form displays a photo of the employee or a blank image
stating that the photo is not available.
f. Test the Clear Databutton.
g. Close the form.
h. Exit the application.
Note The default values for user name and password are provided
to save you time when you test the application.
-
8/12/2019 Modul Praktek 2
17/26
Unit 2: Configuring Standard Controls 15
Exercise 2Creating the ReportGenerator FormIn this exercise, you will create a form that enables users to select from several different reportcriteria. These criteria will be used in a later phase of development to generate a report.
ScenarioThe members of the human resources department at Adventure Works want to view details abouttheir employees in various ways. You must create a form that will enable the users to select from a
number of predefined criteria. These criteria identify employees who:
Work on a particular shift. Have sick leave greater than or less than a specified number of days. Belong to one or more specified departments. Were hired before or after a specified date.
The high-level tasks for this exercise are:
Create the ReportGenerator form. Design the interface of the form. Add code to store and retrieve the values selected on the ReportGenerator form. Add code to the View Results button to display a MessageBoxthat contains information about the
option and criteria selected on the ReportGenerator form.
The resource document Lab 2 Screen Shots shows the proposed layout of this form.
Tasks Supporting information
1. Add a new Windows Form
to the application.
Add a new Windows Forms to the application. Form name: ReportGenerator
2. Specify properties for the
ReportGenerator form.
Specify properties of the form to accomplish the following: The title bar of the form must contain the text Employees Report
Generator.
The form must appear in the center of the screen when opened. The initial size of the form must be 480 pixels wide and 510 pixels
high.
3. Add the file GoLtr.bmp tothe project resources.
Add the file GoLtr.bmp to the project resources. File Location: E:\Labfiles\Starter
-
8/12/2019 Modul Praktek 2
18/26
16 Unit 2: Configuring Standard Controls
(continued)
Tasks Supporting information
4. Add a ToolStripcontrol to
the ReportGenerator form.
a. Add a ToolStripcontrol to the top of the ReportGenerator form. This
ToolStripwill display a button for viewing the results of the criteria
selected on the form.
ToolStrip Name: reportToolStripb. Add a ToolStripButtonto the ToolStripcontrol.
c. Define properties of the ToolStripButtonas follows:
Name: viewResultsToolStripButton Display Style: Image and Text Image: GoLtr.bmp Text: View Results
See the resource in the Resource Toolkit, Controls to Use on
Windows Forms.
5. Design the ReportGenerator
form.
a. Add a Labelunderneath the ToolStripcontrol that displays the
following text:
Select one option, fill in the criteria and then click View Resultsb. Add a TableLayoutPanelthat is 430 pixels wide and 390 pixels high
to the ReportGenerator form.
Specify reportTableLayoutas the Nameof theTableLayoutPanel.
Set the CellBorderStyleof the TableLayoutPanelto Outset. Ensure that the control contains three columns and five rows in
total.
Set all of the rows and columns on the TableLayoutPaneltoAutosize.
See the following resources in the Resource Toolkit:
Controls to Use on Windows Forms Lab 2 Screen Shots
Tip You may find it easier to add the controls to the
TableLayoutPanelfirst and then set the size of the rows and
columns.
-
8/12/2019 Modul Praktek 2
19/26
Unit 2: Configuring Standard Controls 17
(continued)
Tasks Supporting information
5. (continued) c. Add the following controls to the TableLayoutPanel:
Row 1: Three Labelcontrols named optionsLabel,operatorsLabeland criteriaLabel, displaying the text Options,
Operators, and Criteria, respectively.
Row 2 Column 1: A RadioButton, namedsickLeaveRadioButton, displaying the text By Sick Leave
(hours).
Row 2 Column 2: A ComboBox, named sickLeaveComboBox,containing the string values =. Ensure that the value
-
8/12/2019 Modul Praktek 2
20/26
18 Unit 2: Configuring Standard Controls
(continued)
Tasks Supporting information
6. Add code to the
ReportGenerator form to
cache the values selected on
the form.
a. Add the contents of the ReportGeneratorProperties text file to the Code
Editor for the ReportGenerator form. You will add two additional
properties to complete the code.
In the Code Editor window, position the cursor in the classdeclaration for the ReportGenerator form.
On the Editmenu, click Insert File As Text. Browse to the following location:
E:\Labfiles\Starter\CS\ReportGeneratorPropertiesCS.txtor
E:\Labfiles\Starter\VB\ReportGeneratorPropertiesVB.txt.
Click Opento insert the contents of the text file.b. Examine the property procedures that you have added to the Code
Editor. These properties are used to cache the values selected on the
ReportGenerator form. In a later phase of development, the stored
values will be retrieved from a separate form.
c. If you are working with C#, add a usingstatement for the namespace
System.Collectionsto the top of the Code Editor for the
ReportGenerator form. Visual Basic imports this namespace globally
by default.
d. Locate the following comment in the Code Editor window:
TODO Create private variables for SickLeave and Shiftproperties.
e. Beneath the comment, add code to carry out the instruction. The
SickLeaveproperty returns an integer value, and the Shiftproperty
returns a string value.
f. Locate the following comment in the Code Editor window:
TODO Create SickLeave public property.g. Beneath the comment, create a public read write property named
SickLeaveto store and retrieve the number of sick leave hours that
were selected in the sickLeaveNumericUpDowncontrol.
h. Locate the following comment in the Code Editor window:
TODO Create Shift public property.i. Beneath the comment, create a public read write property named Shift
to store and retrieve the shift that was selected in the ListViewcontrol.
j. Delete the three TODO comments.
See the resource in the Resource Toolkit, Caching and RetrievingInformation from Controls at Run Time.
-
8/12/2019 Modul Praktek 2
21/26
Unit 2: Configuring Standard Controls 19
(continued)
Tasks Supporting information
7. Create an event handler for
the Clickevent of the View
Results ToolStripButton.
a. Create an event handler for the Clickevent of the View Results
ToolStripButton.
b. Position the cursor in the Clickevent handler.
c. Insert the contents of the following file:
E:\Labfiles\Starter\VB\ViewResultsClickEventVB.txtorE:\Labfiles\Starter\CS\ViewResultsClickEventCS.txt.
d. Examine the content of the viewResultsToolStripButton_Clickevent
handler. The purpose of this code is to cache the values selected on the
ReportGenerator form by using the public properties created
previously.
e. Locate the following comments in the Code Editor window:
TODO Add code for Shift option. TODO Add code for SickLeave option.
f. Beneath each comment, add code to carry out the instruction in the
comment. Your code must accomplish the following:
Cache the option selected on the ReportGenerator form by usingthe SelectedOptionproperty.
For the SickLeaveoption, the SelectedOptionproperty mustindicate whether the Less Thanor Greater Thanoption was
selected in the ComboBox.
Check the values of the criteria for the option that is selected. Cache these values by using the relevant Shiftor SickLeave
property.
Display a message box that contains information about the selectedoption and the criteria values that the user has chosen.
g. Delete the two TODO comments.
See the resource in the Resource Toolkit, Caching and Retrieving
Information from Controls at Run Time.
8. Add a Buttonto the Main
form to open the
ReportGenerator form.
a. Open the Main form.
b. Add a Buttoncontrol to the FlowLayoutPanelon the Main form.
c. Specify properties of this button as follows:
Name: reportGeneratorButton Size: 113, 24(or sized appropriately to fit the FlowLayoutPanel) Text:Report Generator
9. Create a Clickevent
handler for the
reportGeneratorButton
on the Main form.
a. Create a Clickevent handler for the reportGeneratorButtonon the
Main form.
b. Add code to the Clickevent handler to open the ReportGenerator form.
-
8/12/2019 Modul Praktek 2
22/26
20 Unit 2: Configuring Standard Controls
(continued)
Tasks Supporting information
10. Test the application. a. Run the application.
b. The user name User1and password User1appear as default values inthe Logon form. Click OKto accept the default values.
c. Click Report Generatoron the Main form.
d. Select one of the options on the ReportGenerator form, and then choose
criteria for the option.
e. Click View Results, and then check that the information in the
MessageBoxis correct.
f. Select each of the options in turn, and then check that the MessageBox
displays correctly for each one.
g. Close the ReportGenerator form.
h. Exit the application.
-
8/12/2019 Modul Praktek 2
23/26
Unit 2: Configuring Standard Controls 21
Exercise 3Creating the ReportGeneratorHelp FormIn this exercise, you will create a form that displays a static HTML Help file in a WebBrowsercontrol.
ScenarioUsers of the AWEViewer application require a Help file that explains how to use the ReportGenerator form. This Help file must be easily accessible from the ReportGenerator form.
The high-level tasks for this exercise are:
Create a new form named ReportGeneratorHelp. Add a WebBrowsercontrol to the new form. Load the file HelpFile.htm into the WebBrowsercontrol when the ReportGeneratorHelp form
loads.
Add a ToolStripButtonto the ToolStripcontrol on the ReportGenerator form that will be used toopen the ReportGeneratorHelp form.
The resource document Lab 2 Screen Shots shows the proposed layout of this form.
Tasks Supporting information
1. Add HelpFile.htm to the
Supporting Files folder in
the project.
a. Add HelpFile.htmto the Supporting Filesfolder. The file is located
in E:\Labfiles\Starter.
b. Open the HelpFile.htmfile, and then examine its contents.
2. Add the file Help.bmp to the
project resources.
Add the file Help.bmpto the project resources. You will use thisbitmap as the icon for the Help ToolStripButtonon the
ReportGenerator form.
File Location: E:\Labfiles\Starter3. Add a new Windows Form
to the application.
Add a new Windows Form to the application. Form name: ReportGeneratorHelp
4. Specify properties of the
ReportGeneratorHelp form.
Specify properties of the ReportGeneratorHelp form to accomplish thefollowing:
The title bar of the form must contain the text Report GeneratorHelp.
The form must appear in the center of the screen when opened. The initial size of the form must be 530 pixels wide and 450 pixels
high.
-
8/12/2019 Modul Praktek 2
24/26
22 Unit 2: Configuring Standard Controls
(continued)
Tasks Supporting information
5. Add a WebBrowsercontrol
to the form.
Add a WebBrowsercontrol to the form. Set properties of the controlas follows:
Name: helpWebBrowser Dock: Fill
See the resource in the Resource Toolkit, Controls to Use on
Windows Forms.
6. Create an event handler for
the Loadevent of the
ReportGeneratorHelp form.
a. Create a Loadevent handler for the ReportGeneratorHelp form.
b. Add code to the Loadevent handler to accomplish the following:
Set the urlproperty of the helpWebBrowsercontrol to the fileHelpFile.htmin the Supporting Filesfolder.
See the resource in the Resource Toolkit, How to Create an
HTML Document Viewer in a Microsoft Windows FormsApplication.
7. Add a Help
ToolStripButtonto the
ToolStripcontrol on the
ReportGenerator form.
Add a ToolStripButtonto the ToolStripcontrol on theReportGenaratorform. Set properties of the control as follows:
Name: helpToolStripButton Image: Help.bmp ToolTipText: Help Display Style: Image
See the resource in the Resource Toolkit, Controls to Use on
Windows Forms.
8. Create an event handler for
the Clickevent of the Help
ToolStripButton.
a. Create a Clickevent handler for the helpToolStripButton.
b. Add code to the Clickevent handler to display the
ReportGeneratorHelp form.
9. Test the application. a. Run the application.
b. The user name User1and the password User1appear as default values
in the Logon form. Click OKto accept the default values.
c. Click Report Generatoron the Main form to open the
ReportGenerator form.
d. Click Helpon the ReportGenerator form to display the
ReportGeneratorHelp form.
e. Close all the open forms and end the application.
Lab ShutdownAfter you complete the lab, you must shut down the Virtual PC and discard any changes.
-
8/12/2019 Modul Praktek 2
25/26
Unit 2: Configuring Standard Controls 23
Lab Discussion
*****************************ILLEGAL FOR NON-TRAINER USE******************************
In this lab, you created three forms that contain a number of different standard controls. Work withthe class to compare the approaches you took when you completed the lab. Use the following
questions to help direct your discussion:
How did you complete the getDatamethod used to load data into the TreeViewcontrol on theEmployeeViewer form?
Discuss the code for the getDatamethod. How does this method incorporate the EmployeeNode
class?
How did you implement the handler for the AfterSelectevent of the TreeViewcontrol?Discuss the solution that you have created to display the photograph of the currently selected
employee in the TreeViewcontrol. What code did you use to display the image NA.bmp when a
photograph is not available for a particular employee?
How did you configure the TableLayoutPanelin the ReportGenerator form?Discuss the method that you used to design the user interface of the ReportGenerator form.
Did you make use of the Visual Studio 2005 Image Library?The bitmaps that you used as ToolStripButtonimages in this lab are from the VisualStudio 2005 Image Library. This is a large library of artwork provided with Visual Studio. It
is located in the folder \Microsoft Visual Studio 8\Common7\VS2005ImageLibrary.
-
8/12/2019 Modul Praktek 2
26/26
THIS PAGE INTENTIONALLY LEFT BLANK