Adam Kinney posts tagged with 'demo'

Xbox Gamercard updated for Silverlight 2 Beta 2

Adam Kinney — Thu, 26 Jun 2008 18:34:00 GMT

After a few changes the Xbox Friends Watch Gamercard now runs on Beta 2. The few changes I had to make included

updating the project file in Visual Studio to match Beta 2
Adding System.Net as a reference since the WebClient class has moved there
Changing Storyboard.GetClockState to AnimationInstance.GetCurrentState to match the API update.
Moving from ToolTips to the ToolTipService on the HyperlinkButtons.
Changing MouseLeftButtonDown event handlers to handle the Click event on Buttons, now that MouseLeftButtonDown event no longer fire.
The final change had to do with adding a setting in the AppManifest.xml to allow the XAP to be hosted on a different server than the page its embedded on and still make the cross domain call. Emil Stoychev has more detail about the X-Domain Scenario on SilverlightShow.

Get your own Gamercard on the script builder page. Even if you already have the Gamercard on your page, you will still need to update your embed code to reflect the new changes.

Now to find the time to play the Xbox...

Xbox Friends Watch - releasing v1 of the new Gamercard

Adam Kinney — Thu, 03 Apr 2008 06:50:00 GMT

Xaps

One of my favorite new features of Silverlight 2 is the new Application model. Moving on from version 1.0, where JavaScript instantiation was the only way to start your app and you were restricted to the same origin as the web page, enter the Xap. The new packaging model, not only bundles your assets into one file enabling simpler deployment, it also enables application instantiation via the object tag. Plus, the Xap can live on a separate server than the web page, which enables the creation of embeddable applications with Silverlight.

<applause!>

- More information about Xaps and the new Application Model

Xbox Friends Watch Gamercard

In celebration of this functionality, I've expanded on the Xbox Friends Watch line and added a new Gamercard. Xbox.com currently offers a gamercard which renders a fairly static set of html and images which is embedded via an iframe. Using Silverlight for its interactivity, data stack and portability and the Xbox Gamertag Data Service I thought I would be able to enhance the experience as well as expose the status information provided by the Data Service.

Below is the result of my experiment and using the Gamercard page you can create a script to add the Gamercard to your site.

- Add the Gamercard to your page

Next Steps

My next post will include some of the technical details covering how the Gamercard was created and some of the techniques I used to work with Silverlight 2.

If you're interested in following the saga of the Xbox Friends Watch components you can subscribe to my XBF feed, follow XBF on Twitter or follow XBF on Facebook.

Catching up with Silverlight 2

Adam Kinney — Mon, 10 Mar 2008 23:24:00 GMT

Starting last week on March 5th after Silverlight 2 Beta 1 was announced, a lot has been said about Silverlight 2. Presentations have been given, demos have been shown, bits have been released, tutorials have been posted and many conversations have been had. As an attempt to catalog some of the more interesting and useful content, I'm posting my list of highlights since SL2B1 day.

Overview

In the unlikely event you haven't found where yet, you can grab the runtime and tools for Silverlight 2 Beta 1 on Silverlight.net.

Other links to help you get started include:

Building Rich Internet Applications using Silverlight 2 - MIX session presented by Joe Stegmen and Mike Harsh, Part 1, Part 2
A Whirlwind Tour - Jesse Liberty's introduction to Silverlight 2
Fundamentals Lab - This lab explores the fundamental tools and features that underpin any Silverlight application.
Breaking Changes in Silverlight 2 - This topic discusses the changes made to the Silverlight runtime and Silverlight tools between the Microsoft Silverlight 1.1 Alpha September Refresh and the MIX 2008 release.
Packaging and Application Startup - Pete Brown explores the new application model, read Part 1 and Part 2
Dynamic Animation Lab - This is a simple lawn mowing simulation that exposes different techniques of leveraging the managed Animation API in Silverlight 2.

Demos

Hard Rock Memorabilia - One of the most talked about demos at MIX08, welcome Deep Zoom!
Pulse at SXSW - mashes up twitter, del.icio.us, Technorati and flickr in a very visual and useful way
AOL email client - a full email client written in Silverlight 2
NBC Olympics - can be seen in the first keynote at MIX08 around 1:17:00, an interview with Perkins Miller is also available
TextGlow - read Word 2007 documents online with Silverlight 2
Silverlight.net Community Gallery - controls demo, RSS reader, SOAP Weather Widget and more
Tunnel Trouble - a new Silverlight-based game from Terralever
WeatherBug - designed for Silverlight Mobile, you can test the app running on the web.

Controls

