The Fusebox flow of control

Fusebox is an MVC (Model/View/Controller) framework for Active4D that dramatically simplifies the process of web development.

One of the most difficult things for people to grasp when learning Fusebox is how control flows from when a request is received to when a response is returned. Here is a PDF that illustrates the basic flow of control:

Download

Let's walk through it, remembering that in fusebox a circuit is represented by a directory on disk:

1. The browser sends a request to 4D. In this case it is for the action "techniques.basics". "techniques" is the circuit, "basics" is the fuse action within that circuit.
2. The request is passed to the fusebox core, which first executes fbx_settings.a4d in the root circuit.
3. fbx_circuits.a4d is executed to map the "techniques" circuit to a directory.
4. fusebox traverses down from the root circuit to the target circuit.
5. At each circuit in the hierarchy, if fbx_settings.a4d exists, it is executed.
6. Once the target circuit is reached, fbx_switch.a4d is executed.
7. Any output from display circuits is not written to the response buffer, it is buffered internally in $fusebox{"layout"}.
8. Now the fusebox core traverses up from the target circuit to the root circuit.
9. At each level, if fbx_layouts.a4d exists, it is executed.
10. If $fusebox{"layoutFile"} is non-empty, that layout is included. A layout must include the code <% write($fusebox{"layout"}) %> in order to display the output of display fuses in the target circuit and of nested layouts in other circuits.
11. Once the root circuit is reached and the root layout is included, the $fusebox{"layout"} is written to the response buffer.

In practice, let's say we have a root layout that established our basic page structure:

<%
   include("dsp_xhtmlHeader.a4d")
   include("dsp_masthead.a4d")
   include("dsp_sidebar.a4d")
   write($fusebox{"layout"})  // included layouts and dynamic content
   include("dsp_footer.a4d")
%>

Then, within the products circuit of our site we have a basic structure to the content region of the overall page:

<%
   include("dsp_productsTop.a4d")
   write($fusebox{"layout"})  // dynamic content
   include("dsp_productsBottom.a4d")
%>

Now, if the fuseaction "products.list" is executed, fbx_switch.a4d includes a query fuse to get a RowSet with a list of products, then includes the display fuse "dsp_list.a4d" with this markup:

My products:<br />
<ul>
   <%
      $row := $rs->getRow

      while($rs->next)
   %>
   <li><%="%s - $%0.2f" % ($row{"name"}; $row{"price"})%></li>
   <% end while %>
</ul>

This gives us a list like this:

• Foo - $10.95
• Bar - $9.95

Quite an exciting product lineup!

Following the flow of control outlined above, here's what happens after the target fuse action executes:

1. The output is buffered in $fusebox{"layout"}.
2. The products circuit layout is included, and write($fusebox{"layout"}) is executed, which adds the dynamic content to the buffered output.
3. The root circuit layout is included, and the buffered output from the products circuit is inserted where write($fusebox{"layout"}) occurs in the root layout.

So here is effectively what is being executed:

<%
   // start root layout
   include("dsp_xhtmlHeader.a4d")
   include("dsp_masthead.a4d")
   include("dsp_sidebar.a4d")
   // write($fusebox{"layout"})  // included layouts and dynamic content
    
      // start products layout
      include("dsp_productsTop.a4d")
      // write($fusebox{"layout"})  // dynamic content

         // start products.list output
%>
         My products:<br />
         <ul>
           <%
              $row := $rs->getRow

              while($rs->next)
           %>
           <li><%="%s - $%0.2f" % ($row{"name"}; $row{"price"}%></li>
         <% end while %>
         </ul>
<%
         // end products.list output

       include("dsp_productsBottom.a4d")
       // end products layout
  
    include("dsp_footer.a4d")
    // end root layout
%>

The output can be visualized like this:

Hopefully this makes the fusebox way a little clearer.