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

wijmo_juice1[1]

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:

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

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:

image

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

image

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

image

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:

image

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

image

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

image

Espero que te sirva!
Nos vemos!!
@chalalo

2 comentarios en “[ASP.NET] Juice UI Aires frescos para tus WebForms”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *