miércoles, 17 de agosto de 2011

jLight - Hablar con el DOM utilizando Silverlight y jQuery.



Con mayor frecuencia se ejecuta en un navegador web y, a menudo como un control. En muchos casos es necesario comunicarse con el navegador para obtener información sobre los cuadros de texto, eventos o detalles sobre el mismo navegador. Para ello puede utilizar JavaScript de Silverlight. Aunque Silverlight funciona de la misma en todos los navegadores, JavaScript no y no pasará mucho tiempo antes de que surjan problemas. Para superar las diferencias en el navegador me gusta usar jQuery . La única desventaja de esto es que existe un código mucho más necesario que se suele utilizar cuando se escribe en jQuery JavaScript.

Últimamente, he tenido que coger los cambios es el navegador de la barra de desplazamiento y actuar a la nueva posición. También tuve que mover la barra de desplazamiento cuando el usuario arrastra todo en la aplicación Silverlight. Con jQuery se cacahuetes para obtener y establecer los atributos correctos, pero me di cuenta que tenía que escribir una gran cantidad de código en el lado de Silverlight. Con una refactorización pocos que tenía un separan las tuberías en una nueva clase y podría llamar a sólo unos pocos métodos en que para obtener la misma cosa por hacer. La idea de jLight nació.

jLight vs jQuery

El objetivo principal de jLight es tomar la facilidad de uso de jQuery y lo pongo en Silverlight para controlar la interacción DOM. Por ejemplo, para cambiar el color del texto de un DIV al rojo, en jQuery que iba a escribir:

jQuery("div").css("color","red");

En jLight lo mismo se ve así:

jQuery.Select("div").Css("color","red");


Otro ejemplo. Para cambiar el desplazamiento en los últimos SPAN se podría escribir esto en jQuery:

jQuery("span:last").offset({left : 10, top : 100});


En este jLight haría lo mismo:

jQuery.Select("span:last").Offset(new {left = 10, top = 100 });


Callbacks

Nada especial hasta ahora. Para conseguir lo mismo hizo con el "normal" HtmlPage.Window.Eval , no requieren demasiado esfuerzo. Sin embargo, en el hilo de un controlador de eventos desde el navegador es una historia completamente diferente. Normalmente es necesario registrarse ScriptMembers , ScriptableTypes o escribir algo de código en JavaScript. jLight se encarga de la instalación de cañerías y le proporcionará una interfaz sencilla en la misma forma que jQuery.

Si usted desea para controlar el evento de desplazamiento del cuerpo de su página HTML, que tendrá que enlazar el evento usando jQuery y tienen una función de llamada a una función social en Silverlight. En el siguiente ejemplo supongo que hay un método "SomeMethod", y es registrado como un ScriptableObject como "RegisteredFromSilverlight" de Silverlight.

jQuery("body:first").scroll(function()
{

var sl = document.getElementbyId("SilverlightControl");
sl.content.RegisteredFromSilverlight.SomeMethod($(this));

});


El uso de Silverlight jLight el código sería aún más simple. El registro de RegisteredFromSilverlight como ScriptableObject se puede omitir. Además de eso, usted no tiene que escribir JavaScript o evaluar cadenas con JavaScript.

jQuery.Select("body:first").scroll(SomeMethod);


Lambdas

El uso de un lambda de Silverlight puede hacer que sea aún más simple. Cada uno es el equivalente de jQuery foreach en C #. Se llama a una función para cada elemento que se encuentra por jQuery. En este ejemplo, todos los elementos de entrada del tipo de texto seleccionado. El método FromObject se utiliza para crear un jQueryObject de un objeto que contiene un ScriptObject. El método de Val de jQuery se utiliza para obtener el valor de los elementos de entrada.

jQuery.Select("input:text").Each((element, index) =>{

textBox1.Text += jQueryObject.FromObject(element).Val();

return null;

});


Ajax

Una cosa jQuery es a menudo utilizado para realizar llamadas Ajax es. La realización de llamadas a los servicios a los servicios externos se puede hacer de Silverlight, pero tan fácil como usar jQuery. Como ejemplo me gustaría mostrar cómo jLight hace esto. A continuación se muestra el código subyacente de todo. Busca mi nombre en Twitter y muestra el resultado. Este ejemplo se puede encontrar en el origen del proyecto. El método GetJson pasa un Silverlight JsonValue a una devolución de llamada. Esta devolución de llamada ejecuta objetos Twit y los agrega a un control ListBox denominado TwitList.

public partial class DemoPage2 : UserControl

{

public DemoPage2()

{

InitializeComponent();

jQuery.Load();

}

private void CallButton_Click(object sender, RoutedEventArgs e)

{

jQuery.GetJson("http://search.twitter.com/search.json?lang=en&q=sorskoot", Done);

}

private void Done(JsonValue arg)

{

var tweets = new List();

foreach (JsonObject result in arg["results"])

{

tweets.Add(new Twit()

{

Text = (string)result["text"],

Image = (string)result["profile_image_url"],

User = (string)result["from_user"]

}

);

}

TwitList.ItemsSource = tweets;

}

}

public class Twit()

{

public string User { get; set; }

public string Image { get; set; }

public string Text { get; set; }

}


jLight se puede encontrar en:

http://adf.ly/2MYSJ

No hay comentarios:

Publicar un comentario