Synchronizer Pattern (Version V6)

The first pattern I want to demonstrate is called Synchronize pattern. It illustrates our sample perfectly! In many applications we have to solve the problem of showing content that is modified or created by a different thread than the UI thread. But UI components are not able to use content that “exists” in the different threading context as the UI itself. To solve this problem, we used the “Dispatcher” previously to “transfer” the content by “Invoke”. The “Event-Based-Components Tooling” project here on codeplex ( it offers a wonderful pattern to solve this problem in a real generic way. Therefore, I decided to implement an adapted version of it in the AD4.AppDesigner. You find the base class (and all other base classes for patterns) within the “AD4.AppDesigner.Core” library, namespace “Patterns”, class “Synchronizer”.

We use this pattern in our application to show the current time (this time is generated by a timer. By default timers “acts” in a different thread. First we have to remove the dispatcher code parts from “MainWindow” code behind part. The following code snippet shows the remaining part:

public void CurrentTime(DateTime currentTime)
	this.CurrentTimeTextBlock.Text = currentTime.ToLongTimeString();

Next we have to modify our application definition to use this pattern. To do this, you first have to define a step with a name and specify which pattern should be used. Then just modify the wire definitions to insert the pattern based step between them using components. Here’s the diagram of the modified flows (with new step called “SynchronizeDateTime”):


The following application definition content shows the result:

$App GlobalStepDefinitions {
    $Step MainWindow {
        CustomName = "UI" PreparedInstance = "True" SingleInstance = "True" }
    $Step TimerClock { SingleInstance = "True" }
    $Step CalculateRemainTime { SingleInstance = "True" }
    $Step SynchronizeDateTime { Pattern = "Synchronizer" }
$Flow ShowCurrentTimeFlow {        
    $Wire TimerClock -> SynchronizeDateTime
    $Wire SynchronizeDateTime -> UI?CurrentTime
    $Wire TimerClock -> ?CurrentTime

The step “SynchronizeDateTime” is defined in a global scope. If you use this step ounce, you can also define the step in flow scope.

Finally just generate the new source code by the AD4.AppDesigner, rebuild the code and run the application. If you are interested in analyzing the way this pattern is implemented, please take a look at the flow class “ShowCurrentTimeFlow”. You’ll find a segment containing the pattern based classes there. The AD4.AppDesigner determines the required data types by itself. Currently, at most, a count of three parameters are allowed.

Download: example 'AD4.AlarmClockSample.V6.Sourcecode' at AD4.TutorialSamples

Update (2014-08-13): Design attributes extended:
Update (2015-03-30): This page is obsolete. You find the current version of the tutorial as offline documentation included in downloads...

Previous: Usage Of Patterns
Next: ThreadAsynchronizer Pattern (Version V7)

Last edited Mar 30, 2015 at 8:19 AM by InneHo, version 11