Control Demo Page - see the controls in action
Source code and Unit Tests for controls - download the code
Creating Rich Dynamic User interfaces with Silverlight 2 - MIX session presented by Karen Corby
Controls Tutorial - Another Jesse Liberty tutorial
ListBox and ScrollViewer FAQs - all you ever wanted to know about them and more
File Upload Component - Wilco Bauwer builds a File upload and control and shares the source
User Controls Lab - Building Reusable Controls in Silverlight 2
Using the Silverlight 2 Canvas - a screencast by Jesse Liberty
Using Silverlight 2 Grids and Stack Panels - another great screencast by Jesse Liberty
Styling Controls - another tutorial by Jesse Liberty (he's been very busy)

Deep Zoom

Applications = Designers + Developers - MIX session presented by Celso Gomes and Kirupa Chinnathambi , Deep Zoom heatured in the second part
Hard Rock: Behind the Music with Deep Zoom - MIX Session presented by Scott Stanfield
First Attempt with MultiScaleImage - Mike Taulty shows how to implement control over Deep Zoom, followed by an update
Deep Zoom Demo - Mike Ormond shares Deep Zoom code and then adds mouse wheel support in part 2
Deep Zoom Composer Preview
Deep Zoom Composer Preview - User Guide

Mobile

Mobile Devices and Microsoft Silverlight - MIX session presented by Amit Chopra and David Kline
Using Microsoft Silverlight for Creating Rich Mobile User Experiences - MIX session presented by Giorgio Sardo
Brad Becker interview - about the recent announcement about Silverlight Mobile.
WeatherBug demo
MIXr demo
Silverlight for Mobile primer session at MIX08 - my notes from the first mobile session at MIX

Dynamic Language Runtime

Microsoft Silverlight and Dynamic Languages - MIX session presented by John Lam and Jimmy Schementi
Hello World! demo - demo from MIX session
Managed JScript and flickr -demo from MIX session
Integrating Silverlight and ASP.NET MVC - demo from MIX session
Iron Python - Jimmy Schementi's MSDN article
Iron Python and the DLR - Bill Chiles's MSDN Article
John Lam on Ruby, Ruby, Ruby - Open Space session at MIX08

Moonlight

Exploring Moonlight : Novell's Implementation of Silverlight on Linux - MIX session presented by Miguel de Icaza
Pre-Mix 08: Moonlight Updates
Channel9 works with Moonlight!

Physics

Farseer Physics Engine - an open source physics engine for Silverlight 2
Polygon Demo - Andy Beaulieu's recent demo using Farseer
Heads Will Roll demo - Chris Cavanagh updates his sample, click "move platforms" to make the wheels/heads go flying

Networking and Data

Networking and Data Lab - In this hands-on lab, you will look at using a variety of remote data sources and communication techniques to retrieve data for a Silverlight application.
Working with Data and Web Services in Microsoft Silverlight 2 - MIX Session presented by Eugene Osovetsky
Sockets Sample
Data Binding Tutorial - A Jesse Liberty tutorial

Browser Integration

Browser Integration Lab - In this hands-on lab, you will look at the places where DHTML and Silverlight meet.
Calling JavaScript functions - Tim Heuer tutorial

Tools

Silverlight Blueprint for Sharepoint - This is the answer to "how do you use Silverlight in Sharepoint?", Micheal Lehman has an interview live on Ch9
PhotoZoom - Want a Deep Zoom Album of your own? try this site. Look for the "processing" notification when attempting to view your albums, the site is rather busy right now
BlogEngine.NET Silverlight Extension - I would expect to see more of these start cropping up
Programmer Utilities - Jesse Liberty's suggested "other" tools
Telerik Controls - There are lot of cool examples under the Online demos section. Very cool to see the Animations framework in there.
ImageGear for Silverlight

Fountains of Information

Scott Guthrie - great tutorials and source of breaking news
Tim Sneath - next best place for breaking news and clarity of information
Jesse Liberty - The Silverlight Developers best friend
John Lam - Dynamic Language Runtime
Jose Fajardo - User Experience and Design
Andy Beaulieu - games and physics
Sparkling Client - a podcast about Silverlight and other RIA technologies.
Code Trip - driving around the west coast, check to see if they're coming to your neighborhood

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.

Dojo GFX and Silverlight test

Adam Kinney — Mon, 12 Nov 2007 08:58:00 GMT

Reading the release notes for Dojo 1.0, I found a line item that said "dojox.gfx now includes Silverlight support".

For those in the know this was actually added back in v0.9, but it was a new to me and I've been wanting to give it a test drive since I read about it.

From the Dojo docs

What is dojox.gfx?
dojox.gfx is a cross-platform declarative interactive graphics package. It follows SVG loosely as the underlying model. At present time SVG and VML back-ends are implemented.

What does it do?
The dojox.gfx package provides graphics rendering and manipulation. Under Firefox, Opera and Safari dojox.gfx renders the final product as SVG, under IE it renders as VML.

Potentially the gfx package can allow you to create live and interactive graphing, a web based vector drawing program, view svg files in IE.

Basically you use the GFX API to create a surface and then you can add 2D shapes to that surface to render graphs, visuals or perhaps even Channel 9 guy heads.

Dojo was very simple to get started with and once I read through the GFX documentation I was up and running. In order to use Silverlight as the rendering model you need to follow these steps:

Before adding the reference to the dojo.js file, set the gfxRenderer collection to enforce Silverlight as the output by adding this line:
var djConfig = { gfxRenderer:"silverlight" };
Add a script reference to the Microsoft maintained Silverlight.js file that comes with the Silverlight 1.0 SDK. Dojo uses variables within the script to validate Silverlight as an available render type.
Include the gfx module as a requirement:
dojo.require("dojox.gfx");

My test application renders nine randomly positioned 9 Guy heads which are draggable thanks to the added dojox.gfx.move module. The source is posted and includes a single .htm file with references to the Dojo and Silverlight js files.

Its nice to have the graphic api as a level of abstraction, but since its targeting multiple output types I'm wondering if I'll be stuck with the lowest common denominator. The next test might be a dynamic chart, something like the JellyBar but Dojo driven. This should cover a few areas of investigation such as event handling, text and interactivity.

Overall, Dojo looks very well done and like something I would enjoy using. I may just have to work it into my blog code with the next update.

Pumpkin Card - Silverlight demo with code

Adam Kinney — Wed, 31 Oct 2007 17:11:00 GMT

After enjoying the China Moon Festival Card, I wanted to try my hand at creating a holiday card with Silverlight. I've also been looking for the opportunity to dive into vertex animation which is a big part of this demo. I also wanted to add sound but the animation took a bit more time than I had planned for. Enjoy and have a great Halloween!

Launch Demo
Download Source

UPDATE: I've uploaded the app to Silverlight Streaming (post on the "how" to follow) and you can now add the card to your site using the following code:

<iframe src=http://silverlight.services.live.com/invoke/11557/PumpkinCard/iframe.html scrolling="no" frameborder="0" width="400" height="300"></iframe>

Moon Monsters - Silverlight demo with code

Adam Kinney — Tue, 16 Oct 2007 18:45:00 GMT

This is another demo created for my "There's more than a Media Element in Silverlight 1.0" presentation that I gave at REMIX Boston. This was a lot of fun to create. I definitely pushing vector graphics to act organically.

The demo shows off four different concepts:

CreateFromXAML
User Control pattern for 1.0
Dynamic Animations
HTML Overlay

Launch Demo
Download Source

Photo Fader v2

Adam Kinney — Tue, 16 Oct 2007 01:55:00 GMT

The first time I posted this demo, I got a few confused comments on how to actually use it and what the purpose was. This time around I've added a few more UI elements to better explain what is going on. Tool tips when hovering over the mod and code buttons, a thumb and some depth was added to the scrollbar and if you watch in the beginning there is a "look here" flare.

Launch Demo
Download Source

I'll post the full instructions again just for fun, too.

Instructions:
To fade the photos between each other providing a faux 3D effect move your cursor along the lower dark gray rectangle.

The upper right squares are clickable and show code (lower light gray squares) and modify the demo (upper row dark gray squares that turn orange).

Mod 1 - Change the x position text block in the upper right to use a custom font.
Mod 2 - Randomize the x position when scrolling on the lower dark gray rectangle, just for fun.
Mod 3 - After seeing the photo flip around randomly, I was reminded of a music video and attempted to add sound playback while scrolling the lower dark gray rectangle. A better job synching the sound and the movement could certainly be done but the concept is there.

Photo Fader - Silverlight demo with code

Adam Kinney — Thu, 11 Oct 2007 22:36:00 GMT

I created this demo for my "There's more than a Media Element in Silverlight 1.0" presentation that I gave at REMIX Boston.

The demo shows off three different concepts:

Retrieving dynamic content from packages
Using SetFontSource for custom fonts
Sound playback is simple

Instructions:
To fade the photos between each other providing a faux 3D effect move your cursor along the lower dark gray rectangle.

The upper right squares are clickable and show code (lower light gray squares) and modify the demo (upper row dark gray squares that turn orange).

Mod 1 - Change the x position text block in the upper right to use a custom font.
Mod 2 - Randomize the x position when scrolling on the lower dark gray rectangle, just for fun.
Mod 3 - After seeing the photo flip around randomly, I was reminded of a music video and attempted to add sound playback while scrolling the lower dark gray rectangle. A better job synching the sound and the movement could certainly be done but the concept is there.

Launch Demo
Download Source