The jQuery UI widgets are brilliant! They speed up web development
no end with those easy to use controls. The downside is remembering all the HTML mark-up and widget options!
I don't know about you but when I was developing my
5-a-side management website
I was forever going to the excellent jQuery UI documentation to read
up on the HTML and settings required to achieve what I wanted.
Take this accordion widget for instance ... hands up who knows the
mark-up and JavaScript off the top of their head?
Use the builder to set the widget options you want to use.
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.
Builder
The Widget builder is a simple website you can use
to configure your widget (tabs control, date picker, etc) no matter what
server-side technology
you're using.
Once your widget is configured, just click a button and we'll show you the HTML and JavaScript
to render your widget. Simply copy & paste the code into your own projects.
Fluent Interface
Fluqi itself is an .NET library for configuring the jQuery UI
widgets programmatically with a fluent interface. So how does it work?
Let's say for example you want to use the Datepicker widget,
but not just with the default settings. We also want:
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.
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:
We can then choose to render our JavaScript later:
dt.GetStartUpScript(false)
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.
To get Fluqi up and running with ASP.NET is really simple. The easiest way is to install the
NuGet package. If this isn't possible, the manual steps
are pretty easy too.
Hopefully we've given you an idea of what Fluqi can do for
you. Why not have a play with the demonstration projects, these are all included in the source
code too.