SlideShare uma empresa Scribd logo
1 de 38
Baixar para ler offline
UML-Based Web Engineering
     Nora Koch
     joint work with Gefei Zhang, Martin Wirsing, Andreas Kraus,
     Alexander Knapp, Rolf Hennicker and Hubert Baumeister


     Web Engineering Group
     Ludwig-Maximilians-Universität München (LMU)

     Sevilla, 21.4.2005




Web Projects

 main problems
    business goals are not fulfilled
    delays in relation to project plan
    project exceeds budget
    system delivered does not have required functionality
    deliverables are of poor quality
 current situation (similar to software development around 1960)
    individual, quick & dirty implementations
    reuse based on copy & paste
    missing documentation
    incremental complexity of web applications and web services




   UML-Based Web Engineering © Nora Koch                           Sevilla, 21.04.2005, 2




                                                                                            1
Methodologies for Web Development
                Data-           Hypertext-                             Process-   Implementation-
                                                     OO-oriented
               oriented          oriented                              oriented      oriented
  1993                             HDM

  1994                                                   EORM

  1995        RMM

  1996               HDM-Lite                            OOHDM

  1997                           WSDM        OO-Method                              Web Composition

  1998                                                         SOHDM   RNA   HFPM

  1999                                                                                   WAE

  2000      WebML       W2000                            UWE             eW3DT

  2001
                    Hera
  2002

  2003                                        OOWS       OOH              NDT
                                                                                      M. J. Escalona,2004
  2004                                                                   WebSA
    UML-Based Web Engineering © Nora Koch                                            Sevilla, 21.04.2005, 3




Methodologies for Web Development

   EORM                    Enhanced Object Relationship Model
   eW3DT                   Extended World Wide Web Design Technique
   HDM                     Hypertext Design Model
   Hera
   HFPM                    Hypertext Flexible Process Modeling
   NDT                     Navigational Development Technique

   OO-H                    Object-Oriented Hypermedia Method
   OO-Method               Object-Oriented Method
   OOHDM                   Object-Oriented Hypermedia Design Method
   OOWS                    Object-Oriented Web Solution

   RMM                     Relationship Management Methodology
   RNA                     Relationship-Navigation Analysis
   SOHDM                   Scenario-based Hypermedia Design Method
   UWE                     UML-based Web Engineering

   W2000
   WAE                     Web Application Extension
   Web Composition
   WebML                   Web Modeling Language
   WebSA                   Web Software Architecture
   WSDM                    Web Site Design Method

    UML-Based Web Engineering © Nora Koch                                            Sevilla, 21.04.2005, 4




                                                                                                              2
Contents


     UWE: A Web Engineering Approach
     Modelling with UML and UWE (Notation)
     Modelling supported by UWE Method
     Metamodel for UWE
     Tool support with ArgoUWE
     UWE Development Process
     Future Work and Trends in Web Engineering




   UML-Based Web Engineering © Nora Koch                               Sevilla, 21.04.2005, 5




What is UWE?


   UWE is a an engineering approach for the development of web
   applications
   main characteristic is the use of UML for all models
   focuses on systematisation and automatic generation
   UWE comprises
        a notation for the graphical representation of the model elements
        a method (technique) supporting semi-automatic generation
        a metamodel for UWE modelling elements
        a process supporting the development life-cycle of web applications


        a case-tool ArgoUWE supporting the design of web applications

                                              (UWE is also a German male name)


   UML-Based Web Engineering © Nora Koch                               Sevilla, 21.04.2005, 6




                                                                                                3
Web-based Systems / Web Applications

  characteristics
      based on the hypermedia paradigm
                    nodes & links
                    text & multimedia
      omnipresent due to the nature of the web
                    global and permanent availability
                    comfortable and unified access
                    distributed information / services
                    producible by “everybody“
  dynamic development
      incremental number of web pages
      continuous improvement of existing web applications (content, links, layout)
      offer of new services




   UML-Based Web Engineering © Nora Koch                                                         Sevilla, 21.04.2005, 7




Categories of Web Applications
       complexity




                                                                       semantic web


                                                              personalized


                                                   portal-oriented *


                                             collaborative


                                   workflow-based


                             transactional                              Source: Web Engineering, Kappel et al.
                                                                        d-punkt Verlag (October 2003)

                         interactive


                    informative                                                         time

   UML-Based Web Engineering © Nora Koch                                                         Sevilla, 21.04.2005, 8




                                                                                                                          4
Why UML?

    UML is a graphical language for specifying, constructing and
    documenting software artifacts
    UML is a de facto industry and a OMG standard
    UML includes
        notation
        diagram types
        metamodel
        Object Constraints Language (OCL) for invariants, pre- and post-condition
        well-formedness rules
    UML is neither a method nor a process

  How expressive is UML for the development of web applications?
    UML does not include specific web modelling elements
    UML defines extension mechanisms       UML profiles

    UML-Based Web Engineering © Nora Koch                               Sevilla, 21.04.2005, 9




UML Profiles

      UML extension is a UML profile if it only uses the
      extension mechanisms provided by the UML
           stereotypes
                                                                        eases
           tagged values                                             tool support
           OCL constraints
      UML profile = light weight extension
                                                  «index»
                                                                     article.date
                                                NewArticles          > user.lastVisit

                                            {adaptation=annotated}

      heavy weight extension
           uses other diagram types not defined in the UML
           uses different notation

    UML-Based Web Engineering © Nora Koch                              Sevilla, 21.04.2005, 10




                                                                                                 5
Contents


      Web Engineering Approach
      Modelling with UML and UWE Notation
           Requirement of Web Applications
           Content, Hypertext Structure and Presentation
           Workflow-based Web Applications
           Adaptivity with Aspects
           Web Architecture
      Modelling supported by UWE Method
      Metamodel for UWE
      Tool support with ArgoUWE
      UWE Development Process
      Future Work and Trends in Web Engineering


    UML-Based Web Engineering © Nora Koch                                        Sevilla, 21.04.2005, 11




Dimensions of Web Modelling

                          levels
                          presentation
                          hypertext                                       adaptivity
                         content
                                                                                phases
       structure        requirements analysis design implementation
                          analysis
  behaviour

              aspects
   modelling process
       information-driven (quot;content firstquot;)
       presentation-driven (quot;layout firstquot;)
       functionality-driven (quot;test firstquot;)    agile process
                                                              Source: Kappel et al. Web Engineering,
                                                              d-punkt (2003)

    UML-Based Web Engineering © Nora Koch                                        Sevilla, 21.04.2005, 12




                                                                                                           6
Modelling Requirements of Web Applications
Case Study: e-Shop


   UML use case diagrams are used to describe web application functionality
   UWE extension
        distinction
        between                                          Select                 <<extend>>        AddTo
                                                      ProductItems                             ShoppingCart
        “normal”/standard
                                                      <<navigation>>
        use cases and
        navigation use
                                          Search                                                   ViewCart
        cases                          ProductItems
        UWE Stereotype                <<navigation>>                   NonRegisteredUser
        <<navigation>>
    W2000 makes the                             LogIn
    distinction at
    diagram level: two                       <<extend>>
                                                                          Customer
    use case diagrams
                                                                                                   PrintInvoice
                                                  Checkout
                                                                           <<include>>


     UML-Based Web Engineering © Nora Koch                                                   Sevilla, 21.04.2005, 13




Refining the Requirements Specification
Case Study: e-Shop – checkout process

    use cases complemented
    with
        textual specification                                           LogIn
        activity diagrams                                  [ error ]            [ newCustomer ]
    UML activity diagrams for                                                            [ error ]
    visual representation of                  [ returningCustomer ]
                                                                             AddNewCustomer
    workflows
    to model the                                             SetOptions
                                   [ change ]
    business logic of
                                                                                  newCustomer :
    the application                                                                 Customer
                          newOrder : Order                   PlaceOrder
    UML call states                              exit/ delete Items ShoppingCart
    and sub-activities
    sub-activities can
                                                           PrintInvoice
    further be refined


     UML-Based Web Engineering © Nora Koch                                                   Sevilla, 21.04.2005, 14




                                                                                                                       7
Content Modelling in UWE

      goal
           to model problem domain
           to separate content from hypertext / navigation structure and presentation

     UML class diagrams for the structure
     UML sequence diagrams or UML state charts for the behaviour
          sequence diagrams are used to visualize messages between objects
          showing how they collaborate (messages between user and web
          application)
          state diagrams capture states of objects and show actions that lead to state
          transitions




      UML-Based Web Engineering © Nora Koch                                                  Sevilla, 21.04.2005, 15




Content Modelling: Structure
Case Study: e-Shop

      UML class diagrams at analysis-level and design-level
      classes to
      represent                                                            ShoppingCart             Customer
                                                                           add()                     name
           units of textual                                                checkout()      1..* 0..1 creditCard
           information           Book                                              1
                                                                                   *
           multimedia                           Product                     ShoppingCart
           elements               DVD           name                            Item
                                                price      1              * quantity
      associations,                                                                                     *
                                                 *
      aggregations to             CD
                                                          OrderItem
                                                                                                     Address
                                                                                  +deliveryAddress street
      show                                                quantity                                  zip-code
                                                                      1                        0..1 country
      relationships
                                                *
      between classes                           Order                                  +invoiceAddress   1
                                              orderID
      inheritance to                          invoiceNumber
                                                               1

      show hierarchies                        sendInvoice()

      between classes

      UML-Based Web Engineering © Nora Koch                                                  Sevilla, 21.04.2005, 16




                                                                                                                       8
Navigation Modelling in UWE

   goals
       to represent nodes and links of the hypertext structure
       to design of navigation paths
       to avoid disorientation and cognitive overload
   result: navigation structure model
       UML class diagram
       specific modelling elements
   other methodologies
       own notation for hypertext elements
       different diagrammatic representation of hypertext models




    UML-Based Web Engineering © Nora Koch                                 Sevilla, 21.04.2005, 17




