ece 462 object-oriented programming using c++ and java ... · yhl graphical user interface 1 ece...

YHL Graphical User Interface 1

ECE 462Object-Oriented Programming

using C++ and Java

Graphical User Interface

Yung-Hsiang Luyunglu@purdue.edu

YHL Graphical User Interface 2

GUI using C++ / Qt

YHL Graphical User Interface 3

Qt + Eclipse

YHL Graphical User Interface 4

YHL Graphical User Interface 5

YHL Graphical User Interface 6

YHL Graphical User Interface 7

YHL Graphical User Interface 8

YHL Graphical User Interface 9

YHL Graphical User Interface 10

YHL Graphical User Interface 11

YHL Graphical User Interface 12

YHL Graphical User Interface 13

YHL Graphical User Interface 14

Path Setting (if there are problems)

YHL Graphical User Interface 15

YHL Graphical User Interface 16

YHL Graphical User Interface 17

YHL Graphical User Interface 18

Qt\bin and MinGW\bin should be in the path

YHL Graphical User Interface 19

YHL Graphical User Interface 20

YHL Graphical User Interface 21

YHL Graphical User Interface 22

YHL Graphical User Interface 23

Qt Widget Box

YHL Graphical User Interface 24

YHL Graphical User Interface 25

YHL Graphical User Interface 26

YHL Graphical User Interface 27

YHL Graphical User Interface 28

YHL Graphical User Interface 29

YHL Graphical User Interface 30

YHL Graphical User Interface 31

YHL Graphical User Interface 32

YHL Graphical User Interface 33

YHL Graphical User Interface 34

YHL Graphical User Interface 35

Signals and Slots

i.e. events and handlers

YHL Graphical User Interface 36

YHL Graphical User Interface 37

YHL Graphical User Interface 38

YHL Graphical User Interface 39

YHL Graphical User Interface 40

YHL Graphical User Interface 41

YHL Graphical User Interface 42

YHL Graphical User Interface 43

YHL Graphical User Interface 44

YHL Graphical User Interface 45

YHL Graphical User Interface 46

YHL Graphical User Interface 47

YHL Graphical User Interface 48

YHL Graphical User Interface 49

YHL Graphical User Interface 50

YHL Graphical User Interface 51

YHL Graphical User Interface 52

YHL Graphical User Interface 53

YHL Graphical User Interface 54

YHL Graphical User Interface 55

Default Parameter Values

YHL Graphical User Interface 56

Default Parameter Values in C++

• always start from the last parameterfunc1(int x, int y, int z = 0) ...func1(int x, int y = 1, int z = 0) ...func1(int x = 2, int y = 1, int z = 0) ...⇒ func1(1,2,3) means x = 1, y = 2, z = 3⇒ func1(4, 5) means x = 4, y = 5, z = 0⇒ func1(6) means x = 6, y = 1, z = 0⇒ func1() means x = 2, y = 1, z = 0

• cannot skip any parameter (otherwise, ambiguous)func1(int x = 2, int y, int z = 0) ...⇒ what does func1(3, 4) mean?

YHL Graphical User Interface 57

Graphical User Interface (GUI)

• Most GUIs are built using OOP because OOP is a natural way to support GUI.

• GUI has "containers", such as QWidget, that can include buttons, labels, scrollbars ...

• When the widget is redrawn (restore from minimized, maximized, or content update), the frame asks each component to redraw itself.

• Each object knows how to redraw itself because paintEvent(C++ / Qt) or paintComponent (Java) is overridden.

YHL Graphical User Interface 58

GUI using Java

YHL Graphical User Interface 59

JFrame is a derived class of Container

YHL Graphical User Interface 60

YHL Graphical User Interface 61

many derived classes

YHL Graphical User Interface 62

Derived classesoverride paintComponent

YHL Graphical User Interface 63

JFrame

similar to QWidget

YHL Graphical User Interface 64

A frame may contain many objects,such as buttons, labels, scrollbar ...

add componentsfrom the palette

YHL Graphical User Interface 65

The objects are contained in the NewJFrame class

YHL Graphical User Interface 66

The objects are created by using new.Netbeans creates initComponent.Do not modify it.

YHL Graphical User Interface 67

Handle User Actions

YHL Graphical User Interface 68

Handle Button Click

EventsAction

Action Performed

YHL Graphical User Interface 69

YHL Graphical User Interface 70

YHL Graphical User Interface 71

Handle Scrollbar Events

