Here you can take a look at a complete example included in the package:<br> <br><a href="http://haskell-web.blogspot.com/2012/02/web-application-server-with-stateful.html">http://haskell-web.blogspot.com/2012/02/web-application-server-with-stateful.html</a><br>

<br>This snippet is the web page in declarative form:<div><br></div><div><pre style="text-align:justify;background-color:rgb(255,255,255)"><span class="hs-definition">shopProds</span> <span class="hs-keyglyph">::</span> <span class="hs-conid" style="color:rgb(79,67,113)">V</span><span class="hs-varop" style="color:rgb(51,51,51)">.</span><span class="hs-conid" style="color:rgb(79,67,113)">Vector</span> <span class="hs-conid" style="color:rgb(79,67,113)">Int</span> <span class="hs-keyglyph">-&gt;</span> <span class="hs-keyglyph">[</span><span class="hs-conid" style="color:rgb(79,67,113)">Prod</span><span class="hs-keyglyph">]</span>
          <span class="hs-keyglyph">-&gt;</span> <span class="hs-conid" style="color:rgb(79,67,113)">View</span> <span class="hs-conid" style="color:rgb(79,67,113)">Html</span> <span class="hs-conid" style="color:rgb(79,67,113)">IO</span>  <span class="hs-layout">(</span><span class="hs-conid" style="color:rgb(79,67,113)">Either</span> <span class="hs-conid" style="color:rgb(79,67,113)">Int</span> <span class="hs-conid" style="color:rgb(79,67,113)">Prod</span><span class="hs-layout">)</span>
