Home > Developing Using CodeFluent Entities, Syncfusion > Generate your application with CodeFluent Entities and Syncfusion – Part 2

Generate your application with CodeFluent Entities and Syncfusion – Part 2


In Part 1 of this serie, we looked at building an ASP.NET Back Office Application with CodeFluent Entities.
Now, we would like to generate a WPF application using Syncfusion components that consumes the same datas.

There is nothing complicated here thanks to CodeFluent Entities.

We will describe the different steps to create a fully generated WPF application starting from a CodeFluent Entities custom template.

Create a custom producer

Using a custom producer, we will generate a “sexier” interface than the ASP.NET one as we’ve built before. This producer is based on a custom template and it uses Syncfusion’s components.

With a few simple steps the custom producer can be created:

  • Add a new Class Library project to your solution : ContactManager.SyncfusionProducer
  • Then, add the following references to the project : CodeFluent.Runtime, CodeFluent.Producers.UI, CodeFluent.Model, CodeFluent.Model.Common, CodeFluent.Producers.CodeDom
  • Create the WPFSyncfusionProducer class that inherits from the CodeFluent.Producers.UI.UIProducer

First of all, you simply need to override the two following properties

protected override string DefaultCategoryPath
{
    get
    {
        return ("SyncfusionWPF");
    }
}

protected override string NamespaceUri
{
    get
    {
        return "http://www.example.com/codefluent/producers.syncfusion/2011/1";
    }
}

Finally, you should not forget to override the Produce method to include your generation logic:

public override void Produce()
{
    base.Produce();

    Dictionary<string, string> context = new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase);

    ... // (check the attached source code for more details

    foreach (string sourceDirectory in this.GetFullSourceDirectories(this.CategoryPath, false))
    {
        BaseProducer.TransformAllFiles(this, this.FullTargetDirectory, sourceDirectory, context, new BaseProducer.TransformCallback(this.TransformFile));
    }
}

The dictionary will help us to reuse some properties directly inside your templates files.

We also shipped a compiled version of this producer directly in the attached solution. Just read the Readme text file before opening the solution. Note if you try to compile the project before copying the custom producer, you’ll get compiler errors.

How to deploy a custom producer?

Once your Syncfusion producer compiled, you should ask yourself how to use it. There is nothing complicated there. Create a Custom.config file in the %appdata%\CodeFluent.Modeler.Design directory with the following content:

<codeFluent.Modeler>
   <producerDescriptors>
     <producerDescriptor  name="SyncfusionWPF" 
                          displayName="Syncfusion WPF" 
                          category="Syncfusion Producers"
                          typeName="ContactManager.SyncfusionProducer.WPFSyncfusionProducer, ContactManager.SyncfusionProducer" />
   </producerDescriptors>
</codeFluent.Modeler> 

Then copy and paste the compiled producer « ContactManager.SyncfusionProducer.dll » into the CodeFluent Entities installation directory: C:\Program Files (x86)\SoftFluent\CodeFluent\Modeler.

Then, add a new producer with the following configuration:

Add new producer

What is a CodeFluent Entities Template ?

CodeFluent Entities provides a template engine which allows you to generate configuration files, documentation, extra sources, or any text files you might need. A template is simply a mixture of text blocks and control logic that can generate an output file

This is what it looks like:

Transform and Copy

The producer previously created will consume the template files to generate the final application. Obviously it includes some WPF Syncfusion components to improve the user experience.

Create your custom Template

The Syncfusion WPF template is available at the end, nevertheless the most interesting parts are described thereafter.

Here’s a quick code snippet to generate a file by entity:

[%@ template
enumerable="Producer.Project.Entities"
enumerableItemName="entity"
enumerableTargetPathFunc='Path.Combine(Path.GetDirectoryName(TargetPath), entity.Name) + "View.xaml"'
inherits="CodeFluent.Producers.UI.BaseTemplate" %]

This instruction means that we are going to iterate through all the entities in our project. The name of the generated file will be “[EntityName]View.xaml” and depends of the entity name.

Inside the user control template source file, we are going to use the Syncfusion Grid component and iterate through all properties of entity to generate the right visible columns types:

<syncfusion:GridDataControl x:Name="GridFusion"
                                        AllowEdit="False"
                                        AutoPopulateColumns="False"
                                        AutoPopulateRelations="False"
                                        ColumnSizer="Star"
                                        IsSynchronizedWithCurrentItem="True"
                                        NotifyPropertyChanges="True"
                                        ShowAddNewRow="False"
                                        ShowGroupDropArea="True"
                                        UpdateMode="PropertyChanged"
					                    PersistGroupsExpandState="True"
                                        VisualStyle="Metro"
                                        Grid.Row="1">

            <syncfusion:GridDataControl.VisibleColumns>

				[% foreach (ViewProperty vProp in entity.DefaultView.Properties) {
					if (vProp.UIEnabled)
					{						
Write(vProp, null, RendererTemplateSearchModes.None, RendererType.Read);
					}
				}%]

            </syncfusion:GridDataControl.VisibleColumns>
        </syncfusion:GridDataControl>

You’ll find the documentation for the CodeFluent Entities template engine by following this link.

Generate your application

Once your WPF application source code is generated, simply add Syncfusion references to your project and build it to get the following result:

Contact Manager Tiles View

Contact Manager Tiles View

Contact Manager Contact list

Contact Manager Contact list

By combining the CodeFluent Templating capabilities and the power of Syncfusion’s components together, you get a good mixture to generate functional and amazing applications. 🙂

But what happens if we modify the model (add/update/remove entities, properties, rules, etc.)? Just rebuild your project and it updates automatically your applications, your database and your Business objects Layer.

Using CodeFluent Entities, you define your business models in a centralized place; choose target platforms or technologies (including, but not limited to, data access), generate, and do it again continuously, as much as needed, without losing existing data.

Please leave feedback on how you liked this article and what we could improve. You can also find additional resources about Syncfusion here.

The source code is available on our GitHub repository.

Happy coding !

The R&D team.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s