CSC307 Lecture 08

Transcript

1. Dr. Javier Gonzalez-Sanchez [email protected] 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. [email protected]

    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.