Chalalo Land

[ASP.NET] Juice UI Aires frescos para tus WebForms

Hola que tal? En este post voy a hablar un poco más de JuiceUI un plugin para Webforms que dar nuevos aires a tus formularios, encapsulando funcionalidad de jqueryUI y permitiendonos utilizar de manera sencilla en nuestras páginas.

Los componentes de jqueryUI que se incluyen en Juice son:

La url del proyecto es  http://juiceui.com/

Veamos un ejemplo, de inicio a fin utilizando JUICE,  vamos a crear un nuevo sitio web, para esto  voy a utilizar Visual Studio 2010, una vez creado vamos a utilizar el instalador de paquetes NuGet:

Escribimos JuiceUI en el buscador para obtener la librería y le damos Install.

Luego veremos instaladas las referencias, archivos javascript y css en nuestro proyecto.

En el web.config veremos que se agregó al referencia al ensamblado y nos indica cual es el prefijo para la utilización de los controles  en las páginas.

    <pages>

      <controls>

        <add assembly="JuiceUI" namespace="Juice" tagPrefix="juice" />

      </controls>

    </pages>

Ahora voy a incluir en la página de default.aspx un control Juice , el datapicker

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<h2>
  Prueba con JUICEUI
</h2>

  <p>

  <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

   <asp:TextBox runat="server" ID="TextBox1" />

   <juice:Datepicker ID="Datepicker1" runat="server" MinDate="-20" MaxDate="+1M +10D" TargetControlID="TextBox1" />

</p>

</asp:Content>

Vemos el resultado al ejecutar el proyecto:

Sigamos viendo algunos controles , como por ejemplo el botón, que funciona algo parecido al de jquerymobile, en donde puedes definir un href y luego decorarlo con css para que tenga la apariencia de un botón, de esta manera puedes hacer lo siguiente

<a href="http://www.chalalo.cl" id="link" runat="server">
       Ir a Chalalo.cl</a>

<Juice:button ID="Button1" TargetControlID="link" runat="server" />

Como te mencionaba existe una buena cantidad de controles, con excelente documentación para llegar y utilizar, muy fáciles de implementar con lo que le puedes dar un nuevo aire a tus formularios, te invito a revisarlos en http://juiceui.com/controls

Espero que te sirva!
Nos vemos!!
@chalalo