1. Lecture 9
GUI and Event Driven
CSE 1322
2/16/2019

2. Topics GUI Applications Graphics Context GUI Components Labels
Event Handling
Text Fields
Command Buttons, Radio Buttons, and Checkboxes
Combo Boxes
Layout Managers
Mouse and Touch Events
2/16/2019

3. Introduction GUIs enable the user to:
Select the next function to be performed
Enter data
Set program preferences, such as colors or fonts
Display information
GUIs also make the program easier to use.
A GUI is a familiar interface to users. Users can learn quickly to operate your program, in many cases without consulting documentation or extensive training.
2/16/2019

4. Graphics context C# uses window forms Java uses JavaFX
Basic GUI functions include basic graphics such as
Drawing Lines, Rectangles, and Ovals
Displaying Text
Simple animations
2/16/2019

5. Java Fx JavaFX uses a mixed performance/art metaphor.
We start with a stage (a window) to which we add one or more scenes.
To produce graphical output, we add a canvas to our scene, and we draw shapes and text on the canvas.
When our application begins, the window opens and displays whatever we have drawn on the canvas.
The Canvas class provides an area on which we can draw shapes and text.
The Canvas has a GraphicsContext class that provides methods to draw shapes and text on the Canvas and to set the current color.
2/16/2019

6. C# Windows Forms App
Windows forms app of the .Net Framework provides a drag and drop framework for inserting tools/controls into your display box and generates the background code automatically
2/16/2019

7. The Graphics Coordinate System
2/16/2019

8. About Color
The Color class defines colors using the RGB (Red, Green, Blue) system.
Any RGB color is composed of red, green, and blue components. Each component’s value can range from 0 to 255 (00 to FF in hexadecimal).
The higher the value, the higher the concentration of that component in the color.
For example:
Red is: red = FF, green = 00, and blue = 00
Yellow is: red = FF, green = FF, and blue = 00
The color white is (FF, FF, FF).
The color black is (00, 00, 00).
2/16/2019

9. Drawing a Line Example: gc.strokeLine( 50, 100, 150, 100 );
(50, 100) (150, 100)
Return type
Method name and argument list
void
strokeLine( double xStart, double yStart,
double xEnd, double yEnd )
draws a line in the current stroke color starting at (xStart, yStart) and ending at (xEnd, yEnd)
setLineWidth( double pixelWidth )
sets the stroke width in pixels
2/16/2019

10. Drawing a Line protected override void OnPaint(PaintEventArgs e) {
Graphics g = e.Graphics;
Pen pen = new Pen(Brushes.Red);
g.DrawLine(pen, 20, 30, 70, 70);
base.OnPaint(e); }
2/16/2019

11. Drawing a Rectangle
gc.strokeRect( x, y, width, height );
Return type
Method name and argument list
void
strokeRect( double x, double y,
double width, double height )
draws an outlined rectangle in the current stroke color with (x,y) as the upper-left corner and with the width and height specified
2/16/2019

12. Drawing a Rectangle protected override void OnPaint(PaintEventArgs e){
Graphics g = e.Graphics;
g.FillRectangle(Brushes.Red, x, y, 40, 40);
base.OnPaint(e); }
2/16/2019

13. Drawing a Solid Oval
gc.fillOval( x, y, width, height );
Return type
Method name and argument list
void
fillOval( double x, double y,
double width, double height )
draws a solid oval in the current fill color inside an invisible bounding rectangle
2/16/2019

14. Drawing a Solid Oval
protected override void OnPaint( PaintEventArgs e ) {
Graphics g = e.Graphics;
g.FillEllipse(Brushes.Red, x ,y, 40 ,40);
base.OnPaint(e); }
2/16/2019

15. JavaFX
The top-level structure in a JavaFX application is the stage, which corresponds to a window.
A stage can have one or more scenes, which are top-level containers for nodes that make up the window contents.
A node can be a user interface control, such as a button or a drop-down list; a layout; an image or other media; a graphical shape; a web browser; a chart; or a group.
To create a JavaFX GUI, we add nodes to a scene.
These nodes are arranged in a hierarchy, called a scene graph, in which some nodes are children of other nodes.
The top node is called the root of the scene graph.
2/16/2019

16. GUI Components A component performs at least one of these functions:
Displays information
Collects data from the user
Allows the user to initiate program functions
The Java Class Library provides a number of component classes in the javafx.scene.control package.
The Windows Form App toolbox has a majority of the components ad controls that can be dragged and dropped into an app.
2/16/2019

17. The Label A Label component does not interact with a user.
The Label displays some information, for example:
A title
An identifier for another component
2/16/2019

18. Event Handling
GUI programming uses an event-driven model of programming.
The program responds to events caused by the user interacting with a GUI component.
For example, we might display some text fields, a few buttons, and a selectable list of items. Then our program will "sit back" and wait for the user to do something.
When the user enters text into a text field, presses a button, or selects an item from the list, our program will respond, performing the function that the user has requested, and then sit back again and wait for the user to do something else.
2/16/2019

19. TextField and Button Example
The user enters a name in the TextField, a string in the password field and presses a Button. The result is displayed in a text field

20. Selected java source
Label userName = new Label("User Name:"); grid.add(userName, 0, 1); TextField userTextField = new TextField(); grid.add(userTextField, 1, 1); Label pw = new Label("Password:"); grid.add(pw, 0, 2); PasswordField pwBox = new PasswordField(); grid.add(pwBox, 1, 2); Button btn = new Button
2/16/2019

21. setOnAction source
final Text actiontarget = new Text(); grid.add(actiontarget, 1, 6); btn.setOnAction( new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent e) { actiontarget.setFill(Color.FIREBRICK); actiontarget.setText("Sign in button pressed"); } });
2/16/2019

22. C# Code
private void textBox1_TextChanged(object sender, EventArgs e) { name = nameTextBox.Text; } private void label3_Click(object sender, EventArgs e) password = PasswordmaskedTextBox.Text; private void signin_button1_Click(object sender, EventArgs e) result = name +" "+ password; outputLabel.Text=result;
2/16/2019

23. RadioButton and CheckBox
Radio buttons are typically used to allow the user to select one option from a group.
Radio buttons are meant to be mutually exclusive, in that clicking on any radio button deselects any previously selected radio button.
Checkboxes often are associated with the sentence “check all that apply”; that is, the user may select 0, 1, or more options.
A checkbox is a toggle button, in that successive clicks alternate between selecting and deselecting the option for that particular checkbox.

24. SOFTWARE ENGINEERING TIP
Arrange items in lists in a logical order so that the user can find the desired item quickly. For example, list items alphabetically or in numeric order. Also consider placing the most commonly chosen items at the top of the list.

25. Handling Events Programmatically
To allow a user to interact with our application through a GUI component, we need to perform the following functions: 
Write an event handler class (called a listener)
Instantiate an object of that listener
Register the listener on one or more components
Note that an application can instantiate more than one listener.

26. Event handler
btn.setOnAction( new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent e) { actiontarget.setFill(Color.FIREBRICK); actiontarget.setText("Sign in button pressed"); } });
2/16/2019