paulo.arancibia

Tal como prometí ayer, aquí les dejo el código de las demos que estuve presentando y algunos enlaces que les serán de utilidad.

Download Snow Shop

Download Xbox 360 Showcase

Download Flextreme Color Selector

Bea Costa Blog

Download My Printer 3D

Erain ZAM 3D

Download Demo 3D

3D Tools for WPF

Espero la hayan pasado tan bien como yo en el Code Camp y nos vemos el año próximo.

Astoria nos permite exponer facilmente datos a través de un servicio WCF, estos recursos los podemos navegar al estilo REST y para manipularlos utilizamos los verbos HTTP, también tenemos la posibilidad de elegir el formato en el que queremos consumir los datos, que puede ser XML, JSON o RDF.

Para trabajar con Astoria necesitamos tener instalado Visual Studio 2008 Beta 2, ADO.NET Entity Framework Beta 2, ADO.Net Entity Framework Tools August 07 CTP y por supuesto la ultima CTP de Astoria.

Comenzaremos creando un nuevo sitio web, como se ve debajo en la imagen.

A nuestro sitio web le agregaremos un ADO.NET Entity Data Model.

Seleccionamos la opción Generate from Database.

Elegimos la base de datos de la cual obtendremos la data a exponer por el servicio.

Seleccionamos los objetos a utilizar.

Concluidos estos pasos ya tenemos listo nuestro modelo de datos.

Ahora crearemos un nuevo Web Data Service.

Al cual configuraremos para que utilice nuestro modelo de datos.

using System;

using System.Collections.Generic;

using System.Data;

using System.Data.Objects;

using System.ServiceModel.Web;

using System.Linq;

using Microsoft.Astoria;

namespace AstoriaDemo

{

public class OranjeService : WebDataService<OranjeDataModel>

{

}

}

Para finalizar seteamos como Set As Start Page al mismo, luego abrimos el archivo web.config y agregamos la siguiente línea dentro de la sección appSettings, para poder consultar los datos en formato JSON.

<appSettings>

<add key=“EnableAstoriaJSONP“ value=“true“/>

</appSettings>

Presionamos F5 y deberíamos obtener las referencias a nuestras entidades de datos, en este caso Players y Clubs.

Si quisiera ver el listado de todas las jugadoras solo debo ingresar la siguiente Uri.

http://host/OranjeService.svc/Players

También podemos utilizar algunos filtros para procesar los datos, por ejemplo si quisiera obtener el listado de jugadoras ordenadas por posición, solo debo ingresar la siguiente consulta.

http://host/OranjeService.svc/Players?$orderby=Position

Si queremos ver los datos de la jugadora con el PlayerId 11.

http://host/OranjeService.svc/Players[11]

Y por ultimo para obtener datos en formato JSON lo hacemos de la siguiente manera.

http://host/OranjeService.svc/Players[11]?$format=json

[

{

__metadata: {

Type: "Players", Base: "http://localhost:49183/OranjeService.svc", Uri: "Players[11]“

}, Age: 28, Caps: 242, Clubs: {

__metadata: {

Uri: “Players[11]/Clubs”

}

}, Description: “Minke Smabers (born March 22, 1979 in Den Haag, Zuid-Holland) is a field hockey midfielder from the Netherlands, who played more than 200 international matches for the Dutch National Women\’s Team. Her current team is Laren.”, Name: “Minke Smabers”, Number: 13, Picture: “../images/13.jpg”, PlayerId: 11, Position: “MF “

}

]

Esta es solo una pequeña introducción a Astoria si están interesados en seguir investigando sobre el mismo a continuación les dejo algunos enlaces a recursos interesantes.

Microsoft Codename “Astoria”
http://astoria.mslivelabs.com/

Download Microsoft Codename “Astoria” September 2007 CTP
http://www.microsoft.com/downloads/details.aspx?FamilyId=0FA1413C-CB55-4577-960E-0F3491847F58&displaylang=en

