User Interfaces generated by CodeFluent Entities using out-of-the-box 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” supply by CodeFluent Entities:

Here is the ContactManager model:

Since we’ve already seen how to use the producers provided by CodeFluent Entities in previous blog posts 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 on this entity. Those actions correspond in fact to business methods provided by the entity:

Here is the screen displaying for the Contact entity when clicking on the “LoadAll” button and then selecting a contact:

Bringing back the menu by hitting Ctrl+z or right clicking will enable you to create, edit or delete an entry:

For instance, pushing the Edit button will give you the following screen:

UI generated using the ASP .NET MVC 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.

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 detail, edit or remove a contact.

Clicking on the “Details” hyperlink will bring up the following screen:

Clicking on the “Edit” hyperlink will enable you to edit the entry:

UI generated using the ASP .NET AJAX 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.

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 detail, edit or remove a contact.

And the one when clicking on the “Edit” button:

UI generated using the ASP .NET WebForms 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.

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 the one when clicking on the “Edit” button:

UI generated using the Smart Client (WPF) Producer:

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:

UI generated using the SharePoint WebParts Producer:

The homepage generated by default lists all namespaces:

Clicking on a namespace lists all its entities:

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, detail, edit or delete one.

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

and clicking on the “Edit” button brings up the editor:

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.

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.

Cheers,

Thibault Nestor