2. Graphical User Interface Concepts - Part 1 Session 08 Mata kuliah: M0874 – Programming II Tahun: 2010

3. Bina Nusantara University 3 Outline Materi Introduction Windows Forms Event Handling Model Control Properties and Layout Labels, TextBoxes, and Buttons GroupBoxes and Panels CheckBoxes and RadioButtons PictureBoxes

4. Bina Nusantara University 4 Introduction A graphical user interface (GUI) allows a user to interact visually with a program. A GUI gives a program a distinctive “look” and “feel”. Providing different applications with a consistent set of intuitive user-interface components enables users to become productive with each application faster. GUIs are built from GUI controls (which are sometimes called components or widgets).

5. Bina Nusantara University 5 Introduction GUI controls are objects that can display information on the screen or enable users to interact with an application via the mouse, keyboard or some other form of input.

6. Bina Nusantara University 6 Some basic GUI controls ControlDescription LabelDisplays images or uneditable text. TextBoxEnables the user to enter data via the keyboard. It can also be used to display editable or uneditable text. ButtonTriggers an event when clicked with the mouse. CheckBoxSpecifies an option that can be selected (checked) or unselected (not checked). ComboBoxProvides a drop-down list of items from which the user can make a selection either by clicking an item in the list or by typing in a box. ListBoxProvides a list of items from which the user can make a selection by clicking an item in the list. PanelA container in which controls can be placed and organized. NumericUpDownEnables the user to select from a range of input values.

7. Bina Nusantara University 7 Windows Forms Windows Forms are used to create the GUIs for programs. A Form is a graphical element that appears on your computer’s desktop; it can be a dialog, a window or an MDI window (multiple document interface window) A component is an instance of a class that implements the IComponent interface, which defines the behaviors that components must implement, such as how the component is loaded.

8. 8 Components and controls for Windows Forms

9. Bina Nusantara University 9 Event Handling Model Normally, a user interacts with an application’s GUI to indicate the tasks that the application should perform. For example, when you write an e-mail in an e-mail application, clicking the Send button tells the application to send the e-mail to the specified e-mail addresses. GUIs are event driven. When the user interacts with a GUI component, the interaction-known as an event-drives the program to perform a task.

10. 10

11. Bina Nusantara University 11 Simple event-handling example using visual programming

12. Bina Nusantara University 12 Control Properties and Layout

13. Bina Nusantara University 13 Manipulating the Anchor property of a control Anchoring window Click the down-arrow in the Anchor property to display the anchoring window Darkened bars indicate the container’s side(s) to which the control is anchored; use mouse clicks to select or deselect a bar

14. Control layout properties Description AnchorCauses a control to remain at a fixed distance from the side(s) of the container even when the container is resized. DockAllows a control to span one side of its container or to fill the remaining space in the container. PaddingSets the space between a container’s edges and docked controls. The default is 0, causing the control to appear flush with the container’s sides. LocationSpecifies the location (as a set of coordinates) of the upper-left corner of the control, in relation to its container. SizeSpecifies the size of the control in pixels as a Size object, which has properties Width and Height. MinimumSize, MaximumSizeIndicates the minimum and maximum size of a Control, respectively. 14

15. Bina Nusantara University 15 Labels Labels provide text information (as well as optional images) and are defined with class Label (a derived class of Control). A Label displays text that the user cannot directly modify. A Label’s text can be change programmatically by modifying the Label’s Text property. Common Label PropertiesDescription FontThe font of the text on the Label. TextThe text on the Label. TextAlignThe alignment of the Label’s text on the control- horizontally (left, center, right) and vertically (top, middle or bottom)

16. Bina Nusantara University 16 TextBoxes A textbox (class TextBox) is an area in which either text can be displayed by a program or the user can type text via the keyboard. A password TextBox is a TextBox that hides the information entered by the user. It masks the user input by displaying a password character (UseSystemPasswordChar).

17. TextBox properties and an event Description Common Properties AcceptsReturnIf true in a multiline TextBox, pressing Enter in the TextBox creates a new line. If false, pressing Enter is the same as pressing the default Button on the Form. The default Button is the one assigned to a Form’s AcceptButton property. MultilineIf true, the TextBox can span multiple lines. The default value is false. ReadOnlyIf true, the TextBox has a gray background, and its text cannot be edited. The default value is false. ScrollBarsFor multiline textboxes, this property indicates which scrollbars appear (None, Horizontal, Vertical or Both). TextThe TextBox’s text content. UserSystemPasswordCharWhen this property is set to true, the TextBox becomes a password TextBox, and the system-specified character masks each character the user types. Common Event TextChangedGenerated when the text changes in a TextBox (i.e., when the user adds or deletes characters). When you double click the TextBox controlin Design mode, an empty event handler for this event is generated.

