Object-Oriented Design: UML Extensions for Web Applications
advertisement
Web Applications Extensions (WAE) for UML
• Web applications are becoming more complex
• One way to manage the complexity of softwareintensive systems (web applications) is to abstract and
model them.
• UML helps manage the complexity by encouraging us to
think of things in terms of objects and encapsulate
properties and behaviours in objectlike concepts.
• With the WAE, Web pages and other architecturally
significant elements are modelled alongside the “normal”
classes of the model.
Web Applications Extensions for UML
• Out of the box, the building blocks of UML are not
sufficient to express the necessary subtleties of scripted
pages as objects in a class diagram.
• Fortunately the UML creators defined an extension
mechanism for UML: stereotypes, tagged values, and
constraints.
• These extensions enable us to to extend the notation of
UML to create new types of building blocks.
Web Applications Extensions for UML
UML extensions are done with:
Stereotypes: Attaches a new semantic meaning to a
model element. For example, a Web page will be
modeled by a stereotype for class.
Tagged values: A new property that can be associated
with a model element.
Constraints: Specifies the conditions under which the
model element can be considered well-formed.
Server Page
A server page represents a dynamic Web page that contains content
assembled on the server each time it is requested. For the server page
stereotype class, the page’s scripts, subroutines, and functions represent the
class’s methods; variables declared in the script that have page scope
represent the class’s attributes.
spCourseListing.asp OR
spCourseListing.jsp OR
spCourseListing.cfm
A server page contains scripts that are executed by the server that interacts
with server-side resources: databases, business logic components, external
systems, etc
Client Page
A client page is an HTML-formatted Web page with a mix of data,
presentation, and logic. Client page functions map to functions in tags in
the page. Client page attributes map to variables declared in the page’s
script tags that have page scope (accessible by any function in the page).
Client Page
There is a fundamental relationship between the server and client stereotypes
of a web page. A server page ultimately builds the resulting client page. This is
a unidirectional relationship, since a completed HTML page has little access to
the object interface of the building server page. The stereotype «builds» is
applied to associations and is always drawn in the model as a unidirectional
association from a server page to a client page.
Association Stereotypes
STEREOTYPE
<<build>>
DESCRIPTION
A directional relationship between a server page and a client page.
It identifies the HTML output of a server page’s execution.
<<link>>
A relationship between a client page and a server page resource,
or Web page. The target may be a client page or a server page.
This is an abstraction of the HTML anchor element (href).
<<submit>>
A directional relationship between an <<HTML form>> and a server
page. All the forms attributes are submitted.
<<redirect>>
A directional relationship between a client page or a server page
and another page. This association indicates a command to the
client to request another resource.
Association Stereotypes
STEREOTYPE
<<forward>>
DESCRIPTION
A directional relationship between one server page and another
server page or a client page. This association represents the
delegation of processing a client’s request for a resource to another
server-side page
<<object>>
A containment relationship drawn from a client page to another
logical class (Applet, ActiveX, or other embeddable component).
This association abstracts the HTML <object> and <applet>
elements.
<<include>>
A directional association form a <<server page>> to another
<<server page>> or <<client page>> class. During page assembly
at runtime, this association indicates that the included page gets
processed and that its contents are used by the parent.
Association Stereotypes
Association Stereotypes
HTML Form
A collection of input fields that are part of a client page. This class maps directly
to the HTML <form> tag.
HTML Form
<<builds>>
<<submits>>
HTML Form
<html>
<head></head>
<body>
<p><b>New Student</b></p>
<form method=post action=“ProcessNewStudReq.jsp”>
<p>Last Name: <input type=text name=“Last”></p>
<p>First Name: <input type=text name=“First”></p>
<p><input type=submit name=“Submit”></p>
</form>
<br>
<p><b>Current Student</b></p>
<form method=post action=“GetStudentRecord.jsp”>
<p>Student ID: <input type=text name=“StudID”></p>
<p><input type=submit name=“Submit”></p>
</form>
</body>
</html>
CourseRegistration.html
HTML Form
HTML Form
<html>
<head></head>
<body>
<p><b>New Student</b></p>
<form method=post action=“ProcessNewStudReq.jsp”>
<p>Last Name: <input type=text name=“Last”></p>
<p>First Name: <input type=text name=“First”></p>
<p><input type=submit name=“Submit”></p>
</form>
<br>
<p><b>Current Student</b></p>
<form method=post action=“GetStudentRecord.jsp”>
<p>Student ID: <input type=text name=“StudID”></p>
<p><input type=submit name=“Submit”></p>
</form>
</body>
</html>
.NET Example
f( ) {
myPage.cs
Script Library
( webvalidate.js )
( code behind class )
<<include>>
( myPage.html )
<<build>>
<<submit>>
( myPage.aspx )
J2EE Example
( mypage.html )
<<build>>
( page2.jsp )
<<forward>>
Servlet
( myServlet.java )
<<submit>>
Storyboards
• A storyboard is a way to tell a story though the use of discrete static
pictures.
• In a web application, the screens are the individual boards, when
strung together, tell a story of the application.
• A UML storyboard for a web application is best captured by
collaboration diagrams.
• The storyboard is a road map that is mapped to the use case model.
Storyboards
Home
page
1:
2:
Catalog
Catalog
Paper
Clips
3:
Acme
Catalog
Paper
Clips
4:
Smith
Plastic
Clips
Cart
Catalog
5:
Plastic
Clips
6:
7:
Catalog
