LECTURE

BY:ENGR.PRIHA
CHAPTER#3:MODELING
BHATTI FOR WEB APPLICATIONS
OVERVIEW

 Introduction
 Reference Scenario
 Content Modeling
 Hypertext Modeling
 Presentation Modeling
 Model Driven Development
 Overview of Other Modeling Methods
WHY MODELS?

 Define an abstract view of a real-world entity

-Finding & discovering objects/concepts in a domain
-Assigning responsibilities to objects
 Tool of thought
-Reduce complexity
-Document design decisions
 Means of communication in your development team
WEB APPLICATION MODELING
Web applications have 3 major building blocks:
 Content
-Document-centric, multimediality
-Generating, updating, integrating, quality assurance
 Hypertext (Navigation)
-Non-linear nature of hypertextual documents
-Hypertext models: links(absolute and Relative), nodes (URL), anchors
-Disorientation
 Presentation
-User Interface
-Self-explanatory
-Aesthetics
WEB MODELING
 Modeling static & dynamic aspects of content, hypertext, and presentation
 We focus on object-oriented analysis & design
-Analysis: Finding & discovering classes of objects/ concepts in a domain
-Design: Defining software objects & how they interact to fulfill requirements.
A SIMPLE WALKTHROUGH CASE STUDY

REFERENCE SCENARIO
THE CONFERENCE REVIEW SYSTEM
 This case study was presented at IWWOST 2001 to compare different Web
application modeling methods
 The purpose of the system is to support the process of submission, evaluation and
selection of papers for a conference.
ACTORS I
 PC Chair
-creating the conference
-determining the conference topics (or tracks) and subjects
-establishing the Program Committee
-defining the final list of accepted and rejected papers
-defining the conference deadlines: submission, review, and notification.
 PC Member
-evaluating a set of papers assigned to him
-indicating another person as a reviewer of a paper
-advising the PC Chair for the final list of accepted papers
ACTORS II
 Reviewer
-responsible for reviewing a paper
 Author
-submitting a paper for acceptance at the conference
-PC Members and Reviewers may also be Authors, they must have different Ids for each
role
FUNCTIONS I: PAPER SUBMISSION
 Any registered author may submit a paper

-The author must register: the title, the abstract, the conference track, and a set of
subjects chosen from a list previously determined by the PC Chair, if there is one

-The system, after checking the authors’ registrations, assigns a paper ID to the new paper,
and allows the user to submit it by uploading a file

-At any moment, an author is allowed to check the data about his submitted papers.

Until the submission deadline, the author is also allowed to substitute the uploaded file by
a new one, or to change any of the informed data about the paper
FUNCTIONS II: ASSIGNMENT OF PAPERS TO PC
MEMBERS
 The PC Chair may indicate potential conflicts of interest between PC Members and
submitted papers
 Once the submission deadline has been reached
-PC Members may indicate their interest and also conflicts of interest with some papers
-In case of conflict of interest, the PC Member will not see any information about the
paper
-The PC Chair assigns papers to PC Members for reviewing, an email message with the list
of papers, and a URL to a page where he can access these papers is sent
FUNCTIONS III: ENTERING A REVIEW
 A PC Member, or a Reviewer, may enter a review for a paper assigned to him
 The review is entered by accessing a form containing all the evaluation items
 A PC Member may see other reviews (entered by others) for any of the papers he is
reviewing, but only after he has entered his own review
 The PC Chair has full access to all papers and all reviews.
FUNCTION IV: CHOOSING ACCEPTED AND
REJECTED PAPERS
 Once the review deadline has been reached, the review process is closed
 The PC Chair, taking into account the recommendations of the PC Members and
reviewers, chooses the papers that will be accepted and rejected
 Once the process is marked as finalized by the PC Chair, the system issues a
notification message to paper authors, which includes the appropriate parts of the
reviews submitted by the PC Members and reviewers
BASIC USE CASE MODEL (REQUIREMENT)
HOW TO MODEL THE DATA UNDERLYING A WEB APPLICATION

CONTENT MODELING
 Purpose:To model the information requirements of a Web application

-Diagramming the structural (i.e., information objects) & behavioral aspects of the
information.

-NOT concerned with navigation or presentation.

 Primary Models

-Class diagrams – enough for static applications.

-State machine diagrams – captures dynamic aspects

CONTENT STRUCTURE MODEL
CONTENT BEHAVIOR MODEL
HOW TO MODEL THE HYPERTEXT OF A WEB APPLICATION

HYPERTEXT MODELING
 Purpose:To model the navigation paths available to users
 UWE Artifacts* (UML-based Web Engineering)
-Hypertext structure model (navigation model)
-Access model
 Focuses on the structure of the hypertext & access elements
 Use “<<navigation class>>” annotation to distinguish from content classes
 Based on content models
DIFFERENT MODELS… DIFFERENT LINKS…
 HDM (Hypertext Design Model)
-Structural links connect elements of the same node (e.g. review summary to review details)
-Perspective links put various views of a node in relation (e.g. PS and PDF of a paper)
-Application links put different nodes in relation depending on application (e.g. link pointing to
best paper)
 WebML (Web Modeling Language)