Download ADO.NET Entity Framework Beta 2
http://www.microsoft.com/downloads/details.aspx?FamilyId=F1ADC5D1-A42E-40A6-A68C-A42EE11186F7&displaylang=en

Download ADO.Net Entity Framework Tools Aug 07 CTP
http://www.microsoft.com/downloads/details.aspx?familyid=09A36081-5ED1-4648-B995-6239D0B77CB5&displaylang=en

Project Astoria Team Blog
http://blogs.msdn.com/astoriateam/

Pablo Castro’s blog
http://blogs.msdn.com/pablo/

Channel9 - Pablo Castro: Astoria Data Services
http://channel9.msdn.com/Showpost.aspx?postid=305985

Mix07 - XD006 Accessing Data Services in the Cloud
http://sessions.visitmix.com/default.asp?event=1011&session=2011&pid=XD006&disc=&id=1573&year=2007&search=XD006

Hoy veremos cómo rotar elementos en Silverlight 1.0, comenzaremos viendo el código XAML.

<Image Width=“485“ Height=“352“ Canvas.Top=“0“ Canvas.Left=“0“ Source=“images/control.png“/>

<Canvas x:Name=“rotateCanvasDial“ Width=“190“ Height=“190“ Canvas.Left=“180.554“ Canvas.Top=“99.313“ Background=“Transparent“ RenderTransformOrigin=“0.5,0.5“ Canvas.ZIndex=“1“>

<Canvas.RenderTransform>

<TransformGroup>

<RotateTransform x:Name = “canvasRotateDial“ CenterX=“0“ CenterY=“0“ Angle=“0“/>

</TransformGroup>

</Canvas.RenderTransform>

<Image x:Name=“dial“ Width=“190“ Height=“190“ Canvas.Left=“0“ Canvas.Top=“0“ Stretch=“Fill“ Source=“images/dial.png“/>

<Ellipse MouseMove=“rotateMouseMove“ MouseLeftButtonDown=“rotateMouseDown“ MouseLeftButtonUp=“rotateMouseUp“ Cursor=“Hand“ x:Name=“rotateHandleDial“ Width=“190“ Height=“190“ Fill=“Transparent“ Canvas.Left=“0“ Canvas.Top=“0“/>

</Canvas>

En primera instancia creamos un Canvas con una RotateTransform que será la encargada de girar el elemento, luego agregamos una imagen que será el elemento visual a rotar y una elipse que lo cubre, a esta elipse le agregue tres eventos MouseMove, MouseLeftButtonDown y MouseLeftButtonUp.

En la parte JavaScript, lo primero que haremos será declarar unas variables para diferentes parámetros que luego utilizaremos.

var lastPosition = 0;

var beginAngle = 0;

var isMouseDown = false;

var rotateCanvasName;

var rotateTransformName;

var imageZIndex = 0;

var rotateZIndex = 1;

En el evento MouseLeftButtonUp ,cambiamos el valor de la variable rotateMouseUp y liberamos al mouse.

function rotateMouseUp(sender, args)

{

isMouseDown = false;

sender.releaseMouseCapture();

}

En MouseLeftButtonDown, activamos la captura del mouse, cambiamos el valor de la variable isMouseDown y registramos la última posición del cursor del mouse.

function rotateMouseDown(sender, args)

{

sender.captureMouse();

isMouseDown = true;

lastPosition = args.getPosition(null);

objectName = sender.name;

rotateCanvasName = “rotateCanvasDial”;

rotateTransformName = “canvasRotateDial”;

}

Por último en el evento MouseMove capturamos la posición actual del cursor, seleccionamos la RotateTransform a utilizar, calculamos el CenterPoint y el ángulo dependiendo de los movimientos del mouse.

function rotateMouseMove(sender, args)

