The OpenSocial Foundation cordially invites you to come and meet the developers and community leaders that are driving OpenSocial. This is your chance to learn more about what the various OpenSocial providers are doing and get involved in shaping the next version of the specification.

Oh, and now that OpenSocial 1.0 has been released, it’s time to celebrate! We’ll have a happy hour immediately following the State of the Union with lots of tasty food and cold beverages.

The State of the Union & 1.0 Release celebration will take place on May 18th from 1 – 6pm PDT. Our good friends at MySpace have graciously agreed to host event in their San Francisco offices. We hope to see you there!

Please RSVP at http://opensocial.eventbrite.com/

Posted by Dave Peck & Mark Weitzel on behalf of the OpenSocial Foundation

Lately I’ve ran into situations where I had to change elements or had to request a value in the DOM from Silverlight. jLight, which was introduced in an earlier article, can help with that. jQuery offers great ways to change CSS during runtime. Silverlight can access the DOM, but it isn’t as easy as jQuery. All examples shown in this article can be looked at in this online demo. The code can be downloaded here.

Part 1: The easy stuff

Selecting and changing properties is pretty straight forward. Setting the text color in all <B> </B> elements can be done using the following code:

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

The Css() method is an extension method on jQueryObject which is return by the jQuery.Select() method. The Css() method takes to parameters. The first is the Css style property. All properties used in Css can be entered in this string. The second parameter is the value you want to give the property. In this case the property is “color” and it is changed to “red”.

To specify which element you want to select you can add a :selector parameter to the Select() method as shown in the next example.

jQuery.Select("b:first").Css("font-family", "sans-serif");

The “:first” pseudo-class selector selects only the first element. This example changes the “font-family” property of the first <B></B> element to “sans-serif”.

To make use of intellisense in Visual Studio I’ve added a extension methods to help with the pseudo-classes.

In the example below the “font-weight” of every “Even” <LI></LI> is set to “bold”.

jQuery.Select("li".Even()).Css("font-weight", "bold");

Because the Css() extension method returns a jQueryObject it is possible to chain calls to Css(). The following example show setting the “color”, “background-color” and the “font-size” of all headers in one go.

jQuery.Select(":header").Css("color", "#12FF70")

                        .Css("background-color", "yellow")

                        .Css("font-size", "25px");

Part 2: More complex stuff

In only a few cases you need to change only one style property. More often you want to change an entire set op style properties all in one go.  You could chain a lot of Css() methods together. A better way is to add a class to a stylesheet and define all properties in there. With the AddClass() method you can set a style class to a set of elements. This example shows how to add the “demostyle” class to all <B></B> in the document.

jQuery.Select("b").AddClass("demostyle");

Removing the class works in the same way:

jQuery.Select("b").RemoveClass("demostyle");

jLight is build for interacting with to the DOM from Silverlight using jQuery. A jQueryObjectCss object can be used to define different sets of style properties in Silverlight. The over 60 most common Css style properties are defined in the jQueryObjectCss class. A string indexer can be used to access all style properties ( CssObject1[“background-color”] equals CssObject1.BackgroundColor). In the code below, two jQueryObjectCss objects are defined and instantiated.

private jQueryObjectCss CssObject1;

private jQueryObjectCss CssObject2;

public Demo2()

{            

    CssObject1 = new jQueryObjectCss

    {                                 

        BackgroundColor = "Lime",

        Color="Black",

        FontSize = "12pt",

        FontFamily = "sans-serif",

        FontWeight = "bold",

        MarginLeft = 150,

        LineHeight = "28px",                                 

        Border = "Solid 1px #880000"

    };

    CssObject2 = new jQueryObjectCss

    {

        FontStyle = "Italic",

        FontSize = "48",

        Color = "#225522"

    };

    InitializeComponent();

}

Now instead of chaining to set all different properties you can just pass one of the jQueryObjectCss objects to the Css() method. In this case all <LI></LI> elements are set to match this object.

jQuery.Select("li").Css(CssObject1);

When using the jQueryObjectCss objects chaining is still possible. In the following example all headers are given a blue backgroundcolor and the last is set to match CssObject2.

jQuery.Select(":header").Css(new jQueryObjectCss{BackgroundColor = "Blue"})

                        .Eq(-1).Css(CssObject2);

Part 3: The fun stuff

Having Silverlight call JavaScript and than having JavaScript to call Silverlight requires a lot of plumbing code. Everything has to be registered and strings are passed back and forth to execute the JavaScript. jLight makes this kind of stuff so easy, it becomes fun to use. In a lot of situations jQuery can call a function to decide what to do, setting a style class based on complex expressions for example. jLight can do the same, but the callback methods are defined in Silverlight.

This example calls the function() method for each <LI></LI> element. The callback method has to take a jQueryObject, an integer and a string as parameters. In this case jLight differs a bit from the actual jQuery implementation. jQuery uses only the index and the className parameters. A jQueryObject is added to make it simpler to access the attributes and properties of the element.