EventsChange

State Changed

YHL Graphical User Interface 72

YHL Graphical User Interface 73

YHL Graphical User Interface 74

YHL Graphical User Interface 75

YHL Graphical User Interface 76

JSlider default range is 0 - 100

YHL Graphical User Interface 77

Handle Mouse Motion

EventsMouse MotionMouseMoved

YHL Graphical User Interface 78

YHL Graphical User Interface 79

YHL Graphical User Interface 80

Self Test

YHL Qt Signals and Slots 1

ECE 462Object-Oriented Programming

using C++ and Java

Qt Signals and Slots

Yung-Hsiang Luyunglu@purdue.edu

YHL Qt Signals and Slots 2

Write Qt Programs without Eclipse(still Eclipse for version control)

A better way to know how it works.

Many examples are obtained by modified Qt samples. Copyright Trolltech.

YHL Qt Signals and Slots 3

Qt Examples

YHL Qt Signals and Slots 4

YHL Qt Signals and Slots 5

YHL Qt Signals and Slots 6

YHL Qt Signals and Slots 7

Simple ExampleVertical Layout

YHL Qt Signals and Slots 8

YHL Qt Signals and Slots 9

YHL Qt Signals and Slots 10

YHL Qt Signals and Slots 11

YHL Qt Signals and Slots 12

Create Qt Executable

1. qmake -project2. qmake3. make

• This works for both Linux and Windows.

YHL Qt Signals and Slots 13

YHL Qt Signals and Slots 14

YHL Qt Signals and Slots 15

YHL Qt Signals and Slots 16

YHL Qt Signals and Slots 17

YHL Qt Signals and Slots 18

derived class of QWidget

macro to enable signals and slots

default value of the parent widget

YHL Qt Signals and Slots 19

this includes many Qt classes

window's title vertical layout

add a button

add a label

add a slider

YHL Qt Signals and Slots 20

GUI and OOP

vbox->addWidget(button1);vbox->addWidget(label1);vbox->addWidget(edit1);vbox->addWidget(slider1);

• These are objects of different classes.• These classes are derived class of QWidget.• If a function requires an object of QWidget, the function

can be called with an object of QLabel.• Any QLabel object is also a QWidget object (wrong in

the other direction).

YHL Qt Signals and Slots 21

YHL Qt Signals and Slots 22

YHL Qt Signals and Slots 23

YHL Qt Signals and Slots 24

YHL Qt Signals and Slots 25

QPushButton, QLineEdit, and QSlider all inherit QWidget

YHL Qt Signals and Slots 26

YHL Qt Signals and Slots 27

YHL Qt Signals and Slots 28

YHL Qt Signals and Slots 29

YHL Qt Signals and Slots 30

YHL Qt Signals and Slots 31

Now, you should understand why GUI is often built with OOP.

YHL Qt Signals and Slots 32

Eclipse + Emacs

use the version control in Eclipseedit code using Emacs

YHL Qt Signals and Slots 33

YHL Qt Signals and Slots 34

YHL Qt Signals and Slots 35

not the defaultworkspace

YHL Qt Signals and Slots 36

do not build automatically

YHL Qt Signals and Slots 37

YHL Qt Signals and Slots 38

YHL Qt Signals and Slots 39

YHL Qt Signals and Slots 40

do not commit Makefile

YHL Qt Signals and Slots 41

Add Slots and Connect Signals

YHL Qt Signals and Slots 42

add private functions (slots)

CVS version numbershown in emacs

make the objects attributesbecause they are used inmultiple functions

YHL Qt Signals and Slots 43

objects

YHL Qt Signals and Slots 44

YHL Qt Signals and Slots 45

YHL Qt Signals and Slots 46

YHL Qt Signals and Slots 47

YHL Qt Signals and Slots 48

YHL Qt Signals and Slots 49

YHL Qt Signals and Slots 50

YHL Qt Signals and Slots 51

YHL Qt Signals and Slots 52

Draw Geometric Shapes

YHL Qt Signals and Slots 53

new object

YHL Qt Signals and Slots 54

new object

YHL Qt Signals and Slots 55

YHL Qt Signals and Slots 56

YHL Qt Signals and Slots 57

draw rectangle

YHL Qt Signals and Slots 58

draw circle

YHL Qt Signals and Slots 59

draw text

YHL Qt Signals and Slots 60

YHL Qt Signals and Slots 61

Handle Mouse Event

YHL Qt Signals and Slots 62

