Archive

Archive for the ‘Syncfusion’ Category

Generate your application with CodeFluent Entities and Syncfusion – Part 2

February 14, 2014 2 comments

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.

Generate your application with CodeFluent Entities and Syncfusion – Part 1

February 14, 2014 3 comments

Building an application from scratch, including business logic layer, data access layer and an amazing user interface design is a difficult ordeal. In most of cases it also means a long development process.

CodeFluent Entities allows you to generate components such as scripts, code, web services and UIs. The code generation process is ‘model-first’ and continuous: from your declarative model, a meta-model will be inferred which code generators will then translate into code. Over 20 code generators (a.k.a. ‘producers’) are provided ‘out of the box’ and that can be combined to obtain your own application following your desired architecture, using your desired technologies.

An application generated by CodeFluent Entities uses standard components of .NET Framework. Today, we want to let you know that you use the power of Syncfusion to build your application. This set of components makes it easy to build attractive applications with incredible design.

CodeFluent Entities Syncfusion

We’ll show you how to create the application from scratch. It includes multiple user interfaces such as an ASP.NET Back Office to manage your data and a great WPF client application using Syncfusion WPF components.

CodeFluent Entities and Visual Studio makes it extremely easy to create a project with a sample model. In the Add New Project dialog box select the ContactManager Sample Model template:

Add a new ContactManager sample Model

You also need two additional projects:

  • A Class Library named ContactManager which represents the Business Object Model (BOM in the CodeFluent Entities language). Just add a Persistence empty directory.
  • An ASP.NET Empty Web Application named ContactManager.WebApplication which represents the ASP.NET Back Office :

Once projects created, let’s take a look at the ContactManager model supplied by CodeFluent Entities :

Contact Manager Model

Now that you’ve created the model, you need a way to generate database scripts, Back Office web application and the business objects using CodeFluent Entities producers.

Producers

What is a producer?

 