Navigation Modelling Elements (1)


   basic navigation elements
        navigation class specifies the hypertext nodes is visited by a user through
        browsing (a navigation class will be given the same name of the domain
        class which it maps)
        navigation link specifies that the target navigation object is accessed by
        navigation from the source navigation object
   stereotypes for basic navigation elements
        «navigation     class»
        «navigation     link»
                                            «navigation class»
                                               Class Name          «navigation link»
                                                attributes
                                                operations




    UML-Based Web Engineering © Nora Koch                                 Sevilla, 21.04.2005, 18




                                                                                                    9
Navigation Structure Model (First Step)
Case Study: e-Shop



                           «navigation link»                    «navigation class»
                                                                  Homepage
                                «navigation link»
                                                     «navigation link»                «navigation link»
                                                       +shoppingCart       0..1        1    +customer
                                                                 «navigation class»         «navigation class»
                                                                 ShoppingCart                  Customer

                                                    «navigation link»
                                                                                                          «navigation link»
                   1..*     +products            +shoppingCartItems         0..*
                                                                                           +orders        0..*
                       «navigation class»                        «navigation class»
                         Product                                ShoppingCartItem           «navigation class»
                                                                                                 Order
                                   +product
      +books    1..*
                                                                                      +orderItems 1..* «navigation link»
      «navigation class»
            Book                            «navigation link»                               «navigation class»
                                                                                             OrderItem
                                            «navigation link»




      UML-Based Web Engineering © Nora Koch                                                                      Sevilla, 21.04.2005, 19




UWE Access Primitives

     additional navigation elements
     for the selection of one navigation target from a set of navigation
     elements
           «index»
           «guidedTour»
           «query»
           «menu»


                                                                            ?
       MyIndex                     MyGuidedTour                          MyQuery                MyMenu




      UML-Based Web Engineering © Nora Koch                                                                      Sevilla, 21.04.2005, 20




                                                                                                                                           10
Navigation Modelling Elements (3)


    modelling element: index
         specifies a class of composite                          «index»

         objects                                               MyIndex

         contains an arbitrary number of                      MyIndexItem *                1        «navigation class»
         index items                                         name: String                        MyNavigationClass
         each index item is an object
         which has a name and owns a
         link to an instance of a
                                                                                    *          «navigation class»
         navigation class
                                                                                           MyNavigationClass
    UML stereotype: «index»                                      MyIndex




      UML-Based Web Engineering © Nora Koch                                                         Sevilla, 21.04.2005, 21




Navigation Structure Model (Second Step)
Case Study: e-Shop


    Enhancement                                                  Homepage
    of the
    navigation
                                                         ?
    structure model                 Book      SearchProducts
    by access                  Recommendation

    structures:                                SelectedResults
                                                                                   Customer            OrderList
        indexes                         1..*      1..*                0..1

        guided tours                                                                                          0..*
        queries                      Book        Product      ShoppingCart                            0..*


                                                                                     Customer
                                                                                      Orders             Order



                                                                             ShoppingCartItems
                                                                                                       OrderItems
                                                                                    0..*                     0..*



                                                                             ShoppingCartItem          OrderItem


      UML-Based Web Engineering © Nora Koch                                                         Sevilla, 21.04.2005, 22




                                                                                                                              11
Navigation Structure Model (Third Step)
Case Study: e-Shop

                                                                 Homepage

     Enhancement of
     the navigation                                              MainMenu

     structure model                                     ?                                 AccountInfo
     by menus                       Book      SearchProducts
                               Recommendation
     Use of a set of
     diagrams                                  SelectedResults
                                        1..*      1..*               0..1                              OrderList
     (different views                                                              Customer

     of the navigation                                                                                      0..*

     space) if the                   Book       Product      ShoppingCart                      0..*

     number of nodes                                                                Customer           Order
                                                                                     Orders
     is large

                                                                            ShoppingCartItems
                                                                                                      OrderItems
                                                                                   0..*                    0..*



                                                                            ShoppingCartItem          OrderItem


      UML-Based Web Engineering © Nora Koch                                                       Sevilla, 21.04.2005, 23




Process Modelling in UWE

   goals
      to model the process of a workflow driven web application
   result
      definition of process classes (for non-navigation use cases)
      construction of a process structure model
      description of the behaviour through a process flow and object flow with a
      UML activity diagram
      integration of the process classes in the navigation structure model




      UML-Based Web Engineering © Nora Koch                                                       Sevilla, 21.04.2005, 24




                                                                                                                            12
Process Modelling Elements


     «process class»
           models a class whose instances are needed by                                            «process class»
                                                                                                     Class Name
           the user during execution of a process
                                                                                                      attributes
                                                                                                     operations
     «process link»
           models the association between a «navigation
                                                                                                   «process link»
           class» and a «process class» indicating entry
           points and exit points of processes within the
           navigation structure




      UML-Based Web Engineering © Nora Koch                                                                 Sevilla, 21.04.2005, 25




Process Structure Model
Case Study: e-Shop


                                                                                 «process class»
                                «process class»                                 PaymentOptions
                                  Checkout                       0..1   - creditCardNumber
                          - state:CheckoutActivityState                 - creditCardExpire
                                                                        - payment :PaymentType
                          + changeState()
                                                                        + checkCreditCard() : Boolean
                  0..1                      0..1
      «process class»             «process class»
     ShoppingCart                 Customer
                         1 1 setPaymentOptions()                             «enumeration»              «enumeration»
  + placeOrder():Order                                                  CheckoutActivityState           PaymentType
                                         0..1                            -welcome
                                 «process class»                         -items                      -moneyOrder
                                      Order                              -shipping                   -creditCard
                                                          0..1           -….
                              + sendInvoice()



         Structural view is partially derived from the content model
         Process state is defined explicitly and implicitly by associations
         Includes user input data

      UML-Based Web Engineering © Nora Koch                                                                 Sevilla, 21.04.2005, 26




                                                                                                                                      13
Process Flow and Object Flow
Case Study: e-Shop

  Refinement of the process model of the                             SignIn
  analysis phase                              [ customer->notEmpty() ]                               [ customer->isEmpty()   ]

      Distinction between                                                                                   «transactional»
                                      «process class»
      subactivity state and                                                                              AddNewCustomer
                                     : Customer
      call state
      Call states used for                                                                                    «process class»
                                                       SetOptions                                           new : Customer
           change operations
                                                                                                               «process class»
           data validation                         setPaymentOptions
                                                                         (Customer)                         : PaymentOptions
      Object flow states
      of process classes
                                                                                          [ newCustomer ]
      used for modelling
                                                          [ returningCustomer ]
      user                         «process class»                      «transactional»                       «transactional»
      input/output                                                      placeOrder                            SetPassword
                                 : ShoppingCart                       (ShoppingCart)

                                                                                                         «transactional»
                                                                         «process class»
                                                                                                         sendInvoice
      Transactions modelled by                                              : Order                         (Order)
      stereotypes («transactional»)

     UML-Based Web Engineering © Nora Koch                                                                   Sevilla, 21.04.2005, 27




Process Modelling (1)
Case Study: e-Shop

  including process classes and process links before enhancing with access
  structures
                                                          «navigation class»
                                                                                             «process class»
                                                             Homepage                             SignIn
                                                                             «process
                                                                               link»
                                                                                             «process link»
                                                   +shoppingCart     0..1             1     +customer
                            «process class»                «navigation class»              «navigation class»
                              Checkout                      ShoppingCart                       Customer
                                             «process
                                               link»
                              «process link»        +shoppingCart
             +products 1..*                             Items      0..*                    +orders
                                                                                                      0..*
                    «navigation class»                  «navigation class»
                       Product                                                             «navigation class»
                                                          ShoppingCartItem
                                                                                                 Order
                                         «process link»
            1..*            +product                                              +orderItems 1..*
       «navigation class»                     «process class»
            Book                                                                           «navigation class»
                                               AddToCart
                                                                                             OrderItem



     UML-Based Web Engineering © Nora Koch                                                                   Sevilla, 21.04.2005, 28




                                                                                                                                       14
Presentation Modelling in UWE

   goal
      representation of the structure and the behaviour of the user interface

   characteristics
      definition of pages as a hierarchical composition of presentation elements
      supported by few methods
      alternative: development of a prototype

   results
      class diagram for the structure of the presentation (in UML container notation)
      dynamic interaction diagram (sequence diagrams) for the behaviour




      UML-Based Web Engineering © Nora Koch                                         Sevilla, 21.04.2005, 29




UWE Modelling Elements for Presentation
Case Study: e-Shop

                                                                    «page»
    «page» is a presentation group that                            Conference
    contains all elements that will be
                                                              «presentation class»
    presented together to the user as                          ConferencePaper
    response to one request
                                                        «text»                   «text»
    «presentation class» groups a set of                PaperID              SubmissionDate
    user interface elements representing
                                                                    «text»
    a logic unit of presentation                                   PaperTitle
    user interface elements
                                                                     «text»
          «anchor»                                                  Abstract
          «text»
          «image»                                        «anchor»                «button»
                                                       fullPaper (Pdf)          ReviewForm
          «button»
                                                                         «anchor»
                                                                          Authors



      UML-Based Web Engineering © Nora Koch                                         Sevilla, 21.04.2005, 30




                                                                                                              15
Aspect Oriented Modelling (AOM) in UWE

 access control modelled by
 aspects
                «aspect»                    advice
             Access Control

  «navigation class»   «process class»
   ShoppingCart          Checkout


                                            pointcut
 navigation adaptivity modelled by
 aspects
     link annotation
     link ordering
     link hiding
     link generation
 weaving the result into the web
 application
    UML-Based Web Engineering © Nora Koch              Sevilla, 21.04.2005, 31




Contents


      Web Engineering Approach
      Modelling with UML and UWE Notation
      Modelling supported by UWE Method
            From Requirements to Analysis Models
            Generation of Navigation Model
            Generation of Presentation Model
            Applying MDA Principles
            Transformation of Models
      Metamodel for UWE
      Tool support with ArgoUWE
      UWE Development Process
      Future Work and Trends in Web Engineering


    UML-Based Web Engineering © Nora Koch              Sevilla, 21.04.2005, 32




                                                                                 16
