Create actions to push, pop and replace different states within a module.
SYNTAX
The fm:state command is not only used within a state list to declare a new state, it can also be used within an action to move between states. The following shows the syntax:
The action attribute tells FOX whether the state is to be pushed onto the stack, popped from the stack, or to replace the current state completely. The name attribute tells FOX which new state should be pushed or replace the old one. The attach attribute tells FOX what the new attach point will be in the new state. The all attribute tells FOX to replace ALL states.
CONCEPTS
FOX uses a stack structure to store previous modules and states that the user has been to within the current session. This stack can be viewed by clicking the CallStack link in the System Menu.
Each time a user enters a new module or state, it is pushed onto the top of the stack, and when they leave, it can be popped from the stack, or simply replaced.
Thus states can be replaced, which is the normal usage, or pushed onto the stack and then popped off later.
When you push a state, the previous attach point will be stored so you can pop back to the previous location later. You can also specify a new attach point when you push or replace a state. This can be done using the attach attribute on the fm:state command.
We can use phantoms to call an action within a list that will push a new state and display information relevant to that branch of the list. As Phantoms have already been covered, we will not go into much more detail here.
EXAMPLES
The following code shows how to push a new state onto the stack:
<fm:state action=”push” name=”state-1”/>
The following code shows how to pop a state off the stack:
<fm:state action=”pop”/>
Notice you do NOT need to put a state name if you are popping a state, as FOX will return to the state below the popped one on the stack.
To replace a state you can use the following code:
<fm:state action=”replace” name=”state-2”/>
EXERCISES
Exercise 1
Add a Phantom element called “phantom-select” in the “empdata” namespace and the prompt “Select”.
NB: Don’t forget to library in LAYOUT1.
Create a new state called “state-detail”. This state will show all the information for a specific employee.
Create a new namespace called “details” that will need to be applied to the schema for use with this state.
Create an action called “action-goToDetail” that pushes state-detail to the top of the stack. When you push the state, use the attach attribute to attach to :{action}. The fm:set-out in state-detail should set-out from the attach point.
In state-detail, create an action named “action-back” as a button with the prompt ‘Back’ that pops the new state off the stack.
Look at the CallStack DOM after you have gone into the new state, and when you have popped out of it. Notice the differences.
Exercise 2
Change action-goToDetail from a state push to a state replace.
Look at the CallStack DOM after you have gone into the new state. Notice what now happens when you push “Back” in state-detail?
Exercise 3
Return action-goToDetail back to a state push.