Modelling Safe Interface Interactions in Web Applications Marco Brambilla 1 ,   Jordi Cabot 2  and Michael Grossniklaus 1 ...
Index <ul><li>Introduction </li></ul><ul><li>Goal </li></ul><ul><li>Modeling Safe Interfaces </li></ul><ul><li>Tracking us...
Introduction <ul><li>Web  has evolved from navigation of simple hypertext documents to a a platform for complex business a...
Introduction
Examples: GMail and Amazon bug
…  but many more <ul><li>Linkedin, iGoogle, survey monkey, gap, hostel world, lastminute,…. </li></ul><ul><li>Solutions ar...
Index <ul><li>Introduction </li></ul><ul><li>Goal </li></ul><ul><li>Modeling Safe Interfaces </li></ul><ul><li>Tracking us...
Goal Proposing a method for modeling and running web applications with a safe interface interaction behaviour <ul><li>User...
Index <ul><li>Introduction </li></ul><ul><li>Goal </li></ul><ul><li>Modeling Safe Interfaces </li></ul><ul><li>Tracking us...
Modeling safe interfaces <ul><li>MOF-compliant metamodel based on the state machines sublanguage of the UML </li></ul><ul>...
Graph Transformation by Example: Metamodel
Modeling safe interfaces – Example (1) <ul><li>Show the internal workflow of the  Mail  page  </li></ul><ul><li>It is now ...
Modeling safe interfaces – Example (2) <ul><li>The transaction (dashed box) clarifies that an undo in the Delete message s...
Index <ul><li>Introduction </li></ul><ul><li>Goal </li></ul><ul><li>Modeling Safe Interfaces </li></ul><ul><li>Tracking us...
Run-time support <ul><li>We need to insure that the web application behaves as expected </li></ul><ul><li>This requires to...
Metamodel for the run-time support
Some API functions <ul><li>State::getNextState(Event e): State     informs about the next state to go based on the curren...
 
Index <ul><li>Introduction </li></ul><ul><li>Goal </li></ul><ul><li>Modeling Safe Interfaces </li></ul><ul><li>Tracking us...
Methodology <ul><li>Two ways of using the method  </li></ul><ul><li>Standalone approach : </li></ul><ul><li>More oriented ...
Methodology: Integration with existing methods
Index <ul><li>Introduction </li></ul><ul><li>Goal </li></ul><ul><li>Modeling Safe Interfaces </li></ul><ul><li>Tracking us...
Implementation <ul><li>Screenshot? </li></ul>
Index <ul><li>Introduction </li></ul><ul><li>Goal </li></ul><ul><li>Modeling Safe Interfaces </li></ul><ul><li>Tracking us...
Related work <ul><li>Several other approaches have proposed using state machines to specify the interface of web applicati...
Index <ul><li>Introduction </li></ul><ul><li>Goal </li></ul><ul><li>Modeling Safe Interfaces </li></ul><ul><li>Tracking us...
Conclusions and further work <ul><li>We have presented a new method for the modeling and implementation of safe interface ...
Upcoming SlideShare
Loading in …5
×

Modelling Safe Interface Interactions in Web Applications

1,205 views

Published on

