Topics in Graphical User Interfaces

1
Topics in Graphical User Interfaces
2
Building Graphical User Interfaces Click on a
cloud label to access a certain topic
3
Menus

• Used to provide groups of related commands for
  Windows
• applications.
• Commands such as Open, Close, and Save are
  usually
• grouped together.
• Alt F retrieves the File Menu
• Shortcut keys
• Ctrl, Shift, Alt, F1, Fn, letter keys
• Checkmarks on menu
• items indicated that multiple
• menu items can be selected.

Terms

• Menu
• Disabled command
• Separator bar
• Submenu
• Checked menu item
• Parent menu
• Alt key, access shortcuts, hot keys

4
Creating Menus
Code Example Note the use of the xor ()
operator in line 174 used to merge or exclude.

• Open Toolbox and drag a MainMenu control onto the
  form.
• Click on the MainMenu icon to get into the Menu
  Designer.
• Menus contain
• a) Properties
• b) Events (accessed thru Class Name and Method
  Name)
• 4. To add entries, click the Type Here textbox
  and type the text that should appear. Press the
  Enter key to add the item.
• 5. Add shortcuts using or thru the properties.
• 6. Remove items by selecting the menu item and
  pressing the Delete key.
• 7. Menu items generate a Click event when
  selected.

5
LinkLabels

• A Linklabel control displays links to other
  objects such as file or Web pages.

• Linklabels appear as underlined text.
• When the mouse moves under a link, the pointer
  changes to a hand.
• Links change colors to indicate whether the link
  is new, visited, or active.
• Linklabel generates a LinkClicked event.
• Linklabel class is derived from the Label class.
• Event handlers for Linklabel instances call
  static method Start of class Process
  (System.Diagnostics).
• Code Example

6
List CheckedListBoxes

• The ListBox control allows users to view and to
  select from multiple items in a list.
• ListBoxes are static GUI entities. Users cannot
  enter new items to the list.
• CheckedListBoxes extend ListBoxes by including
  check boxes next to each item in the list. This
  allows for multiple selection.
• ListBoxes can return multiple items, but not by
  default.
• Scrollbars appear if there are more items than
  can be displayed.
• The SelectionMode property determines the number
  of items that can be selected.
• The Items property returns all objects in the
  list as a collection.
• To add items, used the following
• myListBox.Items.Add(myListItem)

7
ListBoxes

• This code sample demonstrates the adding,
  removing, and clearing items from a Listbox.
• The add button click event calls method Add of
  the Items collection in the ListBox.
• The remove button click event calls the method
  Remove of the items collection. The method used
  the SelectedIndex to check which index is
  selected. (If -1, no item is removed.)
• The clear button click event calls method Clear
  of the Listbox to remove all items from the
  collection.
• The exit button click event terminates the
  program.
• Question What use can be made of a listbox that
  is hidden?

8
CheckedListBoxes

• The CheckedBoxList control derives from class
  ListBox and includes a checkbox next to each item
  in the list.
• Items are added via Add or AddRange or through a
  String Collection Editor.
• The only selection choices or either none or all.
• Event ItemCheck is generated whenever a user
  checks or unchecks an item.
• Event argument properties CurrentValue and
  NewValue return CheckState values for the current
  and new state of the item, respectively. This
  allows the programmer to determine whether an
  item is checked or not.
• Properties CheckedItems and CheckedIndices return
  information about the checked items and indices.

Code Sample
9
ComboBoxes

• The ComboBox control combines TextBox features
  with a dropdown list.
• By default, the user can enter text in the
  textbox or click the down arrow to display a list
  of predefined items.
• Scrollbars will appear if the combo box contains
  more items than can be displayed.
• MaxDropDownItems is the maximum number of items
  that a drop-down can display.
• Items may be added of deleted using the Item
  collection and its methods.
• Code Sample

10
TreeViews

• The TreeView control display nodes heirarchically
  in a tree.
• Nodes are objects that contain values and that
  can refer to other nodes. A parent node contains
  child nodes, and child nodes can be parents to
  other nodes. A tree is a collection of nodes. The
  first node is the root node.
• The file system C\ is an example of a tree
  heirarchy.
• The nodes displayed in a TreeView are instances
  of class TreeNode.
• Each treenode has a nodes collection. The parent
  property returns a reference to the parent node
  or null if it is the root node.
• To add nodes through C code, first create a root
  node. Make a new TreeNode object and pass it a
  string to display.
• Next, use method Add to the TreeNode to the
  TreeViews node collection. myTreeView.Nodes.Add(
  new TreeNode(RootLabel ))
• To add children to a root node, add new treenodes
  to its Nodes collection
• a) Select the root node myTreeView.Nodes
  myIndex
• b) Add a child node
• myTreeView.NodesmyIndex.Nodes.Add( new
  TreeNode( ChildLabel ))
• 9. Code Sample

11
ListViews

• 1.A ListView control is similar to a ListBox in
  that both display lists in which the user can
  select one or more items.
• 2. ListViews can display icons along the items in
  a list using the ImageList property.
• 3. The MultiSelect property is a boolean
  determines whether multiple items can be
  selected.
• 4. Checkboxes can be included.
• 5. Code Sample

12
Tab Control

• The TabControl creates tabbed windows. This
  allows the programmer to design user interfaces
  that fit a large number of controls or a large
  amount of data without using up valuable screen
  real estate.
