Archive for January, 2009

Scott Guthrie On Silverlight, MIX09, Keynotes, Developers and Designers

Previous to my Mix 09 post, Channel 9 has just completed an interview with Scott Guthrie.

Thanks to Mike Swanson of Microsoft for the point this out, you can view the interview on the upcoming MIX09, and Silverlight 3 Developments in the video interview here

Video is just over 17mins long and delves right into where we are heading in .NET 4.0, Silverlight 3, and how Microsoft is meshing us designers with developers for a better workflow from conception & design to functional implementation.

Cheers

Steve

Im now on Twitter

Well I’ve finally bitten the bullet and created my own Twitter account to keep connected with all us Silverlight users out there on the web, its a great way to communicate, i also recommend a great twitter client called twhril

My twitter account is: silverlightui

I know it requires Adobe Air, but while we’re busy coding and design great interfaces in Silverlight, wont be long till we have our own version for the desktop.

Roll on version 3 of Silverlight!

Cheers

Steve

Mix09 and Silverlight 3

A new year, a new version of Silverlight is just around the corner. Silverlight is now in its 3 version and will ship this year in 2009.

It was at MIX07 that I first made the switch from a Flash actionscipt focused designer over to  a Silverlight Devigner and it was at MIX08 that we revealed Silverlight 2, a upgrade that I thought was about as big as that from Win 3.1 to Windows 95, this is exciting times ahead for Microsoft, and no doubt they will blow us away, and hopefully release alongside Silverlight 3 the Mobile version that we are all anticipating for.

MIX 09

MIX 09

Now, without saying anything out of school, let’s put together just two public facts:

  • On November 16, Scott Guthrie posted a glimpse of Silverlight 3 indicating it will ship in 2009.
  • On Jan 14 the Mix 09 site posted a page called Silverlight 3 Sessions including
    • What’s new in Silverlight 3
    • What’s new in Silverlight 3 Media
    • Deep Dive into Silverlight 3 Graphics

So it is fair to speculate that Silverlight 3 will play an important role in this year’s Mix. And that is pretty exciting news indeed.

Reading the other blogs about its looking like more azure/live desktop based, Mesh, and similar architecture utilised to deliver Silverlight 3 on the web, on the desktop and everywhere inbetween.

Twilight 1.1: Using a Yahoo Pipes Proxy

I just pushed a minor update to Twilight that you can now download on the codeplex site (version 1.1). I really wanted to allow the xap file to be hosted on other servers since many bloggers don’t have the ability to host their own xap files. After reading Scott Barnes’ post about replacing his header with Silverlight I decided I would take a similar approach. Instead of using a callback or trying to get the data directly, Scott followed Jonas’ post on using Yahoo Pipes to proxy data to Silverlight . I took the same approach and during the process refactored some of the code by moving all the data logic out to a separate set of classes. Now when the xap loads it checks to see if it can access the Html Bridge and makes sure it is on the same domain. If it is then it will just use the standard Twitter callback method, otherwise it uses the yahoo pipes proxy I created. The pipe I created simple takes a username and the number of tweets to return and grabs the twitter xml. I then use an HttpRequest in my code to get this xml from yahoo formatted as json which matches up to the json that I was getting from Twitter with the exception that there are a few wrapper objects I have to go through to get the tweets. I also moved all the update logic out of the page class and into the base data provider class since that made a lot more sense. I think the new code makes it much cleaner and the end result is you can now just stick the object tag up on your blog and leave the xap hosted on my server if you’d like. Here is the html you can use for the hosted version:

Twilight Source Code Published

This afternoon I put the Twilight source code up on CodePlex . Twilight is the Silverlight Twitter Badge that I created from my AgFeedReader Mix 10k contest entry . You can download the source and I also packaged up the Xap file along with support files if you don’t want to bother with the code. I haven’t been able to get it to work when the xap isn’t hosted on the same server as the page itself, so for now there is no hosted scenario. Perhaps I’ll have to create some other proxy like Silvester uses . If you have any good ideas feel free to suggest them or better yet contribute to the project. In my previous post on the subject I wrote that I was using the LinkLabel control to create the text with the linked embedded in it. There was also an external WrapPanel control that came with the LinkLabel source. However, in the end I switched to using a custom wrap panel that was based on the Silverlight Toolkit WrapPanel but was a much lighter version (I only need horizontal wrapping). I also found another issue with the LinkLabel control and after spending some time trying to fix it I decided that it also was overkill for what I needed. So while I used some of the same ideas I ended up writing some new code to handle this (I did credit both of these projects in both the source code and on the codeplex page). I also gave the Silverlight Unit Test Framework a try and the source code includes a test project. This was my first real experience with the framework and I definitely found it very useful. If you haven’t used it before I highly recommend Jeff Wilcox’s introduction post on the framework . It was very easy to use and I actually found a few bugs in my code through my tests (I didn’t do full TDD on this project but next time I think I will). When you run the test project it loads up right in the browser and runs the tests. I didn’t do very much UI testing, but I did test my wrap panel implementation by using the TestPanel that is part of the framework. That allowed me add TextBlocks and measure their size to determine how big my panel should be. Then I added an instance of my panel to the TestPanel to test it. This feature is very nice since measuring doesn’t work right unless the child is actually in the control tree, that that alone makes the test framework worthwhile. Even better was the fact that I didn’t have to modify a single line of code in my real project in order to allow the test framework to work. Well done! I also did some work to create a decent install experience after reading Tim Heuer’s several posts on the subject . If you don’t have Silverlight installed you will get an image that looks like the actual application but has a prompt to install Silverlight. I didn’t spend much time on this part, but it is a lot better than the big giant button you normally would get. There is still lots of room for improvement and I would like to figure out the remote hosting option as well as create some cool animation for loading. But for now it is a very light weight (13k) Silverlight Twitter Badge. Enjoy!

