Adam Kinney posts tagged with 'javascript'

Silverlight 1.0 Fire Starter video site is now live

Adam Kinney — Fri, 04 Jan 2008 19:53:00 GMT

On November 29th 2007, a group of people gathered together to study Silverlight. "What is it, really?", "What can I do with it today?" and "There really is more than just a Media?" were all questions answered that day. Video and audio of the event has been captured on the Silverlight 1.0 Fire Starter video site, a newly inducted member of the MIX University.

You can stream the videos directly within the site or you can download the sessions in video and audio format.

The session titles are as follows:

An Introduction to Silverlight - Mithun Dhar
Getting Started Programming Silverlight - Jesse Liberty
Workflow of Silverlight with Expression and Visual Studio - Arturo Toledo
Silverlight XAML - Laurence Moroney
A Development Story - Adam Kinney
Media, Markers and More - Ernie Booth
Popfly and Silverlight - Adam Nathan
Silverlight in the Future - Ernie Booth

As an added bonus, if you like the design or interactivity of the site feel free to grab the source code. The code is not been specially prepared for review, but the code managing the HTML and Silverlight integration may be particularly interesting.

Enjoy the content and thanks to all of the attendees who showed up and really made the event a fun time!

Consuming JSON data with Silverlight

Adam Kinney — Wed, 19 Dec 2007 10:22:00 GMT

How would I use JSON data with Silverlight?

I've been asked this a few times and it happened again today. So tonight is the night to write a quick tutorial on how easy it is to do this. You can start from scratch or from any Silverlight 1.0 template, but I will be walking through the steps using Visual Studio 2008.

First step is to create the project.

File -> New -> WebSite... -> Silverlight Script Web

Now we need some JSON data. I'm going to grab the latest posts from Twitter using their simple and sweet API. All I need to do is add a reference to the API and add a callback function to be called once the data has been received. In the project template, I placed this line below the script block that contains the createObjectEx function.

<script type="text/javascript" src="http://twitter.com/statuses/public_timeline.json?callback=twitterCallback"></script>

Now to handle the loading of the data. Within the script block containing the createObjectEx function, we first define a couple of global variables at the top. twitterData is used to store the JSON data and scene will act as a reference to our Silverlight Application class.

var twitterData; var scene;

Modify the Silverlight class constructor to use the newly declared scene variable by removing the var from the line below.

var scene = new YourProjectName.Scene();

Next, add the twitterCallback function.

function twitterCallback(obj) { twitterData = obj; scene.loadData(); }

Now open up you Silverlight application class file. In the project template, the default name is Scene.js.

Remove all of the functions except for the handleLoad function.
Within the handleLoad function, remove the sample event hookup code so you are left with the plugIn definition line.
In the handleLoad function, add a property for the rootElement:

this.root = rootElement;

Add the new loadData function defined below (make sure you leave a comma between handleLoad and loadData function definitions):

loadData: function(){ var item; for(i=0;i<5;i++){ item = this.plugIn.content.createFromXaml('<Canvas><Image Source="' + twitterData[i].user.profile_image_url + '" /><TextBlock Canvas.Left="54">' + twitterData[i].user.name + '</TextBlock></Canvas>'); item["Canvas.Top"] = i*54; this.root.children.add(item); } }

The above function loops through the first 5 posts and creates a new Silverlight object for each one using their name and profile image. createFromXaml is the magic function which takes a string, parses it and returns an object. The string could come from anywhere, often a separate .xaml file accessed via a downloader object. Once the object is made the top position is based of the index, which causes the items to be vertically stacked. Then the new object is added to the this.root which is a reference to the main Canvas defined in the handleLoad function above.

Now the last step is to open up the Scene.xaml file and remove all of the lines except for the outermost Canvas element.

And that's it! Seriously, hit F5, run your project and you should see something like this:

Now enjoy and run with it. Hopefully this short tutorial will help you in your quest to create JSON-based Silverlight applications or at least a new Silverlight-based Twitter widget.

CoolWall - a Silverlight 1.0 application reflection

Adam Kinney — Thu, 13 Dec 2007 23:48:00 GMT

[UPDATE:My video interview is now live on Channel 10]

A large amount of my time last week was spent on a little project called Microsoft CoolWall. Tim Sneath already posted about the site going live this week and provided the story on how the app came to be:

The application was originally prototyped with the Silverlight 1.1 Alpha by Dot Net Solutions, a UK-based solutions integrator firm, and as a bit of fun, Adam agreed to try back-porting it to Silverlight 1.0 to see whether everything they'd implemented in C# could be as easily accomplished in JavaScript. I've noticed a certain preconception that Silverlight 2.0 is the "one to wait for" because it's the platform that allows you to use a "proper" language like C# or Visual Basic. Of course, having .NET languages, the base class libraries and technologies like LINQ will make RIA development a ton easier, but it's impressive what you can get out of JavaScript, particularly when coupled with the client-centric Microsoft AJAX Library.

