Views

TOOLBOX

LANGUAGES

SCXML Getting Started 3 4 X

From Morfeo Wiki

(Redirected from SCXML Getting Started)
Jump to: navigation, search

This document introduces a brief tutorial on how to use the SCXML Flow Engine to create MyMobileWeb applications. For further details about the language itself, please see the SCXML specification and for concrete issues dealing with the SCXML Flow Engine available in MyMobileWeb, please see the MyMobileWeb SCXML User Manual.

In following sections we will explain how to define the flow of a simple application.

Contents

Application flow

Let's consider we want to describe the flow of a soccer team web application using SCXML. The following diagram shows a general overview of the navigation possibilities. The names of the OPs are in green, while the names of the presentations are in black. Red squares represent OAs.

Example Application Flow
Example Application Flow

Configuration

In MyMobileWeb.Global.xml you should specify two properties:

  • Flow_Handler: Indicates the name of the class in charge of managing the flow. In case you want to use the SCXML Flow Engine, you should specify org.morfeo.mymw.server.flow.scxml.SCXMLFlowEngine
  • Flow_Base_Url: Indicates the URL which points out the flows directory (the directory containing all the flow definition files). 
 
<module name="FlowEngine">
	<property name="Flow_Handler" value="org.morfeo.mymw.server.flow.scxml.SCXMLFlowEngine"/>
	<property name="Flow_Base_Url" value="http://localhost:8080/SportingSCXML/flows"/>
</module>
 

Flow Definition

In order to define the flow of any application you should put your SCXML code inside the MyMobileWeb.Flow.xml file within the flows folder of your project.

Flow Definition Structure
Flow Definition Structure

As the picture above shows, the main flow definition should be placed under the file flows/MyMobileWeb.Flow.xml. However, you could create additional flow definition files and include a reference to them in the global definition file. For instance, in our example, the Player OP state will include a src attribute which indicates that part of the state definition has been placed in flows/Player/Flow.xml: 

 
<state id="Jugador" src="Player/Flow.xml">
</state>
 

Note that the src attribute is a relative URL. The absolute URL will be made up by MyMobileWeb platform by using the Flow_Base_Url, so in this case the final URL for the flow definition file would be http://localhost:8080/SportingSCXML/flows/Player/Flow.xml

States

Using the SCXML Flow Engine you could define the following kinds of states:

  • OP States
They represent MyMobileWeb OPs. An OP state is a parent state, and each one of the presentations defined in that OP will be represented as a sub-state (child state element). Each time an OP state is entered, MyMobileWeb will automatically create a new OP context, removing all the variables in the previous OP scope.
  • Presentation states
This kind of states don't have children states. Each presentation state is associated with a concrete MyMobileWeb presentation, so each time a presentation state is entered, the corresponding MyMobileWeb presentation will automatically be rendered.
  • Generic states
They are common states and any special action is supposed to be executed when they are entered. Typically, the root state of any application (the parent element containing all the flow definition) will be a generic state.

OP states should be named as the OP itself (starting with uppercase) and presentation states are compound by the name of the OP (starting with uppercase), the "_" character, and the name of the presentation (starting with lowercase). Generic states cannot contain "_" characters and should start with lowercase.

The following example shows an OP state called Club which contains one presentation called club. 

 
     	<state id="Club" >
		<initial>
			<transition target="Club_club" />
		</initial>
 
		<state id="Club_club">
		</state>
     	</state>
 

Note that the initial element indicates the first presentation in the OP, so each time an OP state is entered the flow will navigate through the presentation substate indicated in the initial element.

Transitions

SCXML transitions are the elements which decide the next state to be visited in response to user events. The next example shows how to navigate from the Menu OP state to the Club one if user choose this option in the menu. 

 
<transition event="initialMenu_onclick" cond="${myOption == 'opClub'}" target="Club" />
 

The attribute event in MyMobileWeb is compound by the control identifier, the "_" character and the event identifier.

The attribute cond could be any MyMobileWeb boolean expression language.

Tha attribute target indicates the state to transition to.

All these attributes are optional.

Global Transitions

Those transitions shared by a set of states will be defined as global transitions (typical examples are back, index or exit links included in your application).

The following example illustrates how to define global transitions in our example application: 

 
	<!-- Global Transitions -->
	<transition event="lback_onclick" target="InitOp" />
	<transition event="lindex_onclick" target="InitOp" />
	<transition event="lexit_onclick" target="finalState">
		<mymw:logout/>
	</transition>
 

Local transitions have preference over global ones.

MyMobileWeb Actions

Some MyMobileWeb custom actions have been defined to make the flow definition process easy. Here we will explain some useful MyMobileWeb actions to perform our example.

executeOA

This action allows the user to invoke an Application Operation (OA). The following example shows how to invoke the SetPlayer OA when the chainedMenu in selectPlayer presentation finishes. 

 
<state id="Player_selectPlayer">
	<transition event="chmenu1_onfinish" target="Player_playerDetails" >
		<mymw:executeOA idOA="SetPlayer"/>
	</transition>
