Michael Wolf

Sunday February 08, 2009

Very first voip + silverlight demo

Recently I have seen several blog posts about Silverlight + voip. These reminded me, I should have blogged about some of the solutions used in last years Phizzpop competition. Better late than never.

When we were working on Phizzpop a year ago, we had an Idea that we wanted to connect a voter directly with their representatives using Silverlight. I wanted to connect voters the way my grandmother was, by phone. Yet we were building a solution using Silverlight 1.1 at the time. The problem is that Silverlight has no microphone support, making native voip solutions impossible . While discussing the problem with some colleagues we started up an internal discussion about Javascript being the Babel Fish between modern client web technologies. The idea was that if we couldn’t make a phone call using Silverlight, why not leverage another technology via the Javascript bridge, and access it like a library. The original version used the skype com objects, which worked great, in fact skype bogged about the idea here.

Then after talking to Andrew Trice about the idea, he suggested we try Ribbit. Andy had used their api to add phone support to an existing flex application ( see interview here). With this suggestion in hand we then used the ribbit api/sdk and built a basic flex phone application that exposed a few external interfaces, namely call and hang up.



Then from Silverlight, using the html bridge, all we needed to do was call the methods using "HtmlPage.Window.Invoke". Then through the wonders of javascript translation a phone call was made.



The implementation here is dead simple, but it does open the developers mind to other options. Just because one platform doesn’t have feature A, you don’t have to drop it entirely. By using the interoperability features built into Silverlight your open to use any Javascript / flash / com solutions that are available to you.

While your at it check out the rest of the solution here

• http://www.truveo.com/PhizzPop-Cynergy-presents-Ben/id/288230381149978300
• http://vimeo.com/2833183

In my next blog I will be extending on this "javascript Bable Fish" idea with discussions of using asp.net ajax + silverlight.

Tuesday February 03, 2009

See you at MIX

Silverlight is really growing into its own. To think not but 2 years ago at mix 07 we stopped calling it wpf/e. This year should be pretty exciting with Live Mesh and Silverlight 3, and even more exciting.... Us.

Come out early and See Rick, Jose, and I talking about real world Silverlight and wpf development and designer developer workflow. We will be presenting a workshop the day before mix as part of the Mix 09 workshop series.

Description:
When it should be all about the user and creating sticky experiences, it’s often the people problems in design and development that leads to sticky situations. With collaboration of the 3 roles (Designer / Devsigner / Developer) paramount, you’ll learn how to use a ‘look first’ and experience-focused approach to solve issues across multiple platforms and form factors - web, desktop, mobile - without letting the technology drive the experience. Through workshops and samples we will show designer tricks from the developer toolbox, and developer tricks from the designer toolbox using the Expression suite and .net. Not just working together, but learning from one another. This session is ideal for both the in-the-trenches designers and developers, as well as managers who want to keep their designers and developers focused on developing truly engaging, sticky experiences.

See you at Mix 09

Monday December 15, 2008

Silverlight ConfigurationManager

A problem I hear rumble up from a lot of .Net developers when picking up Silverlight is, “where is ?” My normal answer is, “If it’s not there, do what Microsoft would do… Make your own.” A perfect example of this would be runtime configuration. With the full CLR, so many of us have become accustomed to using ConfigurationManager that reverting to hard-coding values in the binary pains us. By default, Silverlight embeds the ServiceReferences.ClientConfig for service references into the xap, but usually we would prefer to change our service references in our app.config files from our development deployments to production deployments. To overcome this common problem, we have built our own ConfigurationManager.



In the example above, the text is being loaded using the following config file living on the web server

<?xml version="1.0" encoding="utf-8" ?>
<Configuation>
  <AppSettings>
    <Add Key="title" Value="Hello World from configuration manager"></Add>
  </AppSettings>
</Configuation>

This allows us to edit the config on the fly, outside of the compiled xap, just as you would do with a WPF app.config. Using Linq we can load this data into our configuration object by extracting the key and value pairs.

        public static void LoadConfig()
        {
            WebClient client = new WebClient();
            client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);
            client.DownloadStringAsync(new Uri("app.xml", UriKind.Relative));
        }

        public static void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {

            if (e.Error!=null)
            {
                throw e.Error;
            }

            // load the data
            XDocument config = XDocument.Parse(e.Result);
            var appsettings = from x in config.Descendants("AppSettings").Descendants("Add")
                              select new AppSettings { Key = (string)x.Attribute("Key"), Value = x.Attribute("Value").Value };

            _appSettings = new Dictionary();
            // add to collection
            if (appsettings.Count() > 0)
            {
                foreach (AppSettings y in appsettings)
                {
                    _appSettings[y.Key] = y.Value;
                }
            }

            // notify that its available
            if (ConfigurationAvailable != null)
                ConfigurationAvailable(null, new EventArgs());
        }