The rest is here:
Twilight Source Code Published

Twilight: A Silverlight Twitter Badge

When Twitter first came out I signed up but never really caught on until recently. I finally figured out that you really need to follow some people first to get the hang of it. Now I enjoy using Twitter and read peoples tweets using Witty, a WPF Twitter client . Even though I only have a few followers, it still feels like you’re part of a bigger conversation since your own posts get mixed in with the posts of people you’re following. So now that I’m using Twitter I wanted to put my latest tweets on my blog. Twitter provides a flash based Twitter badge and an HTML version as well, but since I’m a Silverlight developer I thought it would be cool to use Silverlight. I came across Silvester which is a Silverlight Twitter Widget and looks great, but I wanted to create a widget/badge that didn’t require a proxy server. For my entry in the MIX 10K contest I created a Silverlight feed reader that would allow you to subscribe to a bunch of feeds and it would keep them updated and stored your subscriptions in isolated storage. Since you can’t actually access most feeds directly (unless the host has a client access file which most don’t) I used the Google Ajax Feed proxy to grab all my feeds. This worked great because Google has a client access policy that allows you to get the content plus it puts it all into a single format and returns it as json. All I had to do was generate classes in my application to mirror the object structure of the json and then use a DataContractJsonSerializer to deserialize the json into objects. So when I started on my Twitter badge I basically took the AgFeedReader project and removed the isolated storage and the feed subscription interface. I really only needed a single feed which I would set using an InitParam . I was able to get my twitter feed using the Google Ajax Feed Proxy, but that proxy only returns the last four items from the feed and omits a lot of the rich data that Twitter provides. So I decided to try another approach. I started by looking at the script that is part of the Twitter HTML badge. The key was the script they provide to get the feeds which includes a callback parameter. You call the json script and add a callback=YourJavascriptFunction. So in my Silverlight application I add two scripts to the page: the first is the Twitter Json script and the second is a stub javascript function that calls back into my Silverlight application. This gets around the security issue which prevents you from downloading the json directly. Now back in my Silverlight application I get passed in a ScriptObject which is the json. This ScriptObject is really just an array of Tweets, but since it is an array I actually have to manually convert it to my .Net objects. There is a good MSDN page here that describes all the rules for the interop between javascript objects and .Net objects. Below is my method that gets called from BLOCKED SCRIPT [ ScriptableMember ] public void TwitterCallback ( ScriptObject json ) {

New Animation Tool for Silverlight

There are a huge number of 3rd party tools for Flash Developers.

Now that Silverlight 2 is alive and doing well we should expect to see more commercial and open source tools released that target the Silverlight developer and designer.

SWF Editors

In the Flash world you create your application and store the source in a .FLA file.  The FLA file is compiled into a SWF file for deployment.   There are a number of decompiler tools for SWF files.  Surprisingly another set of tools has emerged - the SWF editors.  These editors can open an SWF file in edit mode.  Then you can modify the flash application and save the changes back into the SWF file.  Some of these editors are quit powerful and enjoy a wide audience.

Turning their eyes toward Silverlight

It seems that some of these companies are beginning to take notice in Silverlight.  SourceTec Software makes a number of Flash tools including their Sothink SWF Quicker editor.  They have just released a beta of Sothink Quicker for Silverlight.

Apparently it is useful in creating Silverlight animations.

Other features

  • Supports creating various animations, such as Motion Tween animation, Guide Line animation, Frame by Frame animation.
  • Provides full suite of Drawing Tools for you to create graphics, shapes whatever you desired.
  • Provides powerful shape editing functionality.
  • Supports importing Flash SWF files and the elements of SWF, such as image, graphics and sound into Quicker for Silverlight to create Silverlight animation.
  • Supports importing & editing Sound, Image and Video in various formats.
  • Supports exporting movie.

Silverlight, extended data storage with isolated storage

When data beyond just the basic cookie/session variables are needed to be used, Silverlight has a handy way of storing data in whats called isolated storage.

Advantages:

  1. Isolated Storage is a great alterative to using cookies/session variables especially if you are working with large sets of data. Examples of use include undo functionality for your app, shopping cart items, window settings and any other setting your application can call up the next time it loads, you could cache PDF files or even help files in the users isolated storage so they are always available to the user rather than downloading everytime.
  2. Isolated storage stores by user allowing server applications to dedicate unique settings per individual user.

Possible Pitfalls:

  1. Administrators can set disk quota per user and assembly which means there is no guarantee on space available. For this reason, it is important to add exception handling to your code.
  2. Even though Isolated Storage is placed in a hidden folder it is possible, with a bit of effort, to find the folder. Therefore the data stored is not completely secure as users can change or remove files. It should be noted though that you can use the cryptography classes to the encrypt data stored in isolated storage preventing users from changing it.
  3. Machines can be locked down by administrative security policies preventing applications from writing to the IsolatedStorage. More specifically, code must have the IsolatedStorageFilePermission to work with isolated storage.

So lets move on and take a look at a sample on how we can utilise the isolated storage in Silverlight and provide an example of writing a text file to isolated storage and retrieving it back.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.IO.IsolatedStorage;
using System.IO;
namespace SilverlightApplication10
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            SaveData("SGC Client Help File", "HelpFile.html");
            string test = LoadData("HelpFile.html");
        }
        private void SaveData(string data, string fileName)
        {
            using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())
            {
                using (IsolatedStorageFileStream isfs = new IsolatedStorageFileStream(fileName, FileMode.Create, isf))
                {
                    using (StreamWriter sw = new StreamWriter(isfs))
                    {
                        sw.Write(data);
                        sw.Close();
                    }
                }
            }
        }
        private string LoadData(string fileName)
        {
            string data = String.Empty;
            using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())
            {
                using (IsolatedStorageFileStream isfs = new IsolatedStorageFileStream(fileName, FileMode.Open, isf))
                {
                    using (StreamReader sr = new StreamReader(isfs))
                    {
                        string lineOfData = String.Empty;
                        while ((lineOfData = sr.ReadLine()) != null)
                            data += lineOfData;
                    }
                }
            }
            return data;
        }
    }
}