18. Bina Nusantara University 18 Buttons A button is a control that the user clicks to trigger a specific action or to select an option in a program. A program can use several types of buttons, such as checkboxes and radio buttons. Button properties and events Description Common Properties TextSpecifies the text displayed on the Button face. FlatStyleModifies a Button’s appearance-attribute Flat (for the Button to display without a three- dimensional appearance), Popup (for the Button to appear flat until the user moves the mouse pointer over the Button), Standard (three-dimensional) and System, where the Button’s appearance is controlled by the operating system. The default is Standard. Common Event ClickGenerated when the user clicks the Button. When you double click a Button in design view, an empty event handler for this event is created.

19. Bina Nusantara University 19 GroupBoxes and Panels GroupBoxes and Panels arrange controls on a GUI. GroupBoxes and Panels are typically used to group several controls of similar functionality or several controls that are related in a GUI. All of the controls in a GroupBox or Panel move together when the GroupBox or Panel is moved.

20. Bina Nusantara University 20 The primary difference between these two controls is that GroupBoxes can display a caption (i.e., text) and do not include scrollbars, whereas Panels can include scrollbars and do not include a caption, GroupBoxes have thin borders by default; Panels can be set so that they also have borders by changing their BorderStyle property. Panels and GroupBoxes can contain other Panels and GroupBoxes for more complex layouts.

21. Bina Nusantara University 21 GroupBoxes and Panels Properties GroupBoxes propertiesDescription ControlsThe set of controls that the GroupBox contains. TextSpecifies the caption text displayed at the top of the GroupBox. Panel propertiesDescription AutoScrollIndicates whether scrollbars appear when the Panel is too small to display all of its controls. The default value is false. BorderStyleSets the border of the Panel. The default value is None; other options are Fixed3D and FixedSingle. ControlsThe set of controls that the Panel contains.

22. Bina Nusantara University 22 CheckBoxes A CheckBox is a small square that either is blank or contains a check mark. When the user clicks a CheckBox to select it, a check mark appears in the box. If the user clicks CheckBox again to deselect it, the check mark is removed. Configure a CheckBox to toggle between three states (checked, unchecked and indeterminate) by setting its ThreeState property to true. Any number of CheckBoxes can be selected at a time.

23. Bina Nusantara University 23 CheckBox properties and events

24. Bina Nusantara University 24 RadioButtons Radio buttons (defined with class RadioButton) are similar to CheckBoxes in that they also have two states-selected and not selected (also called deselected). Normally appears as a group, in which only one RadioButton can be selected at a time. RadioButtons are used to represent a set of mutually exclusive options (i.e., a set in which multiple options cannot be selected at the same time).

25. Bina Nusantara University 25 RadioButtons Use RadioButtons when the user should choose only one option in a group. Use CheckBoxes when the user should be able to choose multiple options in a group. RadioButton properties and an event Description Common properties CheckedIndicates when the RadioButton is checked. TextSpecifies the RadioButton’s text. Common Event CheckedChangedGenerated every time the RadioButton is checked or unchecked. When you double click a RadioButton control in design view, an empty event handler for this event is generated.

26. Bina Nusantara University 26 PictureBoxes A PictureBox displays an image. The image can be one of several formats, such as bitmap, GIF (Graphics Interchange Format) and JPEG. A PictureBox’s Image property specifies the image that is displayed, and the SizeMode property indicates how the image is dislayed (Normal, StretchImage, AutoSize, CenterImage or Zoom).

27. PictureBox properties and event PictureBox properties and an eventDescription Common Properties ImageSets the image to display in the PictureBox. SizeModeEnumeration that controls image sizing and positioning. Values are Normal (default), StretchImage, AutoSize, CenterImage, and Zoom. Normal places the image in the PictureBox’s top-left corner, and CenterImage puts the image in the middle. These two options truncate the image if it’s too large. StrechImage resizes the image to fit in the PictureBox. AutoSize resizes the PictureBox to hold the image. Common Event ClickOccurs when the user clicks a control. When you double click this control in the designer, an event handler is generated for this event.

28. Bina Nusantara University 28 References http://www.csharp- station.com/tutorials/Lesson13.aspxhttp://www.csharp- station.com/tutorials/Lesson13.aspx http://books.google.co.id/books?id=euV7e2f- RzsC&printsec=frontcover&dq=c%23&source=gbs_ similarbooks_s&cad=1#v=onepage&q=&f=falsehttp://books.google.co.id/books?id=euV7e2f- RzsC&printsec=frontcover&dq=c%23&source=gbs_ similarbooks_s&cad=1#v=onepage&q=&f=false