Presentation of the paper "Modelling Safe Interface Interactions in Web Applications" by Marco Brambilla, Jordi Cabot, Michael Grossniklaus at ER- Conceptual Modeling 2009. Presentation given by Jordi Cabot in Gramado, Brasil, 2009.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,205
On SlideShare
0
From Embeds
0
Number of Embeds
149
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • To present you a method that helps the designer during the specification of the software system by automatically generating a set of operations for a given class diagram.
  • Simple is more or less as public
  • Simple is more or less as public
  • Simple is more or less as public
  • Simple is more or less as public
  • In particular we will represent rules as pre/postcondition contracts E.g. once expressed in OCL we can apply code-generation techniques to the rules
  • Simple is more or less as public
  • Simple is more or less as public
  • Transactions not exaclty in the database sense
  • Simple is more or less as public
  • Basically, we create a class to store the information of each element
  • Strong executability : r is strongly executable if, for any legal instantiation that satisfies the pre-condition, there is another legal instantiation that satisfies the post-condition.  I :  I’ : (INV[I] and PREr[I])  (INV[I’] and POSTr[I, I’])
  • Simple is more or less as public
  • Simple is more or less as public
  • Simple is more or less as public
  • Simple is more or less as public
  • Indeed, once GT rules are expressed in OCL, we can benefit from all tools designed for managing OCL expressions when dealing with the GT rules. VAlidation: here an initial host graph is passed as an additional parameter to the verification tool)
  • Modelling Safe Interface Interactions in Web Applications

    1. 1. Modelling Safe Interface Interactions in Web Applications Marco Brambilla 1 , Jordi Cabot 2 and Michael Grossniklaus 1 Politecnico di Milano 1 Open University of Catalonia 2
    2. 2. Index <ul><li>Introduction </li></ul><ul><li>Goal </li></ul><ul><li>Modeling Safe Interfaces </li></ul><ul><li>Tracking user-interaction </li></ul><ul><li>Methodology </li></ul><ul><li>Implementation </li></ul><ul><li>Related work </li></ul><ul><li>Conclusions </li></ul>
    3. 3. Introduction <ul><li>Web has evolved from navigation of simple hypertext documents to a a platform for complex business applications </li></ul><ul><li>Now, complex events and business logic + RIAs and AJAX </li></ul><ul><li>Original interaction paradigm (static content pages + hyperlinks) is not valid anymore </li></ul><ul><li>Browsers themselves are inadequate for the current web complexity  Back and forward button </li></ul><ul><li>The same application behaves differently depending on the browser and settings defined </li></ul>
    4. 4. Introduction
    5. 5. Examples: GMail and Amazon bug
    6. 6. … but many more <ul><li>Linkedin, iGoogle, survey monkey, gap, hostel world, lastminute,…. </li></ul><ul><li>Solutions are site-specific (e.g. GMail moving from using a single URL for the application to a different URL for each message; blocking of browser buttons) </li></ul><ul><li>But still, sites are unable to </li></ul><ul><ul><li>Preserve the complete navigation history </li></ul></ul><ul><ul><li>Offer rollback/compensation of side effects when backward navigation </li></ul></ul><ul><ul><li>Fine-grained back and forward management </li></ul></ul>
    7. 7. Index <ul><li>Introduction </li></ul><ul><li>Goal </li></ul><ul><li>Modeling Safe Interfaces </li></ul><ul><li>Tracking user-interaction </li></ul><ul><li>Methodology </li></ul><ul><li>Implementation </li></ul><ul><li>Related work </li></ul><ul><li>Conclusions </li></ul>
    8. 8. Goal Proposing a method for modeling and running web applications with a safe interface interaction behaviour <ul><li>Users can freely navigate through Web applications </li></ul><ul><li>Tool developers do not need to implement this safe behaviour from scratch </li></ul><ul><li>Our method is complementary to existing web modeling approaches </li></ul><ul><li>Moving from a browsing paradigm based on Pages with related Back and Forward buttons to a full-fledged interactive paradigm based on States </li></ul><ul><li>Offering design-time and run-time support to create web applications under this new paradigm </li></ul>Benefits
    9. 9. Index <ul><li>Introduction </li></ul><ul><li>Goal </li></ul><ul><li>Modeling Safe Interfaces </li></ul><ul><li>Tracking user-interaction </li></ul><ul><li>Methodology </li></ul><ul><li>Implementation </li></ul><ul><li>Related work </li></ul><ul><li>Conclusions </li></ul>
    10. 10. Modeling safe interfaces <ul><li>MOF-compliant metamodel based on the state machines sublanguage of the UML </li></ul><ul><li>Adapted to the web application domain by means of adding web concepts like Page and GraphicalElement </li></ul><ul><li>Concrete syntax for the language not yet formally defined </li></ul>
    11. 11. Graph Transformation by Example: Metamodel
    12. 12. Modeling safe interfaces – Example (1) <ul><li>Show the internal workflow of the Mail page </li></ul><ul><li>It is now clear when to go back to the previous page and when to stay </li></ul>
    13. 13. Modeling safe interfaces – Example (2) <ul><li>The transaction (dashed box) clarifies that an undo in the Delete message state should undo the delete and move the user back to the show inbox page </li></ul>
    14. 14. Index <ul><li>Introduction </li></ul><ul><li>Goal </li></ul><ul><li>Modeling Safe Interfaces </li></ul><ul><li>Tracking user-interaction </li></ul><ul><li>Methodology </li></ul><ul><li>Implementation </li></ul><ul><li>Related work </li></ul><ul><li>Conclusions </li></ul>
    15. 15. Run-time support <ul><li>We need to insure that the web application behaves as expected </li></ul><ul><li>This requires to keep the execution trace of all events, visited states, accessed pages and executed actions executed so far </li></ul><ul><li>Mandatory to be able to retrieve previous states of the application when moving back and forth (or undoing Txs) </li></ul><ul><li>We provide: </li></ul><ul><ul><li>The data structures to store this information </li></ul></ul><ul><ul><li>An API to manipulate and query these data structures </li></ul></ul><ul><li>The API facilitates the development of web applications </li></ul>
    16. 16. Metamodel for the run-time support
    17. 17. Some API functions <ul><li>State::getNextState(Event e): State  informs about the next state to go based on the current one and the given event </li></ul><ul><li>Visit::getNext(): Visit  queries next visit </li></ul><ul><li>Visit::getPrevious(): Visit  queries previous visit </li></ul><ul><li>ApplicationExecution::do (EventExec e, Parameter[] p): Visit  moves to next visit </li></ul><ul><li>ApplicationExecution::redo():Visit  moves to the (previously visited) next visit </li></ul><ul><li>ApplicationExecution::undo():Visit  moves to previous visit reversing all executed actions </li></ul><ul><li>Visit::clone():Visit  creates a clone of the visit </li></ul><ul><li>ActionExecution::do (ActionExecutionParam[] params)  executes the action </li></ul><ul><li>ActionExecution::undo (ActionExecutionParam[] params)  undoes the effect of the action </li></ul><ul><li>TransitionExecution::undo()  undoes all actions associated to the transition </li></ul><ul><li>TransactionExecution::rollback()  rollbacks the transaction </li></ul>Let’s see now how with our API we can force a correct behaviour of the “Back” browser action
    18. 19. Index <ul><li>Introduction </li></ul><ul><li>Goal </li></ul><ul><li>Modeling Safe Interfaces </li></ul><ul><li>Tracking user-interaction </li></ul><ul><li>Methodology </li></ul><ul><li>Implementation </li></ul><ul><li>Related work </li></ul><ul><li>Conclusions </li></ul>
    19. 20. Methodology <ul><li>Two ways of using the method </li></ul><ul><li>Standalone approach : </li></ul><ul><li>More oriented to traditional developers that may use the API for getting immediate benefits during the development </li></ul><ul><li>The most they are willing to do is to adopt a simple notation to describe the basic structure of the application </li></ul><ul><li>Integration with existing Web Development Methods: </li></ul><ul><li>Decide whether to create a new view or blend with existing views (e.g. navigation model) </li></ul><ul><li>Add new primitives and resolve semantic conflicts </li></ul>
    20. 21. Methodology: Integration with existing methods
    21. 22. Index <ul><li>Introduction </li></ul><ul><li>Goal </li></ul><ul><li>Modeling Safe Interfaces </li></ul><ul><li>Tracking user-interaction </li></ul><ul><li>Methodology </li></ul><ul><li>Implementation </li></ul><ul><li>Related work </li></ul><ul><li>Conclusions </li></ul>
    22. 23. Implementation <ul><li>Screenshot? </li></ul>
    23. 24. Index <ul><li>Introduction </li></ul><ul><li>Goal </li></ul><ul><li>Modeling Safe Interfaces </li></ul><ul><li>Tracking user-interaction </li></ul><ul><li>Methodology </li></ul><ul><li>Implementation </li></ul><ul><li>Related work </li></ul><ul><li>Conclusions </li></ul>
    24. 25. Related work <ul><li>Several other approaches have proposed using state machines to specify the interface of web applications. </li></ul><ul><li>Recent extensions to existing Web Eng. Methods have covered RIAs </li></ul><ul><li>Specific solutions to the problem of using the back button in a browser have been proposed as well </li></ul><ul><li>We propose </li></ul><ul><li>A generic method </li></ul><ul><li>For the fine-grained definition of web interfaces </li></ul><ul><li>With predefined support for their implementation </li></ul><ul><li>With undo/redo support and taking into account the interaction with the browser </li></ul>
    25. 26. Index <ul><li>Introduction </li></ul><ul><li>Goal </li></ul><ul><li>Modeling Safe Interfaces </li></ul><ul><li>Tracking user-interaction </li></ul><ul><li>Methodology </li></ul><ul><li>Implementation </li></ul><ul><li>Related work </li></ul><ul><li>Conclusions </li></ul>
    26. 27. Conclusions and further work <ul><li>We have presented a new method for the modeling and implementation of safe interface interactions in web applications </li></ul><ul><li>Based on state semantics and with transactional and full-fledged undo/redo capabilities to improve the browsing user experience </li></ul><ul><li>As future work we would like to test the methodological guidelines by </li></ul><ul><ul><li>extending the code generator of WebML to support our new features and validate the scalability and completeness of our primitives </li></ul></ul><ul><ul><li>Developing a simple code generator for the standalone approach that transforms the models to skeletons of JEE code that invoke our API </li></ul></ul>

    ×