Software Design and Architecture

Laboratory # 04

2/10/2025
UET TAXILA
Engr. Sidra Shafi

CLO Learning Outcomes Assessment Item BT Level PLO

No.
1 Construct the experiments / projects Lab Task, Mid Exam,
of varying complexities. Final Exam, Quiz,
P2 / C2 3
Assignment, Semester
Project
2 Use modern tool and languages. Lab Task, Semester
P2 5
Project
3 Demonstrate an original solution of Lab Task, Semester
A2 8
problem under discussion. Project
4 Work individually as well as in teams Lab Task, Semester A2 9
Project
 Component Diagram
Statement Purpose:
After this Lab, students will be able to understand and implement:
• Implementation Diagrams: Component Diagrams

UML Tool: Star UML version 6.

All UML diagrams can be useful to describe aspects of the architectural model. Four UML
diagrams are particularly suitable for architecture modeling:
• Package diagrams
• Subsystem diagrams
• Component diagrams
• Deployment diagrams

UML diagrams represent these two aspects of a system:

• Structural (or Static) view: emphasizes the static structure of the system using objects,
attributes, operations and relationships. It includes class diagrams and composite
structure diagrams.
• Behavioral (or Dynamic) view: emphasizes the dynamic behavior of the system by
showing collaborations among objects and changes to the internal states of objects. This
view includes sequence diagrams, activity diagrams, and state machine diagrams.

Component and Deployment come under the category of Structure Diagrams.

Implementation Diagram: describe the different elements required for implementing a system

Component Diagram:
Component: A component represents a modular part of a system that encapsulates its contents
and whose manifestation is replaceable within its environment. In UML 2, a component is drawn
as a rectangle with optional compartments stacked vertically.

Component Diagram shows a set of components and their relationships that illustrates the static
implementation view of a system.

UML Component diagrams are used in modeling the physical aspects of object-oriented systems
that are used for visualizing, specifying, and documenting component-based systems and also for
constructing executable systems through forward and reverse engineering. Component diagrams
are essentially class diagrams that focus on a system's components that often used to model the
static implementation view of a system.

4th Semester UET TAXILA

Purpose of Component Diagrams

This type of diagram is used for Component-Based Development (CBD), to describe systems
with Service-Oriented Architecture (SOA).

A component diagram breaks down the actual system under development into various high levels
of functionality. Each component is responsible for one clear aim within the entire system and
only interacts with other essential elements on a need-to-know basis.

The main purpose of the component diagram is enlisted below:

1. It envisions each component of a system.

2. It constructs the executable by incorporating forward and reverse engineering.
3. It depicts the relationships and organization of components.

Figure 1: Component with Port and Interface

The example above shows the internal components of a larger component:

• The data (account and inspection ID) flows into the component via the port on the right-
hand side and is converted into a format the internal components can use. The interfaces
on the right are known as required interfaces, which represents the services the component
needed in order to carry out its duty.

4th Semester UET TAXILA

 • The data then passes to and through several other components via various connections
before it is output at the ports on the left. Those interfaces on the left are known as provided
interface, which represents the services to deliver by the exhibiting component.
• It is important to note that the internal components are surrounded by a large 'box' which
can be the overall system itself (in which case there would not be a component symbol in
the top right corner) or a subsystem or component of the overall system (in this case the
'box' is a component itself).
Basic Concepts of a Component Diagram:
A high-level, abstracted view of a component in UML 2 can be modeled as:
1. A rectangle with the component's name
2. A rectangle with the component icon
3. A rectangle with the stereotype text and/or icon

Figure 2: Different ways to show Components in UML

Interface:
The example below shows two type of component interfaces:
Provided interface symbols with a complete circle at their end represent an interface that the
component provides - this "lollipop" symbol is shorthand for a realization relationship of an
interface classifier.
Required Interface symbols with only a half circle at their end (a.k.a. sockets) represent an
interface that the component requires (in both cases, the interface's name is placed near the
interface symbol itself).

Figure 3: Components with interfaces