<span class="hs-definition">shopProds</span> <span class="hs-varid" style="color:rgb(51,51,51)">cart</span> <span class="hs-varid" style="color:rgb(51,51,51)">products</span><span class="hs-keyglyph">=</span>
  <span class="hs-varid" style="color:rgb(51,51,51)">br</span>
  <span class="hs-varop" style="color:rgb(51,51,51)">&lt;++</span>                    <span class="hs-comment" style="color:rgb(85,85,85)">-- add Html to the first widget</span>
  <span class="hs-varid" style="color:rgb(51,51,51)">p</span> <span class="hs-varop" style="color:rgb(51,51,51)">&lt;&lt;</span> <span class="hs-str" style="color:rgb(54,99,84)">&quot;-----Shopping List-----&quot;</span>
  <span class="hs-varop" style="color:rgb(51,51,51)">&lt;++</span>
  <span class="hs-varid" style="color:rgb(51,51,51)">widget</span><span class="hs-layout">(</span><span class="hs-conid" style="color:rgb(79,67,113)">Selection</span><span class="hs-layout">{</span>
       <span class="hs-varid" style="color:rgb(51,51,51)">stitle</span> <span class="hs-keyglyph">=</span> <span class="hs-varid" style="color:rgb(51,51,51)">bold</span> <span class="hs-varop" style="color:rgb(51,51,51)">&lt;&lt;</span> <span class="hs-str" style="color:rgb(54,99,84)">&quot;choose an item&quot;</span><span class="hs-layout">,</span>
       <span class="hs-varid" style="color:rgb(51,51,51)">sheader</span><span class="hs-keyglyph">=</span> <span class="hs-keyglyph">[</span> <span class="hs-varid" style="color:rgb(51,51,51)">bold</span> <span class="hs-varop" style="color:rgb(51,51,51)">&lt;&lt;</span> <span class="hs-str" style="color:rgb(54,99,84)">&quot;item&quot;</span>   <span class="hs-layout">,</span> <span class="hs-varid" style="color:rgb(51,51,51)">bold</span> <span class="hs-varop" style="color:rgb(51,51,51)">&lt;&lt;</span> <span class="hs-str" style="color:rgb(54,99,84)">&quot;price&quot;</span><span class="hs-layout">,</span> <span class="hs-varid" style="color:rgb(51,51,51)">bold</span> <span class="hs-varop" style="color:rgb(51,51,51)">&lt;&lt;</span> <span class="hs-str" style="color:rgb(54,99,84)">&quot;times chosen&quot;</span><span class="hs-keyglyph">]</span><span class="hs-layout">,</span>
       <span class="hs-varid" style="color:rgb(51,51,51)">sbody</span><span class="hs-keyglyph">=</span> <span class="hs-keyglyph">[</span><span class="hs-layout">(</span><span class="hs-keyglyph">[</span><span class="hs-varid" style="color:rgb(51,51,51)">toHtml</span> <span class="hs-varid" style="color:rgb(51,51,51)">pname</span><span class="hs-layout">,</span> <span class="hs-varid" style="color:rgb(51,51,51)">toHtml</span> <span class="hs-varop" style="color:rgb(51,51,51)">$</span> <span class="hs-varid" style="color:rgb(51,51,51)">show</span> <span class="hs-varid" style="color:rgb(51,51,51)">pprice</span><span class="hs-layout">,</span> <span class="hs-varid" style="color:rgb(51,51,51)">toHtml</span> <span class="hs-varop" style="color:rgb(51,51,51)">$</span> <span class="hs-varid" style="color:rgb(51,51,51)">show</span> <span class="hs-varop" style="color:rgb(51,51,51)">$</span> <span class="hs-varid" style="color:rgb(51,51,51)">cart</span> <span class="hs-conid" style="color:rgb(79,67,113)">V</span><span class="hs-varop" style="color:rgb(51,51,51)">.!</span> <span class="hs-varid" style="color:rgb(51,51,51)">i</span><span class="hs-keyglyph">]</span><span class="hs-layout">,</span><span class="hs-varid" style="color:rgb(51,51,51)">i</span> <span class="hs-layout">)</span>
              <span class="hs-keyglyph">|</span> <span class="hs-layout">(</span><span class="hs-conid" style="color:rgb(79,67,113)">Prod</span><span class="hs-layout">{</span><span class="hs-keyglyph">..</span><span class="hs-layout">}</span><span class="hs-layout">,</span><span class="hs-varid" style="color:rgb(51,51,51)">i</span> <span class="hs-layout">)</span> <span class="hs-keyglyph">&lt;-</span> <span class="hs-varid" style="color:rgb(51,51,51)">zip</span> <span class="hs-varid" style="color:rgb(51,51,51)">products</span> <span class="hs-keyglyph">[</span><span class="hs-num" style="color:rgb(79,67,113)">1</span><span class="hs-keyglyph">..</span><span class="hs-keyglyph">]</span><span class="hs-keyglyph">]</span><span class="hs-layout">}</span><span class="hs-layout">)</span>

  <span class="hs-varop" style="color:rgb(51,51,51)">&lt;+&gt;</span>                    <span class="hs-comment" style="color:rgb(85,85,85)">-- operator to mix two wdigets</span>

  <span class="hs-varid" style="color:rgb(51,51,51)">br</span>
  <span class="hs-varop" style="color:rgb(51,51,51)">&lt;++</span>                    <span class="hs-comment" style="color:rgb(85,85,85)">-- add Html to the second widget</span>
  <span class="hs-varid" style="color:rgb(51,51,51)">p</span> <span class="hs-varop" style="color:rgb(51,51,51)">&lt;&lt;</span> <span class="hs-str" style="color:rgb(54,99,84)">&quot;---Add a new product---&quot;</span>
  <span class="hs-varop" style="color:rgb(51,51,51)">&lt;++</span>
  <span class="hs-varid" style="color:rgb(51,51,51)">table</span> <span class="hs-varop" style="color:rgb(51,51,51)">&lt;&lt;&lt;</span>              <span class="hs-comment" style="color:rgb(85,85,85)">-- &lt;&lt;&lt; encloses a widget in HTML tags</span>
            <span class="hs-layout">(</span><span class="hs-varid" style="color:rgb(51,51,51)">tr</span> <span class="hs-varop" style="color:rgb(51,51,51)">&lt;&lt;&lt;</span> <span class="hs-varid" style="color:rgb(51,51,51)">td</span> <span class="hs-varop" style="color:rgb(51,51,51)">!</span> <span class="hs-keyglyph">[</span><span class="hs-varid" style="color:rgb(51,51,51)">valign</span> <span class="hs-str" style="color:rgb(54,99,84)">&quot;top&quot;</span><span class="hs-keyglyph">]</span>
                          <span class="hs-varop" style="color:rgb(51,51,51)">&lt;&lt;&lt;</span> <span class="hs-varid" style="color:rgb(51,51,51)">widget</span> <span class="hs-layout">(</span><span class="hs-conid" style="color:rgb(79,67,113)">Form</span> <span class="hs-layout">(</span><span class="hs-conid" style="color:rgb(79,67,113)">Nothing</span> <span class="hs-keyglyph">::</span> <span class="hs-conid" style="color:rgb(79,67,113)">Maybe</span> <span class="hs-conid" style="color:rgb(79,67,113)">Prod</span><span class="hs-layout">)</span> <span class="hs-layout">)</span>

             <span class="hs-varop" style="color:rgb(51,51,51)">++&gt;</span>         <span class="hs-comment" style="color:rgb(85,85,85)">-- append Html after the widget</span>

             <span class="hs-varid" style="color:rgb(51,51,51)">tr</span> <span class="hs-varop" style="color:rgb(51,51,51)">&lt;&lt;</span> <span class="hs-varid" style="color:rgb(51,51,51)">td</span> <span class="hs-varop" style="color:rgb(51,51,51)">!</span> <span class="hs-keyglyph">[</span><span class="hs-varid" style="color:rgb(51,51,51)">align</span> <span class="hs-str" style="color:rgb(54,99,84)">&quot;center&quot;</span><span class="hs-keyglyph">]</span>
                          <span class="hs-varop" style="color:rgb(51,51,51)">&lt;&lt;</span> <span class="hs-varid" style="color:rgb(51,51,51)">hotlink</span>  <span class="hs-str" style="color:rgb(54,99,84)">&quot;hello&quot;</span>
                                      <span class="hs-layout">(</span><span class="hs-varid" style="color:rgb(51,51,51)">bold</span> <span class="hs-varop" style="color:rgb(51,51,51)">&lt;&lt;</span> <span class="hs-str" style="color:rgb(54,99,84)">&quot;Hello World&quot;</span><span class="hs-layout">)</span><span class="hs-layout">)</span>
