CS 290 C Formal Models for Web Software

CS 290 C: Formal Models for Web Software Lecture 2: Navigation Modeling with Statecharts Instructor: Tevfik Bultan

Statecharts • A visual formalism for specifying hierarchical state machines – “A Visual Formalism for Complex Systems, ” David Harel, Science of Computer Programming, 1987 • Especially useful for modeling reactive systems – systems which continuously react to internal or external events without terminating • State machines in UML are based on Statecharts • Statecharts is a formal language, it has formal semantics

Statecharts characteristics: • Hierarchical grouping of states – superstates are formed by grouping other states • Superstates can be formed using AND composition or OR composition – When the system is in an AND-state it is in all of its substates – When the system is in an OR-state it is in only one of its substates – If a state has no substates it is an atomic state • Synchronization and communication between different parts of the system is achieved using events

Statecharts A x • Initial B y C t D A basic state machine (default) state is A • If event x occurs while in state A, the next state will be B • If event y occurs while in state A, the next state will be C Given the event sequence: y, x, t y t Behavior of the state machine is: A C D The x event is ignored since it does not enable any transition when the system is in state C Note that we are interested in the behavior of the machine — the paths it takes (including the states it visits. This is different then using the state machines as language recognizers (as in automata theory or compilers)

Statecharts: OR-states • D is an OR-state, its substates are A and C D • When the system is in state D it is either in A or C (but not both) x A t y C B z A hierarchical state machine • The default state of D is A. When the system transitions to state D it will go to state A unless it is explicitly specified otherwise • While the system is in state A or C (meaning it is in state D) if event t occurs it transitions to B • While the system is in state B if event x occurs the system transitions to state D, since the default state in D is A, it transitions to A

Statecharts: OR-states • D x A t y C B z Given the event sequence: x, y, t, z Behavior of the hierarchical state machine: x y t z B D(A) D(C) B D(C) A hierarchical state machine A y x t B t C z Equivalent basic state machine Behavior of the equivalent basic state machine: x y t z B A C B C

Statecharts: Transitions • Statechart transitions have a source state and a target state and are labeled as trigger-event [guard-condition] / generated-events source state trigger-event[guard-condition]/action target state

Statecharts: Transitions • The transition is enabled if – the trigger-event occurs, and – the guard-condition is true while the system is in the source state of the transition • A transition can be taken if it is enabled • The events can be generated – by the state machine itself (internal events), or – can be generated by the environment (external events)

Statecharts: Transitions • When a transition is taken – it generates the generated-events (a set of events) • which may enable other transitions – and, it transitions to its destination state • Guard condition is a boolean expression that combines predicates in the form In(state) – In(state) evaluates to true when the system is in the specified state

Statecharts: Transitions • Two transitions are conflicting if they cannot be taken at the same time • If two conflicting transitions are enabled at the same time, one of them is taken non-deterministically • Two outgoing transitions from state A are A t C conflicting (they cannot be taken at the same time). t B • When event t occurs if the system is in state A both transitions are enabled. • Since they are conflicting one of them is taken nondeterministically

Statecharts: AND-states (concurrency) • R is and AND-state R A D B x y[in G] C • When the system is in the AND-state R, it is both in state A and state D t E z v G F x A hierarchical state machine • A and D are OR-states • When the system is in state A it is either in state B or in state C (but not in both) • When the system is in state D it is in Only one of E or F or G

Statecharts: AND-states (concurrency) R A • Note that event x causes D B x y[in G] C t E z v a synchronization between states A and D when A is in B and D is in F. G F • They make a concurrent transition: A goes from B to C D goes from F to G x A hierarchical state machine t Equivalent x basic state machine z B-F B-E B-G v x v C-E t y C-G x C-F z x

Statecharts: State hierarchy We can think of the state hierarchy as a tree R A B x R(AND) D y[in G] C t E z v G F A(OR) D(OR) x B A hierarchical state machine C E F G • R is the root state • B, C, E, F, G are the leaf (atomic) states • Other than the atomic (leaf) states each state is marked as an OR or an AND state

Statecharts: State hierarchy R A D B x t E z v y[in G] G C A hierarchical state machine F x Given the event sequence: x, z, y, t, v The behavior of the statechart is: x z R(A(B))-R(D(F)) R(A(C))-R(D(G)) R(A(C))-R(D(F)) t v R(A(C))-R(D(E)) R(A(C))-R(D(G)) It is hard to read the above representation. We can show the behavior using only the atomic states (assuming they have unique names): x z t v B-F C-G C-F C-E C-G

Statecharts: Internal vs. External events • Internal events have higher priority – when an internal event is generated, first the transitions enabled by the internal event is taken before the next external event is considered Given the input event sequence: x, y The behavior of the statechart is: A x/t y C t y B y x t A C B C

Statecharts: History Entrances R z A D B x y[in G] C H K t E z v G F x w Given the input event sequence: x, w, z The behavior of the statechart is: x w z B-F C-G K B-G • Entering the history state (marked with H in a circle) in state D means that enter the most recently visited substate of D • What if substates of D have their own substates? – H* (deep history state) means enter all the most recently visited descendants

State. Charts: Conditional Entrances R e[P] A K e[Q] B e[R] C e R [P] A C [Q] B C K [R] • The statechart on the top can be equivalently represented using the statechart at the bottom • The conditional entrance combines multiple transitions that are triggered by the same event but have different guards • The outgoing edge of the conditional is taken based on which of the guards hold

State. Charts: Selection Entrances R e 1 A K e 2 B e 3 C R e 1 A S e 2 B C K e 3 • The statechart on the top can be equivalently represented using the statechart at the bottom • The selection entrance combines multiple entrances that have different events • The outgoing edge of the selection is taken based on the event that is observed

Statecharts: Parameterized States • If there are set of substates that share common characteristics, they can be combined as a parameterized state • There is a substate for each value of the parameter R i in [1. . 10] S-i

Statecharts: An Example Alarm Shut Op t_on start Mode Vol On t_off inc Shut dec 2 The behavior of the statechart is: start 1 t_on Off stop Given the input event sequence: start, t_on, inc, dec, stop inc t_on Off-1 On-1 dec stop On-2 On-1 Shut 20

Modeling Navigation with Statecharts • Many errors in web applications are due to incorrect handling of navigation • In this lecture we will argue that it is possible to model basic navigation structure of a web application using hierarchical state machines (i. e. , statecharts) • In a web application implementation, the navigation structure is buried in the code and is not easy to extract or understand – A formal model of the navigation structure can help in design, development, testing and verification of the navigation structure

Modeling web navigation with statecharts • I will discuss this topic based on the following paper: – “Modeling Web Navigation by Statechart” Karl R. P. H. Leung, Lucas C. K. Hui, S. M. Yiu, Ricky W. M. Tang. 24 th International Computer Software and Applications Confenrence (COMPSAC 2000)

Navigation Modeling • A navigation model should show the web pages are linked to each other: – Web page (or page): An html document returned by a web server in response to a URL request through HTTP – Hyperlink (or link): A directional link between a source and target webpage that is used for navigation. • Can be activated explicitly by the users, using a mouse click or can be invoked automatically by the browser on some predefined events (timeout, mouse movements, etc. ) • The question is can we generate a graph (or equivalently a state machine) from web pages and hyperlinks – There are some complications

Complications • Web pages can be both static and dynamic: – Static web page: A web page that retains the same HTML for all the client requests of the same URL. It contains no reactive or executable components – Dynamic web page: A web page that returns different HTML for the URL (server side dynamic behavior) and can contain reactive or executable components (client side dynamic behavior) • Browser navigation capabilities – In addition to hyperlinks provided in web pages, browsers provide extra navigation capabilities based on back, forward buttons, history list, or the address bar (aka location bar or URL bar)

Complications • Intra vs. inter-page navigation – Inter-page navigation: This is the most common type of navigation where by activating a link in the source page we jump to the target page – Intra-page navigation: There may be links to different sections of the same page

Complications • Frame-based navigation – Frames in browser window makes concurrent viewing of web pages possible – The browser window is divided into frames, each containing a separate page for viewing – Navigation within frames can happen independently – Web pages in different frames can affect each other by using client side scripts • Navigation with multiple windows – Multiple browser windows can be used to support concurrent viewing of web pages in another way – Multiple window viewing differs from frames since windows can be created or destroyed independently

Complications • Dynamic content – Server side • A server can return different results for the requests to the same URL by creating the returned pages dynamically using server side scripts • For example a search engine will return different results for different search strings entered – Client Side • Client side programs (written in Java. Script, Flash etc. ) can dynamically define, enable or disable links without contacting the web server

Modeling navigation with statecharts • Modeling scope – Identify the pages that you want to have in the navigation model – Add all the pages that are the target of a link in the above pages also to the set (these will be used to model exit) • Events are modeled as tuples (target, position) – Target is the webpage denoting the target of a link – Position is the position in the target webpage

Modeling navigation with statecharts • If it is not possible to jump in different sections of a webpage (i. e. no intra-page navigation), then that webpage is modeled as a basic (atomic) state • If intra-page navigation is possible than we use an OR-state where each sub-state corresponds to a possible browsing position as identified by the “position” – A select connective is used to denote that one of the sub -states is selected for each incoming transition

Inter-page navigation • Links among pages are represented as transition arrows where the hyperlink activation is the event that triggers the transition • If multiple hyperlinks from one source page point to the same target page they are considered equivalent and represented with one arrow • The links can be available from all sub-states of a superstate (in which case the source of the arrow is the superstate) or from some sub-states of a super-state (in which case multiple arrows are used each originating in a different sub-state)

Grouping states • States which have a common set of links can be grouped as OR-states • This typically happens with tree-like menu structures which can be represented using OR-states • Again select connective can be used to combine transitions to sub-states of an OR-state

Modeling Frames • Frames can be modeled using AND-states where each frame corresponds to a sub-state • This allows independent navigation for each frame • If there are dependencies among frames (i. e. , clicking on a link in one frame triggers a change also in another frame), this type of behavior can be modeled by synchronization on evetns – All the events are broadcast to all parts of the statechart, so multiple transitions can be triggered by the same event • If the broadcast behavior is not wanted, then you can add the receivers identifier to the event to make sure that only the receiver reacts – Guard conditions can be used for synchronization

Modeling dynamic content • Server-side: Dynamic pages generated by server side scripts can be modeled as parameterized-OR states – Where the sub-state that is transitioned is identify by the input parameter where the events are modeled as tuples: (target, parameter) • Client-side: Client side dynamic behavior can be modeled using AND-states where the states modeling the client side dynamic behavior is one of the sub-states and the rest of the navigation model is another sub-state – Using the guard conditions, the client side dynamic behavior can enable or disable transitions

What can we do after generating navigation models? • After we obtain a formal model of the navigation behavior we can analyze it. • For example we can use verification tools to check its properties. – I will discuss a verification tool next week • However this brings up another problem, how are we going to characterize properties of navigation models? – I will discuss this also next week