WEBfactory 2010

To run the new application, go to Content View in IIS, right-click Default.asp and select Browse.

To access the application from a remote machine via local network or Internet, open a web browser and access the IIS root folder using the HTTP protocol:

The process of deploying is complete. Now the application can be accessed from any location.

Create a new Silverlight Application project in Visual Studio and name it TrendingControlVisualization.

Creating a the new project in Visual Studio

Right click on References under the UserManagerVS project in the Solution Explorer and select add reference.

Referencing the WEBfactory 2010 Silverlight libraries

In the Add Reference window select the Browse tab and navigate to C:/Program Files/WEBfactory 2010 /Silverlight/Standard (or C:/Program Files (x86)/WEBfactory 2010 /Silverlight/Standard if using a 64 bit system).

Select all the dll files in the Standard folder and click Ok to confirm. The process might take up to few minutes.

After the references are added, the project is prepared so we will head on to the next step.

First, we need to declare the necessary namespaces in the XAML code. Add the following lines in the XAML code of the MainPage, in the UserControl tag:

	xmlns:WFCharts="clr-namespace:WFSilverlight.Charts;assembly=WFCharts"

	xmlns:WFGeneral="clr-namespace:WFSilverlight.General;assembly=WFGeneral"

This namespaces will add the WFCharts and WFGeneral assemblies to the project.

Inside the Grid tags, place the WFTrending3 and name it TrendingControl:

	<WFCharts:WFTrending3 x:Name="TrendingControl" Height="300" Margin="30,51,37,0" VerticalAlignment="Top" />

The result can be instantly seen in the design view.

Next, add the Button and name it uxButton. Set the content of the button Config1:

	<Button x:Name="uxButton" Content="Config1" HorizontalAlignment="Left" Margin="127,24,0,0" VerticalAlignment="Top" Width="75"/>

The XAML code should look like this:

The initial XAML code

Press F6 to build the application or F5 to start the debugging and see the result in the browser.

The resulting visualization containing the Trending control, User Login control and the Language Selector control

If the Language Selector was inserted, it will appear nest to the User Login button.

The Config1 button will not load any configuration yet. The next steps will explain how to set up the visualization to load a desired configuration to the trending control.

In order to load the trending configuration when the button Config1 is pressed, we need to insert a method that states that when clicking the button, the desired configuration is loaded:

private void Button_Click(object sender, RoutedEventArgs e)
        {
            TrendingControl.LoadConfiguration("Config1"); // Calls the configuration
        }

The above method will use the Click event named Button_Click, so we need to define that event in the Button XAML:

<Button x:Name="uxButton" Content="Config1" HorizontalAlignment="Left" Margin="127,24,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>

In order to query the configuration in the trending control, we need to insert another method that states that when the configuration is loaded, it will start the query:

private void TrendingControl_OnTrendconfigurationLoaded(object sender, EventArgs e)
        {
            TrendingControl.StartQuery();
        }

Again, the method will use and event handler that we need to declare in the TrendingControl XAML:

<WFCharts:WFTrending3 x:Name="TrendingControl" Height="300" Margin="30,51,37,0" VerticalAlignment="Top" OnTrendconfigurationLoaded="TrendingControl_OnTrendconfigurationLoaded" />

The code source of the visualization will look like this:

The code source of the Trending Control Visualization

The XAML will look like this:

The XAML of the Trending Control Visualization

Run and test the visualization by pressing F5.

Open the desired project in Visual Studio. Make sure the project compiles with no errors.

Splash screen project

The first step is changing the SplashScreenTest.Web Start Action default page from .aspx to .html:

Selecting the Start Action for the Web project

The next step is adding the actual splash screen XAML to the project:

Adding the splash screen XAML

Open the new splash screen xaml page if not already open. Here, the actual xaml code of the splash screen will be placed. For demonstrative purposes, we will provide a simple loading splash screen to be used in this tutorial.

Paste the following XAML code in the splash screen xaml page, replacing the existing code:

<Canvas
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Name="parentCanvas">

  <Canvas Canvas.Top="400" Canvas.Left="600" Width="357" Height="31.379">
    <Rectangle Width="27.545" Height="1" x:Name="uxProgress" Canvas.Top="29.545" Canvas.Left="1.4">
      <Rectangle.RenderTransform>
        <TransformGroup>
          <ScaleTransform x:Name="uxProgressBar" ScaleX="1" ScaleY="0"/>
          <SkewTransform AngleX="0" AngleY="0"/>
          <RotateTransform Angle="270"/>
          <TranslateTransform X="0" Y="0"/>
        </TransformGroup>
      </Rectangle.RenderTransform>
      <Rectangle.Fill>
        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
          <GradientStop Color="#CCCCCCCC" Offset="1"/>
          <GradientStop Color="#CCCCCCCC" Offset="0"/>
          <GradientStop Color="#DDDDDDDD" Offset="0.28"/>
          <GradientStop Color="#DDDDDDDD" Offset="0.72"/>
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>

    <TextBlock x:Name="uxStatus" Height="25" Canvas.Left="125" Text="Loading..." TextWrapping="Wrap" Canvas.Top="6.16"/>

    <Path Width="356.85" Height="1" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="0" Data="M0,170.5 L356.84209,170.5" Opacity="0.35"/>
    <Path Width="1.662" Height="29.03" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="0.48" Canvas.Left="0.2" Data="M360,168 L360,0" Opacity="0.35" />

    <Path Width="357.84" Height="1" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="29" Data="M0,170.5 L356.84209,170.5" Opacity="0.35"/>
    <Path Width="358.85" Height="1" Fill="#FFA2A2A2" Stretch="Fill" Stroke="#FF000000" Canvas.Top="30" Data="M0,170.5 L356.84209,170.5" Opacity="0.25"/>
    <Path Width="1.662" Height="30" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Left="356.01" Data="M360,168 L360,0" Opacity="0.35" Canvas.Top="-0.498"/>
    <Path Width="1" Height="31" Fill="#FFA2A2A2" Stretch="Fill" Stroke="#FF000000" Canvas.Left="357.333" Data="M360,168 L360,0" Opacity="0.245" Canvas.Top="-0.498" />
  </Canvas>
</Canvas>

The next step is editing the HTML page from the project (SplashScreenTestTestPage.html in our example):

	  <param name="splashscreensource" value="SplashScreen.xaml"/>
          <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />

Adding parameters to the HTML page.

The first parameter added above specifies the splash screen source. It points to the splash screen XAML file we have just created.

The second parameter element we have just added is referencing a JavaScript event handler, which we will define next:

function onSourceDownloadProgressChanged(sender, eventArgs) {
    sender.findName("uxStatus").Text = "Loading: " + Math.round((eventArgs.progress * 1000)) / 10 + "%";
    sender.findName("uxProgressBar").ScaleY = eventArgs.progress * 356;
}

The splash screen JavaScript update function

Now that we have the JavaScript event handler, we need to reference it in the HTML page:

	<script type="text/javascript" src="splashscreen.js"></script>

The HTML file with the script reference

Build and run the project. When run, the project will load the HTML file (as defined in the first steps) and load the splash screen.

The provided custom splash screen