UWE Method

  guidelines for the construction of the models
     set of steps for each model
     relationship between models


  model construction is
                                                                    Requirements                     <<trace>>
     systematic                                                        Model

     semi-automatic
                                                                                        <<trace>>
     tool-supported                            <<trace>>
                                                                            <<trace>>


                                                                                                                  <<trace>>
                                     Content                        Navigation                  Presentation
                                                        <<trace>>                   <<trace>>
                                                                                                <<trace>>
                                                                <<trace>>
                                                 <<trace>>
                                                                                             <<trace>>


                                            <<trace>>
                                                                     Process                                          Adaptation
                                                                                                <<trace>>




    UML-Based Web Engineering © Nora Koch                                                                   Sevilla, 21.04.2005, 33




Building Requirements Models

  build the use case model
     find the relevant actors for the application
     identify the uses cases that define the functionality of the application
     establish which actor will be involved in which use case
     define includes and extends relationships between use cases
     use inheritance for actors and use cases
     distinguish between navigation use cases and “normal” use cases (stereotype)


  build an activity diagram for each non-navigational and non-trivial use case
     identify activities
     define transitions between activities
     assign objects related to those activities


  automation
     assignment of activity diagram to each non-navigational use case.

    UML-Based Web Engineering © Nora Koch                                                                   Sevilla, 21.04.2005, 34




                                                                                                                                      17
Modelling Requirements of Web Applications
Case Study: Online Library


   UML use case diagram
   UML activity diagrams

                                                               Enter
                                                            article title
                               Find
                              article
                                                             Produce
                         <<navigation>>                      article list
                               Find
        Reader                                       [count=1]        [count=0]
                            publication                                                No results
                          <<navigation>>                             [count>1]

                             Modify                              Select
                           preferences                           article


                              Look at                        Display
                            new articles                     article
       Registered
        Reader            <<navigation>>



    UML-Based Web Engineering © Nora Koch                                         Sevilla, 21.04.2005, 35




Building the Domain/Content Model

     build a class diagram
         find classes for the objects identified in the activity diagrams
         identify attributes and operations for these classes
         determine relationships between classes (associations, aggregations.
         compositions)
         define inheritance hierarchies, if appropriated
         add constraints


     mark conceptual classes that are relevant for navigation structure

     automation
         generation of classes based on objects of the activity diagrams




    UML-Based Web Engineering © Nora Koch                                         Sevilla, 21.04.2005, 36




                                                                                                            18
Content Model
Case Study: Online Library


                                               Library
                                           name: String
                                                                                     rolename
                                           deletePublication
                                                    library


                                                 ..
                                                1 * publications
  multiplicity                                 Publication             1..*
                                                                                     Keyword
                                          title: String        keywords
                                          date: Date                             word: String
                                     ..
                                     1*

                         * authors                             articles       1..*
                         Author                                    Article
                    name: String     *                  ..
                                                       1*
                                                           title: String
                    e-mail: String   authors      articles abstract: String
                                                           complete: URL



     UML-Based Web Engineering © Nora Koch                                                      Sevilla, 21.04.2005, 37




Building the Navigation Model (First Step)

    build a class diagram
     1. create a navigation class for each navigation relevant content class
        (navigation classes map to content classes)
     2. add attributes of omitted classes (if required) to navigation classes
        (attributes of a navigation class maps to a attributes of other content
        class)
     3. map navigation links of navigation model to associations of content
        model
     4. transform aggregations and compositions into navigation links
     5. map attributes of navigation classes to attributes of content classes
     6. transfer multiplicities and role names of associations, aggregations and
        compositions of content model to corresponding modelling elements of
        the navigation model
     7. add navigation links based on the scenarios of the use case model
     8. add shortcuts, i.e. additional navigation links to reduce length of
        navigation path
    automation
         steps 1, 3, 4, 5, 6

     UML-Based Web Engineering © Nora Koch                                                      Sevilla, 21.04.2005, 38




                                                                                                                          19
Navigation Structure Model (First Step)
 Case Study: Online Library

                                                                            UML stereotyped class
                                  Library                                   diagrams

                                                                               select classes relevant
                                                                               for navigation
                                                                                keep associations as
                       publications     1..*                                    navigation links
           authors                                    1..*
                              Publication                       Keyword
                       *                       1..*                             add additional
                             /keyword                                           associations
  1..*
            1..*   authors
                                                                                define derived
                                                                                attributes
            Author
              *                                          1..*    articles       add constraints
                                        articles 1..*             Article

                                        visited 1..*
 inv: /keyword =                        articles
 self.ContentModel::
 publication.keyword
                                                      «navigation link»
         UML-Based Web Engineering © Nora Koch                                         Sevilla, 21.04.2005, 39




Building the Navigation Model (Second Step)

  refine the class diagram
   1. add an index to all navigation links, which have multiplicity > 1 at the
      directed association end (one index item for each navigation object)
   2. (optional) replace index by guided tour
   3. (optional) add a query to select a subset of navigation objects
   4. add an additional navigation link from access primitive to target
      navigation class
   5. move role names from the navigation class to the access primitive
   6. set multiplicities to one
   7. add constraints for invariants and pre-/post-conditions
   8. ….

  automation
          steps 1, 5, 6




         UML-Based Web Engineering © Nora Koch                                         Sevilla, 21.04.2005, 40




                                                                                                                 20
Navigation Structure Model (Second Step)
Case Study: Online Library



                                                                   Library


  query                      ?



                                                                publications
                                                                                    index
                       allAuthors                       publications     1..*
                                                               Publication
                                                        *

                                    authors


                 1..*
                                 1..*     authors
            allAuthors

                                  Author

     UML-Based Web Engineering © Nora Koch                                              Sevilla, 21.04.2005, 41




Navigation Structure Model (Second Step)
Case Study: Online Library

                                                               Library




                                                                         LibraryM   menu
                         ?



                                                             publications
                  allAuthors                        publications       1..*
                                                            Publication
                                                    *

                                 authors


               1..*
                             1..*       authors
          allAuthors

                              Author
     UML-Based Web Engineering © Nora Koch                                              Sevilla, 21.04.2005, 42




                                                                                                                  21
Model Driven Development (MDD)


    OMG Standard MDA (model driven
    architecture)
    object-oriented models
    UML as modelling language
    model transformation to convert a model
    of a system to another model
    OMG terminology:
         CIM: computation independent model
         PIM : platform independent model
         PSM: platform specific model




   UML-Based Web Engineering © Nora Koch                                                      Sevilla, 21.04.2005, 43




Web Software Architecture (WebSA)


  a domain specific language to model the architectural views of a
  web application:
      subsystem model
      configuration model                                                             «WebComponent »
                                                                                            A
      integration model
                                                                                       «WebComponent »
  UML profile with architectural modelling elements                                           B [4]
                                                                                              :B[1{4}]


      web component
      web port
      web connector
                                           «WebComponent»
      server page                                A
                                                            WebPort
                                                                      Provided WebInterface

      etc.                                                            Required WebInterface




   UML-Based Web Engineering © Nora Koch                                                      Sevilla, 21.04.2005, 44




                                                                                                                        22
WebSA: MDA-based Development Process


  types of models                          Web Functional Viewpoint                   Web Architectural Viewpoint
      analysis: functional
                                                   Functional                         Subsystem           Configuration
      and architectural                             Models                              Model                Model
                                                  (OO-H,UWE)
      design
      implementation                            Analysis
                                                                             T1
                                                                     Merge            Models to Model
  transformations for                                                                 Transformation


  mapping & merging                             Platform
                                                                      Integration Model
                                           Independent Design
  models
  transformation                                                T2           T2'             T2'’

                                              Implementation
  language QVT-P
                                                 J2EE models            .NET models                 Other models


   *Melía, University of Alicante (2004)


   UML-Based Web Engineering © Nora Koch                                                                Sevilla, 21.04.2005, 45




Contents


     Web Engineering Approach
     Modelling with UML and UWE Notation
     Modelling supported by UWE Method
     Metamodel for UWE
           Extension of UML Metamodel
           UML Profile
     Tool support with ArgoUWE
     UWE Development Process
     Future Work and Trends in Web Engineering




   UML-Based Web Engineering © Nora Koch                                                                Sevilla, 21.04.2005, 46




                                                                                                                                  23
Need of a Metamodel

  to provide a formal semantic of the modelling elements
  for tool support and code generation
  for model checking
  as instrument to compare and integrate different web methodologies

  to go towards a common metamodel for web methodologies
      unification at high level of abstraction
      for each methodology
           different development processes
           use of subsets of modeling elements (like UML)
           different notations (concrete syntax)
           model transformation from one methodology to another




   UML-Based Web Engineering © Nora Koch                                    Sevilla, 21.04.2005, 47




UWE Metamodel

  definition of concepts and relationships                        «metamodel»        M3
                                                                     MOF
  among concepts
  compatibility with the OMG metamodeling                                «instanceOf»
  architecture
  MOF meta-metamodel                                              «metamodel»
                                                                      UML
     XMI interchange format → tool compatibility
     (theoretically)                                                                 M2
  conservative extension of the UML 1.5                           «metamodel»
  metamodel                                                          UWE

  static semantics given by OCL constraints
  (well-formedness rules)                                               «instanceOf»

  basis for the planned open tool suite
                                                                   Application       M1
  OpenUWE                                                            Model




   UML-Based Web Engineering © Nora Koch                                    Sevilla, 21.04.2005, 48




                                                                                                      24
Package Structure


                                                UWE

        Behavioral               Behavioral                Model             Model
        Elements                 Elements
                                Behavioral               Management
                                                            Model         Management
                                Elements                 Management



                                             Foundation
                                            Foundation




                                             Foundation


                                                                          = UML Metamodel
                                                                          = UWE Metamodel


   UML-Based Web Engineering © Nora Koch                                         Sevilla, 21.04.2005, 49




Package Structure


                                                UWE
        Behavioral             Behavioral Elements            Model         Model
         Elements            Adaptation    Process
                                                           Management     Management




                                            Foundation
                                                Core
                             Conceptual     Navigation     Presentation


                                             Process



                                             Context
                                    User                 Environment




                                           Foundation



   UML-Based Web Engineering © Nora Koch                                         Sevilla, 21.04.2005, 50




                                                                                                           25
