Juice UI: Open source ASP.NET Web Forms components for jQuery UI widgets
This morning at MVP Summit, Scott Hunter just announced a new open source project from appendTo called Juice UI. Juice UI is a collection of Web Forms components which make it incredibly easy to leverage jQuery UI widgets in ASP.NET Web Forms applications. You can start using it right away by adding the JuiceUI NuGet package to your app, and you're welcome to go nuts with the source, which is dual licensed under MIT and GPL.
What Juice UI does
jQuery UI is a library that's built on top of jQuery. It's got a lot of great widgets for common scenarios - things like date pickers, dialogs, and tabs - and they're all built on a really solid widget platform from some of the sharpest Javascript developers in the field. You've always been able to make use of these libraries using jQuery and jQuery UI, but the new Juice UI controls make it that much easier.
Example:
<asp:TextBox runat="server" ID="_Restrict" />
<Juice:Datepicker
runat="server"
TargetControlID="_Restrict"
MinDate="-20"
MaxDate="+1M +10D" />
Gives you this:
Included controls and behaviors
Juice UI is launching with 14 widgets and behaviors. You can see the whole list of controls at http://juiceui.com/controls, and they've all got interactive examples.
Here's the full list, linked to the documentation:
- Accordion
- Autocomplete
- Button
- Datepicker
- Dialog
- Draggable
- Droppable
- Position
- Progress Bar
- Resizable
- Selectable
- Slider
- Sortable
- Tabs
Walkthrough
Add the JuiceUI NuGet package
I'm going to start with a new ASP.NET 4 Web Forms project. I'll right click on the References folder, select Manage NuGet Packages..., and search for "juiceui"
The JuiceUI namespace
The NuGet package adds the JuiceUI namespace to my web.config, like this:
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0" />
<pages>
<controls>
<add assembly="JuiceUI" namespace="Juice" tagPrefix="juice" />
</controls>
</pages>
</system.web>
</configuration>
If needed, I remove that and use the <@Import Namespace="JuiceUI" /> directive to bring that namespace at the page level.
Using the Juice UI controls
You'll first need an <asp:ScriptManager> - you can add one to a page, or you can add one to your site's Master page.
<asp:ScriptManager id="_Script" runat="server" />
Now I can just start using the controls. These are extender controls, so you use the TargetControlID property to point the Juice UI behavior at an Web Forms server control. Here's a stripped down example that hooks up a DatePicker behavior to a TextBox:
<asp:TextBox runat="server" ID="DateSample" /> <Juice:Datepicker runat="server" TargetControlID="DateSample" />
And just because it's fun, I'll add a Draggable behavior that's pointed at a Panel:
<asp:Panel runat="server" ID="DragBox" Style="border:1px solid; width:100px;">
Hi. You can drag me around.
</asp:Panel>
<Juice:Draggable runat="server" TargetControlID="DragBox" />
Note: I'm keeping this really simple for illustration here - of course the style would go in CSS, etc. There are more sophisticated examples in the Juice UI samples included with the source code.
Running this page shows I've got just what you'd expect - a date picker on the textbox, and a draggable panel.
Here's the complete markup for that page:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="Juice_Sample._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager id="_Script" runat="server" />
<asp:TextBox runat="server" ID="DateSample" />
<Juice:Datepicker runat="server" TargetControlID="DateSample" />
<asp:Panel runat="server" ID="DragBox" Style="border:1px solid; width:100px;">
Hi. You can drag me around.
</asp:Panel>
<Juice:Draggable runat="server" TargetControlID="DragBox" />
</asp:Content>
And, in case you're interested, the widgets are hooked up using HTML5 data- attributes:
<input name="ctl00$MainContent$DateSample" type="text"
id="MainContent_DateSample"
data-ui-widget="datepicker" />
<div id="MainContent_DragBox"
data-ui-widget="draggable"
style="border:1px solid; width:100px;">
Hi. You can drag me around.
</div>
This seems familiar...
It's a very similar experience to the Ajax Control Toolkit, but using jQuery UI as an underpinning. That is, create Web Forms extender and script controls for all the widgets and effects in jQuery UI. Don't read anything into this - work is still continuing on Ajax Control Toolkit (in fact, there have been quite a few updates lately). The ASP.NET team's long term direction for client side scripting is jQuery, though, and Juice UI helps you to integrate with that really easily.
Finding out more
The best place to find out more about Juice UI is on the Juice UI site, which has interactive examples and documentation.
The source (including a sample project) is in the GitHub repository.
I'd recommend getting help either on StackOverflow (using the juiceui tag) or in the ASP.NET jQuery forum.