CSC307 Lecture 08

Introduction to Software Engineering
Design Patterns in Action
(202407)

Today, we focus on implementing design patterns, specifically the decorator, singleton, and observer patterns, within an application example. The application features a runnable class generating random data points and three panels observing the data. Additionally, a practical guide on creating UML class diagrams using Astah is provided, emphasizing the correct establishment of connections and relationships among classes.

Transcript

1. 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
2. Previously
3. GoF Patterns 3
4. Observer 4
5. Singleton 5
6. Composite 6
7. Problem 7 https:/ /github.com/CSC3100/Pacman
8. Solution 8
9. Astah Quick Start
10. File | New Create Diagram | New Class Diagram 10
11. Tools | Java | Import Java 11
12. Tools | Java | Import Java 12
13. Tools | Java | Import Java 13
14. Drag your Classes to the Diagram 14
15. Drag your Classes to the Diagram 15 Missing Connections Wrong relationships The "X" Missing Library Classes
16. Right Click on a Class 16 Missing Connections Wrong relationships The "X" Missing Library Classes
17. Show Related Elements 17 Missing Connections Wrong relationships The "X" Missing Library Classes
18. Right Click on an Interface (Circles) 18 Missing Connections Wrong relationships The "X" Missing Library Classes
19. Show Related Elements 19 Missing Connections Wrong relationships The "X"
20. Right Click on the Line (near the X) 20 Missing Connections Wrong relationships The "X"
21. Navigation | Unspeci f ied 21 Missing Connections Wrong relationships
22. Right Click on the Line 22 Missing Connections Wrong relationships
23. Aggregate 23 Missing Connections
24. Toolbar 24 Missing Connections
25. Add Associations 25
26. (Select all shapes) then click on then menu Alignment 26
27. Auto Layout 27
28. Notes on Decorator | Composite
29. Problem 29
30. Inheritance Approach 30
31. Inheritance Approach 31
32. Inheritance Approach 32
33. Decorator | Composite 33
34. 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
35. Connecting the Dots
36. Application 36
37. Application | GUI 37 Main JFrame ChartPanel JPanel
38. Application | Data Gathering 38 Main JFrame ChartPanel Thread Genius JPanel
39. Application | Observer 39 Main JFrame ChartPanel Thread <<Singleton>> Board Genius JPanel PropertyChange Listener PropertyChange Support
40. MarkerDecoratorShadow MarkerDecoratorDot MarkerSimple Application | Decorator 40 MarkerDecoratorDot MarkerSimple MarkerSimple
41. Main 41 https://github.com/CSC3100/Patterns
42. Genius | Runnable 42 https://github.com/CSC3100/Patterns
43. Board | Singleton, Observable 43 https://github.com/CSC3100/Patterns
44. ChartPanel | Observer 44 https://github.com/CSC3100/Patterns
45. Marker | Decorator 45 https://github.com/CSC3100/Patterns
46. MarkerDecorator | Decorator 46 https://github.com/CSC3100/Patterns
47. MarkerDecoratorBar | Decorator 47 https://github.com/CSC3100/Patterns
48. MarkerDecoratorDot | Decorator 48 https://github.com/CSC3100/Patterns
49. MarkerSimple | Decorator 49 https://github.com/CSC3100/Patterns
50. Note 50 UML Class Diagram
51. Questions 51
52. Lab 08. Decorator
53. Homework 1. Let’s add Decorations to our Shapes
54. Shape Decorator 54 New 1st-click 2nd-click 3rd-click 4th-click
55. Shape Decorator 55 New 1st-click 2nd-click 3rd-click 4th-click
56. Shape Decorator 56 New 1st-click 2nd-click 3rd-click
57. GUI 57
58. One More Thing
59. SVG 59 <svg xmlns="http://www.w3.org/2000/svg" width="800" height=“600"> <rect x="300" y="300" width="50" height="50" fill="#FF0000"/> <ellipse cx="60" cy="60" rx="25" ry="25" fill=“black"/> </svg> 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
60. SVG | Example 60
61. Homework 61 Paint App 3.0 PS. Generating SVG could be great, but just creating text is OK such as: <this_is_an_arc x=10 y=10 w=90 h=90, a=0 b=180>
62. GUI 62 <svg xmlns="http://www.w3.org/2000/ svg" width="400" height=“400"> <rect x=500 y=500 width=50 height=50> <oval x=10 y=10 width=50 height=50> </svg></svg>
63. Let’s Work 63 https:/ /www.svgviewer.dev/
64. 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.