6. Essential Language Elements
There are four essential flow elements:
6.1. The flow
Element
Every flow begins with the following root element:
<?xml version="1.0" encoding="UTF-8"?>
<flow xmlns="http://www.springframework.org/schema/webflow"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/webflow
https://www.springframework.org/schema/webflow/spring-webflow.xsd">
</flow>
All states of the flow are defined within this element. The first state defined becomes the flow’s starting point.
6.2. The view-state
Element
The view-state
element defines a step of the flow that renders a view:
<view-state id="enterBookingDetails" />
By convention, a view-state maps its id to a view template in the directory where the flow is located.
For example, the preceding state might render /WEB-INF/hotels/booking/enterBookingDetails.xhtml
if the flow itself was located in the /WEB-INF/hotels/booking
directory.
6.3. The transition
Element
The transition
element handles events that occur within a state:
<view-state id="enterBookingDetails">
<transition on="submit" to="reviewBooking" />
</view-state>
These transitions drive view navigations.
6.4. The end-state
Element
The end-state
element defines a flow outcome:
<end-state id="bookingCancelled" />
When a flow transitions to a end-state, it ends and the outcome is returned.
6.5. Checkpoint: Essential language elements
With the three elements, view-state
, transition
, and end-state
, you can quickly express your view navigation logic.
Teams often do this before adding flow behaviors so that they can focus on developing the user interface of the application with end users first.
The following sample flow implements its view navigation logic by using these elements:
<flow xmlns="http://www.springframework.org/schema/webflow"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/webflow
https://www.springframework.org/schema/webflow/spring-webflow.xsd">
<view-state id="enterBookingDetails">
<transition on="submit" to="reviewBooking" />
</view-state>
<view-state id="reviewBooking">
<transition on="confirm" to="bookingConfirmed" />
<transition on="revise" to="enterBookingDetails" />
<transition on="cancel" to="bookingCancelled" />
</view-state>
<end-state id="bookingConfirmed" />
<end-state id="bookingCancelled" />
</flow>