UWE Navigation Package



                             Class                                                      Association



                                           +source                 +outLinks
                         NavigationNode    1         {derived}                *            Link
                                           +target                 +inLinks
                     isLandmark: Boolean                                          isAutomatic: Boolean
                                                                                                           1..*
                                           1..*      {derived}                *




      Navigation Class       Menu          ExternalNode       ExternalLink            NavigationalLink    ProcessLink
                                            url: String
          0..1           *           *




      UML-Based Web Engineering © Nora Koch                                                                  Sevilla, 21.04.2005, 51




Metamodelling UWE Method


                                                                  NavigationNode




         ConceptualClass          +derivedFrom                    NavigationClass
 (UWE.Foundation.Core.Conceptual) 1                       *

                                                                                  *   <<implicit>>

       ConceptualAttribute        +derivedFromAttributes         NavigationAttribute                         Attribute
 (UWE.Foundation.Core.Conceptual) *                    *                                                 (Foundation.Core)


   exampleconstraint:
   as OCL of a well-formedness rule:

        “Navigation attributes are derived from from conceptual attributes.
   context    NavigationClass
   inv:       self.feature->select( oclIsKindOf(NavigationAttribute) ).derivedFromAttributes->
                  forAll( f | self.derivedFrom.transitiveClosure->exists(feature=f) )



      UML-Based Web Engineering © Nora Koch                                                                  Sevilla, 21.04.2005, 52




                                                                                                                                       26
UML Profile


  systematic rules for mapping a metamodel to a UML profile:
   classes                →        elements with stereotype
   attributes             →        tagged values
   inheritance            →        inheritance among stereotypes
                                   repeated mapping of attributes and
                                   associations
   associations →                  tagged values or associations (for classifiers)
      NavigationNode
                                                                          «navigation node»
   isLandmark : Boolean                        <<navigation class>>
                                                <<navigation
                                                               class>>
                                                 MyNavigationClass
                                               <<navigation class>>
                                                MyNavigationClass
                                                           {isLandmark,
                                                MyNavigationClass
                                                         {isLandmark}
                                               derivedFrom=MyCClass}
      NavigationClass
                                                                          «navigation class»

    abstract syntax                                  notation

   UML-Based Web Engineering © Nora Koch                                      Sevilla, 21.04.2005, 53




Contents


     Web Engineering Approach
     Modelling with UML and UWE Notation
     Modelling supported by UWE Method
     Metamodel for UWE
     Tool support with ArgoUWE
     UWE Development Process
     Future Work and Trends in Web Engineering




   UML-Based Web Engineering © Nora Koch                                      Sevilla, 21.04.2005, 54




                                                                                                        27
ArgoUWE

   designed for the systematic construction of Web applications
   provides specific notation for Web applications
   allows for separation of concerns: domain, navigation,
   presentation and business processes
   supports the UWE method performing semi-automatic model
   generation
   produces XMI output as basis for code generation
   supports model validation
   extends the NSUML library with the UWE metamodel
   implemented as a plugin for ArgoUML




  UML-Based Web Engineering © Nora Koch                      Sevilla, 21.04.2005, 55




ArgoUWE*

                                                        supports notation of
                                                        UWE and method of
                                                        UWE
                                                        ArgoUWE extension
                                                        of open source
                                                        ArgoUML
                                                        model checker
                                                        based on OCL
                                                        constraints
                                                        generates XMI




                                                     *www.pst.ifi.lmu.de/
                                                      projekte/argouwe

  UML-Based Web Engineering © Nora Koch                      Sevilla, 21.04.2005, 56




                                                                                       28
Modeling with ArgoUWE: Use Cases
e-shop




                                                                Search            AddTo
                                                             ProductItems      ShoppingCart



                                            Select
                                         ProductItems                              SignIn



                                                  ViewCart
                                                                                      Checkout




     UML-Based Web Engineering © Nora Koch                                                  Sevilla, 21.04.2005, 57




Modeling with ArgoUWE: Conceptual Model


                                                                            manual marking of
                                                                            conceptual classes as
                                                                            navigation relevant
                                                                            automatic generation of
                                                                            navigation classes
                                                                            different navigation
                                                                            views for same domain
                                                                            model




     UML-Based Web Engineering © Nora Koch                                                  Sevilla, 21.04.2005, 58




                                                                                                                      29
Semi-automatic Navigation Model Generation

  manual adding of navigation
  classes and navigation links              automatic generation of
                                            indexes




                                             automatic generation of
 manual integration of                       menus
 process features


    UML-Based Web Engineering © Nora Koch                              Sevilla, 21.04.2005, 59




Consistency Check & Design Critics

  ArgoUML cognitive design critics
     background thread
     warning mechanism for model inconsistencies
     wizard for design improvement
     uses critics pane for the critiques
     displays wizards comments in detail pane


  ArgoUWE design critics features
     inherits from ArgoUML (e.g. name collision)
     is extended by all wellformedness constraints of UWE (e.g.
     relationship between use case and process model)




    UML-Based Web Engineering © Nora Koch                              Sevilla, 21.04.2005, 60




                                                                                                 30
Consistency Check & Design Critics




   UML-Based Web Engineering © Nora Koch                                             Sevilla, 21.04.2005, 61




ArgoUWE: Plugin Architecture


                                    ArgoUML
  Novosoft UML
  library (NSUML)
                                       UWE Diagram
  graph editing                                               ArgoUWE plugin
                                       Graph Model
  framework (GEF)
                                           FigNode           Property
  open-source                                                               Critic
                                           FigEdge            Panel
  ArgoUML
  Java Plugin
                                                     Model Facade & Factories
  XML/XMI generator
                                                        UML / UWE model




   UML-Based Web Engineering © Nora Koch                                             Sevilla, 21.04.2005, 62




                                                                                                               31
Future Steps in the Development of ArgoUWE


  improvement of the tool usability
  code generation
  enhancement with modeling elements to build platform specific
  web models
  definition of transformations rules from PIMs to PSMs (based on
  the MDA principles)
  ArgoUWE extension for mobile and personalized web applications
  migration to another tool supporting UML 2.0 notation?




   UML-Based Web Engineering © Nora Koch                    Sevilla, 21.04.2005, 63




Contents


     Web Engineering Approach
     Modelling with UML and UWE Notation
     Modelling supported by UWE Method
     Metamodel for UWE
     Tool support with ArgoUWE
     UWE Development Process
     Future Work and Trends in Web Engineering




   UML-Based Web Engineering © Nora Koch                    Sevilla, 21.04.2005, 64




                                                                                      32
Process Tailoring




      process            to domain         to company   to area   to project




         „Tailoring“ of general processes
              to specific development,
  such as for the development of web applications




   UML-Based Web Engineering © Nora Koch                          Sevilla, 21.04.2005, 65




Requirements for a Web Process

 short release cycles
    development in 3 to 6 months on average
    heterogeneous development team
    strong competitive market
 separation of concerns
 change management
    continuous update of the content
    changes in the hypertext structure
    frequent improvement of the user interface
    adaptation to new technologies and standards




   UML-Based Web Engineering © Nora Koch                          Sevilla, 21.04.2005, 66




                                                                                            33
UWE Development Process

  based on Unified Process (UP)
  was defined in 1999
  requires update with incorporation
  of elements of agile process (best
  practice)
  development is supported by a set
  of workflows
  based on concepts of role, activity,
  artifact, tool, etc.
  similar: Conallen's approach
       WAE: Web Application Extension
       RUP-based



    UML-Based Web Engineering © Nora Koch                                          Sevilla, 21.04.2005, 67




Visual Representation of the Process

  Iteration Workflow


         Project             Risk           Iteration                    Iteration
       Management         Management         Planing                    Evaluation



                        Requirements
                          Capture
      Development                           Analysis
        Process                             & Design
                                                         Implemen-
                                                           tation

         Quality                            Validation
       Management
                                                         Verification
                                                                         Testing




    UML-Based Web Engineering © Nora Koch                                          Sevilla, 21.04.2005, 68




                                                                                                             34
UWE: Risk Management

                                       Project Manager


                                               Identify
                                                Risks



                                       Evaluate              Analyse
                                        Risks              Risk Impact




                         Risk List            Prioritise
                                                Risks


                                            Define Actions
                                           for Risk Strategy



                                                                   ActionList
                                                                for risk strategy


   UML-Based Web Engineering © Nora Koch                                            Sevilla, 21.04.2005, 69




How is the UWE process defined?

 by workflows (visual representation)
 by guidelines/checklists for the activities
    e.g. elicit user navigation needs
         What information do users want to see at first glance?
         What kind of searches will they perform?
         How can the length of navigation paths be optimised?
         …
 by skill lists for experts (workers) needed for each activity
    e.g. multimedia designer
         knowledge of tools for creation and manipulation of images, videos, audios, …
         experience in design, integration and synchronisation of multimedia elements
         creativity skills
         …
 by description of artifacts
    e.g. templates for risk list, iteration plan, use case description,…


   UML-Based Web Engineering © Nora Koch                                            Sevilla, 21.04.2005, 70




                                                                                                              35
Contents


     Web Engineering Approach
     Modelling with UML and UWE Notation
     Modelling supported by UWE Method
     Metamodel for UWE
     Tool support with ArgoUWE
     UWE Development Process
     Future Work and Trends in Web Engineering




   UML-Based Web Engineering © Nora Koch                              Sevilla, 21.04.2005, 71




Future Work: UML-based Web Engineering

   Topics
        complete migration to UML 2.0
        emphasis on requirements engineering
        tool supported MDA process
        extension of tool support: e.g. plug in for eclipse
        focus on generation and testing
        analysis of the power of aspect-oriented modelling for UWE
   Resources
        funding of the DFG German Research Office for 2005 -2007
        two PhD Thesis
        students final work (e.g. extensions to ArgoUWE, eclipse plug-in)




   UML-Based Web Engineering © Nora Koch                              Sevilla, 21.04.2005, 72




                                                                                                36
Trends in Web Engineering

 focus on requirements engineering
 model driven vs. agile development
 emphasis on tool support
 domain specific language (DSL) based on UML




                                       from overhelming diversity of methodologies
                                     towards a „Unified Web Modeling Language“ ?




    UML-Based Web Engineering © Nora Koch                                              Sevilla, 21.04.2005, 73




