Creating a Mashup with a WebBrowser Control

The WebBrowser control enables you to bring in content from existing web applications. In my example today I’ll show how to launch a web page with a dynamically altered link. In my example I’ll use a textbox as the source but it could just as well be the CurrentItem of a M3 List or another Mashup Control. The mashup does a Bing search. It can do the search within the Mahup using the WebBrowser mashup control or it can launch the Bing page in a new window.

The final result looks like this:

Start with adding the TextBox and the two Buttons.

<StackPanel Orientation="Horizontal">
    <TextBlock VerticalAlignment="Center" Text="Search:" />
    <TextBox Width="400" VerticalAlignment="Center" Name="searchTextBox" />

    <Button Name="buttonOK" Content="OK" Width="100" Margin="8" IsDefault="True" Style="{DynamicResource styleButtonPrimaryMashup}">
      <Button.CommandParameter>
        <mashup:Events>
          <mashup:Event SourceEventName="Click" TargetName="webBrowser">
            <mashup:Parameter SourceKey="search" TargetKey="search" Value="{Binding ElementName=searchTextBox, Path=Text}" />
          </mashup:Event>
        </mashup:Events>
      </Button.CommandParameter>
    </Button>
    <Button Content="New window" Width="100" Margin="8">
      <Button.CommandParameter>
        <mashup:Events>
          <mashup:Event SourceEventName="Click" LinkUri="http://www.bing.com/search?q={search}&amp;form=QBLH&amp;filt=all">
            <mashup:Parameter SourceKey="search" TargetKey="search" Value="{Binding ElementName=searchTextBox, Path=Text}" />
          </mashup:Event>
        </mashup:Events>
      </Button.CommandParameter>
    </Button>
</StackPanel>

Notice that the first button send an event to the targetName webBrowser. webBrowser is the name of my webBrowser control on the mashup page. It has no TargetEventname specified becuase Navigate is the default event so you don’t need to set an EventName. The event has a parameter called search.

This is my browser control:

<mashup:WebBrowser Name="webBrowser" Grid.Row="1"
Uri="http://www.bing.com/search?q={search}&amp;amp;form=QBLH&amp;amp;filt=all"
StartUri="http://www.bing.com"/>

You can see that {search} is part of the Uri specified. Any value passed as search in the Event will be replaced in the URI. I also had to escape the & in the Uri with &

Now look at the New window button. In that button I use the Event with support for launching an Uri by setting the LinkUri property. The LinkUri property also supports substitution with event values.

The final Mashup has the following code:

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ui="clr-namespace:Mango.UI.Controls;assembly=Mango.UI" xmlns:mashup="clr-namespace:Mango.UI.Services.Mashup;assembly=Mango.UI">
  <Grid.Resources>
    <mashup:CurrentItemValue x:Key="CurrentItemValueConverter" />
  </Grid.Resources>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>

  <StackPanel Orientation="Horizontal">
    <TextBlock VerticalAlignment="Center" Text="Search:" />
    <TextBox Width="400" VerticalAlignment="Center" Name="searchTextBox" />

    <Button Name="buttonOK" Content="OK" Width="100" Margin="8" IsDefault="True" Style="{DynamicResource styleButtonPrimaryMashup}">
      <Button.CommandParameter>
        <mashup:Events>
          <mashup:Event SourceEventName="Click" TargetName="webBrowser">
            <mashup:Parameter SourceKey="search" TargetKey="search" Value="{Binding ElementName=searchTextBox, Path=Text}" />
          </mashup:Event>
        </mashup:Events>
      </Button.CommandParameter>
    </Button>
    <Button Content="New window" Width="100" Margin="8">
      <Button.CommandParameter>
        <mashup:Events>
          <mashup:Event SourceEventName="Click" LinkUri="http://www.bing.com/search?q={search}&amp;form=QBLH&amp;filt=all">
            <mashup:Parameter SourceKey="search" TargetKey="search" Value="{Binding ElementName=searchTextBox, Path=Text}" />
          </mashup:Event>
        </mashup:Events>
      </Button.CommandParameter>
    </Button>
  </StackPanel>
  <mashup:WebBrowser Name="webBrowser" Grid.Row="1" Uri="http://www.bing.com/search?q={search}&amp;amp;form=QBLH&amp;amp;filt=all" StartUri="http://www.bing.com">
    </mashup:WebBrowser>

</Grid>

2 thoughts on “Creating a Mashup with a WebBrowser Control

  1. Joe Straight

    In your mashup example, is there a way to toggle the OK and New Window buttons based on a role or group? Thanks, Joe

    Reply
    1. karinpb Post author

      No, there is no markup extension or other way to do specific stuff depending on role or group. Or there is a way but only to check if the user is a LSO Administrator and that is not what you want. This is an area were we can improve but we rely on functionality to be available in the grid. Perhaps in coming versions….

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s