WEBfactory 2010

Custom Control Development

Abstract

Check out this article and learn more details about several Custom Control Development scenarios.

The Custom Control Development article series describes the step-by-step procedure required for developing a basic Silverlight and SmartEditor (WPF) custom control that can be successfully used inside a WEBfactory visualization project.

The goal of this tutorial series is to help the developer feel comfortable working with the WEBfactory 2010 Client SDK and following the WEBfactory best practices.

While the custom control developed in this tutorial series will be simplistic and only have basic functionality, the developer can build upon this example and develop complex custom controls for either Silverlight or Silverlight and SmartEditor.

The Custom Control Development series is available only for WEBfactory 2010 version 3.6.x or newer. For WEBfactory 2010 version 3.4 and older, please refer to the appropriate documentation.

The Custom Control Development series contains the following articles:

The two solutions that will be built in this tutorial series are available for download here:

  • The Silverlight custom control solution

  • The WPF custom control solution (SmartEditor)

Important

Before starting with the first article in the series, please take a minute to review the prerequisites. Fulfilling all the requirements listed below will guarantee the success of the procedures described in the articles.

WEBfactory Silverlight custom control development

Operationg System

Windows 7, Windows 8, Windows 8.1, Windows 10

Prerequisites

.NET Framework 4 or newer

Silverlight 5 SDK or newer

Silverlight 5 Tools or newer

Silverlight 5 Developer Runtime or newer

IDE

Silverlight only:

  • Expression Blend 4

  • Blend for Visual Studio 2012

  • Blend for Visual Studio 2013

Silverlight and WPF:

  • Visual Studio Express 2012 for Web

  • Visual Studio Professional 2012

  • Visual Studio Premium 2012

  • Visual Studio Ultimate 2012

  • Visual Studio Express 2013 for Windows Desktop

  • Visual Studio Professional 2013

  • Visual Studio Premium 2013

  • Visual Studio Ultimate 2013

Basic knowledge of programming required.

A control is made up from two components:

  • the XAML - where the visual interface is written.

  • the .cs code source - where all the actual C# code goes.

The Custom User Control will have the visual interface designed in XAML. The necessary elements will be added there (textbox, textblock, button).

The code of the Custom User Control will be typed in the code source. This means using the resources from the WEBfactory SDK to create methods that control what the visual interface does. This particular Custom User Control will:

  • use the WFConnector class from the SDK

  • create three properties for the connector: SignalName, ObjectID and SignalPrefix

  • make the text block created in XAML display the signal value

  • make a text box to enable the user to submit a new signal value

  • use the click event handler and make a button that submits the new signal value to the server and changes the old value to the new one

  • display confirmation message if the value is correct and error message if the value is not correct.