Archive

Archive for the ‘Presentation’ Category

Generating a WPF Smart Client using the Smart Client Producer

October 22, 2012 Leave a comment

Hello!

In a previous posts, we showed you the output of the WPF Smart Client Producer. In this post we’ll show you how to generate a WPF smart client. It will be a WPF application consuming WCF services thanks to a proxy and the data will be stored in a database Smile.

Creating the solution

Start by creating a new CodeFluent Project. We’ll use the “ContactManager Sample Model” for the purpose of this article.ContactManagerModel

Add a new Class Library project named “ContactManager” to your solution. It will be used to host the generated files corresponding to your Business Object model and WCF service’s contracts. Add it a folder called “ServicesConfig” that will be used to store your WCF service’s configuration files.

Add a new Class Library project named “ContactManager.Proxy” to your solution. It will be used to host the generated files corresponding to the proxy.

Add a new SQL Server Database project named “ContactManager.Persistence” to your solution. It will be used to host your generated SQL scripts.

Add a new WPF application project named “ContactManager.SmartClient” to your solution. It will be used to host the generated files of your WPF application. Remove the MainWindow.xaml file since we are going to generate our own. Also, by default, Microsoft Visual Studio 2010 sets the target framework to .NET Framework 4 Client Profile. Go to the property of your project and change the target to .NET Framework 4 in order to use the standard libraries.

image

Adding the producers

The Business Object Model Producer

To generate your Business Objects model, add the Business Object Model Producer to your CodeFluent Entities project by clicking “Add new producer” on the “Producers” folder in Visual Studio’s Solution Explorer, expand the Business Layer Producers node and select it:

image

In the Target Directory field, select your Class Library project called ContactManager.

image

Click OK.

The SQL Server Producer

To generate your persistence scripts, add the SQL Server Producer (or the one that suits your configuration) to your CodeFluent Entities project by clicking “Add new producer” on the “Producers” folder in Visual Studio’s Solution Explorer, expand the Persistence Layer Producers node and select it:

image

In the Connection String field enter your connection string used to connect to your SQL Server. Also in the Target Directory field, select your SQL Server Database project called ContactManager.Persistence. Finally in the Target Version field, select your SQL Server version.

The Service Object Model Producer

To generate your WCF service and your proxy, add the Service Object Model Producer to your CodeFluent Entities project by clicking “Add new SubProducer” on your  “Business Object Model” producer in Visual Studio’s Solution Explorer, expand the Business Layer Producers node and select it:

image

In the Target Directory field, select your Class Library project called ContactManager.Proxy and click OK.

The Template Producer

Note: The Template producer is not mandatory. However, it is really handy if you want to be able to quickly run and test your WCF service using the CodeFluent Entities Hoster.

Lets now generate the configuration files of your WCF service. Add the Template Producer to your CodeFluent Entities project by clicking “Add new producer” on the “Producers” folder in Visual Studio’s Solution Explorer, expand the Utility Producers node and select it:

ScreenShot032

In the Source Directory field select the “Server” folder located at “CodeFluent Entities installation folder > Modeler >Templates > ServiceModel”. And in the Target Directory field, select the folder called ServicesConfig located in your Class Library project called ContactManager, then click OK.

The WPF Smart Client Producer

Then, to generate your WPF smart client, add the WPF Smart Client Producer to your CodeFluent Entities project by clicking “Add new producer” on the “Producers” folder in Visual Studio’s Solution Explorer, expand the Application Producers node and select it:

image

In the Target Directory field, select your WPF application project called ContactManager.SmartClient and click OK.

Generating code

Now to start generating code, build your CodeFluent Entities project called ContactManager.Model.

Here is the visual studio solution you should have by now, each project containing the generated code (your database should have been created too):

image

Building and running the application

At this stage, your application has been generated and is almost ready to be built and run. Since your WPF application uses the Proxy you need to add your Class Library project called ContactManager.Proxy as a reference to your WPF application project called ContactManager.SmartClient project.

Now you can build your solution, then run your WCF service as you usually do or thanks to the CodeFluent Entities Hoster using your generated service configuration files. Finally start your WPF application.

Tip: If you use the CodeFluent Entities Hoster, a quick and easy way to ensure the executable is automatically copied to the output directory is to add a reference to it. This is absolutely not required to compile your Business Object model (your Class Library called ContactManager), it’s just a shortcut to have the executable in the output directory without having to create post-build events.