4th Semester UET TAXILA

Component Diagram Example - Using Interface (Order System):

Figure 4: Component Diagram of an Order System

Subsystems:
The subsystem classifier is a specialized version of a component classifier. Because of this, the
subsystem notation element inherits all the same rules as the component notation element. The
only difference is that a subsystem notation element has the keyword of subsystem instead of
component.

Figure 5: Subsystem named Online Store containing different components

Port:
Ports are represented using a square along the edge of the system or a component. A port is often
used to help expose required and provided interfaces of a component.

Figure 6: Component with Ports

4th Semester UET TAXILA

Relationships:

Component diagrams commonly contain components, interfaces and dependency, association, and
realization relationships. It may also contain notes and constraints.

The following relationships are used in component diagrams:

• Association
• Realization
• Constraint
• Dependency
• Links

Modeling Source Code:

• Either by forward or reverse engineering, identify the set of source code files of interest
and model them as components stereotyped as files.
• For larger systems, use packages to show groups of source code files.
• Model the compilation dependencies among these files using dependencies. Again, use
tools to help generate and manage these dependencies.

Examples:

Figure 7: Component Example- Java Source Code

4th Semester UET TAXILA

 Figure 8: Component Diagram Example - C++ Code with versioning

Modeling an executable release:

• Identify the set of components you'd like to model. Typically, this will involve some or all
the components that live on one node, or the distribution of these sets of components across
all the nodes in the system.
• Consider the stereotype of each component in this set. For most systems, you'll find a small
number of different kinds of components (such as executables, libraries, tables, files, and
documents). You can use the UML's extensibility mechanisms to provide visual
cues(clues) for these stereotypes.
• For each component in this set, consider its relationship to its neighbors. Most often, this
will involve interfaces that are exported (realized) by certain components and then
imported (used) by others. If you want to expose the seams in your system, model these
interfaces explicitly. If you want your model at a higher level of abstraction, elide these
relationships by showing only dependencies among the components.

Figure 9: Component Diagram Example – Showing .dll files

Modeling a Physical Database:

• Identify the classes in your model that represent your logical database schema.

4th Semester UET TAXILA

 • Select a strategy for mapping these classes to tables. You will also want to consider the
physical distribution of your databases. Your mapping strategy will be affected by the
location in which you want your data to live on your deployed system.
• To visualize, specify, construct, and document your mapping, create a component diagram
that contains components stereotyped as tables.
• Where possible, use tools to help you transform your logical design into a physical design.

Figure 10: Component Diagram Example – Database Modeling

Modeling in Star UML:

The following elements are available in a component diagram.

• Package
• Interface
• Component
• ComponentInstance
• Artifact
• Port
• Part
• Association
• Dependency
• Realization
• Link
• Connector

4th Semester UET TAXILA

Package:

A package is a grouping of model elements. Packages themselves may be nested within other
packages. A package may contain subordinate packages as well as other kinds of model elements.
All kinds of UML model elements can be organized into packages.

Component:

A component represents a modular, deployable, and replaceable part of a system that encapsulates
implementation and exposes a set of interfaces.

Steps for creating component:

In order to create Component,

1. Click [Toolbox] -> [Component] -> [Component] button.

2. Click at the position where Component will be placed in the [main window]. And at the
quick dialog, enter component name and press [Enter] key. The result is as follows.

Procedure for adding resident element:

In order to add resident element to component,

1. Select [Collection Editor...] popup menu of component.

4th Semester UET TAXILA

 2. Or click button in [Residents] property on properties window.

3. At the [Residents] tab of the [collection editor], you can add resident element by
using button.

4. At the [Select a Resident] dialog, select resident component.

4th Semester UET TAXILA

 5. The component is assigned to component as resident component and is shown as follows:

Steps for creating providing relationship:

In order to create providing relationship,

1. Click [Toolbox] -> [Component] -> [Realization] button

4th Semester UET TAXILA

 2. Drag from component and drop to interface in the [main window].

3. The result is as follows.

Steps for creating requiring relationship:

In order to create requiring relationship,

1. Click [Toolbox] -> [Component] -> [Dependency] button.

4th Semester UET TAXILA

 2. Drag from component and drop to interface in the [main window].

3. Finally, the interface requiring relationship is created.

Steps for creating port:

In order to create port on a component,

1. Click [Toolbox] -> [Component] -> [Port] button.

2. And click the component where the port will be contained in the [main window].

3. A port is created on the component. At the quick dialog, enter the port name and
press [Enter] ken to be complete.

4th Semester UET TAXILA

 4. The result is as follows.

Steps for creating view by dragging port:

You can create port by dragging port from [model explorer] to main diagram.

1. Drag port in the [model explorer] and drop on the component in the main diagram.

2. A port appears on the component. If it is not dropped on the component but on the other
area of the diagram, component with port will be created

Part:

Procedure for creating part:

In order to create part,

1. Click [Toolbox] -> [Component] -> [Part] button.

4th Semester UET TAXILA

 2. And click the component where the part will be contained in the [main window].

Procedure for creating connector:

In order to create connector,

1. Click [Toolbox] -> [Component] -> [Connector] button.

2. Drag from one part and drop to the other part in the [main window].

3. The connector between two parts is created finally as follows.

4th Semester UET TAXILA

ComponentInstance:

A component instance is an instance of a component that resides on a node instance.

Procedure for creating component instance

In order to create ComponentInstance,

1. Click [Toolbox] -> [Component] -> [ComponentInstance] button.

2. And click at the position where ComponentInstance will be placed in the [main
window].

3. Enter the component instance name at the quick dialog and press [Enter] key. The result
is as follows.

Artifact:

An Artifact represents a physical piece of information that is used or produced by a software

development process. Examples of Artifacts include models, source files, scripts, and binary
executable files. An Artifact may constitute the implementation of a deployable component.

Steps for creating artifact

In order to create Artifact,

4th Semester UET TAXILA

 1. Click [Toolbox] -> [Component] -> [Artifact] button.

2. And click at the position where Artifact will be placed in the [main window].

3. The artifact is created on the diagram and the quick dialog is shown. At the quick dialog,
enter the artifact name

4. Press [Enter] Key to have done procedure.

Association
Steps for creating association

In order to create association,

4th Semester UET TAXILA

 1. Click [Toolbox] -> [Component] -> [Association] button.

2. Drag from one associated and drop to another in the [main window].

3. Between two elements, the association is created finally.

Dependency
Steps for creating dependency

In order to create dependency,

1. Click [Toolbox] -> [Component] -> [Dependency] button.

4th Semester UET TAXILA

 2. Drag and drop between elements in the [main window] in depending direction.

3. The dependency between two elements is created.

Link
Steps for creating link:

In order to create Link between two components,

1. Click [Toolbox] -> [Component] -> [Link] button.

2. Drag from one ComponentInstance and drop to the other ComponentInstance in

the [main window]. Then the link is created as follows.

Lab Task Marks: 10

Draw a Componet Diagram for an online shopping system. The component diagram must
contain webstore, warehouse and accounting components stereotyped as Subsystems.

Webstore component contains SearchEngine, ShoppingCart and Authentication

components related to Online Shopping. SearchEngine component allows to search or
browse items by exposing provided interface named Product Search and uses required
interface SearchInventory provided by Inventory component.

4th Semester UET TAXILA

ShoppingCart Component provides OnlineShopping Interface and requires ManageOrders
interface provided by Orders component during checkout and UserSession Interface.

Authentication Component provides UserSession and requires ManageCustomers Interface.

Authentication component allows customers to create account, login, or logout and binds
customer to some account.

Warehouse Component contains one component only named Inventory. Inventory

component realizes SearchInventory and ManageInventory Interfaces.

Accounting Component contains Orders and Customers components.

Orders component realizes ManageOrders Interface and requires ManageInventory and

ManageCustomers Interface.

Customers component realizes ManageCustomers Interface.

dependencies.

*****************

4th Semester UET TAXILA