A producer uses information available from the model to generate code. CodeFluent Entities provides more than 20 producers that allow to generate the database (SQL Server, Azure, Oracle, PostgreSQL and MySQL), the Business Object Model (C# or VB.NET), web services as well as user interfaces such as a web site.

Configuring the producers

 

We need to use the Business Object Model (BOM) producer to generate the object-oriented layer:

  • From the project ContactManager.Model, select Add New Producer.
  • Select the Business Object Model (BOM) producer
  • Configure the Target Project : ContactManager

Then you need to configure the « SQL Server » producer in order to generate database scripts (tables, views, stored procedures, etc.). From the project ContactManager.Model, select Add New Producer:

  • Select the SQL Server producer from Persistence Layer Producers
  • Target the Persistence directory from your ContactManager project
  • Configure the Target version attribute and select the version according to your SQL Server database.
  • Define the Connection String attribute

Finally we will add an « ASP.NET Web Site » producer to generate the user interface of the website. From the ContactManager.Model project, click « Add New Producer » :

  • Select the ASP.NET Web Site V2 from Web Producers.
  • Select the technology of your site by changing a Template Category
  • Target the directory of our ASP.NET project: ContactManager.WebApplication

The application is now ready to be generated. In a single click (or press F5) just build the solution to generate your application.
Before compiling the solution, don’t forget to add a reference to the « ContactManager » project to your « ContactManager.WebApplication » project references.

Below you will find some screenshots of the generated application. No handwriting code and a full ready-to-use Back Office web application 🙂 .

The generated homepage by default lists all namespaces and their contained entities:

The generated home page

The generated home page

Clicking on an entity gets you to the entity page.

On the left side of the page you’ll find a list of actions available on this entity. Those actions correspond to business methods provided by the entity.

Contact list

Contact list

The generated website also supports CRUD operations to create, edit and delete your data.

You’ve now created a simple Back Office ASP.NET application that uses all the generated layers. In the second part, let’s develop a WPF application with Syncfusion components that uses WCF web services.

The source code is available on our GitHub repository.

Go to part 2

Happy coding

The R&D team.

CodeFluent Entities and Syncfusion for an amazing application!

April 15, 2013 1 comment

When applications are beautiful, fast and robust at the same time, we qualify them as amazing. If you think it also means a long development process, then you have not seen applications using both SoftFluent and Syncfusion products altogether!

SoftFluent and Syncfusion have partnered to help you build these amazing applications in no time.  CodeFluent makes the application highly functional, while Syncfusion makes the application interface elegant and user-friendly.

CodeFluent Entities is a unique product integrated into Visual Studio which allows developers to generate database scripts, code, web services and UIs in the Microsoft .NET platform. The code generation process is model-first and continuous: from your declarative model, a meta-model will be inferred which code generators will then translate into code. Over 20 code generators (a.k.a. producers’) are provided out of the box and can be combined to create your own application following your desired architecture, using your desired technologies.

Syncfusion, Inc. provides the broadest range of enterprise-class software components and tools for the Microsoft .NET platform. With Syncfusion, developers can move beyond simply coding applications to delivering real business innovation—the elegant user interfaces, business intelligence dashboards, and sophisticated reporting that today’s business users need, in the formats they demand.

Whether you need to build applications with WinForms or WPF, or websiteswith WebForms or MVC, SoftFluent and Syncfusion provide all the necessary tools to help you.

To show you how it works, we built a full application using CodeFluent Entities and Syncfusion components. With Visual Studio 2012, we have created a WPF application that consumes web services to communicate with an SQL Server 2008 database. The database we used is a sample database of Microsoft SQL Server, called AdventureWorks.

.

The application can be created in five steps:

.

1. CodeFluent Entities project

Create a CodeFluent Entities project in Visual Studio 2012. You also need a class library project that contains the business-object model, a class library project (Proxy) that contains your web service contracts, and the WPF application.

.

2. Import the AdventureWorks database

If you right-click on the CodeFluent Entities project, you will have the option to import an existing database or model as you can see on the screenshot below.

1

Then follow the instructions to import the AdventureWorks database.

.

3. Set up the producers

Once the database has been imported, you can view the visual model inside the CodeFluent Entities project (Surface > Default) as you can see here:

2

Now that you have your model, you need to add producers. These producers are responsible for generating code for your application.

The first producer is the BOM (Business Object Model) producer, which corresponds to the business logic. The code generated will be classes for each entity of your model. This code is exceptionally readable and can be customized using partial classes, if needed. Also, this producer contains a sub- producer responsible for generating services.

The second producer is the SQL producer responsible for generating SQL scripts, such as tables, views, and stored procedures.

The third producer is the WPF ClickOnce Smart Client, which is responsible for generating UIs. These UIs are generated using templates, located in the CodeFluent Folder. We will discuss this in more detail later.

The fourth producer is the Template, responsible for creating a host for the web services.

The fifth producer is the Command Line Execution producer, responsible for running a batch file that will insert data in your database.

3

.

4. Generation

The model is ready to be generated. In a single click, the CodeFluent Entities project will load your model in memory, and run each of the producers to generate ASP.NET code (C# in this example), SQL scripts and WPF controls. The application is almost ready to run. The last steps are to:

  1. Set up the connection string in your WPF application.
  2. Set up the application that hosts the web services to run at the same time as the WPF application.

That is all you need to do in order to run the application! When you launch the application, you will have a list of all entities, and you will be able to manipulate the data of these entities with generic methods such as load, load all, update, delete, and save. Each of these actions will consume the web services that are being hosted in the other application.

.

5. SyncFusion Components

The full running application uses standard ASP.NET controls for your WPF application. Though these components are functional, they are not always the best-looking ones. This is where Syncfusion comes in to transform a functional application into an amazing application.

CodeFluent Entities generates reusable controls for the application, so that one control can be used in several pages. As a result, the work consists in updating these ASP.NET standards controls by using Syncfusion controls, to end up with a highly functional and beautiful application:

4

Interface displaying the list of departments

.

5

Interface displaying the edition of a department in a popup

.

6

Interface displaying the edition of the SalesTerritory field that corresponds to a list prefilled with a related entity

.

Using the power of CodeFluent Entities to generate functional applications quickly, and the power of Syncfusion’s beautiful components, you can create amazing applications in no time.

.

6. Unlimited possibilities

To go further with CodeFluent Entities and Syncfusion integration, you can reuse Syncfusion components in other applications at no cost. Indeed, CodeFluent Entities uses templates to generate components, such as the view page, the edit form and so on. These templates are available in the CodeFluent folder (where it was installed, usually in \CodeFluent\Modeler\Templates\SmartClient).

Extremely simple to read and to understand, these templates can be modified to produce pages with custom components, such as the ones provided by Syncfusion. By doing so, each CodeFluent Entities project can reuse these templates to produce amazing applications. Although you have developed a WPF application in this example, you can do the same with all other types of applications, such as WinForms, WebForms, MVC, mobile or any combination of these technologies.

.

If you want to download the sample project demo please click here: http://www.softfluent.com/downloads/AdventureWorksReloaded.zip