If the text of the listitem starts with a ‘D’ or an ‘M’ the class is set. Otherwise null is returned and nothing happens.

private void button1_Click(object sender, RoutedEventArgs e)

{

    jQuery.Select("li").AddClass(function);

}

private string function(jQueryObject obj, int index, string className)

{

    if (obj.Text[0] == 'D' || obj.Text[0] == 'M')

        return "demostyle";

    return null;

}

The last thing I would like to demonstrate uses even more Silverlight and less jLight, but demonstrates the power of the combination. Animating a style property using a Storyboard with easing functions. First a dependency property is defined. In this case it is a double named Intensity. By handling the changed event the color is set using jQuery.

public double Intensity

{

    get { return (double)GetValue(IntensityProperty); }

    set { SetValue(IntensityProperty, value); }

}

public static readonly DependencyProperty IntensityProperty =

    DependencyProperty.Register("Intensity", typeof(double), typeof(Demo3),

                                new PropertyMetadata(0.0, IntensityChanged));

private static void IntensityChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

    var i = (byte)(double)e.NewValue;

    jQuery.Select("span").Css("color", string.Format("#{0:X2}{0:X2}{0:X2}", i));

}

An animation has to be created. This code defines a Storyboard with one keyframe that uses a bounce ease as an easing function. The animation is set to target the Intensity dependency property defined earlier.

private Storyboard CreateAnimation(double value)

{

    Storyboard storyboard = new Storyboard();

    var da = new DoubleAnimationUsingKeyFrames();

    var d = new EasingDoubleKeyFrame

                {

                    EasingFunction = new BounceEase(),

                    KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1.0)),

                    Value = value

                };

    da.KeyFrames.Add(d);

    Storyboard.SetTarget(da, this);

    Storyboard.SetTargetProperty(da, new PropertyPath(Demo3.IntensityProperty));

    storyboard.Children.Add(da);

    return storyboard;

}

Initially the Intensity is set to 128 which results in a gray color. When one of the buttons is pressed, a new animation is created an played. One to animate to black, and one to animate to white.

public Demo3()

{

    InitializeComponent();

    Intensity = 128;

}

private void button2_Click(object sender, RoutedEventArgs e)

{

    CreateAnimation(255).Begin();

}

private void button3_Click(object sender, RoutedEventArgs e)

{

    CreateAnimation(0).Begin();

}

Conclusion

As you can see jLight can make the life of a Silverlight developer a lot easier when accessing the DOM. Almost all jQuery functions that are defined in jLight use the same constructions as described above. I’ve tried to stay as close as possible to the real jQuery. Having JavaScript perform callbacks to Silverlight using jLight will be described in more detail in a future tutorial about AJAX or eventing.

A constant drag when developing web sites have been when the end user wants to upload files to it. Luckily, though, those problems are to come to an end due to the File API.

What is it?

The File API is there to describe how interactions with files are handled, for reading information about them and their data as well, to be able to upload it.

There are two ways you can detect the files a user is trying to upload:

• Through an <input type="file"> element and its onchange event.
• By drag and drop you can use the ondrop event to detect which file(s) were dropped.

Code sample

Let’s take a look at an easy sample. First, for the onhange event for the <input type="file"> element, that element has a specific files property you can check:

	
	<input id="files-upload" type="file" multiple>

	var filesUpload = document.getElementById("files-upload");
	filesUpload.onchange = function () {
		// Access to data about all files
		var files = this.files;
	};

Similarily, for the ondrop event handler on virtually any element, you can check for file data in the event.dataTransfer property:

	<p id="drop-area">
		Drag and drop files here
	</p>

	var dropArea = document.getElementById("drop-area");

	// Needed for web browser compatibility
	dropArea.ondragenter = function () {
		return false;
	};

	// Needed for web browser compatibility
	dropArea.ondragover = function () {
		return false;
	};

	dropArea.ondrop = function (evt) {
		var files = evt.dataTransfer.files;
		return false;
	};

So, when we have a reference to the files to work with, we can iterate over them and read out their data:

	for (var i=0, il=files.length; i<il; i++) {
		file.name; // Get the name of the file
		file.size; // Get the size of the file, in bytes
		file.type; // Get the type of the file
	};

In my tests, the type of the file seems fairly consistent, but for Photoshop files, Firefox and Google Chrome reported different types (although both with Photoshop in their value ).

Demo

I have put together a demo of the File API in action, as a part of my HTML5 – Information and samples for HTML5 and related APIs testing ground, where you can upload files via a field or drag and drop.

Web Browser support

At this moment, this works in Firefox 3.6+ and latest Google Chrome and Safari. In Safari, though, it does support the API but seems unable to read out any information about the files.

Taking it to the next level

After you have read out the necessary data about the file(s), you can get the binary data by using a FileReader object and then use the XMLHTTPRequest object to post it to a web server. More information about that can be found in the FileReader documentation and in Paul Rouget’s article Interactive file uploads with Drag and Drop, FileAPI and XMLHttpRequest.

Happy filing!