-Contextual links carry context information (e.g. ID of reviewer)
-Non-contextual links have no associated context information (e.g. link from single review to
list of all reviews)
-Intra-page links: source and destination are on the same page further down/up
-Inter-page links: different pages
 UWE
-Navigation links (navigate between nodes, e.g. Papers and authors)
-Process links (start node of a process, e.g. Beginning of review submission)
-External links (external page)
NAVIGATION STRUCTURE MODEL
NAVIGATION ACCESS MODEL
 Hypertext structure models describe navigation, but not orientation.
 Access models describe both through Navigation patterns, used to consistently
describe conventional elements.
 <<index>> (list of objects of the same type)
 <<menu>> (list of heterogeneous objects)
 <<guided-tour>> (sequential links)
 <<query>>
NAVIGATION ACCESS MODEL
HOW TO MODEL THE LOOK FEEL OF A WEB APPLICATION

PRESENTATION MODELING
 Purpose:To model the look & feel of the Web application at the page level.
 The design should aim for simplicity and self-explanation.
 Describes presentation structure:
-Composition & design of each page
-Identify recurring elements (headers/footers)
 Describes presentation behavior:
-Elements => Events
LEVELS OF PRESENTATION MODELS
 Presentation Page – “root” element; equivalent to a page container.
 Presentation Unit
-A fragment of the page logically defined by grouping related elements.
-Represents a hypertext model node
 Presentation Element
-A unit’s (node’s) informational components
-Text, images, buttons, fields
PRESENTATION STRUCTURE MODEL
MODELING METHODS (NOT ALL ARE MDA)
FROM SKETCH MODELS TO CODE MODELS

MODEL DRIVEN DEVELOPMENT

 Models as sketch
-For communicating ideas and alternatives
-Essence: Selectivity
-“Sketchers” don’t have to care much about
 Models as blueprint
-All design decisions (maybe of a particular area) are laid out
-Essence: Completeness – programming should be pretty straightforward
-Issue of reverse engineering
 Models as program
-Applications are automatically generated
-Essence: models become the source code
MODEL-DRIVEN ...
 Systematic development on basis of models
 Models become the first hand artifacts in the software development cycle
 Key concepts
-abstraction from implementation detail
-systematic transformations
 Related Terminology
-Model Driven [Software] Engineering (MDE),
-Model Driven [Software] Development (MDD/MDSD),
-Model Driven Architecture (MDA)
-Model Driven Web Engineering (MDWE)
WHAT IS MODEL DRIVEN ARCHITECTURE?
 MDA is:
-"Model-Driven …"-framework for software development, defined by the OMG
-open, vendor-neutral approach to interoperability using OMG's modeling specifications:
-Unified Modelling Language (UML), Meta-Object Facility (MOF) and Common Warehouse
Model (CWM)
 Main ideas:
-Addresses the complete system development life cycle
-Separate specification from implementation
-Specify a system that is independent of a platform
-Code generation
MODEL-DRIVEN DEVELOPMENT (MDD) THE
VISION
 Should go far beyond the notion of CASE (Computer Aided Software Engineering)
tools of the 80’s
 Reduced gap between problem and realization domain
-models as primary artefact throughout the lifecycle instead of code
-models as program instead of models as sketch/blueprint
 Systematic transformations of abstract models to concrete implementations
 Standards for uniform storage, exchange, and transformation of models
DEVELOPING IN THE MDA
WEBML(MODELING METHOD)
DEVELOPING WEBAPPS BY WEBML
 WebML aims at providing a structured approach to the design of Data intensive Web
sites
 A set of integrated Models should help designers in high-quality Web sites production
 All the facets of Web design should be addressed
THE WEBML MODELS
 WebML
A conceptual language for high-level design of web sites.
 Models:
 Structure model - data organization
 Derivation model - redundant data definition
Derivation is the process of adding redundant information to the structure model, in order
to augment its expressiveness and define different views and groupings of the same data.
 Composition model - definition of site pages as set of subpages and elementary
publishing units
 Navigation model: definition of links between pages and between units
 Presentation model: positioning of the units in the page and definition of graphical
appearance
STRUCTURE MODEL (1)
Question – What are the objects published in the site and how they are related?

Answer

– Entity: an object type in the application domain

– Attribute: scalar property of an entity

– Relationship: A connection between entities

– IS-A hierarchy: classification and grouping

• Compatible with Entity-Relationship and UML class diagrams

STRUCTURE MODEL
DERIVATION MODEL
COMPOSITION: EXAMPLES OF CONTENT UNITS
DESCRIPTION
NAVIGATION MODEL: LINKS
BIBLIOGRAPHY
 Mandatory reading

-Kappel, G., Proll, B. Reich, S. & Retschitzegger, W. (2006).Web Engineering, Wiley & Sons.
3nd Chapter# 3

 Suggested

-UML-based Web Engineering

ASSIGNMENT

 Modeling for a small Web application: Hospital management system(Diagrams for

Content.hypertext and presentation).
 A small library (research group, max 60 users)
 Junior and senior researchers, admin staff, etc.
 Due: 2 weeks
 Only models(by hand or by any modeling tool)