Using XBAP in client applications using webbrowser controls

  • Article

 

Using XBAPs in client applications using webbrowser controls.

 

WPF XBAP applications are now widely used in server applications. However, they present some unique challenges when we want to use them in Windows or client applications.

 

These challenges are typically

  1. Communication between client app to xbap
  1. Communication between xbap to client application
  2. Deployment and signing

 

Lets see how we can first try to solve first 2 issues.

 

 We need to use webbrowser controls in order to use xbap applications at the client side. Assume the xbap is hosted at a specific client location on disk such as "C:\ProgramData\MyXbap.xbap"

 

We can just simply use

 

webbrowsercontrol1.Navigate("");

 and it will work in most of the scenarios.

 

However, when we  would have to send some data or parameters between client app and the xbap, this approach will not work.

 

Communication from Webbrowser to  XBAP

 

  1. Create a simple test.html page.

 

  1. In webbrowser control use,
    1. webbrowsercontrol1.Navigate("test.html?params=abc"); we can prepare the querystring dynamically also here with runtime parameters

 

  1. Add Init() javascript function on html page as shown below. It just adds a dynamic iframe to the page.

The source of this dynamic iframe is also dynamic with runtime parameters.  Basically, this code gets the url and the querystring from the url of the HTML page and uses this information to create a dynamic xbap url which we can use later.

 

<script language="javascript" type="text/javascript">
Init();
     function Init() {
url = window.location.search;
array = url.split('=');
params = array[1];

         var el = window.document.createElement("iframe");
el.setAttribute('id', 'ifrm');
el.setAttribute('height', '100%');
el.setAttribute('width', '100%');
window.document.body.appendChild(el);
targetUrl = 'MyXabap.xbap?parameter=' + params;
el.setAttribute("src", targetUrl);
}

 

  1. Create another javscript function to get parameters

   function GetParameters() {
params = window.location.search;
array = params.split('=');
         return array[1];
}

 

 

  1. In XBAP code behind use following code to retrieve the parameters

 var hostScript = BrowserInteropHelper.HostScript;

if (hostScript != null)
{
params = hostScript.GetParameters();
}

 

And that’s about it. You can use these parameters in XBAP anywhere.

 

 

Communication from XBAP to Webbrowser.

 

My requirement was to invoke a document click event of the webbrowser. However, any document click on xbap is not captured directly by the host webbrowser control. So, following work around was used.

 

  1. Add following hidden fields

<body>
        <input id="SpecificId" name="SpecificButton"  type="hidden"  title="" value="" />

</body>

 

  1. Add another javscript function

 

function SendClick(params) {
         var element = document.getElementById("SpecificId");
element.title = params;

<!--This is the code which raises document click event on the hosted webbrowsercontrol-->

         element.click();
}
}

 

  1. In XBAP invoke the JavaScript function using hostscript.

 if (hostscript != null)
{
hostscript.SendClick("Params");
}

 

  1. In your webbrowsercontrol,register for document click.

webbrowser1.Document.Click += new HtmlElementEventHandler(thisDocument_Click);

 

  1. Now this document click would be raised by the Javascript with appropriate values in hidden fields.

So, we can access the elements from the hidden fields like below in thisDocument_Click

 

private void thisDocument_Click(object sender, HtmlElementEventArgs e)

{

        var params = webbrowser1.Document.GetElementById("SpecificId").GetAttribute("title");

}

 

 

And then we can use params variable in our webbrowser control.