{

var position = args.getPosition(null);

if (isMouseDown)

{

var rotate = sender.findName(rotateTransformName);

var centerPoint = {};

canvasLeft = sender.findName(rotateCanvasName)["Canvas.Left"];

canvasTop = sender.findName(rotateCanvasName)["Canvas.Top"];

canvasWidth = sender.findName(rotateCanvasName).width;

canvasHeight = sender.findName(rotateCanvasName).height;

centerPoint.X = canvasLeft + canvasWidth/2;

centerPoint.Y = canvasTop + canvasHeight/2;

var radiansToDegrees = 360 / (2 * Math.PI);

var lastAngle = parseInt(Math.atan2(lastPosition.Y - centerPoint.Y, lastPosition.X - centerPoint.X) * radiansToDegrees);

var currentAngle = parseInt(Math.atan2(position.Y - centerPoint.Y, position.X - centerPoint.X) * radiansToDegrees);

var deltaAngle = currentAngle - lastAngle;

rotate.Angle += deltaAngle;

beginAngle += deltaAngle;

lastPosition = position;

}

}

Al ejecutar nuestro ejemplo se debería de ver como en la siguiente imagen.

El próximo 24 de Octubre en las instalaciones de la UADE se estará desarrollando el Code Camp Buenos Aires 2007, en el mismo Southworks va a tener una importante participación, por un lado Johnny Halife y Augusto Alvarez estarán presentando a DinnerNow, por el otro, Alejandro Jack y yo vamos a estar hablando sobre User Experience y Smart Clients.

Esta es una gran oportunidad para que puedan conocer a muchos de los miembros de nuestro equipo y el trabajo que realizamos en Southworks.

A continuación les dejo el enlace a la página del Code Camp donde podrán registrarse, ver la agenda de charlas a realizarse y sus horarios.

Code Camp Buenos Aires 2007

Hoy les mostrare como hacer drag and drop de un objeto cualquiera utilizando Silverlight 1.0.

Para comenzar he creado un simple rectángulo al cual le he agregado tres eventos, uno para el evento MouseLeftButtonDown, otro para MouseLeftButtonUp y finalmente uno para MouseMove.

<Rectangle MouseLeftButtonUp=“onMouseUp” MouseLeftButtonDown=“onMouseDown“

MouseMove=“onMouseMove“ Width=“100“ Height=“100“ Fill=“#FF095B8D“ RadiusX=“10“ RadiusY=“10“ StrokeThickness=“5“ Canvas.Left=“10“ Canvas.Top=“10“/>

Pasando a la parte JavaScript, he declarado tres variables, dos para conocer la posición inicial del objeto a mover y otra para saber si estamos arrastrando o no el objeto.

var beginX;

var beginY;

var trackingMouseMove = false;

En el evento MouseDown, capturo la posición X e Y del mouse y las asigno a sus respectivas variables, también cambio el valor de la opacidad así vemos como cambia mientras lo arrastramos a 0.5, seteamos la variable trackingMouseMove a true y con sender.captureMouse() nos aseguramos de que este objeto sea el único que recibe eventos del mouse.

function onMouseDown (sender, mouseEventArgs)

{

beginX = mouseEventArgs.getPosition(null).x;

beginY = mouseEventArgs.getPosition(null).y;

sender.Opacity = .5;

trackingMouseMove = true;

sender.captureMouse();

}

En el evento MouseUp, solo seteamos la variable trackingMouseMove a false, y cambiamos al opacidad a 1.

function onMouseUp (sender, mouseEventArgs)

{

sender.releaseMouseCapture();

trackingMouseMove = false;

sender.Opacity = 1;

}

Para finalizar en el evento MouseMove consultamos la posición actual de X e Y para asignárselas a las propiedades Canvas.Left y Canvas.Top de nuestro objeto.

function onMouseMove (sender, mouseEventArgs)

{

if (trackingMouseMove == true)

{

var actualX = mouseEventArgs.getPosition(null).x;

var actualY = mouseEventArgs.getPosition(null).y;

sender["Canvas.Left"] += actualX - beginX;

sender["Canvas.Top"] += actualY - beginY;

beginX = actualX;

beginY = actualY;

}

}

El ejemplo terminado debería de lucir como se ve a continuación.