• TabControl contains TabPage objects and they can
  contain controls.
• The programmer adds a TabControl and then adds
  tab pages to the TabControl instance.
• TabControls are constructed visually by dragging
  a TabControl onto the form.
• Code Sample

13
MDI Windows

• Up to this point our programs have been based
  only on single-document-interface (SDI)
  applications. These programs (such as Notepad or
  Paint) support only one open window or document
  at a time.
• Multiple Document Interface (MDI) programs such
  as Word or Adobe Photoshop enable users to edit
  multiple documents at once. Such programs have
  greater number of features.
• The application window of an MDI program is
  called the parent window, and each window inside
  the application is referred to as a child window.
• A maximum of one child can be active at once.
• Child windows cannot be parents themselves and
  cannot be moved outside their parent.
• A child windows functionality can be different
  from the functionality of other child windows of
  the parent. Example One child window might edit
  images, another might edit text, and a third
  might display network stats in a graphical
  manner.
• To create an MDI form, create a new Form and set
  its IsMDIContainer property to True. The forms
  background color will change.
• Next, create a child form class to be added to
  the form. To do this, right click the project in
  the Solution Explorer, select Add Windows Form
  and name the file.
• To add the child form to the parent, we must
  create a new child form object.

14
MDI Windows
10. Set the childs mdiParent property to the
parent form, and call the method Show(). 11. The
code to create a child usually lies inside an
event handler, which creates a new window in
response to a user action. Menu selections
(File-New-Window) are a common way of creating
child windows. 12. Form property MdiChildren is
an array of child Form references. 13. Property
ActiveMdiChild returns a reference to the active
child window it returns null if there are no
active child windows. 14. Child windows can be
minimized, maximized, and closed independently of
each other and of the parent window. 15. Parent
and child forms can have different menus, which
are merged wheneve a child window is selected.
a) Property MergeOrder determines the order in
which MenuItems appear when two menus are merged.
Lower values appear first. b) For example, if
Menu1 has items File,Edit, and Window (and their
orders are 0, 10, and 20) and Menu2 has items
Format and View (and their orders are 7 and 15),
then the merged menu contains items File, Format,
Edit, View, and Window. c) If a parents menu
has a mergetype that is different from the
childs mergetype, the childs menu setting
determines the outcome of the merge. When the
child is closed, the parents original menu is
restored.
MDI Parent
MDI Child
MDI Child
15
MDI Windows
16. C provides a mechanism for tracking which
child windows are opened in an MDI container.
Property MdiList of class MenuItem determines
whether a MenuItem displays a list of open child
windows. 17. MDI containers allow developers to
organize the placement of child windows. The
child windows in an MDI application can be
arranged by calling method LayoutMdi of the
parent form. 18. LayoutMdi takes a MdiLayout
enumeration, which can have values ArrangeIcons,
Cascade, TileHorizontal, and TileVertical. 19.
Code Sample
16
Visual Inheritance

• Recall the lecture on Inheritance from COSC1430.
• Inheritance can be applied to create Forms that
  display a GUI.
• Visual inheritance allows us to create a new Form
  by inheriting from another Form. The derived Form
  class contains the functionality of its Form base
  class, including any base-class properties,
  methods, variables, and controls.
• The derived class also inherits all visual
  aspects such as sizing, layout, spacing, colors,
  and fonts.
• Allows for consistency and reuse.
• Use the following Code Sample to create a dll.
• a) Right click on the VisualInheritance project
  in the Solution Explorer, and select Properties.
• b) In Common Properties General, change the
  Output Type to Class Library.
• c) Build the project to produce a .dll that
  contains the VisualInheritance class.

17
Visual Inheritance
7. To create the derived form through visual
inheritance, create an empty project. 8. From the
Project Menu, select Add Inherited Form... This
brings up the Add New Item window. 9. Select
Inherited Form from the templates window. 10.
Clicking Open displays the Inheritance Picker.
The Inheritance Picker tool enable programmers to
quickly create a form that inherits from a
specified form. 11. Browse to the .dll built
previously. 12. Code Sample
Derived class cannot modify these controls
Derived class can modify this control
18
User-Defined Controls
1. .NET allows users to create custom controls
that inherit from a variety of classes. 2. These
custom controls appear in the users Toolbox and
can be added to Forms, Panels, or GroupBoxes in
the same way we add Buttons, Labels, and other
predefined controls.

• Create a new Windows Control Library project.
• Inside the project, add controls and
  functionality to the UserControl.
• Build the project. The file will be a .dll.
• Create a new windows app
• Import the user control. Right click the Toolbox
  and select Customize Toolbox. Select the .NET
  Framework Components tab and browse for the .dll
  file. When identified, click OK.
• The UserControl appears in the Toolbox and can be
  added to the form as if it were any other
  control.
• Sample code for User Control

19
Assignment
Create an MDI text editor. Each child window
should contain a multiline TextBox. The MDI
parent should have a Format menu, with submenus
to control the size, font, and color of the text
in the child window. Each submenu should have at
least three options. In addition, the parent
should have a File menu with menu items New
(create a new child), Close (close the active
child) and Exit (exit the application). The
parent should have a Window menu to display a
list of the open child windows and their layout
options. Refer to Deitel 13.9, page 565 for
details.