And tadaaa! You’ve created your 100% functional WPF smart client without a single line of code!

SmartClient (1)

SmartClient (2)

Enjoy!

Thibault Nestor

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

October 16, 2012 2 comments

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:

UI_Producer

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:

ContactManagerModel

Here is the ContactManager model:

ContactManagerSurface

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:

Windows Store (1)

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:

Windows Store (2)

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

Windows Store (3)

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

Windows Store (4)

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

Windows Store (5)

UI generated using the ASP .NET MVC Producer:

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

ASP NET WebApp (1)

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:

ASP NET WebApp (2)

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.

ASP NET WebApp (3)

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

ASP NET WebApp (4)

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

ASP NET WebApp (5)

UI generated using the ASP .NET AJAX Producer:

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

ASP NET AJAX-JSON (1)

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:

ASP NET AJAX-JSON (2)

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.

ASP NET AJAX-JSON (3)

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

ASP NET AJAX-JSON (4)

UI generated using the ASP .NET WebForms Producer:

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

ASP NET WebForms (1)

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:

ASP NET WebForms (2)

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.

ASP NET WebForms (3)

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

ASP NET WebForms (4)

UI generated using the Smart Client (WPF) Producer:

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

SmartClient (1)

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

SmartClient (2)

Clicking on an entry will open a window to edit it:

SmartClient (3)

UI generated using the SharePoint WebParts Producer:

The homepage generated by default lists all namespaces:

SharePoint (1)

Clicking on a namespace lists all its entities:

SharePoint (2)

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.
SharePoint (3)

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

SharePoint (4)

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

SharePoint (5)

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

The Method Editor got better

October 12, 2012 Leave a comment

Since the build 682 the Method Editor has been improved. Indeed, instead of having a single window where all method types were mixed up we now have a new window that breaks them down by types:

image

If your are not familiar with the Method concept of CodeFluent Entities yet, then I invite you to read about it in the documentation.

As you can see, you can choose the method type you want:

  • CFQL
  • Snippet with method signature
  • Snippet without method signature.

Selecting the CFQL method type will bring up the CFQL Method Editor:

This editor provides intellisense as well as error recognition.

ScreenShot015

ScreenShot016

It will also automatically switch to the RAW edit mode when necessary, letting you select the raw body language of your choice.

ScreenShot008

ScreenShot018

ScreenShot019

Selecting the Snippet with method signature’s method type, will ask you to choose the class that will use the snippet: the entity or the collection.

ScreenShot022

Clicking OK will bring up the Snippet Method Editor:

It enables you to choose the language of your choice to write your snippet.

ScreenShot020

As for the Snippet with signature method type, selecting the Snippet without method signature’s method type, will also ask you to choose the class that will use the snippet: the entity or the collection.

ScreenShot023

Clicking OK will bring up the same Snippet Method Editor you’ve just seen.

This Method Editor is clearer and we hope it helps to make your developer life easier.

Cheers

Thibault Nestor

The Aspects and Producers property grid got better

October 3, 2012 Leave a comment

Remember the Aspects and Producers property grid we talk about in that previous post? Well, it just got better.

The Aspects and Producers property grid allows developers to view and edit all properties brought by aspects and producers which are used in the project of the currently selected object.

What changes is that as of today if you have several producers of the same type their properties will show up categorized under the name of the producer instead of its type name.

As a picture is worth a thousand words here is a before/after changes screenshot for a CodeFluent Entities model using two SQL Server producers:

before
Before

 image
After

That will definitely help to differentiate properties of each producer.

 

Cheers,

Thibault Nestor

The CodeFluent Entities Portable Modeler

September 11, 2012 1 comment

CodeFluent Entities has always included out-of-the-box a nifty little tool called the “Portable Modeler”. It’s a standalone CodeFluent Entities modeler application, not dependent on anything but the CodeFluent Entities product binaries. It means it’s not dependent on Visual Studio, but still allows to create, modify and save a CodeFluent Entities model:

It exists as an .exe file located in the installation directory, appropriately named “CodeFluent.Modeler.Portable.exe”. Note the product setup does not install a shortcut on it so you’ll have to create one by yourself, and point to it:

When you run it, it will just display a standard windowed application with Open, Save, etc. menu:

You can start a New CodeFluent Entities project from scratch (“New”), you can import an existing database (“Import”), or open an existing model (“Open”). Note the “Open” command also supports Visual Studio .cfxproj  (the file type of a CodeFluent Entities Model when integrated Visual Studio). If you open an existing CodeFluent Entities model and just see a white panel like this…:

… don’t panic :-) It just means there is no design surface defined for this model, and we don’t do this automatically for you (it requires a model change as a design surface is also a CodeFluent Entities model concept, just like the others), so you can add one like this:

Give this new design surface a name (here I chose ‘def’), press ok on the New Surface dialog box, and then you should this something like this (depending on your surface rendering settings, here I’m using the ‘metro’ style):

That’s it! Now you have access to the modeler ribbon we all love (it’s – almost – the same as the one in Visual Studio), there is also a right-click menu, and a property grid. Design surfaces are displayed as a list of Tabs (we can see the ‘Def’ tab above).

Note this tool is not officially supported – beyond a best effort move as usual :-), but very practical for example if you want to give non-developer users the ability to open, view, and possibly change a model, as it does not requires Visual Studio to run. Of course, it lacks some features, notably source control, the cool solution wizards, and a solution explorer-like tree view.

New CodeFluent Entities Menu in Visual Studio

July 12, 2012 Leave a comment

Since a few builds now, installing CodeFluent Entities adds a new menu in the Visual Studio toolbar:

image

 

This menu contains a set of shortcuts to get started quickly using CodeFluent Entities:

  • New Project…: equivalent to “File > New > Project…”
  • Import an Existing Database or Model…: launches a new wizard which is a combination of the starter wizard (to create and configure your solution) and the import wizard (to create a model from an existing line of business).

A detailed tutorial is available here: Get started from an existing database or model

  • Starter Wizard…: launches a wizard to help you create a brand new CodeFluent Entities solution.

A detailed tutorial is available here: Get started using the Starter Wizard

  • Getting Started: opens the Get Started page in a browser,
  • CodeFluent Entities Blog: opens this blog Winking smile
  • Online Documentation: opens the product documentation,
  • Submit Feedback: opens a feedback form you can use to send us your comments,
  • Product Updates: a link to the CodeFluent Entities RSS Feature Feed. You can subscribe to this RSS Feed to be automatically notified of new features and bug fixes in the product,
  • Request a FREE License: opens a form letting you retrieve a free personal license from Visual Studio,
  • About CodeFluent Entities…:

image

Cheers,

Carl Anderson

CodeFluent Entities: Metro Style

June 15, 2012 Leave a comment

Visual Studio 2012 RC is now available with its user interface updates and so is CodeFluent Entities Winking smile

From now on, CodeFluent Entities includes three styles by default:

  • Class Designer Style,
  • Blend Style,
  • the new Metro Style

Here’s a screenshot of this new Metro Style in Visual Studio 2012 RC:

CfeMetro

 

Same style in Visual Studio 2010:

MyLibraryModel2

 

What I really like about this new Metro Style is that it uses vector icons, making your model look a lot nicer when you zoom in closely:

Close-up using the Class Designer Style:

image

Close-up using the Metro Style:

image

 

From the “Solution Explorer”, doing a right-click on the “Surfaces” folder and selecting “Surface Rendering Configuration”, you can select one of the other provided styles or even create your own:

image

 

Hope you like it,

Carl Anderson

Many to Many Relationships with CodeFluent Entities

June 14, 2012 Leave a comment

Yesterday, Scott Allen posted on his OdeToCode.com blog a very interesting blog post named Many to Many Relationships with EF illustrating how to setup a many to many relationship with EF Code First and then, and it’s the interesting part to us, how to use the SelectMany operator to “flatten” a sequence of book authors.

In fact, we thought it was so interesting that we decided to post a little something showing how to do it in a model-first way, using CodeFluent Entities. The result is the same, yet the way to do it is quite different.

 

Developing the Sample

Unlike EF Code First, CodeFluent Entities is model-first, therefore it all starts by creating a model.

Here’s our model (btw here’s a little preview of our soon-to-come vector-based & metro style theme):

MyLibraryModel2

Code generators (named producers in the product) will translate this platform independent model into actual code. So the SQL Server producer will translate the Book and Author entities into tables, their properties into columns, since a many to many relationship is declared between the Book and Author entities, an association table will also be created.

