paulo.arancibia

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