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
                          http://www.springframework.org/schema/webflow/spring-webflow-2.0.xsd">

</flow>
			

All states of the flow are defined within this element. The first state defined becomes the flow's starting point.

Use the view-state element to define 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 state above might render /WEB-INF/hotels/booking/enterBookingDetails.xhtml if the flow itself was located in the /WEB-INF/hotels/booking directory.

Use the transition element to handle events that occur within a state:

<view-state id="enterBookingDetails">
    <transition on="submit" to="reviewBooking" />
</view-state>
			

These transitions drive view navigations.

Use the end-state element to define a flow outcome:

<end-state id="bookingCancelled" />
			

When a flow transitions to a end-state it terminates and the outcome is returned.

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 they can focus on developing the user interface of the application with end users first. Below is a sample flow that implements its view navigation logic 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
                          http://www.springframework.org/schema/webflow/spring-webflow-2.0.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>