Then we can access our configuration values in Silverlight just as we would with the .Net CLR-supplied ConfigurationManager.

        void Page_Loaded(object sender, RoutedEventArgs e)
        {
            lblHelloWorld.Text = ConfigurationManager.AppSettings["title"];
        }

One difference with this approach is that every request with in Silverlight must be asynchronous. So there is a little more startup work to get this wired up nicely. In the demo we show a loading screen first while the app.xml file is loaded, and publish back events letting the Silverlight application know when it’s ready to be used.

       private void Application_Startup(object sender, StartupEventArgs e)
        {
            ConfigurationManager.LoadConfig();
            this.RootVisual = new Masterpage();
        }

        void Masterpage_Loaded(object sender, RoutedEventArgs e)
        {
            ConfigurationManager.ConfigurationAvailable += new EventHandler(ConfigurationManager_ConfigurationAvailable);
            LayoutRoot.Children.Add(new Loading());
        }

Another difference is that, since we are using a file with a .xml extension rather than .config, this file is now publicly available (http://dotnet.cynergysystems.com/silverlight/config/clientbin/app.xml), and thus shouldn’t contain sensitive data. This is more similar to a desktop app.config than a web.config scenario. Yet if you are really concerned about exposing somewhat sensitive data, but you must have the flexibility of the config file, you can always encrypt the xml file using the System.Security.Cryptography libs on both server and client (see last weeks post).

Thursday December 04, 2008

Silverlight and Encryption

While working on a recent project involving Silverlight security, I was excited by the amount of options we now have available to us (http://msdn.microsoft.com/en-us/library/system.security.cryptography(VS.95).aspx). One of the major uses for this is to encrypt data in isolated storage. This is a pretty simple procedure and makes perfect sense for storing sensitive data to the client (the docs provide a nice sample of use http://msdn.microsoft.com/en-us/library/system.security.cryptography.aesmanaged(VS.95).aspx ). While this is the primary use case in Silverlight for encryption, having these framework libraries available opens up some interesting options.

One possible use for this would be to encrypt communication between xaps using the html bridge. A perfect example of this might be a portal type app, where the Silverlight apps exist in islands which may need to share data real time. Imagine an HR application builting using a content management system, which has been updated with small silverlight applications dropped in. By encrypting the data in one xap, you can then pass it through the bridge to then be decrypted by another xap sharing the same encryption code. This adds a level of security by ensuring that the data is not harvested by a malicious application on the client’s machine.



In this example you can click on the transfer button which serializes the complex object and encrypts the data. The data is then sent through the html bridge encrypted, and then passed back to the second xap to then be decrypted and deserialized.

Another possible use for this would be encrypting data from point to point message-level "like" security. With Silverlight 2, we now have the ability to call web services via over, but sadly not ws-security where the entire soap message is encrypted using message-level security. One possible stop gap for this would be to encrypt the data coming from Silverlight, pass it over https, and then decrypted on the server. With the ability to have shared source between the Silverlight client and the WCF Web Service, this encryption code can be the exact same code and, in fact, the exact same file (using a linked file in visual studio).

Silverlight Class Library	Web Application with linked source
Data encrypted from the Silverlight application decrypted on the service tier

I think this shows the real power of Silverlight, not only do you get the power of .net in the browser, but you also get the interoperability of the same CODE on browser / WCF Service / desktop client etc.

(DISCLAIMER: this strategy is provided as a proof of concept, and not a direct assertion of best practices)

Saturday October 25, 2008

Bending the Surface

I wanted to take the opportunity to show off some work we have been doing with the surface. Rick has posted a great video of some of his work.

What’s interesting here is how the surface is a natural platform for the use of pixel shaders. These new WPF effects look great on a static screen, but really show off their power when you can “reach out“ , and physically effect them. The other interesting part were looking at is the physical form factor of the device. By design the surface is a social device, with people sitting and not standing around the interface. As you see Rick dropping the tagged business card you start to imagine how this could start to work in a meeting scenario. I drop my card, you drop yours, and by “trading cards” we can start trading files/data etc. Congrats Rick! on the video,and a belated congrats to Jose on his MVP status.

Thursday September 18, 2008

DC Alt.Net meeting

On 9/24/08 I will be helping to host the DC Alt.Net user group here in our dc office. Come out and learn about open source .net and grab some pizza with me. This month’s talk will be on asp.net MVC presented by Troy Goode. I'll be the one handing out pizza and eager to talk about wpf + silverlight + open source.
See you there!

7pm - 9pm
Cynergy Systems Inc.
1600 K St NW
Suite 300
Washington, DC 20006

Monday June 02, 2008

Cynergy @ Microsoft Tech Fest Reston VA

We have been crazy busy here at the Cynergy Silverlight/WPF desk, but not too busy to share our knowledge with the community.

Come join us next friday in reston as we sponsor and present at the Microsoft Tech Fest.

Location: Microsoft Reston MTC
Event Date: June 13thth, 2008

REGISTRATION: http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032379255&Culture=en-US

Heres quick abstracts on the sessions

Microsoft Web Technologies: What’s the Latest?
In this session, we will share with you the latest of Silverlight 2.0 and Expression 2.0 and Microsoft web technology roadmap. We will talk about the new features, the developer and designer productivity synergies and workflows. We will also talk about how Microsoft Silverlight compares with competing technologies.

Designing a Rich Interactive Silverlight Application with Expression
First impressions can make or kill any relationship, and nowhere is this more true than in software. In this session we will show how to use the “Look First” design pattern together with the Expression suite to develop a rich and engaging interactive Silverlight media player. Using the Expression suite we will show how to skin controls and design animations to best meet the user experience, and optimize the designer developer workflow.

Building a Rich Interactive Application with Silverlight and WCF
Now that the user interface has been created, the user experience fleshed out, it's time to transition from design to development and wire up logic and services. We'll provide the logic that makes the application tick, and the services that connect it to the larger infrastructure. We'll discuss the communications options available in Silverlight and delve into WCF service support, building out the application along the way.

Panel Discussion
At the panel discussion, you will be given a unique opportunity to ask questions and share comments on questions that have been raised by other attendees. The panel consists of speakers from the event and optionally guest speaker(s).

Come on out and make sure to come say Hi!!

Thursday February 14, 2008

User group slides and Silverlight Example

Last weeks talk at cmap was great. We had some awesome discussions about what’s happening with silverlight and how to integrate RIA concepts into all layers. Was also great to see the community building up around us, ria + enterprise dev + alt.net ... its a powerful combination.

I promised I would post up the ppt and examples so get it while 1.1 is still hot.

Power Point:


For the silverlight player shy, here’s a quick screen cast of the example
Screen Cast of Example

Running mdi Example:

• Basic Example
• Same example using data pulled from skydrive
• Example using Asp.Net AJAX controls with Silverlight. (data from live expo)

Wednesday January 30, 2008

Talk at maryland user group

I'll be talking at the next CMAP User Group main meeting Tuesday February 5th. The talk is half "a developer call to arms" and half "If silverlight doesn't have <insert .net goodness here />, then how do I do it".

Abstract:
UX is the new UI: It's not the framework, it's how you use it.

As developers we love our frameworks and the elegance of code. Yet we often spend so much time staring at code we forget the essential user centered problem were trying to solve. In addition, due to the amazing and ever evolving frameworks/ tools / controls we have at our disposal, we often forgo what's most usable for what's most available. In this talk we will delve into these problems using examples written in Microsoft Silverlight, including the winning solution from the Microsoft Phizzpop Design Challenge LA.

Tuesday, February 05, 2008 6:30 PM
6751 Columbia Gateway Drive
Columbia, MD 21046 (map)

CMAP is a great group, hope to see some of you there.

Monday December 31, 2007

one crazy year

It's been one crazy year, and the last couple months have been the craziest of them all. So crazy, that I've got at least 3 blog entries written in my head with on time to get them out. So this is just a quickie.

To think that silverlight was just officially announced less than a year ago now. Allot of people have spent allot of time blogging about the future of silverlight. I'm not going to spend a ton of time rehashing them all, but I will say, if the community has been able to do what we have with as little as we have, just look out post mix for what can be done.

On that note let’s leave the year with looking back a bit, while looking ahead to march 08.
Don’t forget to go out to CynergyTV and see our winning solution which mashed up a working silverlight app + silverlight gadget + silverlight / virtual earth mashup + media center.

and for further bragging, here's me Rick, Dmitry, Carson, and Dave at the Phizzpop LA party, thanks to Will Tschumy for posting the pics.

Friday November 16, 2007

Silverlight Twitter Badge

Like allot of the web, a couple of us at Cynergy got addicted to twitter a while back. Yet, the only blog badges they supply are Flash based. So I decided to attempt to see how silverlight 1.1 would do in this very common scenario. So I present to you the Twitter Silverlight (skinnable!) Badge.



Plus, I couldn't help but make a mix branded silverlight twitter badge to celebrate the mix 08 announcements.

Silverlight for web Gadgets/Badges: the good and the bad
While I show how some of this is done, let’s look at 2 sets of roadblocks. We all know Silverlight 1.1 is in Alpha, so there are still allot of things in flux. Some of these things I'm hoping stay and get expanded , others get fixed.

BAD
Silverlight 1.1 restricts access to any resource, aside from media, to the site of origin aka no cross domain access. This is very restricting in several ways. First the most obvious, you can't connect to any web service json / xml / rest outside of your host, without creating a bridged service. So there is currently no way to hit the twitter api, or any other api for that matter, without deploying some asp.net/php/java/ror code to your web server. To solve this problem, for the Badge I just made up a simple http handler that did something like this (but obviously not this :) ).

       string content = string.Empty;
       string url = context.Request["url"].ToString();
       
       WebClient client = new WebClient();
       content = client.DownloadString(url);

       context.Response.ContentType = "text/xml";       
       context.Response.Write(content);        

Thus rewriting the twitter xml api as if it we're coming from our site. Simple enough, but obviously not something Johny can paste into his MySpace profile. Which leads us to the next complication of the cross domain issue. A silverlight 1.1 app must download the dll's which make up its meat from the same domain. So even if you got silverlight to hit a JavaScript proxy to then hit the api, I'm not sure you could get around the dll's being cross domain. So where as would normally drop in some javascript or an object tag for this kind of Badge/Gadget in flash or ajax, you know have to use an IFrame to embed the Silverlight Badge.

<IFRAME 
style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; WIDTH: 200px; HEIGHT: 320px; BORDER-RIGHT-WIDTH: 0px" 
src="http://dotnet.cynergysystems.com/silverlight/twitter/Gadget.aspx?twitterid=mix08&version=mix" 
frameBorder="0" 
scrolling="no"
></IFRAME>

Most community sites will strip out iframes from content, for obvious security reasons. Thus limiting your potential audience to folks who can use your fancy new gadget. I'm fully expecting these cross domain issues to be sorted out before go time. Ideally we should be able to not only call Web services and content from trusted domains, but also the dll's and loose xaml.

Good!
Ok enough with the bad, let’s see some good. The way that the xaml is so separated from the logic of a user control is pretty sweet. It allows for very clean separation of concerns. Which then makes things like "skinning" pretty easy. So for example in the Twitter Badge, we can load in a skin based off of the version from the server.

	HttpWebRequest request = new BrowserHttpWebRequest(new Uri(string.Format("{0}Skins/{1}.xaml",AbsoluteUrl,version)));
	HttpWebResponse response = request.GetResponse();
	FrameworkElement element = this.InitializeFromXaml(new System.IO.StreamReader(response.GetResponseStream().FirefoxClean()).ReadToEnd());
	Root = element as Canvas;

This xaml could also be pulled from any place, database, webservice, seperate "skin" dll,even user input.

The designer of the skin needs only know what are the required object names and types. All they would need to do is open up the template in Blend, change the animations and over all experience, and Then pass it back to the producer of the gadget. They would just need to make the xaml available to the app, and Bada Bing new skin. This makes this process much cleaner, and opens up allot of possibilities.

Conclusion Silverlight 1.1 is shaping up to be a killer platform all around, not just for serious RIA work, but for the badge / gadget world.

Interested in using the badge or contributing a skin, give us a shout we'll see what we can do?

Tuesday November 06, 2007

Silverlight / WPF Ajaxworld Video

So I was pretty excited to see that the video that we had filmed about our AjaxWorld Demo , during our visit to Bldg. 20 for the WPF Lab, was posted up to Windowsclient.net. Yet I was sad to see that it had been posted as a plain old WMV, no silverlight version. So I figured I'd post one up myself. Using Expression Encoder, I created a silverlight player from their templates. Then opened it up in Blend, tweaked the xaml a bit, took out some bits, threw in our Cynergy Xaml, and in no time we have a media player. Couldn't have a video about WPF and Silverlight not be rendered with some xaml :).

Enjoy the video, it showcases a demo Kellen Styler and I did for AjaxWorld West 2007. The demo highlights one of the least talked about features of WPF/Silverlight, true reuse. The demo shows how you can not only share Xaml between WPF and Silverlight (in fact that same xaml is used in this player), but also a Business Layer that could be used in Silverlight / WPF / WCF / Asp.Net / WinForms / Windows Services etc. Plus thanks to Kellen's handy work its pretty easy on the eyes.

Thanks to karsten for the interview.

Monday November 05, 2007

Silverlight, no routed events... no problem.

One of the things I miss in Silverlight which we have in WPF is routed events and routed commands. Language features, are a funny thing... when you first encounter them, you think do I need this? Then once you use them you can't imagine developing without them. This is the classic silverlight story. As a .net developer we come to love the framework and all it has, but the simple physics of fitting all the power of full blown 3.5 framework in the size of the agclr(4.5mb)... is like fitting a hummer into a space designed for a smart car. Just won’t fit. So we lose stuff, like routed commands and events. Which sadly means the ability for 1 element to bubble an event up or down the visual tree becomes allot more complicated. You’re left with just standard .net events.

While working on some silverlight projects, this became pretty frustrating to build out custom controls which can act independently but work seamlessly together.

Yet due to the power for that same trimmed down framework, nothing stops us from making our own event model to help us along. So I created a silverlight message bus, somewhat modeled on how we deal with events in our Flex projects. The Bus allows you to publish and subscribe to events, without having to be aware of the objects who fired or are subscribed to them. To highlight its use I created a simple game, well because everyone loves a game (especially a simple one written in silverlight 1.1 alpha using ms blend/ ms design / and orcas beta 2).


running example: Launch in new window

try not to laugh at the animations or my little xaml duckies, look to Rick to wow you with silverlight ux stuff soon.

Basic idea, is that each duck can publish out an event that it was hit. The individual ducks are not aware of each other. So when you click on a duck we can fire an event to the other ducks and the main canvas, telling them there was a hit.

EventDispatcher.Publish(this, new CynergyEventArgs("Hit", this));

Then the page and each duck gets a message telling them there was a hit. In this case, the ducks then will do their little flip.

...
EventDispatcher.Subscribe(FlipOut);
...
[Action("Hit")]
private void FlipOut(object sender, CynergyEventArgs e)
{
OthersHit.Begin();
}
...

Now the page or the duck doesnt have to know that the hit was caused by a duck, or a dog or any object in particular. It just needs to listen for a hit event to be published through the bus.

The bus it's self is very lightweight and very simple, based on a simple pub / sub pattern, which keeps track of all the subscribed delegates and keys. The addition of linq into the 3.5 framework makes this a breeze. In the following snippet "events" is a generic List<> of events and "e" is the specific event to be fired.

...
IEnumerable results = from ev in events where ev.Action.Equals(e.Action) select ev.Handler;

foreach (CynergyEventHandler d in results)
{
   d.Invoke(sender, e);
}
...

It’s really helped me simplify the process of making lots of different objects all talk to one another. The cool thing about this method is, it’s not just silverlight specific. I didn’t just recreate routed events/commands , I’ll wait for msft to do that... this is just yet another way to skin the event cat. So becuase of that you can, and I do :), take the exact same code recompile it against the full clr and work with in a wpf application with no changes. Silverlight and WPF really do allow true write once run anywhere... but thats a story for another blog post.

Sunday November 04, 2007

First Post

Obligatory first post! Allow me to introduce myself (insert soundtrack here). My name is Michael Wolf, and I work with in the WPF and Silverlight practice here at Cynergy. We’ve been real busy here and I have been chomping at the bit to share stuff, so this will be my place to get it out there. Over the coming weeks and months my goals is to help contribute to the growing dialogue around WPF and Silverlight. It’s going to be a fun ride.