Title: CS 290C: Formal Models for Web Software Lecture 2: Navigation Modeling with Statecharts Instructor: Tevfik Bultan
1CS 290C Formal Models for Web Software
Lecture 2 Navigation Modeling with
StatechartsInstructor Tevfik Bultan
2Statecharts
- 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
3Statecharts
- 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
4Statecharts
- 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
B
A
y
t
C
D
A basic state machine
Given the event sequence y, x, 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)
y
t
5Statecharts OR-states
- D is an OR-state, its substates are A and C
-
- When the system is in state D it is either in A
- or 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
D
x
A
t
B
y
C
z
A hierarchical state machine
6Statecharts OR-states
D
x
A
Given the event sequence x, y, t, z Behavior 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
t
B
y
x
z
t
y
C
z
A hierarchical state machine
x
A
t
B
y
x
y
t
z
t
C
z
Equivalent basic state machine
7Statecharts Transitions
- Statechart transitions have a source state and a
target state and are labeled as - trigger-event guard-condition /
generated-events
source state
target state
trigger-eventguard-condition/action
8Statecharts 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)
9Statecharts 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
10Statecharts 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
- conflicting (they cannot be taken at the
- same time).
- 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
A
t
t
C
B
11Statecharts AND-states (concurrency)
- R is and AND-state
- When the system is in the AND-state
- R, 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
R
A
D
t
B
E
z
F
v
x
yin G
G
x
C
A hierarchical state machine
12Statecharts AND-states (concurrency)
R
- Note that event x causes
- a synchronization between
- states A and D when A
- is in B and D is in F.
- They make a concurrent
- transition
- A goes from B to C
- D goes from F to G
A
D
t
B
E
z
F
v
x
yin G
G
x
C
A hierarchical state machine
t
z
B-F
B-E
Equivalent basic state machine
B-G
x
v
x
x
y
v
C-G
C-E
x
C-F
z
t
13Statecharts State hierarchy
We can think of the state hierarchy as a tree
R
R(AND)
A
D
t
B
E
z
F
v
x
yin G
A(OR)
D(OR)
G
x
C
B
C
E
F
G
A hierarchical state machine
- 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
14Statecharts State hierarchy
R
A
D
t
B
E
A hierarchical state machine
z
F
v
x
yin G
G
x
C
Given the event sequence x, z, y, t, v The
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
z
v
t
x
z
t
v
15Statecharts 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 ? C ? B ? C
A
x/t
y
x
t
y
t
C
B
y
16Statecharts History Entrances
R
z
A
D
H
K
t
B
E
z
F
w
v
x
yin G
Given the input event sequence x,w,z The
behavior of the statechart is B-F ? C-G ? K
?B-G
G
x
C
x
w
z
- 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
17StateCharts 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
R
eP
K
A
eQ
eR
B
C
e
R
C
P
K
A
Q
R
B
C
18StateCharts 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
R
e1
K
A
e2
e3
B
C
R
S
e1
K
A
e2
e3
B
C
19Statecharts 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
20Statecharts An Example
Alarm
Shut
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
t_on
start
stop
Op
Mode
Vol
start
t_on
On
1
t_off
t_on
inc
dec
inc
dec
stop
Off
2
21Modeling 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
22Modeling 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)
23Navigation 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
24Complications
- 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)
25Complications
- 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 navigationThere may be links to
different sections of the same page
26Complications
- 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
27Complications
- 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
28Modeling 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
29Modeling 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
30Inter-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)
31Grouping 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
32Modeling 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
33Modeling 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
34What 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