En el último refresh del SDK de Silverlight 1.1, se han agregado más user controls de ejemplo, entre los cuales se encuentran un button, un par de sliders, algunas scrool bars y un listbox.

Como verán la estética no es de lo mejor.

Pero con un poco de trabajo y la ayuda de Expression Blend 2 August Preview.

Podemos personalizarlos a nuestro gusto.

Download Silverlight 1.1 SDK Alpha Refresh September 2007

Entre los controles que componen ASP.Net Futures, se encuentra el SearchDataSource, el nombre mismo del control me llamo la atención y me puse a investigar un poco su funcionamiento, este control nos permite integrar fácilmente búsquedas en nuestros sitios web, las cuales pueden provenir de diferentes providers, yo lo probé contra Live Search, pero es posible crear nuestro propio provider.

Para comenzase necesitamos tener ASP.Net Futures July 2007 CTP y Visual Studio 2008 instalado en nuestra PC, luego nos dirigiremos a http://search.msn.com/developer para conseguir la clave que nos permitirá consultar el servicio de búsquedas de Live Search, para ello seleccionaremos Create and Manage Application IDs, luego de ingresar nuestra LiveID nos dirigiremos a Get a new AppID y terminado este paso anotaremos el ID que hemos generado.

Ahora crearemos un proyecto ASP.NET Futures Web Site tal como se ve en la siguiente imagen.

Abrimos el web.config y nos dirigimos a la siguiente sección para configurarla.

<providers>

<add name=“WindowsLiveSearchProvider“

type=“Microsoft.Web.Preview.Search.WindowsLiveSearchProvider, Microsoft.Web.Preview“

appID=“xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx“

siteDomainName=“xxxxxx.xxxx.xxx“ />

</providers>

En appID ingresaremos el ID que generamos previamente y en siteDomainName añadiremos el nombre de dominio contra el que queremos hacer consultas, si lo que desean es hacer búsquedas en toda la web eliminen esta propiedad.

Abrimos el archivo Default.aspx en nuestro proyecto y agregamos un TextBox con el nombre TextBoxSearch y un Button con el nombre ButtonSearch, luego arrastraremos el SearhcDataSource a nuestra página y lo configuraremos de la siguiente manera.

<asp:SearchDataSource ID=”SearchDataSource1″ runat=”server”>

<SelectParameters>

<asp:ControlParameter ControlID=”TextBoxSearch” Name=”query” />

</SelectParameters>

</asp:SearchDataSource>

Terminado esto arrastraremos también un control ListView, el cual configuraremos de la siguiente forma para mostrar el resultado de nuestras consultas.

<LayoutTemplate>

<ul id=”itemcontainer” runat=”server” ></ul>

</LayoutTemplate>

<ItemTemplate>

<li>

<ul>

<a href=’<%# Eval(”Url”) %>‘> <%#Eval(“Title”) %></a><br />

<%#Eval(“Description”) %><br/>

<a href=’<%# Eval(”Url”) %>‘> <%#Eval(“Url”) %></a><br />

</ul>

</li>

</ItemTemplate>

</asp:ListView>

Para finalizar configuraremos el evento click de ButtonSearch para que haga el DataBind de nuestro SearchDataSource.

protected void ButtonSearch_Click(object sender, EventArgs e)

{

SearchDataSource1.DataBind();

}

Ya con esto tenemos todo listo, cabe aclara que este servicio solo nos provee diez resultados por consulta lo cual a mi entender es muy poco, pero como dije anteriormente tenemos la posibilidad de crear nuestro propio provider con lo cual podemos subsanar esta limitación, después de esta aclaración podemos pasar a probar nuestra aplicación, la cual debería lucir más o menos como en la siguiente imagen.

Si desean conocer más acerca de este control y de cómo crear sus propios providers, a continuación les dejo algunos links que les serán de utilidad.

• Microsoft ASP.NET Futures (July 2007)
• Enabling Search for your Web Site with ASP.NET AJAX
• Search Provider Example