Using ManagedUIFlow

This page contains basic instructions on how to use ManagedUIFlow with Asp.Net Mvc Framework.

This document assumes you’ve downloaded a ManagedUIFlow and the Asp.net MVC Framework 1.0. It also assumes basic working knowledge of Asp.net mvc. In addition, some familiarity with finite state machines and UML state diagrams is assumed.

Below demonstrates the steps required to implement your first flow, with a purposefully simple example:

  • Create a Asp.net MVC Web Application project (we will assume it is called "MyMvcApplication").
  • Add reference to manageduiflow.dll assembly.
  • Design your first flow. For this quick start, assume the simplest possible flow. Specifically the flow should: On startup, render a form view for display in the browser On "submit", bind form input data to a backing form object and validate it. If there is an error, go back to the form view. If everything is kosher, execute a submit action. (For those of you familiar with ASP.NET MVC, you'll recognize this as the dynamic equivalent to the workflow defined within SimpleFormController.)
  • Add new section under configSections,
<?xml version="1.0"?>
<configSections>
        <section name="flowConfiguration" 
type="ManagedUIFlow.Infrastructure.Flows.Configuration.XmlFlowsConfigurationSection, 
ManagedUIFlow, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"/>
</configSections>
  • Create your first flow definition, below is how to define the flow under section created above:
<flowConfiguration>
        <flows>
            <flow of="simpleForm" beginsWith="displayForm">
                <given that="displayForm">
                    <when user="submit" then="bindAndValidate" />
                </given>
                <given that="bindAndValidate">
                    <when itis="done" then="processSubmit" />
                    <when itis="error" then="displayForm" />
                </given>
                <given that="processSubmit">
                    <when itis="success" then="displayForm" />
                </given>
            </flow>
        </flows>
</flowConfiguration>
  • Create the flow views (aka pages) that participate in the flow.
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    displayForm
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>displayForm</h2>
    <span style="color:Red; font-weight:bold"><%= ViewData["errorMessage"] %></span>

    <%Html.BeginForm("submit", ViewData["ExecutionKey"].ToString(), FormMethod.Post); %>
        
        <input type="text" name="name" /> <br />
        
        <input type="submit" value="submit" />
        
    <%Html.EndForm(); %>

</asp:Content>
  • Create flow actions. Define the simpleFormController, inherits from FlowController, referenced above, which centralizes form bind and validate, and submit logic.

    public class SimpleFormController : FlowController
    {
        //
        // GET: flows/SimpleForm/

        public ActionResult BindAndValidate(string name)
        {
            if(!string.IsNullOrEmpty(name))
               return State("done");

            ViewData["errorMessage"] = "Required field is empty";
            return State("error");
        }

        public ActionResult ProcessSubmit(string name)
        {
            return State("success");
        }
    }
  • Ready your flow for use with ASP.NET MVC, configure route.
routes.MapFlow(
                "FlowDefault",
                "flows/{controller}/{action}/{id}",
                new {controller = "simpleForm", action = "", id = ""}
                );
Where {controller} represents new flow name or exitsing flow key, {action} represents current flow state. Note: To avoid route conflict it is recommanded to map flows to seperate url e.g. flows/{controller}/{action} etc..

Note: flows are stateful. As a result, a view participating in a flow must submit the Key(in place of controller in url) back to the server to identify which flow the client is participating in. In addition, a view must submit a parseable form of the state(in place of action in url) back to the server to signal the event that occured when a button was pressed; for example, submit if the submit buttion was pressed.

Lastly, access the flow! In this case, we simply access the flows/simpleForm URL. When we access it, a new 'simpleForm' FlowExecution will be created server-side and transitioned to its render view start state. When this happens, the following process is set in motion: The form is rendered.

The user completes the form and signals the 'submit' event by clicking the submit button. Receipt of the submit event executes the BindAndValidate action on the SimpleFormController, which returns a result (e.g success or error). The action result triggers another transition - e.g back to displayForm on error or on to submit on success. The Receipt of BindAndValidate action triggers the ProcessSubmit action on the same SimpleFormController to be invoked. It returns a result. On a submit success result, the flow ends, rendering a ending success view. As you can see, the Flow definition fully defines the workflow described above. The Action implementations focus on executing command logic when requested, returning a logical result outcome the flow can respond to.

This completes a brief introductory to the ManagedUIFlow system. A good place to go to learn more is the reference documentation. Another good way to learn more is to checkout the samples in the downloads section.

Last edited Apr 18, 2010 at 11:02 AM by yogsbreath, version 5

Comments

No comments yet.