</state>
 

invokeMethod

This action allows the user to invoke a specific method in a concrete Java class. This option represents an alternative to the invokeOA action. In this case, the user could specify not only the class and method to be invoked, but also the parameters (via the argument element) to be passed to the method and a result expression which indicates the variable in charge of keeping the result of the method invocation. The next example could be performed by invoking the SearchPlayer OA, but in this case we use the invokeMethod alternative. 

 
<state id="Player_search">
	<transition event="submit_onsubmit" target="Player_showPlayers">
		<!--<mymw:executeOA idOA="SearchPlayers"/>
-->
		<mymw:invokeMethod className="sporting.classes.MyClass" method="searchPlayers" result="${opScope.playersTable}">
			<mymw:argument expression="${opScope.iplayer}"/>
			<mymw:argument expression="${applicationScope.players}"/>
		</mymw:invokeMethod>
	</transition>
</state>
 

This approach provides a declarative mechanism to invoke application code.

logout

This action allows the user to perform the typical MyMobileWeb logout, removing all the elements from the session scope and showing the login presentation. The logout action makes the navigation flow to restart.

In our case the logout action will be invoked each time the global lexit_onclick transition is triggered: 

 
<transition event="lexit_onclick">
	<mymw:logout/>
</transition>
 

Flow definition files

The whole SCXML definition files are shown below.

flows/MyMobileWeb.Flow.xml 

 
<scxml
	xmlns="http://www.w3.org/2005/07/scxml"
	xmlns:mymw="http://morfeo-project.org/mymobileweb"
	version="1.0"
	initialstate="applicationFlow">
 
 <state id="applicationFlow">
 
	<!-- Initial Application State -->
	<initial>
		<transition target="InitOp" />
	</initial>
 
	<!-- Global Transitions -->
	<transition event="lback_onclick" target="InitOp" />
	<transition event="lindex_onclick" target="InitOp" />
	<transition event="lexit_onclick">
		<mymw:logout/>
	</transition>
 
    	<state id="InitOp">
	       	<initial>
			<transition target="InitOp_menu" />
		</initial>
 
		 <state id="InitOp_menu">
		        <transition event="initialMenu_onclick" cond="${myOption == 'optClub'}" target="Club" />
		        <transition event="initialMenu_onclick" cond="${myOption == 'optNoticias'}" target="News" />
		        <transition event="initialMenu_onclick" cond="${myOption == 'optSearch'}" target="Player_search" />
		        <transition event="initialMenu_onclick" cond="${myOption == 'optSelect'}" target="Player_selectPlayer" />
		</state>
    	</state>
 
     	<state id="Club" >
		<initial>
			<transition target="Club_club" />
		</initial>
 
		<state id="Club_club">
		</state>
     	</state>
 
     	<state id="News" >
		<initial>
			<transition target="News_news" />
		</initial>
 
		<state id="News_news">
			<transition event="newsMenu_onclick" target="News_news" />
		</state>
 
     	</state>
 
    	<state id="Jugador" src="Player/Flow.xml">
     	</state>
 
  </state>
</scxml>
 

flows/Jugador/Flow.xml 

 
<?xml version="1.0" encoding="us-ascii"?>
<scxml version="1.0" xmlns="http://www.w3.org/2005/07/scxml" xmlns:mymw="http://morfeo-project.org/mymobileweb" initialstate="Player_selectPlayer">
 
	<state id="Player_selectPlayer">
		<transition event="chmenu1_onfinish" target="Player_playerDetails" >
			<mymw:executeOA idOA="SetPlayer"/>
		</transition>
	</state>
 
	<state id="Player_search">
		<transition event="submit_onsubmit" target="Player_showPlayers">
			<mymw:invokeMethod className="sporting.classes.MyClass" method="searchPlayers" result="${opScope.playersTable}">
				<mymw:argument expression="${opScope.iplayer}"/>
				<mymw:argument expression="${applicationScope.players}"/>
			</mymw:invokeMethod>
		</transition>
	</state>
 
	<state id="Player_showPlayers">
		<transition event="myTable_onclick" target="Player_playerDetails" >
			<mymw:executeOA idOA="SetPlayer"/>
		</transition>
		<transition event="lback_onclick" target="Player_search" />
	</state>
 
	<state id="Player_playerDetails">
		<transition event="lback_onclick" cond="${_MYMW_PREV_PRES == 'selectPlayer'}" target="Player_selectPlayer" />
		<transition event="lback_onclick" cond="${_MYMW_PREV_PRES == 'showPlayers'}" target="Player_showPlayers" />
	</state>
</scxml>
 
Retrieved from "http://forge.morfeo-project.org/wiki_en/index.php/SCXML_Getting_Started_3_4_X"