As you can see I’ve created 2 functions, on that writes a html file i’ve named HelpFile.html into the isolated storage, and the second function LoadData, which accesses the isolated storage and opens the fileName specificed and creates a basic html stream reader that places the contents into “data”.

As you can see a very straight forward way of utilising the isolated storage within Silverlight, it does have some downfalls to access depending on the enviornment you a using it, but typically for an end webuser, it gives a great way of providing extended data storage on the client.

Cheers

Steve

Centering your Silverlight Object

Normally us Designers try to develop layouts with dynamic content full width of the browser, but sometimes, little amounts of silverlight on the html canvas would need to be centred, this is quite straightforward and also applies for any type of HTML objects such as tables or divs.

To center your silverlight object in the middle of the browser:

<div style=”width:100%;margin:0″>

<div style=”margin:auto;width:400px;height:300px”>

<asp:Silverlight ID=”Xaml1″ runat=”server” Source=”~/ClientBin/SilverlightApplication2.xap” MinimumVersion=”2.0.30523″ Width=”100%” Height=”100%” />

</div>

</div>

This is assuming that your silverlight xap file is 400pixels wide and 300pixels deep, the magic is the previous div of margin:0;width:100%, this tricks the browser to offset to the centre of the screen.

Cheers

Steve

Silverlight and Cookies

Helpful tip, on how to set and retrieve cookies in Silverlight 2:

Utilising the HtmlPage.Document object. To use this object you must add a using statement to reference the System.Windows.Browser namespace.

To set a cookie we need to call SetProperty() with a string in the following format: “Key=Value;expires=ExpireDate.”

private void SetCookie(string key, string value)
{
    // Expire in 7 days
    DateTime expireDate = DateTime.Now + TimeSpan.FromDays(7);
    string newCookie = key + "=" + value + ";expires=" + expireDate.ToString("R");
    HtmlPage.Document.SetProperty("cookie", newCookie);
}

And to retrieve the newly set cookie we iterate through all cookies in the document cookies and return the value of the key we initially set (like getting an array and searching for the item in the array in this case their seperated by the ;)

private string GetCookie(string key)
{
    string[] cookies = HtmlPage.Document.Cookies.Split(';');
    foreach (string cookie in cookies)
    {
        string [] keyValue = cookie.Split('=');
        if (keyValue.Length == 2)
        {
            if(keyValue[0].ToString() == key)
                return keyValue[1];
        }
    }
    return null;
}

And thats it 2 functions that can simply pass a new cookie, and secondly a function that retrieves the cookie (key) from a list of all cookies in the HtmlPage.Document object.

Cheers

Steve