Wpf Dynamic UI – Workflow quickstart guide.

Requirements:

  • Visual Studio 2010.
  • Nuget package manager

 

  1. Create a WPF application

    image
  2. Add nuget package reference. Search for WpfDynamicUI

    image
  3. Set main Window datacontext to BusinessApplicationFactory, place DynamicModelControl and add some Visuals to the Window

    <Window x:Class="WpfDynamicUI.WokflowSampleApplication.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:BusinessModel="clr-namespace:Csizmazia.WpfDynamicUI.BusinessModel;assembly=Csizmazia.WpfDynamicUI"
    xmlns:WpfDynamicControl="clr-namespace:Csizmazia.WpfDynamicUI.WpfDynamicControl;assembly=Csizmazia.WpfDynamicControl"
    Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
    <BusinessModel:BusinessApplicationFactory />
    </Window.DataContext>
    <Grid x:Name="hostGrid">
    <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition />
    <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Border Grid.Row="1" BorderThickness="1" BorderBrush="Black" CornerRadius="3" Padding="3">
    <WpfDynamicControl:DynamicModelControl x:Name="dynamicModelControl"
    DataContext="{Binding Path=BusinessApplication.ActiveModel}"
    DisplayMenu="True" DisplayContextActionPanel="True"
    />
    </Border>

    <StatusBar Grid.Row="2">
    <StatusBarItem Content="Wpf Dynamic User Interface - The Business Application Library" />


    <StatusBarItem HorizontalAlignment="Right">
    <StatusBarItem.Content>
    <TextBlock>
    Model Render time:
    <TextBlock Text="{Binding Path=RenderTime.TotalMilliseconds, ElementName=dynamicModelControl}" />
    ms
    </TextBlock>
    </StatusBarItem.Content>
    </StatusBarItem>
    </StatusBar>


    </Grid>

    </Window>
  4. Add Theme resource dictionary to application resources
    <Application x:Class="WpfDynamicUI.WokflowSampleApplication.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
    <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="/Csizmazia.WpfDynamicControl;component/Themes/Generic.xaml" />
    </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
    </Application.Resources>
    </Application>
  5. Create a project for the workflow models.

    image
     
  6. Add nuget package reference – search for WpfDynamicUI and install Wpf Dynamic UI – Model component; Also add reference to System.ComponentModel.DataAnnotation
    image
  7. Write the workflow model definition

    public class MainModel : NavigationModel
    {

    protected override void OnActivated()
    {
    About = "Here is an example of a main model...\r\nThis model will be an entry point for EntryFormModel model";
    }

    /// <summary>
    /// Readonly property about this functionality
    /// </summary>
    [Editable(false)]
    [StringLength(1000)]
    public string About { get; private set; }


    /// <summary>
    /// Name entered @EntryFormModel
    /// </summary>
    [Editable(false)]
    public string Name { get; internal set; }

    /// <summary>
    /// defines an application level entry point for Main Model... This makes the model available on application level.
    /// </summary>
    [Display(AutoGenerateField = true, Name = "WokflowSample", Description = "Opens the sample workflow...")]
    public static void ApplicationEntryPoint()
    {
    BusinessApplication.Instance.OpenActiveModel(() => new MainModel());
    }
    }

    public class EntryFormModel : NavigationModel
    {
    /// <summary>
    /// Name property with validation attributes attached
    /// </summary>
    [Required]
    [StringLength(100, MinimumLength = 3)]
    public string Name { get; set; }

    /// <summary>
    /// contextual sayhello method
    /// </summary>
    public void SayHello()
    {
    var message = string.Format("Hello '{0}'", Name);
    BusinessApplication.Instance.ShowPopup(message);

    //set MainModel Name property to actual name
    MainModel.Name = Name;
    }

    /// <summary>
    /// condition property for SayHello method
    /// </summary>
    [Display(AutoGenerateField = false)]
    public bool CanSayHello { get; private set; }

    /// <summary>
    /// Called when properties changed... We are interested in setting CanSayHello on Name property changed
    /// </summary>
    /// <param name="propertyName"></param>
    /// <param name="before"></param>
    /// <param name="after"></param>
    protected override void OnPropertyChanged(string propertyName, object before, object after)
    {
    if (propertyName == "Name")
    CanSayHello = !string.IsNullOrEmpty(Name);

    base.OnPropertyChanged(propertyName, before, after);
    }

    /// <summary>
    /// private properties are not displayed... now storing parent model instance
    /// </summary>
    private MainModel MainModel { get; set; }

    /// <summary>
    /// Module entry point. (accepts only MainModel instance)
    /// </summary>
    /// <param name="mainModel"></param>
    [Display(AutoGenerateField = true, Name = "Open Say hello")]
    public static void OpenWorkflowSayHello(MainModel mainModel)
    {
    //opens this model and make it active when called (clicked by the end user)
    BusinessApplication.Instance.OpenActiveModel(() => new EntryFormModel()
    {
    //set the parent model
    MainModel = mainModel,
    //set the parent name property in the form
    Name = mainModel.Name
    });

    }
    }
  8. Implement Entry point for the Workflow 

    The Workflow entry point implementation is the one the underlying BusinessApplication Instance is looking for - as the first model to display.

    It must be a non-abstract StartupModelBase definition and must be registered in the application MEF container

     
    public class StartupModel : StartupModelBase
    {
    public void StartSample()
    {
    BusinessApplication.Instance.CloseCurrentModelAndNavigateTo(
    () => new MainModel());
    }
    }

  9. In the Wpf Application add reference to the model assembly
    (Discovering is also possible if the extension model is copied to the wpf application bin directory)

    image

  10. Run the application and enjoy your first Wpf Dynamic UI - Workflow application. 

    image

 

Wpf Dynamic Workflow source – download

Last edited Apr 15, 2012 at 5:03 PM by csizo, version 8

Comments

No comments yet.