My Panel 2

My Panel 3

What is Fluqi?

Fluqi was devised with the simple aim of making it easier to integrate
jQuery UI widgets into websites.
Fluqi helps in two ways; Firstly with a widget builder for setting the various
options, and secondly with a .NET API.

The above is fairly self-explantory, the important part from our perspective is the final line, .Render().
At this point Fluqi will output the HTML required to build the Datepicker, like so:

WOW... OK, so that was a little disappointing :) Perhaps the JavaScript that also gets rendered will be a little more
exciting.

And this is our finished Datepicker:

Delayed Rendering

Out of the box Fluqi is set to work with the minimum of fuss.
If you're thinking “Well this is all good, but I'm not having JavaScript being written out left, right and
centre”, don't worry, we're getting to that :).

As well as configuring how the jQuery widgets behave we can also tell Fluqi how
to behave. To stop the JavaScript being added automatically we simply turn that feature off:

The false flag indicates the document.ready jQuery start-up function should not be added.

External JavaScript

Next on the “I'm liking this, but it isn't exactly best practice”
list is the fact that the examples above are all inline JavaScript on the same page as the HTML. Whilst this is arguably OK if we're
only using a single widget, it can soon become quite large, increasing the download footprint to our users.

One way around this is to use the Builder to configure our widget options
and copy & paste the resulting code (urg!). A better solution is to employ SquishIt
which recently added a means to add dynamically generated JavaScript, compress it and write it out externally and benefit
from browser caching. The code snippet above then becomes:

I won't detail SquishIt
here, but to summarise the above snippet takes the JavaScript for building our date-picker,
minimises the code and writes the result
to an _assets folder. When the page is delivered to the browser the above is replaced with
a normal link to the JavaScript, but to the compressed version.