WEBfactory 2010

To create a static symbol that will be compatible with WEBfactory 2010SmartEditor, the Expression Blend project will need to be WPF and not Silverlight.

In the new WPF project, create the desired graphic. In our tutorial scenario, we will use three rectangles. Make sure that none of the elements of the symbol is named (delete the name= attribute from the XAML code).

Notice that the transformation applied to the top rectangle is stored in the XAML code as RenderTransform and not CompositeTransform. The RenderTransform tag is compatible with Smart Editor.

The needed part from the WPF Expression Blend project is the XAML code of the grid, containing the graphical elements, combined in a Viewbox. Let us prepare the code for using it in SmartEditor:

The code should look like this:

	<Viewbox>
			<Grid Height="150" Width="239">
				<Rectangle Fill="#FFD03000" Margin="100,18,0,35" Stroke="Black" StrokeThickness="0"/>
				<Rectangle Fill="#FF0CA92B" Margin="0,0,100,53" Stroke="Black" StrokeThickness="0"/>
				<Rectangle Fill="#FF0C7AA9" Margin="41,53,59,0" Stroke="Black" StrokeThickness="0" RenderTransformOrigin="0.5,0.5">
					<Rectangle.RenderTransform>
						<TransformGroup>
							<ScaleTransform/>
							<SkewTransform/>
							<RotateTransform Angle="21.933"/>
							<TranslateTransform/>
						</TransformGroup>
					</Rectangle.RenderTransform>
				</Rectangle>
			</Grid>
	</Viewbox>

The next step is to prepare the actual Windows Markup file that will contain the code of the static symbol. The safest method is to copy an existing static symbol and edit it. So head on to WEBfactory 2010 \SmartEditor\Views\StaticSymbols and copy one of the existing files. Paste the file in another folder and rename it.

Open the new StaticSymbol file with the preferred editor. In our scenario, the original static symbol was Arrow_Red2.xaml.

The part of the code that needs to stay in place is the Grid tag. Delete the other code (the selected code in the image above).

Copy the Viewbox and all its content from the Expression Blend project, and paste it inside the grid, in the new StatiSymbol.xaml file, like in the example below:

Let us create the category for SmartEditor. Open the ControlCategories.xml file. Under the Static Symbols category, copy a subcategory, paste it and change the name of the category as desired.

Save and close the file.

Open the ControlMappings.xml. In this xml file, the actual xaml file we just created above will be linked to SmartEditor, in the category we defined earlier.

In the ControlMappings.xml, look for the mappings for static symbols. Copy one mapping, paste it and edit the ControlName, CategoryName and XamlPath attributes. Make sure to use the same naming conventions.

Save and close the file. At this point, the StaticSymbol control we created in Expression Blend is mapped and fully functional in SmartEditor.

In the new WEBfactory 2010SmartEditor project, add a WFNavigation button control on the Page. Add a WFNavigationTarget next to the button.

Now create a SubPage by clicking on the Add navigation page button from the Ribbon bar.

On the new SubPage, place a WFTrending3 control and a WFNavigationParameter control.

In the main Page of the project, select the WFNavigation button control and expand the Navigation properties category from the Property Inspector. Click on the button corresponding to the Navigations property.

In the Navigations Edit Items window, add a new navigation item by clicking on the Add NavigationItem button.

Choose the WFNavigationTarget from the Page as Display Window and the previously created navigation page as the SubPage. Click on the ParameterValues button to create the needed parameter for our navigation item.

In the ParameterValues Edit Item window, create a new parameter by clicking on the Add NavigationParameter button. In the new parameter, add the name and the parameter value.

Confirm the dialogs. Now duplicate the WFNavigation button control and change the parameter value to be the next Trending configuration needed to be loaded by the second button. Do the same for as many Trending configurations as needed.

Head in the navigation SubPage, where the WFTrending3 control is placed. Select the WFTrending3 control and head in the Property Inspector. Expand the Configuration category and place the [PC:ParameterName] placeholder in the InitialConfiguration property text field. Replace the ParameterName text with the name of the parameters passed by the three navigation buttons - ConfigParameter in our example.

Run the application and click the three buttons. Each button will trigger the display of the same control but with different configurations.

In IIS Features View, go to Default Document options under IIS category.

Right click in the Default Document window and select Add. In the dialog, enter "Default.html" and select Ok.

To create a pop-up window using Template Pages, open SmartEditor and create a new project. From the Ribbon, select the Add template page button. This adds a new TemplatePage to your project.

Adding a Template Page

The TemplatePage is added to the Explorer panel

Now that we have the Template Page, we must create a control that will show the template page. From the Toolbox, drag on the Page (not on the TemplatePage) a Text Label control.

Select the Text Label control and go to the Property Inspector. The last category will be Template.

Enable the pop-up behavior by checking the ShowTemplate checkbox.

Chose the modality of the pop-up window, and select the Template Page created above.

Press Run in the Ribbon or hit F5 to run the visualization.

Select the Signal to be used by clicking the button corresponding to the SignalName column.

Select the desired signal using the Signal Browser and click OK to confirm.

Select the desired comparator by clicking on the drop down menu from the Comparator column.

Place the constant value that will be compared to the signal's value in the SignalValue text field.

Select the theme which will be applied if the condition is met.

Click OK to confirm the ThemeConditions editor window and save the configuration.