分享之Juice UI: 整合了jQuery UI的開源ASP.NET Web控件

前言 

這篇文章的原文來自Jon Galloway，想看原文的請猛戳鏈接。第一次接觸這個Juice UI是看到同事分享的郵件，當時只是粗略看看，不過感覺把jQuery UI整合到ASP.NET Web控件里去確實是個不錯的主意。今天偶然在網上看到了這篇文章，就動手把它翻譯過來，和大家分享。以下是譯文：

 

今天早上的MVP峰會上，Scott Hunter剛剛從appendTo網站新發布了一個開源項目，名字叫Juice UI。Juice UI是一個Web窗體控件的集合，並整合了jQuery UI。你可以通過添加JuiceUI NuGet package到你自己的應用中，立即就可以使用它。同時源碼是提供下載的（go nuts with the source）, 他的版權協議是基於MIT和GPL的。

 

 

Juice UI，能做什么？

jQuery UI 是一個構建在jQuery之上的UI庫。它為平常的場景提供了非常多且強大的部件，例如日期選擇期，對話框和選項卡等等；並且一些頂尖的js開發者（some of the sharpest Javascript developers in the field）參與開發提供了堅實的基礎。雖然你總是可以利用一些使用了jQuery和jQuery UI的庫，但是全新的Juice UI控件可以讓這些工作更簡單。

例如：

<asp:TextBox runat="server" ID="_Restrict" />
<Juice:Datepicker
     runat="server"
     TargetControlID="_Restrict"
     MinDate="-20"
     MaxDate="+1M +10D" />

執行這段代碼，就可以得到：

 

組件和行為

Juice UI 發布的時候就已經包括了14個部件或行為。如果你想查看全部控件列表的話，請點擊http://juiceui.com/controls, 並且提供互動例子讓我們更深入了解控件。

下面也列出了所有控件，點擊可直接轉到相應文檔：

• Accordion
• Autocomplete
• Button
• Datepicker
• Dialog
• Draggable
• Droppable
• Position
• Progress Bar
• Resizable
• Selectable
• Slider
• Sortable
• Tabs

 

實戰

• 添加JuiceUI NuGet package

打開VS2010，創建項目前請確保VS2010已安裝了NuGet插件。創建一個ASP.NET 4 Web Forms項目。右擊項目中的References文件夾，選擇Manage NuGet Packages..., 然后找到 "juiceui"，點擊安裝。

 

• JuiceUI 的名字空間

通過NuGet package添加JuiceUI時，NuGet會自動的把Juice UI的名字空間寫入到你的web.config文件里, 比如:

<configuration>
    <system.web>
        <compilation debug="true" targetFramework="4.0" />
        <pages>
            <controls>
                <add assembly="JuiceUI" namespace="Juice" tagPrefix="juice" />
            </controls>
        </pages>
    </system.web>
</configuration>

如果確實需要Juice UI名字空間的話，通常我會移除上面這段config，在頁面中使用<@Import Namespace="JuiceUI" />指令來添加名字空間。

 

使用Juice UI控件

首先，你需要一個<asp:ScriptManager> - 把它添加到一個頁面上或者你site的Master頁面上。

<asp:ScriptManager id="_Script" runat="server" />

添加完成后，你就可以使用控件了。這些都是擴展控件，所以你需要使用TargetControlID屬性來指出哪個Web窗體控件將擴展Juice UI的行為。這兒有一個精簡了的例子，將DatePicker行為與一個TextBox掛鈎：

<asp:TextBox runat="server" ID="DateSample" />
<Juice:Datepicker runat="server" TargetControlID="DateSample" />

另外我把一個可拖拽（Draggable ）的行為指向一個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" />

需要注意的是，這只是非常簡單的例子並且沒有CSS。在Juice UI源碼里有很多更復雜的Juice UI樣例。

運行這個頁面，我們將會看見我們所期待的：一個擁有日期選擇器的textbox和一個可以拖拽的panel。

下面是這個頁面的源代碼：

<%@ 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>

如果你有興趣的話，在瀏覽器中查看網頁的源代碼，你會發現web控件和JuiceUI行為已經整合了，使用的是HTML5的data-屬性:

<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>

似乎很熟悉...

確實，Juice UI用起來非常像Ajax Control Toolkit，但它的核心是jQuery UI。從另一方面說，它是為所有jQuery UI里的部件（widgets）和效果（effects）創建了Web窗體擴展和腳本控制。

更多...

想要尋找更多關於Juice UI的資料？最好的地方是Juice UI site，里面有提供互動的例子和文檔。

需要源代碼的，可以從GitHub repository下載，里面包含了一個樣例項目。

最后，特別推薦的是StackOverflow (using the juiceui tag)和ASP.NET jQuery forum，經常逛逛可以獲得不少幫助。

 

后記

個人覺得，Juice UI要被廣泛接受還需要走很長的一段路，畢竟Ajax control Toolkit在不斷更新，其長期發展方向也是jQuery，所以競爭力很強。不管怎樣，Juice UI為我們提出了一個新的思路去整合現有的前端JS框架。Bonne idée, c'est parti!