Lose the faff, bring back the fun with toepoke.co.uk
Fork me on GitHub

Fluqi

Ease jQuery UI development with a Fluqi library

Fluqi

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.
To quickly prototype a screen.
Copy & paste the generated HTML and JavaScript ...
Or for .NET, build your widget requirements in code ...

My Panel 1

Oooh, this is panel 1.

My Panel 2

And this is panel 2.

My Panel 3

Funnily enough ...

... this is panel 3.

Why isn't there a library that encapsulates all the HTML and JavaScript rules and build the widgets for us?
Back to Top

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.

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:

I know what you're thinking ... I'll fire up my favourite browser, look up the settings and start copy & pasting. With Fluqi we just open our MVC View (or WebForm) and just type: 

DatePicker dt = Html.CreateDatePicker("dt")
	.Options
		.SetDuration("slow")
		.SetNumberOfMonths(2)
		.SetShowAnim(Animation.eAnimation.Explode)
		.SetShowButtonPanel(true)
	.Finish()
.Render()

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: 

DatePicker dt = Html.CreateDatePicker("dt")
	.Rendering
		.SetAutoScript(false)
	.Finish()
	.Options
		...
	.Finish()
.Render()

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: 

Bundle.JavaScript()
	.AddString( dt.GetStartUpScript(false) )
	.Render("~/_assets/fluqi-#.js")

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.

Back to Top

Getting Started

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.

  1. Download the latest assembly from github.
  2. Open a new or existing .NET project (MVC or WebForms .. it's all good) and add the fluqi.dll reference. *
  3. Add the following namespaces to your web.config (configuration/system.web/pages/namespaces

    This isn't 100% necessary, but does save having to add the namespaces you need on each page.

  4. Open up your View or WebForm and type “<% Html.Create” and Visual Studio intellisense will show you the way ..

Make sure you copy the fluqi.xml file along with the assembly ... this gives you the intellisense goodness.

Back to Top

Demos

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.

Altogether

Single page demo using Fluqi to build a pseudo application with many widgets working together.

Wizard Demo

WebForms

Not into ASP.NET MVC? No problem, you can use Fluqi in WebForms too.

We're all about progress enhacement here. If you're wanting postbacks, check out JuiceUI.

WebForms Demo
Back to Top

Articles

Written an article about Fluqi? Let us know and we'll add it here.

Back to Top

Download

The Fluqi library is open source and available for download in source and binary form github.

Back to Top

Share

blog comments powered by Disqus