Fusebox cheat sheet

Fusebox Comments Off on Fusebox cheat sheet

A wonderful list of Fusebox XML tags can be found at “Fusebox 4.1 XML Cheat Sheet.

By the way, an astonishing variety of cool cheat sheets (Ajax, CSS, Regexp, Ruby, PHP and many others) can be found at Smashing Magazine.

Automatical turn to AJAX with FuseBox

AJAX, Fusebox Comments Off on Automatical turn to AJAX with FuseBox

You as web developer might have thought about how to develop applications having both AJAX and HTML-only versions at the same time. Fusebox can make your life easier!

The solution has two simple steps:

  1. determine whether JavaScript is turned on in user’s browser;
  2. if JavaScript is turned on, the application loads HTML chunks via AJAX, otherwise PHP is used to load the same chunks while an HTML page is generated.

It may look confusing how the same snippets of HTML code could be load by both AJAX and PHP. It’s not a big deal if the snippets are HTML parts of code ready to be outputed to browser. To do this, let’s create an ‘ajax’ circuit in our fictitious application. In general, this circuit don’t have a header or footer – it’s used just to return pieces of HTML.

Let’s imagine our application must show a table of products. The fuseaction ‘list’ of ‘products’ circuit could be defined like this:

<circuit access="public">

  <fuseaction name="list">
    <if condition="1==${jsdisabled}">
        <set name="some_var1" value="1"  />
        <set name="some_var2" value="2"  />
        <do action="ajax.GetProducts" contentvariable="ProductsList"/>
    <include template="dspList.php" />


This means that if $jsdisabled variable equals to 1 (which tells us that JavaScript is turned off – we will see later how to determine this), we grab contents of fuseaction ‘ajax.GetProducts’ to get an HTML code of products list into a variable $ProductsList.

All the magic is in dspList.php template: it determines what must be called – AJAX or PHP:

<? if ( 0 == $jsdisabled )  {?>
  echo $ProductsList;

There are a couple of variables defined for both calls ( some_var1 and some_var2 ). Such variables are used to tune the output of ajax.GetProducts fuseaction, for example, if your table supports sorting by click on its header, you can define the hyperlinks locations for sorting: if AJAX is used, they probably will look like <a href="javascript: update_rows()">...</a>, otherwise usual page reloading links would be used.

It’s worth saying a couple of words about how your application could find out whether it can use AJAX or not, i.e. if JavaScript is turned on at client side. Let’s consider the way which is used by Google Maps: if you turn JavaScript off in your browser and reload the page, you will be automatically redirected to a Google Maps page created with help of hyperlinks and images only. The algorithm is simple – if JavaScript is turned off, SCRIPT tag doesn’t work, but the NOSCRIPT tag does, so we can put a redirection command into this block. Then, if you switch back to have JavaScript available (and SCRIPT tag would make sense again), the application must be informed about the fact, so we redirect to the same location, but with additional parameter, telling the application about the change. The current value of JavaScript state can be stored in session or cookies.

Here is a PHP snippet, showing this at work:

    <? if ( 0 == $attributes['jsdisabled'] ) : ?>
        <meta http-equiv="refresh" content="0; URL=http://<?=$_SERVER["HTTP_HOST"] . $_SERVER['REQUEST_URI'] . (strpos($_SERVER['REQUEST_URI'], '?')!==false ? '&' : '?' ) ?>jsdisabled=1"/>
    <? else : ?>
        top.document.location.href='http://<?=$_SERVER["HTTP_HOST"] . $_SERVER['REQUEST_URI'] . (strpos($_SERVER['REQUEST_URI'], '?')!==false ? '&' : '?' ) ?>jsdisabled=0';
    <? endif; ?>

Mind-mapping in Fusebox

Fusebox, Mind-mapping 1 Comment »

In our fast-moving world visual designing tools become more and more popular, allowing to generate code snippets or whole projects from a graphical scretch. This article describes what a Fusebox developer can get from it.Circuits and fuses of a Fusebox project form a strict hierarchy, so we can draw the project schema as a tree. Is there any software to draw trees? Of course! There is an astonishing variety of tools to create mind-maps which we can adopt to our needs.

If you are not familiar with mind maps, let’s take a closer look on them:

A mind map is a diagram used to represent words, ideas, tasks or other items linked to and arranged radially around a central key word or idea. It is used to generate, visualize, structure and classify ideas, and as an aid in study, organization, problem solving, decision making, and writing [wikipedia].

Mind maps are a result of mind-mapping: a technique allowing to keep track of ideas generated while a brain-storm session (yes, it’s when people jot down as many ideas as they can and after that they “separate grains and tares” – choose the most brilliant ones). So, valuable thoughts are hierarchically organized as a tree. As any tree, mind map has nodes and leafs, i.e. nodes with no children.

mind map

Structural similarity between a mind map and a Fusebox project provides a basis for a conclusion that the former can be used to generate the latter (and vice versa). A glue between the two layers can be the XML format as most mind-mapping utilities can import from and export to it. A drawback of using XML is that almost every application has its own kind of the XML format our converter will have to deal with.

As long as mind-mapping utilities are concerned – there are a plenty of on-line tools and desktop applications (usually written in Java). We will decide in favour of Bubbl.us as the web site and FreeMind as example of a free desktop tool.

Bubbl.us is a web2.0 on-line application written in Flash, and it’s quite fun to work with it – for example, a deleting node can explode, so be aware! There is a feature of export to several graphical formats, so you can have a big glyph of your project on the wall. You can register if you want to save your masterpieces (so called ‘lazy registration’). Minus is that if you have too many items it could work a bit slower.

Preparing project structure at bubble.us. Export to XML feature is available in the right bottom

FreeMind is a Java tool so you can use it on many operating systems. It is not as fun as the previous one but it provides extensive export capabilities (XHTML format as well which allows a user to create a mapped image with links to a folding outline) and has some extra features – you can provide nodes with icons, lock nodes (protect with password) and search within a single branch.

Preparing a project structure in FreeMind. XML is available as .mm-file

Since Fusebox supports ColdFusion and PHP platforms, instruments for both platforms are available.

ColdFusion implementations can be found in the Tools part of the fusebox.org site. Among them are:

  • Fuseminder2 – Converts Mind Maps to Fusebox 3
  • Fuseminder – Generates a Fusebox 2.0 framework based on a mind mapping file
  • FuseminderPlus – Fuseminder for Fusebox 3
  • FuseminderFB4 – Fuseminder for Fusebox 4
  • MindFuser – Reads a Fusebox 2.0 application and generates an outline file

You can easily download them and give them a try.

There is not so many tools written in PHP. One of a kind is the Fusebox Manager supporting several XML formats. This package implements a code generator that takes project definition and generates PHP code to implement the Fusebox methodology. The generated code uses a run-time PHP framework also provided within the package to deploy projects using this methodology all in PHP. For now it works in only one direction – it generates a Fusebox application from a mind map, but it’s planned to add backward function, so that you could use it for existing Fusebox projects to manage them visually and then save back as a bunch of PHP files.

Fusebox Manager at work

All in all, the day when you would be able to create a whole project by several movements of your mouse is not as far as you may think.

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Log in