Fluqi Makes JQuery Simpler

Posted by Roopesh Shenoy on Feb 14, 2012

Sections

Development

Topics

jQuery ,

ASP.NET WebForms ,

Javascript ,

ASP.NET MVC ,

ASP.NET ,

Web Development ,

Dynamic Languages ,

.NET Framework ,

.NET ,

Languages ,

Open Source ,

Programming ,

Fluqi

Share |

RELATED Research

Fluqi provides a generic Widget builder for JQuery that allows you to visually create and customize JQuery UI widgets and then use the generated markup and JavaScript in your own application. It also provides a .NET API, in form of a fluent interface to use and configure JQuery UI controls in your server side code.

The Fluqi widget builder shows you a preview of your configured widget and generates the corresponding C# and HTML+JavaScript code. You can use either if you are using ASP.NET, or you can just use the latter if you are using a different stack. 

A sample of how the ASP.NET code would look with the markup –

<%
var ac = Html.CreateAccordion("ac")
    .Options
        .SetCollapsible(true)
    .Finish()
    .Events
        .SetCreateEvent("return createEvent(event, ui);")
        .SetChangeEvent("return changeEvent(event, ui);")
        .SetChangeStartEvent("return changeStartEvent(event, ui);")
    .Finish()
    .Panels
        .Add("My Panel 1")
        .Add("My Panel 2", true)
        .Add("My Panel 3")
    .Finish()
;
%>
 
<%using (ac.RenderContainer()) {%>
    <%using (ac.Panels.RenderNextPane()) {%>
        <p>Proin ...</p>
    <%}%>
    <%using (ac.Panels.RenderNextPane()) {%>
        <p>Morbi ...</p>
    <%}%>
    <%using (ac.Panels.RenderNextPane()) {%>
        <p>Mauris ...</p>
    <%}%>
<%}%>

The server side code generates the HTML and JavaScript at run-time, with an added bonus that Developers can also bunch together the generated JavaScript for all the widgets created in a single file download (using another open source library called SquishIt).

At its core, Fluqi is an open source library built on .NET, with C# classes corresponding to JQuery widgets – Accordion, AutoComplete, DatePicker, Dialog, ProgressBar, PushButton, Slider and Tab – along with rendering classes to generate markup and JavaScript for the corresponding JQuery widget. These classes are used by the Fluqi website (used to visually configure JQuery widgets) and also exposed as the .NET API.

Fluqi is available as a Nuget Package for usage with both ASP.NET MVC and Web Forms.

1. Back to top

   confusion

   by Georgii Dolzhykov

   Please correct: should be 'jQuery UI widgets', not 'jQuery widgets'. jQuery UI is a separate project.

   Reply