User Interfaces generated by CodeFluent Entities using out-of-the-box producers

What is CodeFluent Entities?

CodeFluent Entities is a unique product integrated into Visual Studio 2008/2010/2012 which allows developers to generate components such as scripts (e.g. T-SQL, PL/SQL, MySQL, Pg/SQL), code (e.g. C#, VB), web services (e.g. WCF, JSON/REST) and UIs(e.g. ASP.NET, SharePoint, WPF).

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.

More on http://www.softfluent.com/products/codefluent-entities

Special offer for CodeProject members!

As a token of appreciation to the CodeProject community, Softfluent is giving away CodeFluent Entities Professional licenses worth $399. This is a one-shot operation ending on April 30^th. So don’t miss it and click here!  

Who is SoftFluent?

SoftFluent is an innovative company industrializing the software development of data-oriented applications on the .NET platform.

SoftFluent is an innovative software company founded in 2005 by Microsoft veterans, former consultants of Microsoft Consulting Services. SoftFluent is Visual Studio Industry Partner at Premier level & Microsoft Gold Partner certified. It has leveraged its strong experience in building enterprise-class applications to create a Model-First Code Generator optimized for the Microsoft platform.

More on http://www.softfluent.com/about-us

The CodeFluent Entities UI Producers

Over the past articles we showed you how to use the following UI producers provided out of the box by CodeFluent Entities:

• Windows Store producer
• ASP.NET Web Forms Producer / AJAX/JSON
• WPF Smart Client Producer
• SharePoint Web Part Producer

In this article I want to emphasize the fact that CodeFluent Entities is totally UI-agnostic. Indeed from the same and unique model you can generate screens that will be rendered in the targeted platforms of your choice. Here is for instance the list of all UI producers available:

Let see all the user interfaces that CodeFluent Entities has been able to generate from the exact same model, using those different producers.

Note that the generated applications are not just a set of user interfaces; they are actually complete interactive applications sharing the same business object model, database and are 100% functional.

We used the "ContactManager Sample Model" supplied by CodeFluent Entities:

Let’s take a look at the ContactManager model:

You can find a lot of resources that show how to use the producers provided by CodeFluent Entities visiting the CodeFluent Entities blog, so I’m going to skip their configurations and directly present you the generated UIs:

UI generated using the Windows 8 Store Producer

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

Clicking on an entity gets you to the entity page. On this entity page you’ll find a screenshot of the entity from which this page was generated.

Right Clicking on this page or typing Ctrl+Z will bring up a menu at the bottom where you’ll find the list of actions available for this entity. Those actions correspond in fact to business methods provided by the entity. We can essentially find useful methods to load a set of entities (LoadAll, LoadByXXX, Load).

Let’s click on the "LoadAll" command. We get a page displaying in the left side all the contacts in our database. If we click/tap on a contact instance its data is displayed in the right side of the page.

Bringing back the menu by hitting Ctrl+z or right clicking will allow you to perform some actions related to a single contact like create a new contact, edit or delete the selected contact:

For instance, pushing the Edit button will let you edit the selected contact. This action will display a form instead of the view-only section for the selected contact: 

The form not only allows you edit single properties of your entity but you can also edit the relations between your entity and other entities, for example, you can attach a "User" instance to you contact.

UI generated using the ASP .NET MVC Producer

Let’s see now how a web site generated by the ASP .NET MVC Producer looks like.

The homepage generated by default lists the entities grouped by their namespace:

Clicking on an entity gets you to its associated page. On this entity page you’ll find a screenshot of the entity from which this page was generated.

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:

Here is the screen displaying for the Contact entity when clicking on the "LoadAll" button: It lists all the contacts through an HTML table and enables sorting! From it you can see the detail, edit or remove a contact.

Let’s say we want to see the properties and values of a contact. Clicking on the "Details" hyperlink will bring up the following screen:

If we go back to list, clicking on the "Edit" hyperlink will enable you to edit the entry. We can now edit the properties of the selected contact:

UI generated using the ASP .NET AJAX Producer

Using the ASP .NET AJAX Producer will generate a "sexier" UI than the ASP .NET Producer as you will see. This producer uses jQuery and the jQuery UI library.

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

Let’s click on an entity so we can see the associated page. On this entity page you’ll find a screenshot of the entity from which this page was generated. 

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:

Here is the screen displaying for the Contact entity when clicking on the "LoadAll" button. It lists all the contacts through an Ajax grid supporting sorting and paging. From it you can see the detail, edit or remove a contact.

And when clicking on the "Edit" button we can see an edition form that is displayed without leaving the page.

UI generated using the ASP .NET WebForms Producer 

Using the WebForms technology is also possible with CodeFluent Entities.

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

Clicking on an entity gets you to the entity page. On this entity page you’ll find a screenshot of the entity from which this page was generated.

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:

Here is the screen displaying for the Contact entity when clicking on the "LoadAll" button. It lists all the contacts through an HTML table and enables sorting. From it you can edit or remove a contact.

And when clicking on the "Edit" button, a popup window is displayed providing a form to edit our entity.

UI generated using the Smart Client (WPF) Producer 

We have seen how the Web and the Windows 8 UI look like. CodeFluent Entities cans also provide UI producer for Desktop applications like WPF.

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

Clicking on an entity will load all the data corresponding to it: From it you can create, edit or remove an entry.

Clicking on an entry will open a window to edit it. You can edit the simple type properties of your entity and you can also attach related entities to the entity you are modifying.

UI generated using the SharePoint WebParts Producer 

And for those who work with SharePoint, an UI producer for SharePoint is available.

The homepage generated by default lists all namespaces:

When clicking on a namespace we can access the list of entities inside the namespace:

Clicking on an entity gets you to the entity page. It lists all the data of that entity through a Web Part. From it you can create a new entry, see the detail, edit or delete an existing one.

For instance, clicking on an entry brings up its details:

Finally clicking on the "Edit" button brings a form so we can edit the related instance.

Conclusion

As you can see, from a same model we have generated several UIs all consistent with each other.

Besides, thanks to the Platform Independent Form Editor you can also define forms directly on their entities which will then be translated into actual screens by user interface producers. We talked about it in details in this article.

CodeFluent Entities applies the principle of "continuous generation".

You may want to make your project evolve, for instance:

• Add a new entity to your model.
• Specify a business validation rule on a specific entity property.
• Build a condensed view for one or more entities.
• Localize your application.
• Provide a SOAP based web service API.
• Create a windows phone application.
• Make a Silverlight or WPF smart client.
• Set up a MVC web site.

Any change made on your model will be propagated through each layer of your application. CodeFluent Entities provides, for each feature, a default configuration that can be extended and customized to fit your needs.

Finally, in the case you did not find the desired producer, I remind you that you can create your own template and use it with the Template Producer or you can even create your own custom producer. All you’ll need to do would be to implement the IProducer interface.

To sum up, CodeFluent Entities is able to generate 100% functional applications with the UI of your choice just by using the right producer.

Resources

CodeFluent Entities is a mature product, you can find several resources and find all you want to know about CodeFluent Entities:

• CodeFluent Entities page : http://www.softfluent.com/products/codefluent-entities
• The download link : http://www.softfluent.com/products/codefluent-entities/download
• The Webcasts : http://www.softfluent.com/community-support/codefluent-entities/webcasts
• The documentation : http://www.softfluent.com/documentation/
• The forum : http://forums.softfluent.com/
• The blog : http://blog.codefluententities.com/
• SoftFluent web site : http://www.softfluent.com/

Cheers,

Pablo Fernandez