IF Ubaya (Infor + SIB + MM + IT-DD)

1
What will you learn?
• How to draw class diagram using another
tool beside the Visual Studio Class Designer
• The technique to draw 2D shapes on a
control or form

2
3
Background
• In many real life applications, it is common
to have so many classes in a project
• When the number of classes become too
many, it is hard for us (as a human) to
understand the classes and their relationship
easily if we read the code directly.
• In this case, we need to see the classes and
their relationship from a higher point of view
in the form of a diagram

4
Background
• The diagram that helps us to see the classes
and their relationship is called class diagram
and the standard that we use is the UML class
diagram.
• We already used UML class diagram in some
slides about aggregation, composition, and
inheritance.
• VS Class Designer can be used to draw this
diagram although it does not differentiate
between Aggregation and Composition (both
of them will be drawn as an Association)
5
Association

Association

Binary N-ary
Association Association

Aggregation Composition

6
An example of a Class Diagram

Aggregation

Composition
Inheritance

Association

7
 Lucidchart.Com
• If you need to draw the UML class diagram,
you can find many free online tool that can
help you draw the diagram
• One of them is: Lucid Chart (lucidchart.com)
• You should sign up to start using the tool
• In a free account of lucid chart, you can create
3 documents at a time.
• Log in to Lucid chart to start drawing the UML
Class Diagram

8
 Turn on the UML Class
Diagram
• Select Shapes
on the top left
of the diagram
• Tick the UML
option
• Click Import
• And close the
Shapes option
(press X)

9
Adding a class
• To add a class, just
click and drag the
class icon to the
designer diagram

10
Adding a relationship (1)
• Put your cursor on a class, click on the
circle on the class, and drag it to
another circle in another class.

11
Adding a relationship (2)
• Click the Line
• Change both ends of the line to meet your
need End Line 1 End Line 2

End Line 1

End Line 2
Adding a Multiplicity
• Click the Line
• Select Add Multiplicity

• You can edit the multiplicity number by firstly

double click the number.
Explore the capabilities of
Lucid chart yourself
 Break the Brick
Game
• In this game, the player
should break all the bricks
by a ball or balls
• There is a pad in the
bottom of the game to
prevent loosing the ball
• The ball can change to
another ball

15
 Break the Brick: Specification
Some items in the Game:
• Bricks
• There are three types of bricks (Red, Green, and Yellow).
Each brick has a different effect when the ball hit it.
• Common property and behavior to all bricks: strength of
the brick. When the ball hit the brick, the brick strength
will decrease as much as the ball power. If the brick
power≤0 the brick will break and disappear
• When the ball hit the Red brick. No special effect.
• When the ball hit the Green brick, the ball will multiply
itself 2x
• When the ball hit the Yellow brick, it will change the ball
to a Fire Ball
• There can be many bricks at a time in the game 16
Break the brick: Specification
• Balls
• There are two types of balls, Normal ball and Fire
Ball
• Fire ball will behave like a normal ball but it has a
stronger power and a fire tail
• Anything related to the fire tail is processed in the
Fire class
• There can be one or several balls in the game at
one time

• Pad
• There is only one pad at a time that can be used
when the game is played 17
Exercise: Break the Brick Game
• Draw a class diagram to implement the
game
• Add some data members or properties to the
class
• Add the multiplicity of the relationship
• Note: The main process of the game should
be performed in an additional class (not in
Form1)

18
19
Two Dimensional Drawing on Control
• C# provides some functionalities to allow
the programmer to draw on the Form and
some controls like Panel, Button, etc.
• The process to do the drawings ust be put
inside the Paint event handler
• Why?

20
PAINT event handler
• C# will automatically run the Paint event handler
when the program run at the first time.
• The Paint event handler will also be run
automatically when the:
The Form / control is no longer covered by other
application
The Form is resized
• If you put the drawing inside the Paint event
handler, Windows will always refresh your
drawing when it is necessary
• What happen if you don’t draw inside the Paint
event handler? 21
Drawing outside the Paint event handler(1)

Resizing the
application

Original Drawing
22
Drawing outside the Paint event handler(2)

• Form is resized to its original size.

• The drawing is not refreshed
(because it is not in OnPaint)

23
 How to Draw?
• Use the methods that are available through
the Graphics class
• However, DON’T create new object from the
Graphics class.
• You must use the existing reference of the
Graphics object that you can get from the
PaintEventArgs parameter of the Paint event
handler.
• The next example shows how to get the
reference of the Graphics object from a Panel
24
Example: ShapePolymorph

This is a Panel,
named: panelDisplay

25
 Get a reference from the Paint event
• Create an event handler from the Paint event
for a certain control (for example from Panel)
• Get the reference from the “e” parameter
(created from PaintEventArgs)

26
Brush or Pen ?
• There are two groups of the methods in the
Graphics class
• Group 1: methods that are used to draw the
border of the shape (this method is started
with the word “Draw”)
• The border of the shape will be drawn with
the selected Pen (use it from class Pens)

27
Brush or Pen ?
• Group 2: methods that are used to draw the
inside part of the shape (this method is
started with the word “Fill”)
• The color of the inside part of the shape will
be taken from the selected Brush (use it
from class Brushes)

28
Example

29
New method in the class to draw
• You can add a new method in the Shape class and all
of its children, to draw the shape
• Example: the code in the Rectangle class

• Think yourself, the method that you should write in

the Shape and Circle class
• Also think how can you call this method from the
Paint event handler of the Panel with polymorphism
30
Create a new more-interesting Pen or Brush
You can create a new pen and brush to be used
with the Drawxxx and Fillxxx methods
• Pen: create object of a new pen from the Pen class
• Brush  Create object of a new brush from the
classes below:
SolidBrush class (inside: System.Drawing)
TextureBrush class (inside: System.Drawing)
HatchBrush class (inside:
System.Drawing.Drawing2D)
LinearGradientBrush class (inside:
System.Drawing.Drawing2D)
31
Exercise
• Add some code to save and load data from
the file (use the openFileDialog and
saveFileDialog)
• Add some code to draw the shape (stored in
the list) to the panel when the form is loaded
• Draw the new shape to the panel when the
user clicks Add button

32
Exercise
• Remove the shape from the list and the panel
when the user clicks Remove button.
• Note: to call the event Paint from another
method, use Invalidate() method of a certain
control.

33