Click here to speak live with a FuseBuilder Operator
Live chat by Boldchat

Single-User Licence: $95 

Multi-User License: $350 

Prototyping in FuseBuilder

FuseBuilder isn't just a tool to Wireframe a project and then generate the framework. You can use FuseBuilder to prepare HTML versions of your project as well, either to be viewed within the FuseBuilder application as a "PrePrototype", or as static html files that you can flesh out with your favourite editor. Below are the steps required to do it.

 

Step 1: Design a layout


The first step is to design a layout that will be used as a template in the Wireframe View of the project. As the template will be full html, you can design into it any images, css, flash etc, that you want. The only thing you should plan for is the final relative paths for any resources, such as the "/images" folder.


Step 2: Prepare the html file to be used as a template.


Open the html file in a text editor and put comments to mark the beginning and end of any dynamic content. The beginning comment should be "<!-- begin body -->" and the ending comment should be "<!-- end body -->".

The beginning and ending comments will be placed in one of two areas, which depend on what kind of prototype you want FuseBuilder to create:

  1. Standard Wireframe (no link locations or forms): Just inside the area where the body content is going to go. For example, if you had one <div>...</div> block for body content, the comments would look like this:
    <div id="mycss"> 
    <!-- begin body --> 
    
    <!-- end body --> 
    </div> 
    
  2. Preprototype (link locations and forms): Just before and after any dynamic content that will be generated through the XFA Link Locations and the body area. It's hard to explain but open up "template.pro" in the "samplelayout" folder found inside the "prototypes" folder in FuseBuilder. You'll see the beginning and closing comments in there.

If you're not using Link Locations for a Preprototype you can skip to Step 5


Step 3 (PrePrototype): Define the Content Blocks


In the html template, you should create a sample element for any regions of the page that can contain links or forms. Again, the elements can have any styling information you want through css.

The trick to using FuseBuilder to turn your Wireframe into a PrePrototype is in the inclusion of "block markers" and "replacement markers" in your html template. Again, take a look at "template.pro" for working examples of the syntax for the block and replacement markers. There is a "readme" file in the "wireframe" directory which will list all the possible replacement markers, and how to structure the block markers. In a nutshell, block markers are tags that surround the block of html that will be used to generate the XFA links or forms, and replacement markers are text flags that FuseBuilder will use to replace with live data. An example link follows; this link would be generated into the "sidebar" content block defined for links, and the block would only show in the Wireframe View if an XFA was assigned to it:


<fb_sidebar_link> 
<div id="sidebar"> 
    <ul><fb_sidebar_item> 
        <li> 
            <a href="@xfatarget@">@xfatext@</a> 
        </li></fb_sidebar_item> 
    </ul> 
</div> 
</fb_sidebar_link> 

The <fb_...> tags are block markers. In the preceding example there are two blocks defined, one which defines the full block of html that will be generated for the area where the links will go (<fb_sidebar_link>...</fb_sidebar_link>), and another for the html block that repeats for every link in that area (<fb_sidebar_item> ... </fb_sidebar_item>) To help avoid whitespace, I've placed the link's "item" block marker tags just before or after the repeatable content, but not on its own line or indented. By doing this, when FuseBuilder generates the link locations, the resultant html will be indented properly, but without any additional spaces.

The two "@" strings in the preceding example are replacement markers. The "@xfatarget@" will be replaced in all the links populating this area with each XFA's target "circuit.fuseaction", and the "@xfatext@" will be replaced with the text you used as the Link Text in Wireframe Edit, or the XFA Name in Project View.


Step 4 (PrePrototype): Assign XFAs to link/form and link locations


In FuseBuilder's Project View, navigate to a Fuseaction that has XFAs and click on the edit icon ("hand w/ pen") next to an XFA. In the XFA Properties form you will see a place to define the XFA as either "link" or "form", and a place to specify one of the Link Locations defined in your FuseBuilder config. If the content blocks you've defined in your layout haven't also been listed in your FuseBuilder Config, you'll have to add them. The "Custom Link Locations" field accepts a comma-separated list of link locations, and should start off with at least "general" in the list. (You should leave this in the list, but feel free to add your own elements). Using the above example, you would add a link location of "sidebar".


Step 5: Add the layout template to FuseBuilder


There are two ways to bring in a layout into FuseBuilder, either manually if you're using FuseBuilder on a web server that isn't accessible by "localhost", or through a wizard if FuseBuilder is on your local computer and the layout directory is accessible either on a local drive or through a mapped network drive.

To bring in the layout manually, copy the folder and all relevant files (and directories) as a subdirectory in FuseBuilder's "prototype" folder. In your file manager (eg. Windows Explorer) make a copy of your html file and name it "template.pro".

To bring in the layout automatically, go to the Current Projects list and click on the sidebar link "Add Layout". If FuseBuilder is being accessed by "localhost" you will be prompted to specify the html file to be used as the layout. FuseBuilder will do the rest.


Step 6: Assign a Layout to the Project's Wireframe


Edit the project's properties by either clicking on the sidebar link "Edit Project" in the Project View, or by clicking on the edit icon ("hand w/ pen") in the Current Projects list.

In the properties form you'll see a space to select a layout for the "Wireframe Prototype". Select your layout from the drop-down box. If you want your Wireframe to be used as a PrePrototype, check off the box "Use Layout for XFA Locations".


Step 7 (PrePrototype): Fusedoc any fuses in Fuseactions with XFAs set to "form"


For any display fuses that are going to be used to display forms in Fuseactions with "form" XFAs, populate their Fusedocs with at least one IO Element in the "Outs" with a scope of "form". That's the barest minimum required to have your form generated in the Wireframe. If you want to add HTML to define the look of the form inputs, you can click on the sidebar link "Edit Fuse Forms" in the Fusedoc view of the fuse. There you can specify the label text, input type, and which form XFAs the IO Element should be shown in.


Step 8: View the Wireframe


If you have done everything correctly, your Wireframe should look very close to the final web application, with links in the locations you've specified, and any forms present and clickable.

In many instances, you won't even need to create static html prototypes, but if you do, you can click on the sidebar link "Export Prototype" found in the Project View. You'll be prompted to select a layout for the look of the generated files, you should select the one that you imported into FuseBuilder. FuseBuilder will then create html files in the specified layout folder, along with a html version of the Wireframe Quickmap, and a standalone version of the Wireframe Notes for discussing and approving the prototypes.