CSC307 Lecture 08 - Speaker Deck

Slide 1

Slide 1 text

Dr. Javier Gonzalez-Sanchez javiergs@calpoly.edu www.javiergs.info o ffi ce: 14 -227 CSC 307 Introduction to Software Engineering Lecture 08. Patterns in Action

Slide 2

Slide 2 text

Previously

Slide 3

Slide 3 text

GoF Patterns 3

Slide 4

Slide 4 text

Observer 4

Slide 5

Slide 5 text

Singleton 5

Slide 6

Slide 6 text

Composite 6

Slide 7

Slide 7 text

Problem 7 https:/ /github.com/CSC3100/Pacman

Slide 8

Slide 8 text

Solution 8

Slide 9

Slide 9 text

Astah Quick Start

Slide 10

Slide 10 text

File | New Create Diagram | New Class Diagram 10

Slide 11

Slide 11 text

Tools | Java | Import Java 11

Slide 12

Slide 12 text

Tools | Java | Import Java 12

Slide 13

Slide 13 text

Tools | Java | Import Java 13

Slide 14

Slide 14 text

Drag your Classes to the Diagram 14

Slide 15

Slide 15 text

Drag your Classes to the Diagram 15 Missing Connections Wrong relationships The "X" Missing Library Classes

Slide 16

Slide 16 text

Right Click on a Class 16 Missing Connections Wrong relationships The "X" Missing Library Classes

Slide 17

Slide 17 text

Show Related Elements 17 Missing Connections Wrong relationships The "X" Missing Library Classes

Slide 18

Slide 18 text

Right Click on an Interface (Circles) 18 Missing Connections Wrong relationships The "X" Missing Library Classes

Slide 19

Slide 19 text

Show Related Elements 19 Missing Connections Wrong relationships The "X"

Slide 20

Slide 20 text

Right Click on the Line (near the X) 20 Missing Connections Wrong relationships The "X"

Slide 21

Slide 21 text

Navigation | Unspeci f ied 21 Missing Connections Wrong relationships

Slide 22

Slide 22 text

Right Click on the Line 22 Missing Connections Wrong relationships

Slide 23

Slide 23 text

Aggregate 23 Missing Connections

Slide 24

Slide 24 text

Toolbar 24 Missing Connections

Slide 25

Slide 25 text

Add Associations 25

Slide 26

Slide 26 text

(Select all shapes) then click on then menu Alignment 26

Slide 27

Slide 27 text

Auto Layout 27

Slide 28

Slide 28 text

Notes on Decorator | Composite

Slide 29

Slide 29 text

Problem 29

Slide 30

Slide 30 text

Inheritance Approach 30

Slide 31

Slide 31 text

Inheritance Approach 31

Slide 32

Slide 32 text

Inheritance Approach 32

Slide 33

Slide 33 text

Decorator | Composite 33

Slide 34

Slide 34 text

Decorator vs Inheritance • Both a llow you to ch a nge how a n object beh a ves. • The decor a tor p a ttern a llows you to extend (decor a te) the function a lity of a n object a t runtime. • Inherit a nce a dds beh a vior a t compil a tion time. 34

Slide 35

Slide 35 text

Connecting the Dots

Slide 36

Slide 36 text

Application 36

Slide 37

Slide 37 text

Application | GUI 37 Main JFrame ChartPanel JPanel

Slide 38

Slide 38 text

Application | Data Gathering 38 Main JFrame ChartPanel Thread Genius JPanel

Slide 39

Slide 39 text

Application | Observer 39 Main JFrame ChartPanel Thread <> Board Genius JPanel PropertyChange Listener PropertyChange Support

Slide 40

Slide 40 text

MarkerDecoratorShadow MarkerDecoratorDot MarkerSimple Application | Decorator 40 MarkerDecoratorDot MarkerSimple MarkerSimple

Slide 41

Slide 41 text

Main 41 https://github.com/CSC3100/Patterns

Slide 42

Slide 42 text

Genius | Runnable 42 https://github.com/CSC3100/Patterns

Slide 43

Slide 43 text

Board | Singleton, Observable 43 https://github.com/CSC3100/Patterns

Slide 44

Slide 44 text

ChartPanel | Observer 44 https://github.com/CSC3100/Patterns

Slide 45

Slide 45 text

Marker | Decorator 45 https://github.com/CSC3100/Patterns

Slide 46

Slide 46 text

MarkerDecorator | Decorator 46 https://github.com/CSC3100/Patterns

Slide 47

Slide 47 text

MarkerDecoratorBar | Decorator 47 https://github.com/CSC3100/Patterns

Slide 48

Slide 48 text

MarkerDecoratorDot | Decorator 48 https://github.com/CSC3100/Patterns

Slide 49

Slide 49 text

MarkerSimple | Decorator 49 https://github.com/CSC3100/Patterns

Slide 50

Slide 50 text

Note 50 UML Class Diagram

Slide 51

Slide 51 text

Questions 51

Slide 52

Slide 52 text

Lab 08. Decorator

Slide 53

Slide 53 text

Homework 1. Let’s add Decorations to our Shapes

Slide 54

Slide 54 text

Shape Decorator 54 New 1st-click 2nd-click 3rd-click 4th-click

Slide 55

Slide 55 text

Shape Decorator 55 New 1st-click 2nd-click 3rd-click 4th-click

Slide 56

Slide 56 text

Shape Decorator 56 New 1st-click 2nd-click 3rd-click

Slide 57

Slide 57 text

GUI 57

Slide 58

Slide 58 text

One More Thing

Slide 59

Slide 59 text

SVG 59 Always the first lines. Numbers are the size of your screen (picture) Always the last line rect The x of the top-left corner The y of the top-left corner The width of the rectangle. The height of the rectangle Color ellipse, The x-axis center of the ellipse The y-axis center of the ellipse The x radius of the ellipse The y radius of the ellipse Color

Slide 60

Slide 60 text

SVG | Example 60

Slide 61

Slide 61 text

Homework 61 Paint App 3.0 PS. Generating SVG could be great, but just creating text is OK such as:

Slide 62

Slide 62 text

GUI 62

Slide 63

Slide 63 text

Let’s Work 63 https:/ /www.svgviewer.dev/

Slide 64

Slide 64 text

CSC 307 Introduction to Software Engineering Javier Gonzalez-Sanchez, Ph.D. javiergs@calpoly.edu Summer 2024 Copyright. These slides can only be used as study material for the class CSC307 at Cal Poly. They cannot be distributed or used for another purpose.