</pre><br class="Apple-interchange-newline"><br>2012/2/7 Alberto G. Corona &lt;<a href="mailto:agocorona@gmail.com">agocorona@gmail.com</a>&gt;:<br>&gt; Hi  Haskellers<br>&gt;<br>&gt; I I“m happy to announce the first version of MFlow<br>

&gt;<br>&gt; <a href="http://hackage.haskell.org/package/MFlow">http://hackage.haskell.org/package/MFlow</a><br>&gt;<br>&gt; MFlow permits the execution of web applications in a procedural form,<br>&gt; that is, with multiple requests-response interactions in a single<br>

&gt; procedure. MFlow stores the execution state, manage timeouts, shutdown<br>&gt; and restart the procedure on demand at the point of execution, even<br>&gt; after server stop. These services are transparent for the programmer.<br>

&gt;<br>&gt; The other aspect of MFlow are combinators for the definition of<br>&gt; widgets and formlets that can be mixed freely with HTML formatting and<br>&gt; produce statically typed values using  the &quot;traditional&quot;<br>

&gt; formlet/applicative approach. There are bindings for the package<br>&gt; XHtml, so no need to learn new  paradigms/scripting/formatting..<br>&gt;<br>&gt; Console and window oriented apps are possible.<br>&gt;<br>&gt; Out of te box serialization in files permits very rapid prototyping,<br>

&gt; but any backend can be used .<br>&gt;<br>&gt; MFlow (MessageFlow) was created initially as the user interface for<br>&gt; the Workflow package . Currently is an alpha version. It has only<br>&gt; basic authentication but I plan to inprove it for serious<br>

&gt; applications. I upload this version just in case anyone wants to play<br>&gt; with it.<br><br></div>