[Material] Sesión 1 WebMatrix : Intro a WebMatrix y Razor Sintax – ASP.NET WebPages

Hola!, les dejo la presentación de la primera charla de ciclo de WebMatrix, y los ejemplo de código con sintaxis Razor.

Update: Baja el WebCast para que lo veas Offline en :https://www107.livemeeting.com/cc/MSEvents/view?cn=guest&id=1032480605&pw=033A80CB

Web matrix session1

 

Códigos:

Saludos!
Nos vemos!
PD: Recuerda revisar los horarios de las próximas presentaciones.

[Tip]TimePicker, un Addon de DatePicker de JQueryUI en tus páginas ASP.NET

Navegando por la vida, y buscando una buena manera de ingresar en un campo de texto la fecha y la hora, me encontré con este “addon de un plugin”, suena bastante raro, pero es cierto, sirve para extender el control de jQueryUI DatePicker

El control DatePicker de JQuery UI

No me voy a explayar mucho en este tema, te recomiendo ver el excelente post que escribió ayer Joe Stanger:
http://www.msjoe.com/2011/03/using-jquery-ui-datepicker-in-an-asp-net-application/

Puedo decir sobre este control que es excelente, skineable, además localizable, esto es, podemos descargar el archivo de idioma que nos acomode.

image

Pero no provee la funcionalidad de selección de Hora- Minutos!
Como antes comentaba, me encontré con una solución bastante buena, la puedes revisar en el sitio web del autor:

http://trentrichardson.com/examples/timepicker/

Como siempre digo “Todos los aplausos para este colega!” y es que los vale, al agregar este addon a la funcionalidad del calendario nos vamos a encontrar con el siguiente resultado:

image

Como ves , podemos seleccionar la fecha y la hora, también mediante el seteo del plugin, podemos seleccionar ademas los segundos, o solo la hora, o visualizar varios meses a la vez con una simple configuración:

image  

image

Y todo esto seteando los archivos necesarios, lo que paso explicar en sencillos pasos:

Paso 1 – Los archivos necesarios

Bajé desde JQueryUI los archivos necesarios para que se visualizara el calendario, (ve el post de Joe Stanger), luego fui a la página del addon de timepicker y lo descargué, la estructura de carpetas es la siguiente:

image 

Paso 2 – Crear las referencias  los JS y CSS:

<script src=”js/jquery-1.4.1.min.js” type=”text/javascript”></script>

<script src=”js/jquery-ui-1.8.6.custom.min.js”
        type
=”text/javascript”></script
>
<script src=”js/jquery-ui-timepicker-addon.js”

        type=”text/javascript”></script>

<script src=”js/jquery.ui.datepicker-es.js”

        type=”text/javascript”></script>

<link href=”js/jquery-ui-1.8.6.custom.css” rel=”stylesheet”

      type=”text/css” />

<link href=”css.css” rel=”stylesheet” type=”text/css” />

Paso 3 – Aplicar el AddOn

Estos addon del plugin van asociados a elementos Text (o TextBox) de manera muy sencilla, pasemos a revisar los casos del ejemplo, (visita la página del autor para ver cantidades de ejemplos!)

 

<script type=”text/javascript”>

        $(document).ready(function () {

            $(‘#tx_fechahora’).datetimepicker();

            $(‘#tx_hora’).timepicker({});

            $(‘#tx_horasegundo’).datetimepicker({

                showSecond: true,

                timeFormat: ‘hh:mm:ss’,

                stepHour: 2,

                stepMinute: 10,

                stepSecond: 10

            });

            $(‘#tx_fechahora_3meses’).datetimepicker({

                numberOfMonths: 3

            });

        });

 

</script>

Los nombres de las cajas de texto son de cierta manera autoexplicativos, como verás es bastante simple, la atachas la funcionalidad al text, y puedes configurar, si quieres el datetimepicker completo, o solo el timepicker, también es posible setear el formato de la hora, si es que vas a mostrar los segundos, cada incremente en el Slide, la cantidad de meses a mostrar.

 
Por defecto, el Addon esta en ingles, pero puedes modificarlo en el archivo:

jquery-ui-timepicker-addon.js

En la sección:

this.regional[”] = { // Default regional settings

Y listo!

Como siempre, te dejo el ejemplo listo para que lo utilices:

image
Espero que te sirva!
Saludos!
Chalalo

SQL Server CE 4.0 , y el por que debería interesarnos.

Ya ha pasado un tiempo desde el anuncio sobre el release de SQL Server CE 4.0, pero quiero volver a tocar el tema, ya que es muy interesante lo que se puede lograr en ambientes web.

¿Que es lo SQL CE y por que debe interesarme?

Sql Server CE 4.0 es el nuevo miembro en la gama de productos SQL Server de Microsoft, pero la pregunta es ¿por que debería interesarnos?, las respuestas:

Es Gratis, no necesita un motor en el servidor y es compatible con las APIs de datos existentes.

Como decía, no se necesita instalar un motor en el servidor (al estilo SQL Lite), solo debemos copiar los binarios de SQL CE en la carpeta bin de nuestra aplicación. Tampoco se requiere cuenta de administrador en la maquina en la que va a correr.

Al no tener un motor corriendo, SQL CE corre junto con la aplicación ASP.NET y se “levanta” la primera ver que accedemos a la base SQL CE, esto es, si instanciamos un contexto o una nueva conexión de SQL CE.

Es además compatible con las API de Net para manejo de datos, y la sintaxis es compatible con SQL Server, si bien se puede utilizar EF y NHibernate, LinQ2SQL aún no está soportado.

Podemos entonces, utilizar esta base de datos, para nuestros proyectos con WebForms, ASP.NET MVC,  y ASP.NET Web Pages. Sirviéndonos para trabajar en ambientes de explotación y prueba, y este en un punto muy importante que marca la diferencia con versiones anteriores de SQL Server, ahora podemos utilizarlo sin problema en un servidor web. Es claro, que los ambientes de producción soportados, son más livianos,no hay que olvidar nunca que estamos hablando de una versión compacta.

En el caso que nuestro ambiente crezca, entonces, podemos migrar a SQL Server Express, que también es gratis, SQL Server o SQL Azure. Por ejemplo WebMatrix, permite la migración de SQL CE a una versión superior de manera sencilla, la opción está en la barra de tareas y no implica ninguna dificultad adicional (la migración es de datos, indices, tipos, esquema, etc, pero no de procedimientos ya que no están soportados en SQL CE, ok ok, estamos hablando de Compact!)

Las herramientas incluidas en Visual Studio SP1, dan soporte para utilizar SQL CE junto a ASP.NET, dentro de las acciones que podemos hacer tenemos:

  • Crear nuevas bases de datos SQL CE.
  • Crear tablas, y crear, modificar eliminar registros en ella
  • Setear claves para acceder a la base.
  • Utilizar el diseñador del Entity Framework para crear el modelo a partir del esquema.
  • Usar EF Code First para definir primero el modelo y luego crear la BD a partir de él.
  • Utilizar Web Deploy y migrar a SQL Server nuestra base SQL CE.

Una ves instaladas

Descarga Visual Studio SP1 desde acá:
http://www.microsoft.com/downloads/en/details.aspx?FamilyID=75568aa6-8107-475d-948a-ef22627e57a5&displaylang=en

Una vez instaladas las herramientas podrás agregar la BD a tu sitio web.

image

Luego ver las propiedades, setear, crear tablas sigue el mismo patrón de UI que las otras versiones de SQL Server.

image

El espacio de nombres a utilizar es el System.Data.SqlServerCe, puedes ver en el Object Browser los métodos y propiedades disponibles.

Espero que te haya servido de introducción
Saludos!
gonzalo

[HTML5] Wallaby , transforma de flash a HTML5

image

Hola, que tal? desde hace un tiempo hasta ahora ha crecido la tendencia del “No a Flash”, partiendo además de la decisión de Jobs de no dar soporte a este plugins en sus devices.
El divorcio entre Adobe y Apple produjo marejadas de comentarios y de juegos de poderes, pero al final, alguien tiene que ceder… y en mi opinión, un paso importante lo está dando Adobe con Wallaby, el objetivo es “convertir cualquier trabajo realizado con Flash CS5 a HTML5”, la idea es cumplir con lo estándares y llegar a la mayor cantidad de dispositivos.

Wallby esta construido sobre AIR, de esta manera podemos correrlo en OSX y Windows y en este pre release hay algunas características de Flash que no pueden exportarse, aunque según el sitio oficial, trabajan en ello para la versión final.

Descárgalo aquí

Te dejo un video que hice  explicando lo sencillo que es Sonrisa.

Cabe destacar la inclusión de la librería Jquery para dar soporte a la animación, pronto estaré comentando los detalles técnicos de la exportación.

Como siempre, espero que te sirva.

Saludos!
Gonzalo

[WebCast] Maratón de WebCast de WebMatrix & Razor

image

Hola!, los quiero invitar a una Maratón de WebCast de WebMatrix & Razor, vamos a crear un sitio paso a paso, no se lo pierdan, el orador ..yo Sonrisa

Serie de ASP.NET WebMatrix, el tercer y más nuevo miembro de la Familia de ASP.NET

Primera Sesión:
En la primera sesión de 5
Introducción con WebMatrix, Iniciándonos en la programación de las ASP.NET Web Pages utilizando la sintaxis Razor
Fecha: Viernes 25 de Marzo, 14:00 horas (Chile)
Duración: 1hora 15 minutos
Link:https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032480605&Culture=es-AR

Segunda Sesión:
En la Segunda sesión de 5
Utilizando plantillas con Razor para crear un Look & Feel consistente, manejo de datos con ASP.NET WebMatrix & Razor
Fecha: Martes 12 de Abril, 14:00 horas (Chile)
Duración: 1hora 15 minutos
Link:https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032480607&Culture=es-AR

Tercera Sesión:
En la Tercera sesión de 5
Agregando componentes en a nuestras páginas, Trabajo con imágenes, Video, Email, componentes de redes sociales a nuestras páginas con WebMatrix & Razor
Fecha:26 de Abril, 14:00 horas (Chile)
Duración: 1hora 15 minutos
Link:https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032480609&Culture=es-AR

Cuarta Sesión:
En la cuarta Sesión de 5
Agregando Seguridad y y MemberShip a nuestras páginas, Análisis de Tráfico y mejoramiento de performance del sitio mediante Caché.
Fecha:Viernes 13 de Mayo, 14:00 horas (Chile)
Duración: 1hora 15 minutos
Link:https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032480612&Culture=es-AR

Quinta Sesión:
Introducción al Debuggin con ASP.NET WebMatrix, customizando el comportamiento, creación de helpers y el salto hacia Visual Studio 2010
Fecha:24 de Mayo, 14:00 horas (Chile)
Duración: 1hora 15 minutos:

Link:https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032480618&Culture=es-AR

Nos vemos!!
Saludos,
Gonzalo

[Tip] Click Event en ASP.NET Chart

Hola, este es un tip rápido por una pregunta que me llegó al correo, y resumiendo la pregunta es “Se puede interactuar con el control chart de asp.net”, y la respuesta es:

SI, se puede implementar el código para que cuando se haga click en una porción del gráfico, puedas determinar el índice dentro del mismo y con esto ya tienes un valor con el que puedes, por ejemplo, ir a un grafico de nivel más detallado.

Epa!, si no sabías que existían, son totalmente gratis y los puedes descargar desde acá:
http://archive.msdn.microsoft.com/mschart

image

Nota: Si tienes Visual Studio 2010 y los quieres utilizar para fx 3.5 descarga la librería y agregas el control desde la toolbox.

Entonces, manos a la obra, tengo mi gráfico:

image

En la Page_Load Agrego el manejador y agregamos la información del índice al PostBackValue de cada elemento dentro de la serie, luego se le agrega el comportamiento en el lado del cliente , atachando en el onclick el llamado a la función getCoodinates que es generada por el ensamblado

AddHandler Me.Chart1.Click, AddressOf Chart1_Click

For Each series As Series In Me.Chart1.Series

   series.PostBackValue = "#INDEX"

Next

Dim postbackScript As String =

             ClientScript.GetPostBackEventReference(Me.Chart1, "chart:@")

Me.Chart1.Attributes("onclick") =
             postbackScript.Replace("@’", "’ + getCoordinates(event)")

Ahora simplemente creamos el método Chart1_Click

Protected Sub Chart1_Click(ByVal sender As Object, ByVal e As ImageMapEventArgs)
Dim indice As String = e.PostBackValue

 lb_seleccion.Text = Chart1.Series("Default").Points(indice).LegendText
End Sub

En donde se obtiene el índice y busco busco el punto con este índice, para obtener la leyenda y escribir en el label. Obviamente si tienes una colección de objetos, este índice te puede servir mucho y enviar como parámetro a otro método para lograr un nivel de detalle en la gráfica para la selección al hacer click.

Eso, espero que les sirva,


Saludos,

Gonzalo