Improving WPF/Silverlight- WCF Communication!

While working on a recent assignment related to establishing and optimizing duplex communication with Silverlight and WCF,we learnt quite a lot of new concepts like HttpPollingDuplex binding  with multiple messages mode Http Long Polling designs etc.

While most of these concepts were new we did get a bulb flash on how to improve basic WPF/Silverlight WCF communication!!

All WPF/ Silverlight applications share the same threading model . They have a UI thread and a rendering thread. The rendering thread takes care of the background processing while the UI thread takes care of painting the screen, resizing and the overall look and feel. Whatever happens on the UI thread is primarily synchronous and blocks the UI.

Now whenever we need to work with WCF services without blocking the UI we go for asynchronous calls(In Silverlight we have no option anyway), but the mistake we make is we call the WCF service directly from the UI thread(on say a button click). Now since the webmethod was called from the UI thread its Async Event Handler is also executed on the same thread. So this event handler becomes one of the many tasks the UI thread has to be performed and the end result is a slower UI update. An advantage here is that since we are on the UI thread we can update the UI element directly(else we would have to use a dispatcher!)

How else should we do this?:- An ideal way here would be to separate the task of the UI thread and disturb it only when needed i.e when we need to update the UI.

So basically use worker threads to invoke the webservices and handle their responses and use dispatchers  to update the User Interface! So the downside is slightly more complex code to finally update the UI but then you used WPF/Silverlight to get a great and responsive UI..it does come at a cost:-)

Hope this Bulb Flash helps you improve your app performance!!

Until some more flashes!

Cennest

Advertisements

Windows Azure Management Tool

An excellent release which somehow missed getting its due attention is the Windows azure Management Tool!!

This tool can be used to manage not only your configurations but also enable logging, analyse reports in excel, increase, decrease your role instances , Manage your certificates and monitor your storage including some simple Partition key based querying!!.  And it also allows you to add to the functionality using MEF plugins!!

Here is a brief from its homepage!!..(Straight from the horses mouth:-))

Windows Azure Management Tool (MMC)

The Windows Azure Management Tool was created to manage your hosted services and storage accounts in Windows Azure. This tool provides a host of features:

     

clip_image002

Hosted Services

Upload, deploy, upgrade, and manage your hosted services in Windows Azure

clip_image004

Diagnostics

Configure instrumentation for Windows Azure applications (diagnostics) per source (perf counters, file based, app logs, infrastructure logs, event logs). Transfer the diagnostic data on-demand or scheduled. View / Analyze / Export to Excel and Clear instrumentation results.

clip_image006

Certificates

Upload / manage certificates for Windows Azure applications

clip_image008

Storage Services

Configure Storage Services for Windows Azure applications

clip_image010

Blob Storage

Add / Upload / Download / Remove BLOBs and Containers and connect to multiple storage accounts, including local dev storage

clip_image012

Queues

Add / Purge / Delete Windows Azure Queues

clip_image014

Tables

Query and delete Windows Azure Tables

clip_image016

Extensibility

Create plugins for rich diagnostics data visualization (e.g. add your own visualizer for performance counters). Create plugins for table viewers and editors or add completely new modules! Plugin Engine uses MEF (extensibility framework) to easily add functionality.

clip_image018

PowerShell-based backend

The backend is based on PowerShell cmdlets. If you don’t like our UI, you can still use the underlying cmdlets and script out anything we do

Here are some screenshots of the app at work

image

image

image

We at Cennest definitely look forward to using this tool to keep track of our deployments!!

Cheers!!

Cennest

(WPF ListView/ TreeView)Get rid of that default (blue) selection colour!!

This next blog covers a very trivial but important problem. Important because i think almost everyone would want to override this default behavior of WPF and trivial because the solution is actually pretty simple.Atleast its simple now that i know it. It wasn’t so simple for me earlier though;-)

For this blog i feel pictorial rep is going to be the easiest to follow .OK so the problem is this.

I have a List View with ListView Items and everytime i select an item it turns Blue with a white foreground. Customer says i want Gray background and Blue font (weird choice i know..but then Customer is the King!). So how do we do this??

We basically need to tweak the control template of a ListViewItem. Yeah..ListViewItem.. believe me the ListView is not at fault so changing the background, foreground , selection colour etc of the ListView doesn’t help (you can try it if you have the time :-)).

I think Expression Blend is the easiest way to tweak the control template and though as a developer i swear by VS but Blend does get an extra brownie point for this one.. so the following steps help us here. Open Expression Blend, create a new WPF application and put a ListView control on it. Then go on to add a few ListViewItems as follows.

Do this 2-3 times to add 2-3 List view Items.

Next get the control template of the ListViewItem.

This will create a new style for the ListViewItem. It will ask you where you want to create the style. Since this really isn’t your project the hierarchy doesn’t matter, so keep it in the Window itself

OK. Now Open the Window.xaml. You will find a new style under the Resources section.

The Lines i have highlighted are our culprit. You can see a trigger defined for Selection which sets the background and foreground based on dynamic resources picked up depending on the theme of the OS the app is running on.

So change the trigger values to what YOU want

<Trigger Property=”IsSelected” Value=”true”>
        <Setter Property=”Background” TargetName=”Bd” Value=”Gray”/>
        <Setter Property=”Foreground” Value=”Blue”/>
  </Trigger>

But this is not enough. You have created a style and given it a key. Which means that this style is applicable only to those ListViewItems to specifically subscribe to it saying Style={StaticResource ListViewItemStyle1}. This is not what we want. We want all the Items to follow this style. So remove the “x:key= ListViewItemStyle1” from the style definition.