called when mouse movesdoes not have to use connect function

YHL Qt Signals and Slots 63

YHL Qt Signals and Slots 64

YHL Qt Signals and Slots 65

Collision Detection

YHL Qt Signals and Slots 66

detect collisionwith the boundary(static values)

YHL Qt Signals and Slots 67

Timer Update

YHL Qt Signals and Slots 68

YHL Qt Signals and Slots 69

YHL Qt Signals and Slots 70

Memory Management

What is created by new should be destroyed by delete.

YHL Qt Signals and Slots 71

YHL Qt Signals and Slots 72

YHL Qt Signals and Slots 73

Qt and Valgrind

Valgrind and Qt do not work well together.

Fortunately, we can follow a simple rule for memory management.

YHL Qt Signals and Slots 74

Delete every object that is created by new.

YHL Qt Signals and Slots 75

Self Test

YHL Java Events and Handlers 1

ECE 462Object-Oriented Programming

using C++ and Java

Java Events and Handlers

Yung-Hsiang Luyunglu@purdue.edu

YHL Java Events and Handlers 2

YHL Java Events and Handlers 3

YHL Java Events and Handlers 4

YHL Java Events and Handlers 5

YHL Java Events and Handlers 6

YHL Java Events and Handlers 7

add one button and two labels

YHL Java Events and Handlers 8

change the text

YHL Java Events and Handlers 9

Add a Derived Class of JPanel

YHL Java Events and Handlers 10

YHL Java Events and Handlers 11

YHL Java Events and Handlers 12

YHL Java Events and Handlers 13

YHL Java Events and Handlers 14

Handle Mouse Event

YHL Java Events and Handlers 15

YHL Java Events and Handlers 16

YHL Java Events and Handlers 17

YHL Java Events and Handlers 18

YHL Java Events and Handlers 19

YHL Java Events and Handlers 20

YHL Java Events and Handlers 21

YHL Java Events and Handlers 22

YHL Java Events and Handlers 23

YHL Java Events and Handlers 24

YHL Java Events and Handlers 25

Shrink the Panel

YHL Java Events and Handlers 26

YHL Java Events and Handlers 27

YHL Java Events and Handlers 28

YHL Java Events and Handlers 29

Add Timer

YHL Java Events and Handlers 30

YHL Java Events and Handlers 31

YHL Java Events and Handlers 32

YHL Java Events and Handlers 33

Format String

YHL Java Events and Handlers 34

YHL Java Events and Handlers 35

YHL Java Events and Handlers 36

Start and Pause

YHL Java Events and Handlers 37

YHL Java Events and Handlers 38

YHL Java Events and Handlers 39

YHL Java Events and Handlers 40

Add JPanel to Contain Button and Labels

YHL Java Events and Handlers 41

YHL Java Events and Handlers 42

YHL Java Events and Handlers 43

Self Test

YHL Array 1

ECE 462Object-Oriented Programming

using C++ and Java

Array

Yung-Hsiang Luyunglu@purdue.edu

YHL Array 2

Array

Java

int [] dataArray = new int[4];dataArray[2] = 7;// Java uses garbage collection// start from [0]User [] usrList = new User[10];// int dataarray[8] ⇒ error// Java arrays know their lengthsdataArray.length;

C++

int * dataArray = new int[4];dataArray[2] = 7;delete [] dataArray; // use []// sameUser * usrList = new User[10];int dataArray[8];// not for C++

YHL Array 3

Java Array

YHL Array 4

Array of int

YHL Array 5

YHL Array 6

Array of Objects

YHL Array 7

YHL Array 8

YHL Array 9

Person [] personArray = new Person[8];

personArray[index] = new Person (...)Peter, 5

personArray[index] = new Person (...)Lisa, 12

YHL Array 10

C++ Array

YHL Array 11

Array of int

YHL Array 12

YHL Array 13

Array of Objects

YHL Array 14

YHL Array 15

YHL Array 16

YHL Array 17

YHL Array 18

Person * * personArray = new Person* [arraySize];

personArray[index] = new Person (...)Peter, 5

personArray[index] = new Person (...)Lisa, 12

YHL Array 19

Objects Contain Arrays

YHL Array 20

Java

YHL Array 21

YHL Array 22

YHL Array 23

C++

YHL Array 24

need another attribute to store the number of elements in the array

YHL Array 25

YHL Array 26

YHL Array 27

delete without [] (because it is not an array)

YHL Array 28

Self Test