Vision for Web Application Development
                Data-           Hypertext-                               Process-     Implementation-
                                                     OO-oriented
               oriented          oriented                                oriented        oriented
  1993                             HDM

  1994                                                     EORM

  1995        RMM

  1996               HDM-Lite                            OOHDM

  1997                           WSDM        OO-Method                                Web Composition

  1998                                                           SOHDM   RNA   HFPM

  1999                                                                                      WAE

  2000      WebML       W2000                              UWE             eW3DT

  2001
                    Hera
  2002

  2003                                        OOWS         OOH              NDT

  2004                                                                     WebSA
    UML-Based Web Engineering © Nora Koch              ?                               Sevilla, 21.04.2005, 74




                                                                                                                 37
References

 UWE: http://www.pst.ifi.lmu.de/projekte/uwe
 ArgoUWE: http//www.pst.ifi.lmu.de/projekte/argouwe
 www.pst.informatik.uni-muenchen.de/~kochn/

 OMG UML Specification v. 1.5 - OMG document formal [03-03-01]
 OMG UML 2.0 Superstructure RfP - OMG [ad/09-09-02]

 Hypermedia & the Web – An Engineering Approach, David Lowe & Wendy Hall John Wiley
 & Sohn (1999)

 Designing Data-Intensive Web Applications. Stefano Ceri, Piero Fraternali, Aldo Bongio,
 Marco Brambilla, Sara Comai, Maristella Matera. Morgan-Kaufmann (2003)

 Building Web Applications with UML. Jim Conallen. Addison-Wesley (2003)

 Web Engineering: Systematic Development of Web Applications. Gerti Kappel, Birgid Pröll,
 Siegfried Reich, Werner Retschitzeger (Eds.) dpunkt-verlag (German Version, 2003), English
 version to appear October 2005



    UML-Based Web Engineering © Nora Koch                                     Sevilla, 21.04.2005, 75




             Muchas gracias! ☺


                                            Nora Koch
                                            nora.koch (at) pst.ifi.lmu.de
                                            www.pst.informatik.uni-muenchen.de/~kochn

                                            uwe (at) pst.ifi.lmu.de


    UML-Based Web Engineering © Nora Koch                                     Sevilla, 21.04.2005, 76




                                                                                                        38

Mais conteúdo relacionado

Mais procurados

Web technologies: Model Driven Engineering
Web technologies: Model Driven EngineeringWeb technologies: Model Driven Engineering
Web technologies: Model Driven Engineering
Piero Fraternali
 
Chapter 22- Software Configuration Management.ppt
Chapter 22- Software Configuration Management.pptChapter 22- Software Configuration Management.ppt
Chapter 22- Software Configuration Management.ppt
TanzinAhammad
 

Mais procurados (20)

Requirements analysis and modeling
Requirements analysis and modelingRequirements analysis and modeling
Requirements analysis and modeling
 
Software Engineering - chp5- software architecture
Software Engineering - chp5- software architectureSoftware Engineering - chp5- software architecture
Software Engineering - chp5- software architecture
 
Software requirement and specification
Software requirement and specificationSoftware requirement and specification
Software requirement and specification
 
Software Architecture and Design - An Overview
Software Architecture and Design - An OverviewSoftware Architecture and Design - An Overview
Software Architecture and Design - An Overview
 
Web technologies: Model Driven Engineering
Web technologies: Model Driven EngineeringWeb technologies: Model Driven Engineering
Web technologies: Model Driven Engineering
 
Software Architecture Styles
Software Architecture StylesSoftware Architecture Styles
Software Architecture Styles
 
Non Functional Requirement.
Non Functional Requirement.Non Functional Requirement.
Non Functional Requirement.
 
domain model.ppt
domain model.pptdomain model.ppt
domain model.ppt
 
Adobe flex an overview
Adobe flex  an overviewAdobe flex  an overview
Adobe flex an overview
 
Chapter 01 software engineering pressman
Chapter 01  software engineering pressmanChapter 01  software engineering pressman
Chapter 01 software engineering pressman
 
Requirements prioritization
Requirements prioritizationRequirements prioritization
Requirements prioritization
 
Software architectural patterns - A Quick Understanding Guide
Software architectural patterns - A Quick Understanding GuideSoftware architectural patterns - A Quick Understanding Guide
Software architectural patterns - A Quick Understanding Guide
 
Software re engineering
Software re engineeringSoftware re engineering
Software re engineering
 
Software Architecture
Software ArchitectureSoftware Architecture
Software Architecture
 
Ch 2 what is software quality
Ch 2 what is software qualityCh 2 what is software quality
Ch 2 what is software quality
 
Designing Microservices
Designing MicroservicesDesigning Microservices
Designing Microservices
 
UML
UMLUML
UML
 
Agile Methodology ppt
Agile Methodology pptAgile Methodology ppt
Agile Methodology ppt
 
Chapter 22- Software Configuration Management.ppt
Chapter 22- Software Configuration Management.pptChapter 22- Software Configuration Management.ppt
Chapter 22- Software Configuration Management.ppt
 
CHAPTER 6 REQUIREMENTS MODELING: SCENARIO based Model , Class based moddel
CHAPTER 6 REQUIREMENTS MODELING: SCENARIO based Model , Class based moddelCHAPTER 6 REQUIREMENTS MODELING: SCENARIO based Model , Class based moddel
CHAPTER 6 REQUIREMENTS MODELING: SCENARIO based Model , Class based moddel
 

Semelhante a UML-Based Web Engineering

UML-based Web Engineering (UWE)
UML-based Web Engineering (UWE)UML-based Web Engineering (UWE)
UML-based Web Engineering (UWE)
elliando dias
 
Towards a Common Metamodel for the Development of Web Applications
Towards a Common Metamodel for the Development of Web ApplicationsTowards a Common Metamodel for the Development of Web Applications
Towards a Common Metamodel for the Development of Web Applications
elliando dias
 
Model2Roo - ACME
Model2Roo - ACMEModel2Roo - ACME
Model2Roo - ACME
jccastrejon
 
Batch 21(14,64,66)
Batch 21(14,64,66)Batch 21(14,64,66)
Batch 21(14,64,66)
swethadln
 
Nihal_Shetty_Resume
Nihal_Shetty_ResumeNihal_Shetty_Resume
Nihal_Shetty_Resume
Nihal Shetty
 
M3 Modernization Case Study
M3 Modernization Case StudyM3 Modernization Case Study
M3 Modernization Case Study
ADC Austin Tech
 
10 - Architetture Software - More architectural styles
10 - Architetture Software - More architectural styles10 - Architetture Software - More architectural styles
10 - Architetture Software - More architectural styles
Majong DevJfu
 
[DSBW Spring 2009] Unit 01: Introducing Web Engineering
[DSBW Spring 2009] Unit 01: Introducing Web Engineering[DSBW Spring 2009] Unit 01: Introducing Web Engineering
[DSBW Spring 2009] Unit 01: Introducing Web Engineering
Carles Farré
 

Semelhante a UML-Based Web Engineering (20)

UML-based Web Engineering (UWE)
UML-based Web Engineering (UWE)UML-based Web Engineering (UWE)
UML-based Web Engineering (UWE)
 
Towards a Common Metamodel for the Development of Web Applications
Towards a Common Metamodel for the Development of Web ApplicationsTowards a Common Metamodel for the Development of Web Applications
Towards a Common Metamodel for the Development of Web Applications
 
Model2Roo - ACME
Model2Roo - ACMEModel2Roo - ACME
Model2Roo - ACME
 
Model-Driven Development of Web Applications
Model-Driven Development of Web ApplicationsModel-Driven Development of Web Applications
Model-Driven Development of Web Applications
 
Unit 01 - Introduction
Unit 01 - IntroductionUnit 01 - Introduction
Unit 01 - Introduction
 
Romulus project presentation
Romulus project presentationRomulus project presentation
Romulus project presentation
 
Batch 21(14,64,66)
Batch 21(14,64,66)Batch 21(14,64,66)
Batch 21(14,64,66)
 
Nihal_Shetty_Resume
Nihal_Shetty_ResumeNihal_Shetty_Resume
Nihal_Shetty_Resume
 
Christopher Noyes Resume
Christopher Noyes ResumeChristopher Noyes Resume
Christopher Noyes Resume
 
AngularJS - A Powerful Framework For Web Applications
AngularJS - A Powerful Framework For Web ApplicationsAngularJS - A Powerful Framework For Web Applications
AngularJS - A Powerful Framework For Web Applications
 
Metamodels evaluation of web engineering methodologies to develop web applica...
Metamodels evaluation of web engineering methodologies to develop web applica...Metamodels evaluation of web engineering methodologies to develop web applica...
Metamodels evaluation of web engineering methodologies to develop web applica...
 
Mvc3 part1
Mvc3   part1Mvc3   part1
Mvc3 part1
 
www.webre24h.com - An ajax tool for online modeling
www.webre24h.com - An ajax tool for online modelingwww.webre24h.com - An ajax tool for online modeling
www.webre24h.com - An ajax tool for online modeling
 
M3 Modernization Case Study
M3 Modernization Case StudyM3 Modernization Case Study
M3 Modernization Case Study
 
cvBarisGomleksizoglu-eng
cvBarisGomleksizoglu-engcvBarisGomleksizoglu-eng
cvBarisGomleksizoglu-eng
 
WebML and WebRatio 5 - TOOLS conference, Zurich 2008
WebML and WebRatio 5 - TOOLS conference, Zurich 2008WebML and WebRatio 5 - TOOLS conference, Zurich 2008
WebML and WebRatio 5 - TOOLS conference, Zurich 2008
 
10 - Architetture Software - More architectural styles
10 - Architetture Software - More architectural styles10 - Architetture Software - More architectural styles
10 - Architetture Software - More architectural styles
 
Rapid Prototyping for Service-Oriented Architectures
Rapid Prototyping for Service-Oriented ArchitecturesRapid Prototyping for Service-Oriented Architectures
Rapid Prototyping for Service-Oriented Architectures
 
MDD and modeling tools research
MDD and modeling tools researchMDD and modeling tools research
MDD and modeling tools research
 
