Hello, you fool, how are you? (Part 5 of 5)

In the first part of this series I describe the approach of this application.
The second part was about a class that reads server performance values.
The third part was about exposing the values.
The fourth part was about Silverlight and the Gauge Controls made by Telerik.

This part is about extending the Silverlight control with some interaction to the hosting page.

The first thing is about parameters. You can pass parameters to your control. Since I wanted to avoid a “windowless control” I decided to have the background color as a property.

It looks like this

<asp:Silverlight ID="slctrlOne" OnPluginLoaded="OnLoaded" InitParameters="BKGColor=Red" 

I added a string property to my Page class. The code to consume this property thing has two parts:

private void Application_Startup(object sender, StartupEventArgs e) {
    Page pG=new Page();
    this.RootVisual = pG;
    //if we are told to use a special bkg color remember it 
    //-- we can't assing it here - page elements do not exist now
    //we will handle this after loading
    if (e.InitParams.ContainsKey("BKGColor")) {
        pG.InitBKGColor = e.InitParams["BKGColor"];
    }
}

This is done in App.xaml.cs. Further I had to add a handler in the Loaded event of my control.

private void UserControl_Loaded(object sender, RoutedEventArgs e) {
    if (!string.IsNullOrEmpty(m_strInitBKGColor)) {    //the holder want's a background color
        string strXaml = 
            "<SolidColorBrush xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'" 
        + "Color='" + m_strInitBKGColor + "'/>";
        try {
            SolidColorBrush scB = XamlReader.Load(strXaml) as SolidColorBrush;
            if (scB != null) {
                LayoutRoot.Background = scB;
            }
        }
        catch { }    //ignore if a wrong color was given
    }
}

The trick in this code is that to allow the user to set the color as I would do in XAML – so Red, #666, #a1b2c3 and #aa1122bb would be correct values. While I could write a parser for the hex values – interacting with names would need some reflection – forget about it. Silverlight is able to interpret things like Color=”Red” – so I use this mechanism to solve the problem in an easy way.

You will notice that only the corner (take a close look) are affected by BKGColor – the rest is covered by a border.

My next approach was to retrieve new values when something happens in the HTML page.
I want also to inform the HTML page when new values arrived – and finally provide access to this information.

To make this a bit more understandable here a screenshot of the final page:

As you can see there is a html button and some text output. To achieve this is first added some things to my Silverlight control.

[ScriptableMemberAttribute]
public event EventHandler StatusUpdated;

//make the update call HTML accessible
[ScriptableMemberAttribute]
public void UpdateStatusFromHTML() {
    StartGetPerfInfos();
}

#region LastErg
private string m_strLastErg;
[ScriptableMemberAttribute]
public string LastErg {
    get { return m_strLastErg; }
    private set { m_strLastErg = value;
    txtErg.Text = value;
    }
}
#endregion

The last thing gives access to my “status line text”, the second thing is a method which invokes the service.
Finally I defined an event to be fired when new data arrives. To fire it I simply add the following lines to my “Service call completed” event handler.

//html notifiaction
if (StatusUpdated != null) {
    StatusUpdated(this, new EventArgs());
}

You may have noticed the OnPluginLoaded handler assignment in the asp:Silverlight at the top of this page.
This fires (as the name could make you think) when the adding – and so my control is loaded.
And there I attach a handler to the event “StatusUpdated”.

<script type="text/javascript">
    function OnLoaded(sender, args) {
        var slApp = document.getElementById('slctrlOne');
        slApp.Content.slPerf.StatusUpdated = OnStatusUpdated;
    }
    function OnStatusUpdated(sender, args) {
        var lblOut = document.getElementById("lblErg");
        lblOut.innerHTML = sender.LastErg;
    }
    function CallSilverUpdate() {
        var slApp = document.getElementById('slctrlOne');
        slApp.Content.slPerf.UpdateStatusFromHTML();
    }
</script>

OnLoaded assigns the event – and OnStatusUpdated gets call when the event fires. In this function I access the “LastErg” property of the control.

Last not least there is this CallSilverUpdate function – I call this as my button click handler.

<button id="btnUpdate" onclick="CallSilverUpdate(); return false;">Update Status</button>

Easy, isn’t it?

I hope you could find something interesting in this series.