The application resulted in a great way for me to "walk the walk" and not just "talk the talk". The "talk" I am referring to is the idea that "Yes, you can build more than a Media Player in Silverlight 1.0". (Although the folks behind the MNet.com project certainly didn't need to hear me say that. Yes, it plays videos, but it has built clip editing, banner ad system and web service integration).

JavaScript-heavy applications are not a new thing obviously in the AJAX age, but they are for some of those watching SIlverlight from a .NET standpoint. Sure you don't have the luxury of the CLR or even full controls at this point, but you can still do a lot with Silverlight in its current form. This isn't a full case study, but I thought I'd review some of the concepts behind developing the CoolWall application. And first off, I may not be a JavaScript guru look some of those masters at Ajaxian, but I try.

Application model
Silverlight project templates in Visual Studio start you off with a JavaScript function with a few functions defined within the prototype of that function. This is analogous to a class in C# with an empty constructor and a few methods defined. This class, specifically the handleLoad function, is then referenced by the provided createSilverlight method which is called to instantiate your application.

CoolWall.Container = function() { } CoolWall.Container.prototype = { handleLoad: function(control, userContext) { this.control = control; ... } }

I built out my application using this model and as the complexity increased I broke out certain functionality into other "modules". While simplifying the code it also allowed me to reuse some of the classes, in the case of the button, as well as control the application initialization. The control was necessary do to some of the events fire asynchronously and I needed to ensure all elements were created by the time they were needed.

Most every class also had a physical representation on the screen and linked directly to existing XAML that was created. In some cases the XAML from the main file is handled by separate modules and in other cases the XAML is loaded dynamically along with a new instance of the class.

UserControl Pattern
The buttons defined above and the image items that you drag into place were handled via a pattern to define user controls. The XAML comes from a separate file which is downloaded by a Downloader object, which stores the XAML in a string variable when the application loads. Then when the time comes to instantiate a new control, the createFromXAML method is used passing the stored XAML string as parameter which then returns a Silverlight object, in this case they were Canvases with children of their own. Then the object is added to the children collection of a canvas which lives within the main XAML.

To provide the interaction and integration a new JavaScript class, defined using the pattern above, is instantiated and a reference to the newly created Silverlight object is passed in the constructor. In this case, the newly created JavaScript object is then added to an Array in order to maintain a reference for the application state and cleanup.

draggableImage = this.control.content.createFromXaml(this.xamlString, true); ... this.items[i] = new CoolWall.DraggableImage(this, draggableImage, imageUrl, ...);

HTML Control Integration
One of the first things you notice when investigating Silverlight for development is that there are no controls. This may seem alarming, and yes, I am really looking forward to version 2.0 and its control set, but there is hope.

The integration between the Silverlight DOM and the JavaScript DOM is so well done there is no problem traversing the trees to get to HTML-based controls (you can even make it to other rich objects on the page). Now the only other thing to think about is that by default the Silverlight instance is windowed like a combo box or most any other browser plug-in. You can change this during the creation of your Silverlight application by setting the Windowless property to true. Now the Silverlight instance is rendered within the page and can be positioned with CSS like a div element. Once the HTML textboxes are in place, you can access them with JavaScript and integrate them into your JavaScript class.

handleLoad: function(control, userContext){ this.searchTextBox = $get("searchTextBox"); this.searchTextBox.value = "Welcome to the CoolWall"; }

ASP.NET AJAX
I have used the ASP.NET AJAX library before, but not to this extent. The more I used it the more fun it was. In this application ASP.NET AJAX, helped in two major ways.

The first way was the Web Service Proxy. Using the ScriptManager, you can add a reference to .asmx page containing your services, which will then be proxied as JavaScript functions. Very easy to use and I love the fact that serialization and de-serialization is handled for you. You can pass the string "00000000-0000-0000-0000-000000000000" as a parameter and it will happily convert to a Guid.Empty. A sample call in script looks like this:

CoolWallService.SearchMSNLive(searchTerm,Silverlight.createDelegate(this, this.onSearchCompleted));

The create delegate method is used there to handle the asynchronous completion of the web service call, but still maintaining the context of the class that calls the service.

The second way the AJAX library helped, was similar to other AJAX libraries where it extends the functionality of JavaScript. Code is easier to write once you have methods like Array.add() , String.format and the $get function used above.

Live Search and Live ID Integration
Most of the work done here came from the prototype, but it was very simple to implement using the Web Service proxies mentioned above. Both services seem very simple to write against, once you setup AppIDs with each service, you can leverage the code that comes with the respective SDK. I can envision myself using the LiveID Web Authentication model in the future as way of providing simple, even optional, personalization to an app.

Install Experience
Almost forgotten, but quickly added the optimized Silverlight install experience. And I say quickly added, because the InstallCreateSilverlight.js file that comes with Silverlight Installation Experience Guide almost does all of the work for you.

Conclusion
Even though, I wish I would have had an extra week to do this, I'm really happy to have gone through the work to benefit from the lessons learned. There are a few more features I'd like to see like a lightbox effect to view the images in a larger size, but I'm pretty happy with what got implemented. I still need to make my Christmas wish and this might just be the way to do it.

Oh and plus, I was interviewed about the application an the video should be showing up soon on Channel 10. The interviewer was kind of goofy, but it was fun.

Volta

Adam Kinney — Thu, 06 Dec 2007 19:34:00 GMT

At the Silverlight Fire Starter event last week, a few of the attendees were delighted when I told them about ScriptSharp, a C# compiler that outputs JavaScript. This project comes to us from Nikhil Kothari, who is consistantly churning out interesting experiments in .NET.

Another group that has been releasing interesting projects is Live Labs, the group behind projects like Photosynth. Yesterday they announced a project named Volta, which is similar to ScriptSharp in that it can output JavaScript from your .NET code, but they have taken it a step further by adding tier-splitting. In their own words from their release announcement:

You architect and build your application as a .NET client application, assigning the portions of the application that run on the server tier and client tier late in the development process. You can target either web browsers or the CLR as clients and Volta handles the complexities of tier-splitting. The compiler creates cross-browser JavaScript for the client tier, web services for the server tier, and all communication, serialization, synchronization, security, and other boilerplate code to tie the tiers together. In effect, Volta offers a best-effort experience in multiple environments without requiring tailoring of the application.

I haven't had the chance to use it yet, but it looks very promising and just plain cool. I like it when I read things like this from the JavaScript Interop Recipes page:

Volta makes it trivial to call JavaScript from .NET languages. Simply annotate a class or an extern method with an Import custom attribute that names or defines the JavaScript implementation.