[DSBW Spring 2009] Unit 01: Introducing Web Engineering
[DSBW Spring 2009] Unit 01: Introducing Web Engineering[DSBW Spring 2009] Unit 01: Introducing Web Engineering
[DSBW Spring 2009] Unit 01: Introducing Web Engineering
 

Mais de elliando dias

Why you should be excited about ClojureScript
Why you should be excited about ClojureScriptWhy you should be excited about ClojureScript
Why you should be excited about ClojureScript
elliando dias
 
Nomenclatura e peças de container
Nomenclatura  e peças de containerNomenclatura  e peças de container
Nomenclatura e peças de container
elliando dias
 
Polyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better AgilityPolyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better Agility
elliando dias
 
Javascript Libraries
Javascript LibrariesJavascript Libraries
Javascript Libraries
elliando dias
 
How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!
elliando dias
 
A Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the WebA Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the Web
elliando dias
 
Introdução ao Arduino
Introdução ao ArduinoIntrodução ao Arduino
Introdução ao Arduino
elliando dias
 
Incanter Data Sorcery
Incanter Data SorceryIncanter Data Sorcery
Incanter Data Sorcery
elliando dias
 
Fab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine DesignFab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine Design
elliando dias
 
Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.
elliando dias
 
Hadoop and Hive Development at Facebook
Hadoop and Hive Development at FacebookHadoop and Hive Development at Facebook
Hadoop and Hive Development at Facebook
elliando dias
 
Multi-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case StudyMulti-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case Study
elliando dias
 

Mais de elliando dias (20)

Clojurescript slides
Clojurescript slidesClojurescript slides
Clojurescript slides
 
Why you should be excited about ClojureScript
Why you should be excited about ClojureScriptWhy you should be excited about ClojureScript
Why you should be excited about ClojureScript
 
Functional Programming with Immutable Data Structures
Functional Programming with Immutable Data StructuresFunctional Programming with Immutable Data Structures
Functional Programming with Immutable Data Structures
 
Nomenclatura e peças de container
Nomenclatura  e peças de containerNomenclatura  e peças de container
Nomenclatura e peças de container
 
Geometria Projetiva
Geometria ProjetivaGeometria Projetiva
Geometria Projetiva
 
Polyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better AgilityPolyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better Agility
 
Javascript Libraries
Javascript LibrariesJavascript Libraries
Javascript Libraries
 
How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!
 
Ragel talk
Ragel talkRagel talk
Ragel talk
 
A Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the WebA Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the Web
 
Introdução ao Arduino
Introdução ao ArduinoIntrodução ao Arduino
Introdução ao Arduino
 
Minicurso arduino
Minicurso arduinoMinicurso arduino
Minicurso arduino
 
Incanter Data Sorcery
Incanter Data SorceryIncanter Data Sorcery
Incanter Data Sorcery
 
Rango
RangoRango
Rango
 
Fab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine DesignFab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine Design
 
The Digital Revolution: Machines that makes
The Digital Revolution: Machines that makesThe Digital Revolution: Machines that makes
The Digital Revolution: Machines that makes
 
Hadoop + Clojure
Hadoop + ClojureHadoop + Clojure
Hadoop + Clojure
 
Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.
 
Hadoop and Hive Development at Facebook
Hadoop and Hive Development at FacebookHadoop and Hive Development at Facebook
Hadoop and Hive Development at Facebook
 
Multi-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case StudyMulti-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case Study
 

Último

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Último (20)

Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 