Another nice feature which you can see in the screenshot above is that you can add what we call “instances” to your entities which will be translated by actual lines of data. It’s a convenient way to initialize your generated database with data.

Now that we have our database and data, let’s write our method which will load all this data in a flat view.

Using CodeFluent Entities you can create actual SQL views and that’s precisely what we did:

view

Note: see the “Auto infer lightweight entitiy” checkbox on the upper right? Checking this will generate a dedicated .NET class mapped to your view ;) See here for more info.

We created a view named “FlatView” which selects book ids, titles and author names. Here’s what it generates:

CREATE VIEW [dbo].[vBooksFlatView]
AS
SELECT [Books].[Id], [Authors].[Name], [Books].[Title]
    FROM [Books]
        LEFT OUTER JOIN [Authors_Books_Books_Authors] ON ([Books].[Id] = [Authors_Books_Books_Authors].[Id2])
                LEFT OUTER JOIN [Authors] ON ([Authors_Books_Books_Authors].[Id] = [Authors].[Id])
GO

Now that we have our view, we created method which loads from this view:

method

Methods are once again platform independent and will be translated in regular methods by a .NET producer or into stored procedures by a persistence producer. Here’s what the SQL Server producer generates:

CREATE PROCEDURE [dbo].[Books_LoadFromFlatView]
AS
SELECT [vBooksFlatView].[Id], [vBooksFlatView].[Name], [vBooksFlatView].[Title]
FROM [vBooksFlatView]

RETURN

Now let’s run side by side EF’s dynamically generated query (on the left) and CodeFluent Entities’ static one (on the right) to compare results:

result

Hooray, looks good Smile

 

Points of Interest

Many to many relationships are easy to setup: create two properties, hold shift+click and make them point to one another, set its cardinality, and you’ve got your relation! Association tables and all related code will automatically be generated.

Initialize your generated database with data: specify instances to get test data or default data.

No dynamic code: CodeFluent Entities generates stored procedures, views and etc. No dynamic code is used to so you can easily debug and predict what’s going to happen at runtime.

Platform Independent: all this logic is outside of your code, it documents your application and provides a clear picture of what the application does and how it does it. Furthermore, you can add producers to translate this model to other technologies: want to go from C# to VB.NET? Push a button. Support Oracle Database or generate WCF Services? Add a producer.

Cheers,

Carl Anderson

CodeFluent Entities: ASP.NET AJAX/JSON Producer sneak peek

June 8, 2012 1 comment

In the previous post we’ve seen how to generate in a few minutes an ASP.NET AJAX/JSON web site using the brand new producer (watch-out it’s pre-release software!), well here’s a sneak peek of what gets generated Smile

 

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

04 - Result

 

Clicking on an entity gets you to the entity page:

05 - EntityPage

 

On the 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 which correspond in fact to business methods provided by the entity:

image

 

The generated web site uses jQuery to contact JSON web services to retrieve the data, and jQuery UI and jqGrid to display it. By the way, you’ll notice the generated web site supports jQuery UI themes out-of-the-box:

06 - Themes

 

Cheers,

Carl Anderson

Designing Databases with CodeFluent Entities: Inheritance

April 20, 2012 Leave a comment

CodeFluent Entities tries to reduce the impedance mismatch between relational worlds and object-oriented worlds as much as possible and a good example of this I guess is how CodeFluent Entities supports inheritance across layers of your application.

Using CodeFluent Entities, an entity hierarchy defined in your model will be translated following the Table-Per-Type pattern in the persistence layer, when, in the generated business object model, this will be a regular class inheritance.

For instance, say we have the following hierarchy:

Here’s the result in the database:

Furthermore, data access methods will be modified accordingly to load the objects as expected in .NET. For instance, here’s the “Load” stored procedure that is automatically generated for the DiscountProduct entity:

CREATE PROCEDURE [dbo].[DiscountProduct_Load]
(
@Id [uniqueidentifier]
)
AS
SET NOCOUNT ON
SELECT DISTINCT [DiscountProduct].*, Product].* 
  FROM [DiscountProduct]
   INNER JOIN [Product] ON ([DiscountProduct].[Product_Id] = [Product].[Product_Id])
  WHERE ([DiscountProduct].[Product_Id] = @Id)

RETURN

Cheers,

Carl Anderson

Follow

Get every new post delivered to your Inbox.

Join 41 other followers