Web Engineering Winter Term 2006/07 Prof. Dr. Gregor Engels Chapter II: Modeling of Web Applications Part 2 Acknowledgements Dr. Nora Koch, LMU München http://www.pst.informatik.uni-muenchen.de/~kochn/index.html W. Schwinger, N. Koch: Modeling Web Applications. In G. Kappel, B. Pröll, S. Reich, W. Retschitzegger (Ed.): Web Engineering The Discipline of Systematic Development of Web Applications. John Wiley & Sons, 2006 Chapter 2 - Part 2 - University of Paderborn 2 University of Paderborn 1
Acknowledgements Prof. Dr. Gerti Kappel, TU Wien http://www.big.tuwien.ac.at/teaching/offer/ss05/we_vo/ G. Kappel, B. Pröll, S. Reich, W. Retschitzegger (Ed.): Web Engineering The Discipline of Systematic Development of Web Applications. John Wiley & Sons, 2006 In German: Web Engineering systematische Entwicklung von Web-Anwendungen, dpunkt Verlag, 2004 Chapter 2 - Part 2 - University of Paderborn 3 Outline II. Modeling of Web Applications II.1 MDA, MDE, MDD II.2 Modeling Dimensions II.3 UWE II.4 Related and Future Work Chapter 2 - Part 2 - University of Paderborn 4 University of Paderborn 2
UWE: UML-based Web Engineering light-weight extension of UML UML profile Literature: N. Koch, A. Kraus: The Expressive Power of UML-based Web Engineering, Proc. of the 2nd International Workshop on Web-Oriented Software Technology (IWWOST 2002). Malaga, Spain, June 2002. Link: http://www.pst.ifi.lmu.de/projekte/uwe Chapter 2 - Part 2 - University of Paderborn 5 UML Meta Modeling Approach M3 (MOF: Meta Object Facility) M2 (UML Language) «instance-of» MOF:Class «instance-of» «instance-of» «classifier» Attribute Class InstanceSpecification M1 (UML Model) «instance-of» «instance-of» «instance-of» «instance-of» Course :Course +title:string «snapshot» title = WE «instance-of» M0 (Runtime Instances) WebEngineering Chapter 2 - Part 2 - University of Paderborn 6 University of Paderborn 3
4-layered language architecture Meta-Meta Model (M3) defines language to define languages MOF: Meta Object Facility examples: MOF:Class, MOF:Attribute, MOF:Association Meta Model (M2) Meta models are instances of M3 define (abstract) syntax of modeling languages examples: UML:Class, UML:State, UML: Attribute Model (M1) concrete UML Model models are instances of M2 Examples: Class Person with attributes Name, Birthday, Runtime Instances (M0) Concrete instances: person Gregor Chapter 2 - Part 2 - University of Paderborn 7 UML extension Variant 1 definition of new meta model Variant 2 heavy-weight extension: uncontrolled extension of UML meta model Variant 3 light-weight extension: controlled extension of UML meta model with stereotypes, called UML profile Chapter 2 - Part 2 - University of Paderborn 8 University of Paderborn 4
UML Profiles UML is a general-purpose modeling language UML can be adapted to become a domain-specific language (DSL) domain-specific adaption of UML is called UML Profile domain-specific extensions are indicated by stereotypes notatation: «stereotype» Chapter 2 - Part 2 - University of Paderborn 9 Definition of stereotypes extension of UML-metaclasses + additional meta attributes ( tags ) + additional constraints «metaclass» Component «metaclass» Class {required} «stereotype» Entity Author: String[0..1] {length < 10} Year: Integer {year < 2006} Chapter 2 - Part 2 - University of Paderborn 10 University of Paderborn 5
Modeling Support in UWE Requirements Specification Content Modeling Hypertext modeling Presentation modeling Customization Chapter 2 - Part 2 - University of Paderborn 11 Sample Application Reviewing System part of a (scientific) conference organization system actors general users authors, submitting papers for the conference program committee members, reviewing papers program committee chair functional requirements submit paper assign paper to reviewer produce review produce list of accepted / rejected papers Chapter 2 - Part 2 - University of Paderborn 12 University of Paderborn 6
Modeling of functional requirements overall functionality modelled by UML use cases based on the view of actors refined by UML activity diagrams two types of requirements functional (to be found in all software systems) navigational (typical for web applications) distinction by stereotype «navigation» Chapter 2 - Part 2 - University of Paderborn 13 use case diagram of the reviewing system login User register «extend» submit paper Author set preferences «navigation» browse review results Reviewer PC chair enter review assign paper to reviewer «extend» «navigation» browse submitted papers close reviewing process «ínclude» «navigation» list accepted / rejected papers Chapter 2 - Part 2 - University of Paderborn 14 University of Paderborn 7
activity diagram for the submission process submit paper [user logged-in ] enter title and abstract select subject group select paper location login [user not logged-in ] «datastore» [ new ] [ not complete ] [ ok ] upload paper send notification Chapter 2 - Part 2 - University of Paderborn 15 Modeling Support in UWE Requirements Specification Use case diagram Activity diagram Content Modeling Hypertext modeling Presentation modeling Customization Chapter 2 - Part 2 - University of Paderborn 16 University of Paderborn 8
Content modeling structural aspect of content problem domain model UML class diagram behavioral aspect of content depends on type and complexity of web application UML state charts / interaction diagrams only content level, i.e., no hypertext or presentation modeling here! Chapter 2 - Part 2 - University of Paderborn 17 problem domain model of the reviewing system Subject name description Review originality technicalquality relevance overallrating entered() 1.. 1.. Conference name submissiondate reviewdate notificationdate status conferencedate newconference() closereviewing() paperid title abstract url status / result 0..3 upload() +review assign() submit CameraReady() +user User name organization email login 1 passwd loggedin +author register() 0..3 +reviewer +assigneds inv: reviewer.intersection(author) isempty UML class diagram result = avg(review.overallrating) Chapter 2 - Part 2 - University of Paderborn 18 University of Paderborn 9
life cycle of a paper created upload() assign() [#reviewers<3] [result >= threshold] accepted submitcameraready() submitted assigned [date= (Conference.submissionDate + 1)] [#review=3] reviewed [result < threshold] inprint rejected UML state chart Chapter 2 - Part 2 - University of Paderborn 19 Consistency within UML model paperid title abstract url status / result upload() assign() submit CameraReady() created upload() assign() [#reviewers<3] [result >= threshold] accepted submitcameraready() submitted assigned [date= (Conference.submissionDate + 1)] [#review=3] reviewed [result < threshold] inprint UML state chart rejected Chapter 2 - Part 2 - University of Paderborn 20 University of Paderborn 10
Modeling Support in UWE Requirements Specification Use case diagram Activity diagram Content Modeling Class diagram State chart diagram Hypertext modeling Presentation modeling Customization Chapter 2 - Part 2 - University of Paderborn 21 Hypertext modeling objectives model of nodes (also called pages or documents) and links of hypertext structure model of navigation paths results hypertext structure model (or navigation structure model) structure of the hypertext, i.e., which classes of the content model can be visited by navigation access model refined hypertext structure model with access elements hypertext structure and access model for each user role, i.e. user, author, reviewer, PC chair Chapter 2 - Part 2 - University of Paderborn 22 University of Paderborn 11
Hypertext modeling concepts in UWE hypertext structure for navigation nodes for navigation links access structure «menu» access to nodes of different classes access to single nodes of one class «guidedtour» sequential access to a list of nodes «query» search for a node and direct access Chapter 2 - Part 2 - University of Paderborn 23 Hypertext structure model 1 1 accepteds rejecteds Conference 1 paper review Review 1 user 1.. author assigneds paper reviewer review User PC chair's view on the reviewing system Chapter 2 - Part 2 - University of Paderborn 24 University of Paderborn 12
How to find a hypertext structure model? 1. define navigation class for each navigation-relevant content class 2. define navigation links for relevant associations, aggregations and compositions of content model 3. add multiplicities and role names existing in content model 4. add additional navigation links due to scenario s of requirements analysis 5. add additional navigation links as shortcuts (Note: steps 1, 2, and 3 may be automated) Chapter 2 - Part 2 - University of Paderborn 25 Subject name description Review originality technicalquality relevance overallrating entered() 1.. 1.. Conference name submissiondate reviewdate notificationdate status conferencedate newconference() closereviewing() paperid title abstract url status / result 0..3 upload() +review assign() submit CameraReady() +user User name organization email login 1 passwd loggedin +author register() 0..3 +reviewer +assigneds UML class diagram 1 1 1 Conference 1 paper user accepteds 1.. rejecteds author User assigneds paper reviewer review Hypertext structure model Review review Chapter 2 - Part 2 - University of Paderborn 26 University of Paderborn 13
access modeling (automatic) method to derive access model from hypertext structure model introduce index for all navigation links with multiplicity >1 introduce menu for each class with more than one outgoing navigation link use role names of outgoing navigation links as menu items Chapter 2 - Part 2 - University of Paderborn 27 simplified access model for the hypertext structure model Conference review accepteds rejecteds Accepteds Rejecteds «menu» Conference Menu papers «menu» Menu search «query» SearchByTitle sbytitle searchs sbyid user Assigneds UserIndex User ReviewingStatus Reviews reviews «menu» Menu authors Authors Review Revieweds Chapter 2 - Part 2 - University of Paderborn 28 University of Paderborn 14
Consistency of hypertext structure model and access model 1.. author User assigneds paper reviewer review Review review User Assigneds Reviews reviews «menu» Menu authors Authors Review Revieweds Chapter 2 - Part 2 - University of Paderborn 29 alternative approaches (1) HDM (Hypertext Design Model) structural links: express that two nodes have a strong logical relationship perspective links: relate different views of a node, e.g. PS and PDF version of a paper application-dependent links: e.g. link to the best paper Garzotto, F. Mainetti, L. Paolini, P.: Hypermedia Design Analysis, and Evaluation Issues, CACM, 38(8), 1995, pp. 74-86 Chapter 2 - Part 2 - University of Paderborn 30 University of Paderborn 15
alternative approaches (2): WebML (Web Modeling Language) links are distinguished whether they are used for information transport during navigation or not contextual links: transport information / data non-contextual links: no information transport Ceri, S., Fraternali, P., Bongio, A., Brambilla, M., Comai, S., Maristella, M.: Designing Data-Intensive Web Applications, Morgan Kaufmann, 2003 Chapter 2 - Part 2 - University of Paderborn 31 Modeling Support in UWE Requirements Specification Use case diagram Activity diagram Content Modeling Class diagram State chart diagram Hypertext modeling Hypertext structure diagram Access diagram Presentation modeling Customization Chapter 2 - Part 2 - University of Paderborn 32 University of Paderborn 16
presentation modeling objectives model of structure and behavior of user interface characteristics of presentation modeling hierarchical composition of pages consisting of presentation elements results static presentation model dynamic interaction model Chapter 2 - Part 2 - University of Paderborn 33 presentation modeling concepts in UWE «page» describes a page presented to the user as a visualization unit. It can be composed of different presentation units «presentation unit» serves to group related presentation elements, representing a logical fragment of the page, and it presents a hypertext model node presentation elements «anchor» «text» «image» Chapter 2 - Part 2 - University of Paderborn 34 University of Paderborn 17
presentation pages of the reviewing system «text» ID «anchor» FullVersion(Pdf) «page» Page «presentation unit» «text» Title «text» Abstract «anchor» Authors «text» SubmissionDate «button» SubmitReview... «presentation unit» AuthorList «anchor» Author1 «anchor» Author2 «page» AuthorPage «presentation unit» Author «text» Name «text» Affiliation «text» E-mail «button» SubmitChanges static presentation model Chapter 2 - Part 2 - University of Paderborn 35 scenario from the presentation model for the reviewing system «page» :Reviewer :ConferenceHomepage navigate show navigate(assigneds) «presentation unit» :NavigationBar browse :Assigned s : :ListOfAssigned s : «page» : loop(0,nrassigneds) select show create navigate() browse create show dynamic interaction model Chapter 2 - Part 2 - University of Paderborn 36 University of Paderborn 18
Modeling Support in UWE Requirements Specification Use case diagram Activity diagram Content Modeling Class diagram State chart diagram Hypertext modeling Hypertext structure diagram Access diagram Presentation modeling Static presentation model Dynamic interaction model Customization Chapter 2 - Part 2 - University of Paderborn 37 customization modeling objectives explicit representation of context information and related implications on presentation different approaches Static modeling: different models for different context Dynamic modeling: one model + adaptation rules result customization model Chapter 2 - Part 2 - University of Paderborn 38 University of Paderborn 19
dynamic adaptation of an index in the hypertext model «menu» Menu reviewer reviews papers «customization» all papers that are within the user's scope of interest Interestings Chapter 2 - Part 2 - University of Paderborn 39 Dynamic adaptation of a page in the presentation model «page» Page «presentation unit» «text» ID «text» SubmissionDate «text» Title «text» Abstract «customization» visible, if user currently in role "reviewer" «anchor» FullVersion (Pdf) «button» EnterReview «anchor» Authors Chapter 2 - Part 2 - University of Paderborn 40 University of Paderborn 20
Summary: Modeling Support in UWE Requirements Specification Use case diagram Activity diagram Content Modeling Class diagram State chart diagram Hypertext modeling Hypertext structure diagram Access diagram Presentation modeling Static presentation model Dynamic interaction model Customization model stack with consistency constraints Chapter 2 - Part 2 - University of Paderborn 41 Outline II. Modeling of Web Applications II.1 MDA, MDE, MDD II.2 Modeling Dimensions II.3 UWE II.4 Related and Future Work Chapter 2 - Part 2 - University of Paderborn 42 University of Paderborn 21
Historical Development of modeling methods for Web applications Underlying Modeling Language ER OMT UML 1. Generation HDM WSDM WAE 2. Generation RMM W2000 HDM-Lite OOHDM WAE2 3. Generation WebML UWE 4. Generation OO-H Data-oriented methods Hypertext-oriented methods Object-oriented methods Software-oriented methods Chapter 2 - Part 2 - University of Paderborn 43 Related Approaches RMM: Relationship Management Model WebML: Web Modeling Language HMM: Hypertext Design Model WSDM: Web Site Design Method OOHDM: Object-oriented Hypermedia Design Method OOH: Object-oriented Hypermedia WAE: Web Application Extension Chapter 2 - Part 2 - University of Paderborn 44 University of Paderborn 22
UWE within a MDD approach Web Functional Viewpoint Web Architectural Viewpoint Functional Models (e.g., UWE) Analysis Subsystem Model Configuration Model T1 Merge Platform Independent Model Integration Model Platform Dependent Model T2 T2' T2' J2EE models.net models Other models Chapter 2 - Part 2 - University of Paderborn 45 University of Paderborn 23