UML-Based Web Engineering

  • 1. UML-Based Web Engineering Nora Koch joint work with Gefei Zhang, Martin Wirsing, Andreas Kraus, Alexander Knapp, Rolf Hennicker and Hubert Baumeister Web Engineering Group Ludwig-Maximilians-Universität München (LMU) Sevilla, 21.4.2005 Web Projects main problems business goals are not fulfilled delays in relation to project plan project exceeds budget system delivered does not have required functionality deliverables are of poor quality current situation (similar to software development around 1960) individual, quick & dirty implementations reuse based on copy & paste missing documentation incremental complexity of web applications and web services UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 2 1
  • 2. Methodologies for Web Development Data- Hypertext- Process- Implementation- OO-oriented oriented oriented oriented oriented 1993 HDM 1994 EORM 1995 RMM 1996 HDM-Lite OOHDM 1997 WSDM OO-Method Web Composition 1998 SOHDM RNA HFPM 1999 WAE 2000 WebML W2000 UWE eW3DT 2001 Hera 2002 2003 OOWS OOH NDT M. J. Escalona,2004 2004 WebSA UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 3 Methodologies for Web Development EORM Enhanced Object Relationship Model eW3DT Extended World Wide Web Design Technique HDM Hypertext Design Model Hera HFPM Hypertext Flexible Process Modeling NDT Navigational Development Technique OO-H Object-Oriented Hypermedia Method OO-Method Object-Oriented Method OOHDM Object-Oriented Hypermedia Design Method OOWS Object-Oriented Web Solution RMM Relationship Management Methodology RNA Relationship-Navigation Analysis SOHDM Scenario-based Hypermedia Design Method UWE UML-based Web Engineering W2000 WAE Web Application Extension Web Composition WebML Web Modeling Language WebSA Web Software Architecture WSDM Web Site Design Method UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 4 2
  • 3. Contents UWE: A Web Engineering Approach Modelling with UML and UWE (Notation) Modelling supported by UWE Method Metamodel for UWE Tool support with ArgoUWE UWE Development Process Future Work and Trends in Web Engineering UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 5 What is UWE? UWE is a an engineering approach for the development of web applications main characteristic is the use of UML for all models focuses on systematisation and automatic generation UWE comprises a notation for the graphical representation of the model elements a method (technique) supporting semi-automatic generation a metamodel for UWE modelling elements a process supporting the development life-cycle of web applications a case-tool ArgoUWE supporting the design of web applications (UWE is also a German male name) UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 6 3
  • 4. Web-based Systems / Web Applications characteristics based on the hypermedia paradigm nodes & links text & multimedia omnipresent due to the nature of the web global and permanent availability comfortable and unified access distributed information / services producible by “everybody“ dynamic development incremental number of web pages continuous improvement of existing web applications (content, links, layout) offer of new services UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 7 Categories of Web Applications complexity semantic web personalized portal-oriented * collaborative workflow-based transactional Source: Web Engineering, Kappel et al. d-punkt Verlag (October 2003) interactive informative time UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 8 4
  • 5. Why UML? UML is a graphical language for specifying, constructing and documenting software artifacts UML is a de facto industry and a OMG standard UML includes notation diagram types metamodel Object Constraints Language (OCL) for invariants, pre- and post-condition well-formedness rules UML is neither a method nor a process How expressive is UML for the development of web applications? UML does not include specific web modelling elements UML defines extension mechanisms UML profiles UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 9 UML Profiles UML extension is a UML profile if it only uses the extension mechanisms provided by the UML stereotypes eases tagged values tool support OCL constraints UML profile = light weight extension «index» article.date NewArticles > user.lastVisit {adaptation=annotated} heavy weight extension uses other diagram types not defined in the UML uses different notation UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 10 5
  • 6. Contents Web Engineering Approach Modelling with UML and UWE Notation Requirement of Web Applications Content, Hypertext Structure and Presentation Workflow-based Web Applications Adaptivity with Aspects Web Architecture Modelling supported by UWE Method Metamodel for UWE Tool support with ArgoUWE UWE Development Process Future Work and Trends in Web Engineering UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 11 Dimensions of Web Modelling levels presentation hypertext adaptivity content phases structure requirements analysis design implementation analysis behaviour aspects modelling process information-driven (quot;content firstquot;) presentation-driven (quot;layout firstquot;) functionality-driven (quot;test firstquot;) agile process Source: Kappel et al. Web Engineering, d-punkt (2003) UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 12 6
  • 7. Modelling Requirements of Web Applications Case Study: e-Shop UML use case diagrams are used to describe web application functionality UWE extension distinction between Select <<extend>> AddTo ProductItems ShoppingCart “normal”/standard <<navigation>> use cases and navigation use Search ViewCart cases ProductItems UWE Stereotype <<navigation>> NonRegisteredUser <<navigation>> W2000 makes the LogIn distinction at diagram level: two <<extend>> Customer use case diagrams PrintInvoice Checkout <<include>> UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 13 Refining the Requirements Specification Case Study: e-Shop – checkout process use cases complemented with textual specification LogIn activity diagrams [ error ] [ newCustomer ] UML activity diagrams for [ error ] visual representation of [ returningCustomer ] AddNewCustomer workflows to model the SetOptions [ change ] business logic of newCustomer : the application Customer newOrder : Order PlaceOrder UML call states exit/ delete Items ShoppingCart and sub-activities sub-activities can PrintInvoice further be refined UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 14 7
  • 8. Content Modelling in UWE goal to model problem domain to separate content from hypertext / navigation structure and presentation UML class diagrams for the structure UML sequence diagrams or UML state charts for the behaviour sequence diagrams are used to visualize messages between objects showing how they collaborate (messages between user and web application) state diagrams capture states of objects and show actions that lead to state transitions UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 15 Content Modelling: Structure Case Study: e-Shop UML class diagrams at analysis-level and design-level classes to represent ShoppingCart Customer add() name units of textual checkout() 1..* 0..1 creditCard information Book 1 * multimedia Product ShoppingCart elements DVD name Item price 1 * quantity associations, * * aggregations to CD OrderItem Address +deliveryAddress street show quantity zip-code 1 0..1 country relationships * between classes Order +invoiceAddress 1 orderID inheritance to invoiceNumber 1 show hierarchies sendInvoice() between classes UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 16 8
  • 9. Navigation Modelling in UWE goals to represent nodes and links of the hypertext structure to design of navigation paths to avoid disorientation and cognitive overload result: navigation structure model UML class diagram specific modelling elements other methodologies own notation for hypertext elements different diagrammatic representation of hypertext models UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 17 Navigation Modelling Elements (1) basic navigation elements navigation class specifies the hypertext nodes is visited by a user through browsing (a navigation class will be given the same name of the domain class which it maps) navigation link specifies that the target navigation object is accessed by navigation from the source navigation object stereotypes for basic navigation elements «navigation class» «navigation link» «navigation class» Class Name «navigation link» attributes operations UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 18 9
  • 10. Navigation Structure Model (First Step) Case Study: e-Shop «navigation link» «navigation class» Homepage «navigation link» «navigation link» «navigation link» +shoppingCart 0..1 1 +customer «navigation class» «navigation class» ShoppingCart Customer «navigation link» «navigation link» 1..* +products +shoppingCartItems 0..* +orders 0..* «navigation class» «navigation class» Product ShoppingCartItem «navigation class» Order +product +books 1..* +orderItems 1..* «navigation link» «navigation class» Book «navigation link» «navigation class» OrderItem «navigation link» UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 19 UWE Access Primitives additional navigation elements for the selection of one navigation target from a set of navigation elements «index» «guidedTour» «query» «menu» ? MyIndex MyGuidedTour MyQuery MyMenu UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 20 10
  • 11. Navigation Modelling Elements (3) modelling element: index specifies a class of composite «index» objects MyIndex contains an arbitrary number of MyIndexItem * 1 «navigation class» index items name: String MyNavigationClass each index item is an object which has a name and owns a link to an instance of a * «navigation class» navigation class MyNavigationClass UML stereotype: «index» MyIndex UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 21 Navigation Structure Model (Second Step) Case Study: e-Shop Enhancement Homepage of the navigation ? structure model Book SearchProducts by access Recommendation structures: SelectedResults Customer OrderList indexes 1..* 1..* 0..1 guided tours 0..* queries Book Product ShoppingCart 0..* Customer Orders Order ShoppingCartItems OrderItems 0..* 0..* ShoppingCartItem OrderItem UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 22 11
  • 12. Navigation Structure Model (Third Step) Case Study: e-Shop Homepage Enhancement of the navigation MainMenu structure model ? AccountInfo by menus Book SearchProducts Recommendation Use of a set of diagrams SelectedResults 1..* 1..* 0..1 OrderList (different views Customer of the navigation 0..* space) if the Book Product ShoppingCart 0..* number of nodes Customer Order Orders is large ShoppingCartItems OrderItems 0..* 0..* ShoppingCartItem OrderItem UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 23 Process Modelling in UWE goals to model the process of a workflow driven web application result definition of process classes (for non-navigation use cases) construction of a process structure model description of the behaviour through a process flow and object flow with a UML activity diagram integration of the process classes in the navigation structure model UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 24 12
  • 13. Process Modelling Elements «process class» models a class whose instances are needed by «process class» Class Name the user during execution of a process attributes operations «process link» models the association between a «navigation «process link» class» and a «process class» indicating entry points and exit points of processes within the navigation structure UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 25 Process Structure Model Case Study: e-Shop «process class» «process class» PaymentOptions Checkout 0..1 - creditCardNumber - state:CheckoutActivityState - creditCardExpire - payment :PaymentType + changeState() + checkCreditCard() : Boolean 0..1 0..1 «process class» «process class» ShoppingCart Customer 1 1 setPaymentOptions() «enumeration» «enumeration» + placeOrder():Order CheckoutActivityState PaymentType 0..1 -welcome «process class» -items -moneyOrder Order -shipping -creditCard 0..1 -…. + sendInvoice() Structural view is partially derived from the content model Process state is defined explicitly and implicitly by associations Includes user input data UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 26 13
  • 14. Process Flow and Object Flow Case Study: e-Shop Refinement of the process model of the SignIn analysis phase [ customer->notEmpty() ] [ customer->isEmpty() ] Distinction between «transactional» «process class» subactivity state and AddNewCustomer : Customer call state Call states used for «process class» SetOptions new : Customer change operations «process class» data validation setPaymentOptions (Customer) : PaymentOptions Object flow states of process classes [ newCustomer ] used for modelling [ returningCustomer ] user «process class» «transactional» «transactional» input/output placeOrder SetPassword : ShoppingCart (ShoppingCart) «transactional» «process class» sendInvoice Transactions modelled by : Order (Order) stereotypes («transactional») UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 27 Process Modelling (1) Case Study: e-Shop including process classes and process links before enhancing with access structures «navigation class» «process class» Homepage SignIn «process link» «process link» +shoppingCart 0..1 1 +customer «process class» «navigation class» «navigation class» Checkout ShoppingCart Customer «process link» «process link» +shoppingCart +products 1..* Items 0..* +orders 0..* «navigation class» «navigation class» Product «navigation class» ShoppingCartItem Order «process link» 1..* +product +orderItems 1..* «navigation class» «process class» Book «navigation class» AddToCart OrderItem UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 28 14
  • 15. Presentation Modelling in UWE goal representation of the structure and the behaviour of the user interface characteristics definition of pages as a hierarchical composition of presentation elements supported by few methods alternative: development of a prototype results class diagram for the structure of the presentation (in UML container notation) dynamic interaction diagram (sequence diagrams) for the behaviour UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 29 UWE Modelling Elements for Presentation Case Study: e-Shop «page» «page» is a presentation group that Conference contains all elements that will be «presentation class» presented together to the user as ConferencePaper response to one request «text» «text» «presentation class» groups a set of PaperID SubmissionDate user interface elements representing «text» a logic unit of presentation PaperTitle user interface elements «text» «anchor» Abstract «text» «image» «anchor» «button» fullPaper (Pdf) ReviewForm «button» «anchor» Authors UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 30 15
  • 16. Aspect Oriented Modelling (AOM) in UWE access control modelled by aspects «aspect» advice Access Control «navigation class» «process class» ShoppingCart Checkout pointcut navigation adaptivity modelled by aspects link annotation link ordering link hiding link generation weaving the result into the web application UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 31 Contents Web Engineering Approach Modelling with UML and UWE Notation Modelling supported by UWE Method From Requirements to Analysis Models Generation of Navigation Model Generation of Presentation Model Applying MDA Principles Transformation of Models Metamodel for UWE Tool support with ArgoUWE UWE Development Process Future Work and Trends in Web Engineering UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 32 16
  • 17. UWE Method guidelines for the construction of the models set of steps for each model relationship between models model construction is Requirements <<trace>> systematic Model semi-automatic <<trace>> tool-supported <<trace>> <<trace>> <<trace>> Content Navigation Presentation <<trace>> <<trace>> <<trace>> <<trace>> <<trace>> <<trace>> <<trace>> Process Adaptation <<trace>> UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 33 Building Requirements Models build the use case model find the relevant actors for the application identify the uses cases that define the functionality of the application establish which actor will be involved in which use case define includes and extends relationships between use cases use inheritance for actors and use cases distinguish between navigation use cases and “normal” use cases (stereotype) build an activity diagram for each non-navigational and non-trivial use case identify activities define transitions between activities assign objects related to those activities automation assignment of activity diagram to each non-navigational use case. UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 34 17
  • 18. Modelling Requirements of Web Applications Case Study: Online Library UML use case diagram UML activity diagrams Enter article title Find article Produce <<navigation>> article list Find Reader [count=1] [count=0] publication No results <<navigation>> [count>1] Modify Select preferences article Look at Display new articles article Registered Reader <<navigation>> UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 35 Building the Domain/Content Model build a class diagram find classes for the objects identified in the activity diagrams identify attributes and operations for these classes determine relationships between classes (associations, aggregations. compositions) define inheritance hierarchies, if appropriated add constraints mark conceptual classes that are relevant for navigation structure automation generation of classes based on objects of the activity diagrams UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 36 18
  • 19. Content Model Case Study: Online Library Library name: String rolename deletePublication library .. 1 * publications multiplicity Publication 1..* Keyword title: String keywords date: Date word: String .. 1* * authors articles 1..* Author Article name: String * .. 1* title: String e-mail: String authors articles abstract: String complete: URL UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 37 Building the Navigation Model (First Step) build a class diagram 1. create a navigation class for each navigation relevant content class (navigation classes map to content classes) 2. add attributes of omitted classes (if required) to navigation classes (attributes of a navigation class maps to a attributes of other content class) 3. map navigation links of navigation model to associations of content model 4. transform aggregations and compositions into navigation links 5. map attributes of navigation classes to attributes of content classes 6. transfer multiplicities and role names of associations, aggregations and compositions of content model to corresponding modelling elements of the navigation model 7. add navigation links based on the scenarios of the use case model 8. add shortcuts, i.e. additional navigation links to reduce length of navigation path automation steps 1, 3, 4, 5, 6 UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 38 19
  • 20. Navigation Structure Model (First Step) Case Study: Online Library UML stereotyped class Library diagrams select classes relevant for navigation keep associations as publications 1..* navigation links authors 1..* Publication Keyword * 1..* add additional /keyword associations 1..* 1..* authors define derived attributes Author * 1..* articles add constraints articles 1..* Article visited 1..* inv: /keyword = articles self.ContentModel:: publication.keyword «navigation link» UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 39 Building the Navigation Model (Second Step) refine the class diagram 1. add an index to all navigation links, which have multiplicity > 1 at the directed association end (one index item for each navigation object) 2. (optional) replace index by guided tour 3. (optional) add a query to select a subset of navigation objects 4. add an additional navigation link from access primitive to target navigation class 5. move role names from the navigation class to the access primitive 6. set multiplicities to one 7. add constraints for invariants and pre-/post-conditions 8. …. automation steps 1, 5, 6 UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 40 20
  • 21. Navigation Structure Model (Second Step) Case Study: Online Library Library query ? publications index allAuthors publications 1..* Publication * authors 1..* 1..* authors allAuthors Author UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 41 Navigation Structure Model (Second Step) Case Study: Online Library Library LibraryM menu ? publications allAuthors publications 1..* Publication * authors 1..* 1..* authors allAuthors Author UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 42 21
  • 22. Model Driven Development (MDD) OMG Standard MDA (model driven architecture) object-oriented models UML as modelling language model transformation to convert a model of a system to another model OMG terminology: CIM: computation independent model PIM : platform independent model PSM: platform specific model UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 43 Web Software Architecture (WebSA) a domain specific language to model the architectural views of a web application: subsystem model configuration model «WebComponent » A integration model «WebComponent » UML profile with architectural modelling elements B [4] :B[1{4}] web component web port web connector «WebComponent» server page A WebPort Provided WebInterface etc. Required WebInterface UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 44 22
  • 23. WebSA: MDA-based Development Process types of models Web Functional Viewpoint Web Architectural Viewpoint analysis: functional Functional Subsystem Configuration and architectural Models Model Model (OO-H,UWE) design implementation Analysis T1 Merge Models to Model transformations for Transformation mapping & merging Platform Integration Model Independent Design models transformation T2 T2' T2'’ Implementation language QVT-P J2EE models .NET models Other models *Melía, University of Alicante (2004) UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 45 Contents Web Engineering Approach Modelling with UML and UWE Notation Modelling supported by UWE Method Metamodel for UWE Extension of UML Metamodel UML Profile Tool support with ArgoUWE UWE Development Process Future Work and Trends in Web Engineering UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 46 23
  • 24. Need of a Metamodel to provide a formal semantic of the modelling elements for tool support and code generation for model checking as instrument to compare and integrate different web methodologies to go towards a common metamodel for web methodologies unification at high level of abstraction for each methodology different development processes use of subsets of modeling elements (like UML) different notations (concrete syntax) model transformation from one methodology to another UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 47 UWE Metamodel definition of concepts and relationships «metamodel» M3 MOF among concepts compatibility with the OMG metamodeling «instanceOf» architecture MOF meta-metamodel «metamodel» UML XMI interchange format → tool compatibility (theoretically) M2 conservative extension of the UML 1.5 «metamodel» metamodel UWE static semantics given by OCL constraints (well-formedness rules) «instanceOf» basis for the planned open tool suite Application M1 OpenUWE Model UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 48 24
  • 25. Package Structure UWE Behavioral Behavioral Model Model Elements Elements Behavioral Management Model Management Elements Management Foundation Foundation Foundation = UML Metamodel = UWE Metamodel UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 49 Package Structure UWE Behavioral Behavioral Elements Model Model Elements Adaptation Process Management Management Foundation Core Conceptual Navigation Presentation Process Context User Environment Foundation UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 50 25
  • 26. UWE Navigation Package Class Association +source +outLinks NavigationNode 1 {derived} * Link +target +inLinks isLandmark: Boolean isAutomatic: Boolean 1..* 1..* {derived} * Navigation Class Menu ExternalNode ExternalLink NavigationalLink ProcessLink url: String 0..1 * * UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 51 Metamodelling UWE Method NavigationNode ConceptualClass +derivedFrom NavigationClass (UWE.Foundation.Core.Conceptual) 1 * * <<implicit>> ConceptualAttribute +derivedFromAttributes NavigationAttribute Attribute (UWE.Foundation.Core.Conceptual) * * (Foundation.Core) exampleconstraint: as OCL of a well-formedness rule: “Navigation attributes are derived from from conceptual attributes. context NavigationClass inv: self.feature->select( oclIsKindOf(NavigationAttribute) ).derivedFromAttributes-> forAll( f | self.derivedFrom.transitiveClosure->exists(feature=f) ) UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 52 26
  • 27. UML Profile systematic rules for mapping a metamodel to a UML profile: classes → elements with stereotype attributes → tagged values inheritance → inheritance among stereotypes repeated mapping of attributes and associations associations → tagged values or associations (for classifiers) NavigationNode «navigation node» isLandmark : Boolean <<navigation class>> <<navigation class>> MyNavigationClass <<navigation class>> MyNavigationClass {isLandmark, MyNavigationClass {isLandmark} derivedFrom=MyCClass} NavigationClass «navigation class» abstract syntax notation UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 53 Contents Web Engineering Approach Modelling with UML and UWE Notation Modelling supported by UWE Method Metamodel for UWE Tool support with ArgoUWE UWE Development Process Future Work and Trends in Web Engineering UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 54 27
  • 28. ArgoUWE designed for the systematic construction of Web applications provides specific notation for Web applications allows for separation of concerns: domain, navigation, presentation and business processes supports the UWE method performing semi-automatic model generation produces XMI output as basis for code generation supports model validation extends the NSUML library with the UWE metamodel implemented as a plugin for ArgoUML UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 55 ArgoUWE* supports notation of UWE and method of UWE ArgoUWE extension of open source ArgoUML model checker based on OCL constraints generates XMI *www.pst.ifi.lmu.de/ projekte/argouwe UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 56 28
  • 29. Modeling with ArgoUWE: Use Cases e-shop Search AddTo ProductItems ShoppingCart Select ProductItems SignIn ViewCart Checkout UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 57 Modeling with ArgoUWE: Conceptual Model manual marking of conceptual classes as navigation relevant automatic generation of navigation classes different navigation views for same domain model UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 58 29
  • 30. Semi-automatic Navigation Model Generation manual adding of navigation classes and navigation links automatic generation of indexes automatic generation of manual integration of menus process features UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 59 Consistency Check & Design Critics ArgoUML cognitive design critics background thread warning mechanism for model inconsistencies wizard for design improvement uses critics pane for the critiques displays wizards comments in detail pane ArgoUWE design critics features inherits from ArgoUML (e.g. name collision) is extended by all wellformedness constraints of UWE (e.g. relationship between use case and process model) UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 60 30
  • 31. Consistency Check & Design Critics UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 61 ArgoUWE: Plugin Architecture ArgoUML Novosoft UML library (NSUML) UWE Diagram graph editing ArgoUWE plugin Graph Model framework (GEF) FigNode Property open-source Critic FigEdge Panel ArgoUML Java Plugin Model Facade & Factories XML/XMI generator UML / UWE model UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 62 31
  • 32. Future Steps in the Development of ArgoUWE improvement of the tool usability code generation enhancement with modeling elements to build platform specific web models definition of transformations rules from PIMs to PSMs (based on the MDA principles) ArgoUWE extension for mobile and personalized web applications migration to another tool supporting UML 2.0 notation? UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 63 Contents Web Engineering Approach Modelling with UML and UWE Notation Modelling supported by UWE Method Metamodel for UWE Tool support with ArgoUWE UWE Development Process Future Work and Trends in Web Engineering UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 64 32
  • 33. Process Tailoring process to domain to company to area to project „Tailoring“ of general processes to specific development, such as for the development of web applications UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 65 Requirements for a Web Process short release cycles development in 3 to 6 months on average heterogeneous development team strong competitive market separation of concerns change management continuous update of the content changes in the hypertext structure frequent improvement of the user interface adaptation to new technologies and standards UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 66 33
  • 34. UWE Development Process based on Unified Process (UP) was defined in 1999 requires update with incorporation of elements of agile process (best practice) development is supported by a set of workflows based on concepts of role, activity, artifact, tool, etc. similar: Conallen's approach WAE: Web Application Extension RUP-based UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 67 Visual Representation of the Process Iteration Workflow Project Risk Iteration Iteration Management Management Planing Evaluation Requirements Capture Development Analysis Process & Design Implemen- tation Quality Validation Management Verification Testing UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 68 34
  • 35. UWE: Risk Management Project Manager Identify Risks Evaluate Analyse Risks Risk Impact Risk List Prioritise Risks Define Actions for Risk Strategy ActionList for risk strategy UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 69 How is the UWE process defined? by workflows (visual representation) by guidelines/checklists for the activities e.g. elicit user navigation needs What information do users want to see at first glance? What kind of searches will they perform? How can the length of navigation paths be optimised? … by skill lists for experts (workers) needed for each activity e.g. multimedia designer knowledge of tools for creation and manipulation of images, videos, audios, … experience in design, integration and synchronisation of multimedia elements creativity skills … by description of artifacts e.g. templates for risk list, iteration plan, use case description,… UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 70 35
  • 36. Contents Web Engineering Approach Modelling with UML and UWE Notation Modelling supported by UWE Method Metamodel for UWE Tool support with ArgoUWE UWE Development Process Future Work and Trends in Web Engineering UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 71 Future Work: UML-based Web Engineering Topics complete migration to UML 2.0 emphasis on requirements engineering tool supported MDA process extension of tool support: e.g. plug in for eclipse focus on generation and testing analysis of the power of aspect-oriented modelling for UWE Resources funding of the DFG German Research Office for 2005 -2007 two PhD Thesis students final work (e.g. extensions to ArgoUWE, eclipse plug-in) UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 72 36
  • 37. Trends in Web Engineering focus on requirements engineering model driven vs. agile development emphasis on tool support domain specific language (DSL) based on UML from overhelming diversity of methodologies towards a „Unified Web Modeling Language“ ? UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 73 Vision for Web Application Development Data- Hypertext- Process- Implementation- OO-oriented oriented oriented oriented oriented 1993 HDM 1994 EORM 1995 RMM 1996 HDM-Lite OOHDM 1997 WSDM OO-Method Web Composition 1998 SOHDM RNA HFPM 1999 WAE 2000 WebML W2000 UWE eW3DT 2001 Hera 2002 2003 OOWS OOH NDT 2004 WebSA UML-Based Web Engineering © Nora Koch ? Sevilla, 21.04.2005, 74 37
  • 38. References UWE: http://www.pst.ifi.lmu.de/projekte/uwe ArgoUWE: http//www.pst.ifi.lmu.de/projekte/argouwe www.pst.informatik.uni-muenchen.de/~kochn/ OMG UML Specification v. 1.5 - OMG document formal [03-03-01] OMG UML 2.0 Superstructure RfP - OMG [ad/09-09-02] Hypermedia & the Web – An Engineering Approach, David Lowe & Wendy Hall John Wiley & Sohn (1999) Designing Data-Intensive Web Applications. Stefano Ceri, Piero Fraternali, Aldo Bongio, Marco Brambilla, Sara Comai, Maristella Matera. Morgan-Kaufmann (2003) Building Web Applications with UML. Jim Conallen. Addison-Wesley (2003) Web Engineering: Systematic Development of Web Applications. Gerti Kappel, Birgid Pröll, Siegfried Reich, Werner Retschitzeger (Eds.) dpunkt-verlag (German Version, 2003), English version to appear October 2005 UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 75 Muchas gracias! ☺ Nora Koch nora.koch (at) pst.ifi.lmu.de www.pst.informatik.uni-muenchen.de/~kochn uwe (at) pst.ifi.lmu.de UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 76 38