This will make the style applicable to all the UI elements of Target Type= “ListViewItem”(lower in the heirarchy ofcourse)

Now run the app (f5) and select any ListView Item

Now pick up this style definition and paste it in your app.xaml/ window.xaml depending on the heirarchy you want!

This works for ListView/ TreeView … hope it helps you somehow!

Till next time!

Cennest

Monetize your Silverlight Videos!!

Silverlight streaming seems to have caught the fancy of many and a lot of sites are now streaming Silverlight videos.. however very few are making money from doing so!!..

Recently came across an Open Source Silverlight Media player called OpenVideoPlayer which lets you do just that!!..

Dynamically Insert ads into your media files with configurations like Preroll, Mid-roll and Post Roll(which basically mean, before, in between or after a video file plays) . It uses the MAST sequencing engine for sequencing of ads and VAST as the ad-connector.

For those new to the ad monetization world..VAST would dictate the “WHAT” of an ad. Its a flexible XML format which specifies links to the ad creatives and allows click through and tracking..MAST on the other hand dictates the “WHEN” of the ad,its an XML format which specifies WHEN the ad should play and links to the VAST source to indicate which one. You can set multiple trigger conditions to set off an ad!

So using these two you can control which ads are played when and where they are streamed from..you can use Ad-Servers like Atlas or any other.

OK enough “Gyaan” as we say in India:-)…lets have some screenshots to understand what we are talking about..

Here is the Player playing a video

image

And here is the same video with a pre-roll ad..

image  

and the video starts after the ad is done with image

Lets look at what this solution structure looks like..

image

Lets see what’s what here..

  1. OVP.xap:- The Open source Open Video Player. You can download this from here
  2. MASTSequencing.xap:- The Mast Sequencing component(remember..it defines the WHEN!!).
  3. VASTAdHandler:- the VAST component(WHAT!!)

These three are pretty standard and frankly you need to modify these…what you may want to modify are.. the

  1. Index.html:- Which holds the OVP.XAP, configures it with the plugin handlers and  specifies the media source(see feedsource)
    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%" id="slp" >
    <param name="source" value="OVP.xap"/><param name="minRuntimeVersion" value="2.0.30923.0" /><param name="onerror" value="onSilverlightError" /><param name="background" value="black" /><param name="MaxFrameRate" value="30" />
    <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;"><img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/></a>
    <param name="initparams" value='showstatistics=true, autoplay=true, muted=false, playlistoverlay=true, theme=themes/Default.xaml, smfPlugins=BasicMediaPlugin.xap,plugins=MASTSequencing.xap VASTAdHandler.xap ,
    mast:sourceuri=mast.xml,stretchmode=Fit, stretchmodefullscreen=Fit, 
    feedsource=http%3A//rss.streamos.com/streamos/rss/genfeed.php%3Ffeedid%3D426%26groupname%3Dproducts' />
    </object>

2. MAST.xml:- You can change the VAST location to specify a different ad source. You can also specify the ad timings. For example this one specifies a Pre-Roll and a Mid Roll Ad, so the ad plays before the video and again after 20 seconds. Also notice the Operator= GEQ, which means Greater or Equal , so suppose the user fast forwards the video from 10 to say 30 seconds, the ad will start showing at 30 seconds..

image

While we are still at it…lets also see what the VAST.xml looks like…as per this MAST.xml we are pointing to http://api.atdmt.com/adserv.api/viewad/sa=135109908;sf=VAST_PreRoll_XML_V2;pf=FLV;br=500;strm=1

Here is what it looks like

image

So basically its a list of Ad addresses. What the VASTAdHandler then does is, it goes through each ad and plays the first compatible format ad which in my case happens to be wmv…since i am using a BasicMediaPlayer..

Pretty simple configurations and an excellent Open Source tool…Did i mention that its plugin based so it can be easily extended!!

Keep looking here for more insights into newer abilities!!

Cennest

Silverlight:- Browsing without a Browser??

Wanna navigate to Google.com from your Silverlight application?? Just put the following code

   HtmlPage.Window.Navigate(new Uri("http://www.google.co.in/")

We all know THAT…so what’s this blog all about??.Now lets take this application Out of Browser

image

image

This is what you will get..

image

WHY???:- Because there’s no browser when running out of browser, so you can’t use the DOM and Scripting.Html Bridge is disabled when your application works on Out-Of-Browser mode

So there were pretty much no direct solution to this in SL3. But in SL4 we have a brand new and shiny Web Browser control especially for OOB setting…(infact it doesn’t even work in online mode!!)

So what you need to do is this..

Check if you app is running in OOB mode using

(Application.Current.IsRunningOutOfBrowser

If running out of browser navigate to a page hosting the Web Browser control

image

In code behind navigate to the required url..

this.webBrowser.Navigate(new Uri("http://www.google.co.in/"));

and this is what you get!

image

There’s more:- Not only does this cool control let you browse to sites in an OOB mode, it also listens for events from those sites(something that doesn’t happen so easily in online mode)!!

The navigated page can then pass a value to the browsercontrol via a javascript text like

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script type="text/javascript">
         window.external.notify('hello from google!');
   </script>
</head>
<html>

The Webbrowser has a ScriptNotify event which you can hook onto in your XAML page as

this.Browser.ScriptNotify += new EventHandler<NotifyEventArgs>(Browser_ScriptNotify);

 void Browser_ScriptNotify(object sender, NotifyEventArgs e)
        {
         string value= e.Value;
        }

Another welcome step in the direction of enabling Offline and OOB applications!!!..We recently used this for one of our projects to enable LiveID Authentication from an OOB app…pretty cool!!

Thanks

Cennest!!