WEBfactory 2010

In a new Expression Blend project, right-click the References item from the Projects panel and click on Add Reference... .

Adding references to the Blend project

Navigate to the WEBfactory 2010 installation folder > Silverlight > Standard. Select all the content of the Standard folder and click Open to add as references.

Using the Assets panel, search for the WFTimeline1 control and drag it to the MainPage.

The WFTimeline1 control in the Assets panel

Place the object that will be animated on the MainPage (In this example, a rectangle will be used. Any other control that can be animated on a Soryboard can be used).

Create a new Storyboard for animating the Rectangle. While having the Rectangle selected, click on the + button next to the Storyboard item box, in the Objects and Timeline panel. Name the new Storyboard "DemoStoryBoard".

Adding a new Storyboard

Animate the rotation of the rectangle on the new Storyboard. While the border of the MainPage is red (the Storyboard is recording the control's alterations on the timeline), move the Timeline cursor at the time marker 1. While still having the Rectangle selected, go into the Transform property panel, select Rotate and rotate the Rectangle at 180 degrees. Notice that on the Timeline, an animation has been defined between time marker 0 and time marker 1.

The animation displayed on the Timeline

Stop the Storyboard recording by pressing the red recording button from the top left side of the MainPage.

Select the WFTimeline1 control and head into the Properties panel. Expand the WEBfactory 2010properties tab. Select a WEBfactory 2010 signal for the SignalName property, enter a value for the SignalValueStartStoryboard property and select the newly created DemoStoryBoard in the StoryboardName property.

Setting up the WFTimeline1 control

Run the project and using the WEBfactory 2010Test Center, enter the value used in the SignalValueStartStoryboard property for the correct WEBfactory 2010 signal.

In a new Expression Blend project, right-click the References item from the Projects panel and click on Add Reference... .

From the Assets panel, place the WFIndicator1 control on the main page. Right-click on the control and select Edit Template > Edit a copy... .

Skinning the control

From the States panel, select the state that needs to be used in the animation. In this example, the animation will be between the State1 and State2. Alter both states according to the expected result. As the animation will be a transition between State1 and State2, the State1 should represent the initial state of the control before the animation, and State2 the final state of the control after the animation is complete. In our example, for the State2, the graphic content found in State1 has been rotated 180 degrees.

State1 of the re-skinned WFIndicator1

State2 of the re-skinned WFIndicator1

After the initial and final states have been designed, click on the Add transition button on the right side of the State1 bar. Make sure to add length to the transition (2 seconds in our example). The transition will animate the rotation (State1 - 0 degrees to State2 - 180 degrees).

Adding transition between states

Head back to the WFIndicator1 control (by clicking on the [WFIndicator1] directional button at the top of the MainPage). While having the re-skinned WFIndicator1 control selected, expand the WEBfactory 2010property category (from the Properties panel) and click on the States tab. Select the desired signal for the StateSignalName1 and StateSignalName2, and enter the desired values in the MaskSignal1 and MaskSignal2 property fields.

Setting up the WFIndicator1 control to animate based on Setpoint 2's value

Run the project and use the WEBfactory 2010Test Center to test the animation.

Right-click on the project in the Projects panel of Expression Blend and select Add New Folder.

Using the contextual menu (right-click menu) on the new folder, rename it to Images.

Now it's time to add the pictures we need to use in the project in this new Images folder. Right-click on the Images folder and select Add Existing Item....

In the Add Existing Item dialog, browse the computer for the desired images, select them (multiple selection is available using Shift or Control) and click Open to add them to the project.

Expression Blend will ask if you want to embed images larger than 250 KB. Confirm the dialog by clicking Yes.

Now the images are added in the project and can be found in the Images folder.

Next we need to define the images as ImageBrush resources. Place the first image on the MainPage canvas. While having the image selected, go in the Tools menu and select Make Brush Resource > Make ImageBrush Resource....

In the Create ImageBrush Resource dialog, name the new brush and select where to define the brush. In this example, we will use a Resource dictionary, as it provides the opportunity to reuse the same resources in multiple projects. Click OK to confirm.

Repeat the last two steps (6 and 7) for all the images that need to be defined as ImageBrush resources. The ImageBrush resources will be visible in the Resources panel in Expression Blend.

Place the WFRectangle1 control on the MainPage canvas. Wile the control is selected, go to the WF2010 Silverlight Controls properties category in the Properties panel. Click on the States button to add the required states.

In the WFStateCondition Collection Editor, add two states using the Add button.

For the first state, let's set up the trigger condition: open the ConditionParameter Editor using the corresponding button.

In the ConditionParameter Collection Editor, add a new condition parameter using the Add button. Add a parameter name and select the desired signal to trigger the state. Confirm the dialog by pressing OK.

Next, set the ConditionType to Equation and add the required condition to trigger the state. In our case, we want the first state to be triggered when the signal value is 0 (ParameterOne == 0, as ParameterOne has the signal assigned).

Now that the triggering condition is set up for the first state, we need to display the first ImageBrush when this state is on. Click on the Background color box. In the pop-up window, select the Brush Resources tab and select the first ImageBrush.

Now that the first state is set up, repeat the steps 3, 4, 5 and 6 to configure the other state, using the appropriate condition and ImageBrush.

Confirm the states settings by clicking OK.

When running the project, the WFRectangle1 control will display the two images using the ImageBrush resources configured in the control's states properties.

Create a new WEBfactory 2010 Silverlight Application + Web project in Expression Blend (Visual Studio can be used as well). For this tutorial, our project will be named "OpenPDFandTXT".

Add as references the following .dll files from the WEBfactory 2010 /Silverlight/Standard folder:

To open the files, we will use the WFlinkButton1 control. Place two WFLinkButton1 controls on the MainPage. Each one will be programmed to open one file. Name the buttons OpenPDF and OpenTXT and set the contents to some relevant text.

The WFLinkButton1 controls have their specific properties under the WEBfactory 2010 category in the Properties panel. This properties allow the user to configure the method of opening the link, the address of the link and the security authorizations for the control.

WFLinkButton1 properties

WFLinkButton1 properties:

In order to make the .pdf file open when clicking the OpenPDF button, enter the Url path in the Url textfield: because the file is in the wwwroot folder of inetpub, the path will bee //localhost/Test.pdf. The rest of the settings should be left as default.

To program the OpenTXT button to open the Test.txt file, enter the Url path of the .txt file, just like we did with the OpenPDF example.

OpenPDF button with the Url inserted

OpenTXT button with the Url inserted

Press F5 to build and execute the application. In the browser, test the two buttons.

The two WFLinkButton1 controls working

Open Internet Options from Control Panel > Network and Internet. In the Internet Options window, go to the second tab named Security.

Internet Options Security

Select Internet for the zone, and click on the Custom level... button from the Security level from this zone area.

In the Settings list , navigate to the ActiveX controls and plug-ins section, and enable all the options under this section.

Select OK to confirm and Apply to apply the changes. Confirm the security warning.

Now go to Trusted sites and repeat the procedure from the Internet zone.

There is one more tweak to do in order to bypass the Windows security: copy the .exe file you need to launch (osk.exe in our example) to a different location than System32 folder. This is necessary because the System32 folder is protected. In out example, we will copy the osk.exe to a folder named Example on the C: drive.

Add a Button, a Text Block and a Text Box on the page.

Expression Blend test project

Create a Click event for the button in XAML.

Open the MainPage.xaml.cs file and add the following using:

using System.Windows.Browser 

Program the click event to execute the StartExe method:

private void Button_Click(object sender, RoutedEventArgs e)
        {
             StartExe("C:\\\\Example\\\\osk.exe"); //Any exe file can be placed here
        }

Now define the StartExe method:

private void StartExe(string name)
        {
			try
			{
            	HtmlPage.Window.Eval("var myshell = new ActiveXObject( 'WScript.shell' ); myshell.run( '"+name+"' );");
			}
			catch (Exception ex)
			{
				MessageBox.Show(ex.ToString());
			}
        }

Create a new WEBFactory Silverlight Application + Website project in Expression Blend.

Add the DLL files from the ...\WEBfactory 2010\Silverlight\Standard folder as references to the new project.

Place an WFISAMotor1 control and a WFLabel1 control on the main page.

Set the WFLabel1 control to display the Motor_1 text using its SymbolicText property from the WF2010 Silverlight Controls property category.

Name the WFISAMotor1 control Motor_1 using the Name property form the Properties panel.

Create a new page in our project. This new page will be used as a popup window for our Motor_1 control:

Right-click on the project name from the Projects panel. Select Add New Item....

In the New Item dialog, select Page form the items list and name it Status.xaml. Click OK to add the page to the project.

In the new Status page, we will need:

1. a WFLabel1 control to display the name of our motor,

2. an WFIndicator1 control to show the status of our motor (on or off),

3. an WFToggleButton1 control to be able to turn on or off the motor and, finally,

4. an WFNavigationParameter control that will allow us to pass the parameters previously mentioned controls. The WFNavigationParameter control can be placed outside the page borders so it won't be displayed at run time.

Now that our Status page is complete, go in the MainPage, select the Motor_1 control and set the PopupSource property to point to our new Status page by specifying the complete project path of the page (ProjectName.PageName).

Select the Motor_1 control from the MainPage. Click on the button corresponding to the PopupParameters property from the WF2010 Silverlight Controls property category.

In the ParameterItem Collection Editor window, add two parameters using the Add another item button.

The first parameter will represent the signal name used to monitor and control the state of the Motor_1. Set the ParameterName to Signal and ParameterValue to Setpoint 2 (or any other desired writable signal).

The second parameter will represent the name of the control that will be displayed in the in the header of the Status popup page by the WFLabel1 control. Set the ParameterName to Name and the ParameterValue to [N]. We will use the [N] Name placeholder in order to automatically pass the name of the control to the WFLabel1 control inside the Status popup page and also to be able to multiply the Motor_1 control without editing the Name parameter.

Click OK to confirm the changes.

Select the WFLabel1 control. In the SymbolicText property, place the Parameter Control [PC:Name] placeholder. Note that the placeholder will pass the Name parameter.

Next, select the WFIndicator1. We will need to set up the control to display the state of the motor using not a signal name, but the Signal parameter defined in the previous section.

Go to the States tab in the WF2010 Silverlight Controls property category. We will set up the ConditionSignals to be used in the ConditionRules, so click on the button next to the ConditionsSignals property:

In the ConditionSignalItem Collection Editor window, create a new ConditionsSignalItem by clicking on the Add another item button. Enter Parameter as the ParameterName. In the SignalName field, enter the Parameter Control [PC:Signal] placeholder. Confirm the changes by pressing OK.

Now we will set up the conditions for the WFIndicator1 control to enter the states. We will use the Parameter defined above and will set up the control to enter the first state (green) when the Signal value is 0 and in the second state (red) when the Signal value is 1.

Now that our WFIndicator1 will show when the Motor_1 is on or off, we need a way to change the status of the Motor_1 from on to off and back. For this, we will setup the WFToggleButton1 control:

Select the WFToggleButton1 and go to WF2010 Silverlight Controls property category. In the SignalName property, we will want to use the same Signal parameter via the Parameter Control placeholder. Type [PC:Signal] in the SignalName property.

Now that we have set up the signal that we will be writing, we need to also set the values that will be written when the control is toggled. In the Value1 property, place the value 0 (remember that the Motor_1 will be off when the signal value is 0). In the Value2 property, place value 1 (the Motor_1 will be on when the signal value is 1).

To make the WFToggleButton1 control more intuitive, write its basic function in the SymbolicText property.

Our Status popup window is set up to display the status of the motor and allow us to change it from on to off. Press F5 in Expression Blend to test the application.

When clicking on the Motor_1 symbol, the Status popup window will open and the controls that we have just set up will be working as expected: The WFLabel1 shows the name of the Motor_1, WFIndicator1 displays the state of the Motor_1 and the WFToggleButton1 allows us to toggle between the on and off states.

The project works so far, but the real test follows next. In Expression Blend, Go in the MainPage and duplicate the motor control and the label displaying its name. Name the second motor control Motor_2 and adjust the label accordingly.

The same Status popup window will be opened when clicking on the Motor_2 control at run time. The header of the popup window will display the name Motor_2 because we have used as a Parameter the Name [N] placeholder. This allows us to change only the name of the control, and the parameter will change automatically. But in order to display the status of the second motor control, we need to change one thing: the Signal parameter for the Motor_2 control.

Open the PopupParameters Collection Editor for the Motor_2 control and change the ParameterValue of the first ParameterItem (with the name Signal). Make the ParameterValue to be the preferred signal for Motor_2 (Setpoint 3 in our example). Press OK to confirm the dialog.

At run time, both Motor_1 and Motor_2 controls will display the same popup window, but the parameters will adjust for each control, thanks to the parameter passing capabilities of WEBfactory 2010.

Create a new Expression Blend project.

In the new project, create a path object on the main page.

The Path element

With the new Path element selected, go in to the Properties panel > Appearance category. At the Data property, click on the white square button next to the text field. Select Convert to New Resource... from the menu.

The Data property options

In the Create Geometry Resource window, name the new resource. In the Define in section, click on the New... button next to the grayed-out Resource dictionary option.

The Create Geometry Resource window

Name the new resource dictionary and click OK to confirm.

Creating a new Resource Dictionary

Back in the Create Geometry Resource window, make sure that the Resource dictionary option (from the Define in section) is pointing to the new resource dictionary, and click OK to confirm. Once confirmed, the new resource dictionary will be available in the Projects panel, in the current project.

The new resource dictionary

On the MainPage, create a new random path. The previous path (from which the resource dictionary was created) is no longer necessary, as the geometrical data is kept in the new resource dictionary.

New random path

While having the new path selected, head into the Properties panel > Appearance category, and click the square button next to the Data property. From the opened menu, select Local Resources and select the previously saved geometry.

Applying the geometry saved in the resource dictionary

On the MainPage, the previously saved geometry is applied to the new random path.

In a new Expression Blend project, right-click the project name from the Projects panel and select Add Existing Item....

Adding an existin XAML as resource

In the Add Existing Item window, browse the system for the desired XAML file. In our example, I will use a static symbol XAML file, provided with WEBfactory 2010 <MadCap:variable name="MyVariables.WFSmartEditor" /> (WEBfactory 2010 \<MadCap:variable name="MyVariables.WFSmartEditor" />\Views\StaticSymbols). Select the XAML file and click Open. The selected XAML file is added to the project.

The XAML file added to the current project

Open the newly added XAML file. Right-click on the visible element and select Make Into Control... .

Converting the XAML to a control

In the Make Into Control window, select the desired Control type. Name the new control and define it in a new resource dictionary. To create a new resource dictionary, click on the New... button next to the Resource dictionary option.

The new control, defined in a new resource dictionary as a Button

The newly created resource dictionary is added to the project.

The newly created resource dictionary

Now that our resources are created, drag a standard button on the project's MainPage.

A standard Expression Blend button

To apply our resource on this standard button, right-click the button on the MainPage and select Edit Template > Apply Resource > NameOfTheResource.

Applying the resource to a new button

Now the button will obtain the look of the original XAML that we have imported in the project. This resource can be applied on any control of type Button.

The new look of the standard button after the resource has been applied

Open Expression Blend and create a new WEBfactory Silverlight Application + Website project (the example project will be named WFNavigationToggle1Reskinning).

In the new project, go to the Projects panel and right click the References folder. Select Add Reference....

In the Add Reference dialog, go to WEBfactory 2010\Silverlight\Standard and select the following DLL files:

Click Open to confirm and add the DLL files as references to the project.

Once the references are added, we can proceed and search for the WFNavigationToggle1 in the Assets panel.

Drag the control on the MainPage.

To re-skin the control, we need to be able to edit the control's template. In order to do so, right click on the control and select Edit Template > Edit a Copy... .

In the Create Style Resource dialog, name the new style and define it in this document. Click OK to confirm.

Once inside the template, we can notice that we have another button element named NavigateToggleButtonElement (see the Objects and Timeline panel).

In order to re-skin our WFNavigationToggle1 control, we need to edit this NavigateToggleButtonElement control. To do so, we will repeat the above step: Right click on the NavigateToggleButtonElement and select Edit Template > Edit a Copy....

Name the new style resource of the button element and define it in the current document.

Now we are inside the template that needs to be edited in order to re-skin the WFNavigationToggle1 control. The elements of the template are visible in the Objects and Timeline panel.

Select the States panel and, under the CheckStates category, select the Checked state.

While in the Checked state, select the rectangle tool from the left-side toolbar and draw a rectangle on top of our control. This rectangle will hold our desired color when the control is in the Checked state.

Notice the rectangle element is placed inside the Grid that contains the BackgroundGradient element (see the Objects and Timeline panel). Rename the rectangle to BackgroundColor.

Now we need to adjust the size of the BackgroundColor element to fit the size of our control. While having selected the BackgroundColor element, go to the Layout properties in the Properties panel. Make sure that the Width and Height properties are set on Auto and reset the Margin properties.

To reset the Margin properties, click on the white square on the right side of the properties to open the properties menu. Select Reset. The BackgroundColor element will fit the size of it's parent (the Grid element).

Select the desired color for the BackgroundColor element using the color picker form the Brushes properties.

Now our BackgroundColor element is set for the Checked state, but we need to make sure that it will be visible only when the WFNavigationToggle1 control is in the Checked state. To do so, select the Unchecked state from the States panel.

Expand the Appearance property category and set the BackgroundColor's Opacity to 0.

This way, the BacgroundColor element will be visible only in the Checked state.

Return to the WFNavigationToggle1 control in the MainPage by clicking on the first element of the bread-crumbs.

Add a new WFNavigationToggle1 control next to the re-skinned one. Select the new WFNavigationToggle1 control and right-click on it. Select Edit Template > Apply Resource > WFNavigationToggle1Style1.

Press F5 to build and test the project. The color of the controls in the Checked state is now changed.