CS 290C: 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

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 B

C D

A basic state machine

• Initial (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

x

y

t

Given the event sequence: y, x, tBehavior 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)

y t

Statecharts: OR-states

DA

C

• D is an OR-state, its substates are A and C • When the system is in state D it is either in Aor C (but not both)

• 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

A hierarchical state machine

B

x

yt

z

Statecharts: OR-states

DA

C

•

A hierarchical state machine

B

x

yt

z

A

C

B

x

yt

z

t

Equivalent basic state machine

Given the event sequence: x, y, t, zBehavior of the hierarchical state machine: B D(A) D(C) B D(C)

Behavior of the equivalent basic state machine: B A C B C

x zty

x y t z

Statecharts: Transitions

• Statechart transitions have a source state and a target state and are labeled as

trigger-event [guard-condition] / generated-events

trigger-event[guard-condition]/actionsource state 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

A

C B

tt

• Two outgoing transitions from state A are conflicting (they cannot be taken at the same time).

• When event t occurs if the system is in stateA both transitions are enabled.

• Since they are conflicting one of them is taken nondeterministically

Statecharts: AND-states (concurrency)

B

C

x y[in G]

A D

G

E

F

x

t

zv

R • R is and AND-state

• When the system is in the AND-stateR, it is both in state A and state D

• 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

A hierarchical state machine

Statecharts: AND-states (concurrency)

B

C

x y[in G]

A D

G

E

F

x

t

zv

R

A hierarchical state machine

B-E

C-E

B-F

x

z

t

B-G

C-G

C-F

y x

z

v

v

x

x

Equivalent basic state machine

t

• Note that event x causesa synchronization betweenstates A and D when Ais in B and D is in F.

• They make a concurrent transition: A goes from B to C D goes from F to G

Statecharts: State hierarchy

B

C

x y[in G]

A D

G

E

F

x

t

zv

R

A hierarchical state machine

We can think of the state hierarchy as a tree:R(AND)

A(OR) D(OR)

B 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

B

C

x y[in G]

A D

G

E

F

x

t

zv

R

A hierarchical state machine

Given the event sequence: x, z, y, t, vThe behavior of the statechart is:

R(A(B))-R(D(F)) R(A(C))-R(D(G)) R(A(C))-R(D(F))

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): B-F C-G C-F C-E C-G

x

vt

x z t v

z

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

A

C B

x/t

ty

Given the input event sequence: x,yThe behavior of the statechart is:

A C B Cx t

y

y

Statecharts: History Entrances

B

C

x y[in G]

A D

G

R

E

F

x

t

zv

K

w

H

• 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

z

Given the input event sequence: x,w,zThe behavior of the statechart is:

B-F C-G K B-G x w z

StateCharts: Conditional Entrances

• 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

B

R

A

C

K

[R]

C

e

[P]

[Q]

B

R

A

C

K

e[R]

e[P]

e[Q]

StateCharts: Selection Entrances

• 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

B

R

A

C

K

e3

Se1

e2

B

R

A

C

K

e3

e1

e2

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

AlarmAlarm

ShutShut

OpOp

OnOn

OffOff

11

22

ModeMode VolVol

t_ont_onstartstart stopstop

t_offt_off t_ont_on incinc decdec

Given the input event sequence: start, t_on, inc, dec, stop

The behavior of the statechart is:

Shut Off-1 On-1

On-2 On-1 Shut

start t_on

inc dec stop

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. 24th International Computer Software and Applications Confenrence (COMPSAC 2000)

Navigation Modeling

• A navigation model should show how 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 JavaScript, 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 super-state (in which case the source of the arrow is the super-state) 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