Presentation on theme: "Web Application Modeling"— Presentation transcript:
1 Web Application Modeling Web EngineeringWeb Application ModelingLecture III – 21st October 2008Federico M. Facca
2 Where are we? There are some changes! # Date Title Lecturer 1 7th Oct Web Engineering Introduction and OverviewF. M. Facca214h OctCollection Requirements for Web Applications321st OctWeb Application Modeling428th OctDeveloping Applications with WebML54th NovWeb Application Architectures611th NovTesting and Usability on the Web718th NovWeb Technologies I825th NovMid Term Exam92nd DecWeb Technologies II109th DecWeb Technologies III116th JanWeb Application Development Process1213th JanWeb 2.0 Mash-upsF. Daniel (UNITN)1320th JanProject Management for Web Applications1427th JanFinal ExamThere are some changes!
3 OverviewIntroductionModel Driven DevelopmentReference ScenarioContent ModelingHypertext ModelingPresentation ModelingOverview of Other Modeling MethodsWrap-up
5 Define an abstract view of a real-world entity Why Create Models?Define an abstract view of a real-world entityFinding & discovering objects/concepts in a domainAssigning responsibilities to objectsTool of thoughtReduce complexityDocument design decisionsMeans of communication
6 Software Application Modeling LevelsUser interfaceApplication LogicPhasesStructureAnalysisDesignImplementationBehaviorAspectsLevels – the “how” & “what” of an applicationAspects – objects, attributes, and relationships; function & processesPhases – Development cycleData Engineering (structure) E-R Chen 1976UML covers structure, behavior, application logic and user interfaceAspects=orthogonal dimension! They refer to the aspects of levels. E.g. application logic structure, application logic behavior.This is take from the book. As regards me, also content should be modeled for normal software applications….
7 Web Application Modeling LevelsPresentationHypertextCustomizationContentPhasesStructureAnalysisDesignImplementationBehaviorAspectsLevels – Information, node/link structure, UI & page layout separate.Aspects – Same as Software ApplicationsPhases – Approach depends upon type of applicationCustomization – Context informationMethods adopted or the web are not new. They are derived from traditional SW.But… hyperlinks?!Why adding a new layer?Corresponds to the status of web applicationsImprove reuseContent, is the content as displayed in the web application=information structureSeveral pages access the same content…. If you model it you can reuse it.Presentation:structure: user interface elements and their compositionbehavior: reactions to input events, interaction and synchronization between user interface elementsHypertext:structure: page compositions and navigational relationshipsbehavior: run-time behavior of hypertextContent structure: domain-dependent data behavior: domain-dependent application logicPhases: There are several approaches:Information basedPresentation basedLogic based
8 We focus on object-oriented analysis & design Web ModelingModeling static & dynamic aspects of content, hypertext, and presentationWe focus on object-oriented analysis & designAnalysis: Finding & discovering classes of objects/ concepts in a domainDesign: Defining software objects & how they interact to fulfill requirements.
9 ObjectsSoftware entities – like real-world entities - that consist of states and behaviorsStates:Variables store the states of an object’s propertiesHidden from the outside world (data encapsulation)Behaviors:Methods define the object’s behaviorsUsed by objects to communicate with other objectsClassesblueprints for creating objects of a particular type
10 Discovering Objects in a Domain The way we represent a domain’s software model should resemble the physical model as closely as possibleTo find key classes of objects:Reuse existing models, if they existMake a category listPeople, places, thingsTransactionsEventsIdentify noun phrasesWhen naming classes, use terms that are commonly used in the domaini.e., terms users would understandWe saw something about “sharing” and “reusing” knowledge. Where? Can it help?
11 Assigning Responsibilities Responsibilities are an object’s obligations, or behaviors related to its role in the systemWhat does an object do?Doing something (to) itselfPass actions (messages) to other objectsControlling & coordinating the activities in other objectsWhat does an object know?Private, encapsulated dataIts related objectsItems it can derive or calculate
12 Model Driven Development From sketch models to code modelsModel Driven Development
13 Diagrams are, after all, just pretty pictures Why Models at All?When it comes down to it, the real point of software development is cutting codeDiagrams are, after all, just pretty picturesNo user is going to thank you for pretty pictures; what a user wants is software that executesProvision of an expressive modeling language… to allow the specification, construction, visualization, and documentation of different artifacts of a software system… to build different types of diagrams… to provide for the exchange of modelsMeaning of the term »Unified«Support of the whole development processFlexibility with respect to process modelsIndependence from development tools/platforms and programming languagesEmployment for various application areasGenericity of language concepts defined in the metamodelIntegration of »Best Practices«M. Fowler, ”UML Distilled”, 1st edition, Addison Wesley, 1997
14 Unified Modeling Language (UML) “The Unified Modeling Language is a visual language for specifying and documenting the artifacts of systems.”Language of choice (and ISO standard) for diagramming notation in OO developmentStructural – Class diagrams (domain models)Behavioral – Use Cases, Sequence diagramsCurrently at version 2.0, although many analysts and designers still use 1.0
15 The Role of Model in the Development Models as sketchFor communicating ideas and alternativesEssence: Selectivity“Sketchers” don’t have to care much aboutModels as blueprintAll design decisions (maybe of a particular area) are laid outEssence: Completeness – programming should be pretty straightforwardIssue of reverse engineeringModels as programApplications are automatically generatedIn MDA separation of Platform Independent Model (PIM) and Platform Specific Model (PSM); ideally the transformation is "parameterized" by a Platform Description Model (PDM)Essence: models become the source codeSemantics and transformations (QVT, ATL) the holy grail of MDAdegree of model-drivenness
16 Roundtrip Engineering Model-centric / Model-driven Model - Code InterplayCode VisualizationRoundtrip EngineeringModel-centric / Model-drivenCode onlyModel onlyModelModelModelModelIn media stat virtus… but…Round trip is not easy…. Why?CodeCodeCodeCode"Models as Code"
17 Model-Driven ... Systematic development on basis of models Models become the first hand artifacts in the software development cycleKey conceptsabstraction from implementation detailsystematic transformationsRelated TerminologyModel Driven [Software] Engineering (MDE),Model Driven [Software] Development (MDD/MDSD),Model Driven Architecture (MDA)Model Driven Web Engineering (MDWE)
18 What is Model Driven Architecture? MDA is defined and developed by the Object Management Group (OMG) since March 2001MDA is:"Model-Driven …"-framework for software development, defined by the OMGopen, 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 cycleSeparate specification from implementationSpecify a system that is independent of a platformTransform a platform-independent (PIM) system specification into a specific platform (PSM)Code generationThe MDA is an innovative approach to constructing an enterprise architecture. It is an initiative created by the Object Management Group. OMG’s focus has always been, and still is, to help users solve integration problems, in a productive way, by supplying open, vendor-neutral interoperability specifications, which is being achieved by the widely adopted CORBA standard . The MDA is OMG’s next step in solving integration problems, which is upward from application implementation to the level of application design, which takes full advantage of the successful Unified Modeling Language(UML) standard, also developed by OMG.
19 Model-Driven Development (MDD) The Vision Should go far beyond the notion of CASE tools of the 80’sReduced gap between problem and realization domainmodels as primary artefact throughout the lifecycle instead of codemodels as program instead of models as sketch/blueprintSystematic transformations of abstract models to concrete implementationsmultiple levels of abstractions, (e.g., OMG’s PIM, PSM and PDM)horizontal (M2M) and vertical (M2C) transformationsStandards for uniform storage, exchange, and transformation of models, e.g., OMG’sMOF (Meta Object Facility) and Eclipse’s realization “Ecore”XMI (XML Metadata Interchange) andOCL (Object Constraint Language)
20 Developing in the MDA PIM PSM Code Model Platform Independent Model(PIM) represents business functionality and behavior without technology detailsPSMApplies a standard mapping to create or generate a Platform Specific Model (PSM) from the PIMCode ModelCreate or generate the code for PSMPlatformIndependentModelPlatformSpecificModelLets now look at how applications are developed using the MDA.Step 1.All MDA development projects start with the creation of a Platform Independent Model(PIM), which is expressed in UML. The PIM expresses only business functionality and behavior. Built by business and modeling experts working together, this model expresses business rules and functionality undistorted, as much as possible, by technology. The clarity of this modeling environment allows business experts to ascertain, much better than they could if working with a technological model or application, that the business functionality embodied in the PIM is complete and correct. Another benefit: Because of its technological independence, the PIM retains its full value over the years, requiring change only when business conditions mandate.Transition: MDA tool applies an standard mapping to generate Platform-Specific Model (PSM) from the PIM. Code is partially automatic, partially hand-writtenStep 2.Once the first iteration of the PIM is complete, it is stored in a MOF based Repository and input to the mapping step which will produce a Platform-Specific Model (PSM). To produce your PSM, you will have to select a target platform or platforms for the modules of your application. Such as J2EE, .NET etc.Transition: MDA Tool generates all or most of the implementation code for deployment technology selected by the developer.Step 3.Once the PSM has been created/generated, the 3rd and final step is to generate the code/implementation model. This will create/generate all of the files the platform requires. When I talk about platforms, I’m referring to the application server(s) your application will run on and programming languages, such as Java, C++ or C# your application will be generated into. This will result in a first cut working application, which can be further enhanced through the MDA process or by hand-coding.Take note that the mapping standard between PIM, PSM and the Code Model has been defined by OMG but the implementation not. MDA compliant tool vendors have implemented portions of the MDA, but OptimalJ is one of the few tools that has implemented the MDA completely to automatically generate a complete application from a PIM to PSM and finally to the Code Model.CodeModel
21 Modeling Methods (not all are MDA) EROMT1990UMLHDM1995RMMOOHDMHDM-liteWSDMWAE2000WEBMLW2000UWEOOWSMDAHERAWAE2MDA appears only in 2001Many existing approaches can be related to MDA principles even if the arrived beforeWebSA is the only 100% MDAWebML, UWE and OO-H has a MDA like approachOO-H2005WebSAData-orientedHypertext-orientedObject-orientedSW-oriented
22 UML for Web Engineering The book adopts the UML Web Engineering (UWE) notationUML-compliantComprehensive modeling toolDownload it here:Requires MagicDraw UML (the free edition is enough)In the next lecture we will see WebML in details
23 A simple walkthrough case study Reference SCENARIO
24 The Conference Review System This case study was presented at IWWOST 2001 to compare different Web application modeling methodsThe purpose of the system is to support the process of submission, evaluation and selection of papers for a conference.Reviewed methods includes:UWEOOHDMWSDMWEBMLIWWOST=International Workshop on Web-Oriented Software Technology
25 Actors I PC Chair PC Member creating the conference determining the conference topics (or tracks) and subjectsestablishing the Program Committeedefining the final list of accepted and rejected papersdefining the conference deadlines: submission, review, and notification.PC Memberevaluating a set of papers assigned to himindicating another person as a reviewer of a paperadvising the PC Chair for the final list of accepted papers
26 Actors II Reviewer Author responsible for reviewing a paper submitting a paper for acceptance at the conferencePC Members and Reviewers may also be Authors, they must have different Ids for each role
27 Functions I: Paper Submission Any registered author may submit a paperThe 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 oneThe system, after checking the authors’ registrations, assigns a paper ID to the new paper, and allows the user to submit it by uploading a fileAt 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
28 Functions II: Assignment of Papers to PC Members The PC Chair may indicate potential conflicts of interest between PC Members and submitted papersOnce the submission deadline has been reachedPC Members may indicate their interest and also conflicts of interest with some papersIn case of conflict of interest, the PC Member will not see any information about the paperThe PC Chair assigns papers to PC Members for reviewing, an message with the list of papers, and a URL to a page where he can access these papers is sent
29 Functions III: Entering a Review A PC Member, or a Reviewer, may enter a review for a paper assigned to himThe review is entered by accessing a form containing all the evaluation itemsA 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 reviewThe PC Chair has full access to all papers and all reviews
30 Function IV: Choosing Accepted and Rejected Papers Once the review deadline has been reached, the review process is closedThe PC Chair, taking into account the recommendations of the PC Members and reviewers, chooses the papers that will be accepted and rejectedOnce 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
31 How to model the data underlying a Web application CONTENT MODELING
32 Purpose: To model the information requirements of a Web application IntroductionPurpose: To model the information requirements of a Web applicationDiagramming the structural (i.e., information objects) & behavioral aspects of the information.NOT concerned with navigation.Primary ModelsClass diagrams – enough for static applications.State machine diagrams – captures dynamic aspects
33 Content Structure Model RelationClass nameClass attributesCompositionClass operationsCan you model it with a E-R diagram? What will be missing?InvariantDerived attribute
34 Content Behavior Model Initial StateConditionFinal State
35 How to model the hypertext of a Web application Hypertext Modeling
36 Purpose: To model the navigation paths available to users IntroductionPurpose: To model the navigation paths available to usersUWE ArtifactsHypertext Structure Model – navigating among classesAccess Model – UML-compliant site mapFocuses on the structure of the hypertext & access elementsUse “<<navigation class>>” annotation to distinguish from content classesBased on content models
37 Different Models… Different Links… HDM (Hypertext Design Model)Structural linksPerspective linksApplication linksWebML (Web Modeling Language)Contextual linksNon-contextual linksIntra-page linksInter-page links…HDM:Structural links connect elements of the same node, e.g., from a review summary to the review detailsPerspective links put various views of a node in relation to each other, e.g., the PostScript and the PDF versions of a paperApplication links put different nodes in relation to each other, depending on the application, e.g., a link pointing to “best paper”.WebML:Contextual links carry context information, e.g., the unique number of a reviewer, to navigate from one reviewer to the reviews he or she createdNon-contextual links have no associated context information, e.g., links pointing from a single review to the list of all reviews.With regard to the distribution of nodes on the hypertext level over pages on the presentationlevel (see section 3.7), WebML specifies additionally the following types of links:• Intra-page links are used when the source and the destination of a link belong to the samepage, e.g., when a link allows the user to directly navigate to the summary of a paper,which is displayed further down on the page.• Inter-page links are used when the source and the destination are on different pages, e.g.,when detailed information about the authors and their papers are on different pages.
38 Navigation Structure Model Is this model easy to understand?Does this model resemble what you will have in the end?
39 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>>
40 Navigation Access Model Is it clear to what page each component belongs?I.e. what the relation with the previous schema?Page identity is missing! The models cannot be mixed together: this is not intuitive.
41 Presentation Modeling How to model the look&feel of a Web applicationPresentation Modeling
42 The design should aim for simplicity and self-explanation. IntroductionPurpose: 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 pageIdentify recurring elements (headers/footers)Describes presentation behavior:Elements => Events
43 Levels of Presentation Models Presentation Page – “root” element; equivalent to a page container.Presentation UnitA fragment of the page logically defined by grouping related elements.Represents a hypertext model nodePresentation ElementA unit’s (node’s) informational componentsText, images, buttons, fields
51 Things to keep in mind (or summary) Modeling is fundamentalHelps developmentSupport communicationModel Driven Design and DevelopmentAutomatic code generation of Web applicationsOne model for each layerContentNavigationPresentationDifferent methods have different expressive power
52 Bibliography Mandatory reading Suggested Web Engineering Chapter 3SuggestedFirst International Workshop on Web-Oriented Software TechnologyUML-based Web Engineering
53 Assignments I It’s a compulsory team assignment Up to 8 points (as always extras are possible)You have to use UWE to model the described systemIt’s the starting point for next assignmentsYou have to prepare a presentation10 minutes~ 5 slidesYou have to prepare a reportTo be delivered on 2nd November for the opponents to read itThe grade will be assigned during a design reviewA opponent group will revise the design models according to requirementsThe review will be “live” in the lecture on 4th NovemberReview guidelines in the next lecture
54 Assignment IIThe hospital of Innsbruck needs a Web application to handle online visit reservationThe application should handle:Information on patient (name, surname, social security code, date of birth, address, blood type, family anamnesis, physiologic anamnesis, pathologic anamnesis)Information on doctors (name, surname, social security code, date of birth, specialization, role, year of experience)Information on visits (ID visit, visit type, information on the visit, date, report)All the visit reservation process:ReservationProvisioningReport publication
55 Assignment IIIThe application requires different type of user with different functionalitiesPatientsGeneral InformationReservation of visitsVisualization of existing visit reservationsVisualization of reportsDoctorsEditing of reportsAdministratorsEditing of data related to visit typology and associated price
56 All the users needs to authenticate through username and password Assignment IVAll the users needs to authenticate through username and passwordSimplificationWhen the users logs in is redirected to the proper Web application/page according to the roleCalendar handling is not requiredFor reservation only data required are the day and the time (from Monday to Friday) and the time (from 8.00 to 17.00)
57 Next Lecture # Date Title Lecturer 1 7th Oct Web Engineering Introduction and OverviewF. M. Facca214h OctCollection Requirements for Web Applications321st OctWeb Application Modeling428th OctDeveloping Applications with WebML54th NovWeb Application Architectures611th NovTesting and Usability on the Web718th NovWeb Technologies I825th NovMid Term Exam92nd DecWeb Technologies II109th DecWeb Technologies III116th JanWeb Application Development Process1213th JanWeb 2.0 Mash-upsF. Daniel (UNITN)1320th JanProject Management for Web Applications1427th JanFinal Exam