Archive
Generating a WPF Smart Client using the Smart Client Producer
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 
.
Creating the solution
Start by creating a new CodeFluent Project. We’ll use the “ContactManager Sample Model” for the purpose of this article.
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.
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:
In the Target Directory field, select your Class Library project called ContactManager.
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:
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:
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:
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:
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):
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!
Enjoy!
Thibault Nestor
CodeFluent Entities: Metro Style
Visual Studio 2012 RC is now available with its user interface updates and so is CodeFluent Entities 
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:
Same style in Visual Studio 2010:
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:
Close-up using the Metro Style:
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:
Hope you like it,
Carl Anderson
CodeFluent Entities is not an ORM
CodeFluent Entities is a unique product integrated into Visual Studio 2008/2010/vNext which allows you to generate components such as scripts (e.g. T-SQL, PL/SQL), code (e.g. C#, VB), web services (e.g. WCF, ASMX) 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.
For instance, adding an instance of the SQL Server Producer to your project will translate your model into a database (schemas, tables, stored procedures, views, constraints, etc.):
Adding an instance of the Business Object Model Producer will translate your model into .NET classes (C# or VB.NET) consuming the persistence layer:
Adding a WCF Producer will generate WCF services, contracts and proxies exposing your .NET classes:
Adding a WPF Smart Client Producer will generate a WPF application consuming the WCF services thanks to the generated proxy:
And that’s just an example of what you can do: you can also build ASP.NET web sites, SharePoint apps, Windows Forms apps, Silverlight apps, etc.
Your application is layered following best practices, all its business logic is in the middle-tier (the Business Object Model generated by the Business Object Model producer), and supporting a new technology gets down to adding a new producer or creating screens on the generated code.
Last but not least, you can create your own producer which translates this inferred meta-model into what you need.
Cheers,
Carl Anderson
Visual Studio Tip: Opening XAML files fast
Developing WPF screens in Visual Studio 2010 SP1 using the Windows Presentation Foundation Designer, even in code view, can still be a drag as it’s slow and especially when opening a file.
Always open documents in full XAML view
The first step is to not open the design view. To do so go in “Tools > Options > Text Editor > XAML > Miscellaneous”, and check the “Always open documents in full XAML view” option:
Using the Source Code Editor
Openening XAML files in the Code View is better but if that’s still not enough for you as it was for me, here’s the ultimate tip: instead of opening them using the default editor (Windows Presentation Foundation Designer), open them using the “Source Code (Text) Editor“: it’s as fast as opening a classic XML file, and you’ll still get the auto-completion, which is not the case when using the “XML (Text) Editor” (yeah, I tried that one first 
).
To set that up, right-click on a XAML file and select “Open With…”, then in the dialog set the “Source Code (Text) Editor” as the default editor by clicking on the “Set as Default” button:
Now try opening one of your big WPF screen, and taa-daa!! It’s lightning fast!
Carl
CodeFluent Entities Webcast – December 6th 2011: Follow-up
Following the CodeFluent Entities Webcast post, an increasing number of you asked for the PowerPoint presentation used in the webinar: so here it is!
CodeFluent Entities Webcast – December 6th 2011
In this webinar a product team member demonstrates CodeFluent Entities.
Watching this webcast you’ll see:
- How to generate entire .NET applications from scratch
- How to absorb functional changes smoothly thanks to continuous generation
- How to decouple your business logic from technology
- How to import an existing database
Technologies featured in this product demonstration are:
- CodeFluent Entities,
- Visual Studio 2010,
- Microsoft SQL Server,
- .NET (C#),
- .NET Console Application,
- Windows Communication Foundation (WCF),
- Windows Presentation Foundation (WPF),
- ASP.NET MVC,
- Microsoft Access
Here’s a recording of the full webcast:
Note: Watch the video in HD by selecting the 720p option instead of the default 360p on the bottom right section of the player.
CodeFluent Entities & WPF
Last week we posted a series of blog posts on “CodeFluent Entities & WPF”, so here’s a quick post listing all those posts:
- CodeFluent Entities & WPF: Selecting Data
- CodeFluent Entities & WPF: Paging Data
- CodeFluent Entities & WPF: Master/Details
- CodeFluent Entities & WPF: Validation
There are less posts than in the ASP.NET series, mostly because writing desktop applications has less restrictions and developers can call the generated methods directly. Feel free to comment this post if you’re interested in a post illustrating a particular feature.
Hope this helps,
Carl
CodeFluent Entities and WPF: Validation
As all entity classes generated by CodeFluent Entities implement the IDataErrorInfo interface, an interface supported natively across all .NET applications for validation purposes (ASP.NET, WPF, Windows Forms, Silverlight), setting up validation in your user interface can be done without a single line of code.
If you remember our ASP.NET Web Forms Validation post, we declared a validation rule on each of our two properties (FirstName, LastName) stipulating that names including a ‘_’ should be considered invalid. In our previous post, we created a Master/Detail screen listing all our contacts, and upon selection, filling an associated form. In this post, we’ll extend this last example by adding a UI representation indicating the user the typed-in string is invalid. Here’s the code:
<StackPanel Margin="10">
<TextBlock FontWeight="bold" Margin="5">Contacts:</TextBlock>
<ListBox Name="_contactsListBox" />
<TextBlock FontWeight="bold" Margin="5,10,5,5">Details:</TextBlock>
<StackPanel DataContext="{Binding ElementName=_contactsListBox, Path=SelectedItem}" Margin="5">
<TextBlock>FirstName:</TextBlock>
<TextBox Text="{Binding Path=FirstName, UpdateSourceTrigger=PropertyChanged,
ValidatesOnDataErrors=True, NotifyOnValidationError=true}" />
<TextBlock>LastName:</TextBlock>
<TextBox Text="{Binding Path=LastName, UpdateSourceTrigger=PropertyChanged,
ValidatesOnDataErrors=True, NotifyOnValidationError=true}" />
</StackPanel>
</StackPanel>
It’s exactly the same as yesterday’s code, except that we set the ValidatesOnDataErrors and NotifyOnValidationError options on our binding, to indicate to display the error template if an error is raised.
Here’s the result:
Already pretty cool, but not great, as the user doesn’t know why the textbox is turning red.
That’s where WPF comes in action: you can define a custom validation error template. In our case we’ll replace the default template by ours, which will circle the textbox in red, display a red ‘*’ and the error message in the tooltip.
Here’s the XAML:
<Window.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<DockPanel LastChildFill="True">
<TextBlock DockPanel.Dock="Right" Foreground="Red" FontSize="14pt" Margin="-15,0,0,0" FontWeight="Bold">*
</TextBlock>
<Border BorderBrush="Red" BorderThickness="1">
<AdornedElementPlaceholder Name="controlWithError"/>
</Border>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
And here’s the result:
Tadaaa!
CodeFluent Entities and WPF: Master/Details
This one is actually dead easy in WPF thanks to its advanced data-binding mechanism. In this post, we’ll start from a simple ListBox listing all our contacts, which upon selection of one of its item, will display its details underneath.
Here’s the XAML:
<StackPanel Margin="10">
<TextBlock FontWeight="bold" Margin="5">Contacts:</TextBlock>
<ListBox Name="_contactsListBox" />
<TextBlock FontWeight="bold" Margin="5,10,5,5">Details:</TextBlock>
<StackPanel DataContext="{Binding ElementName=_contactsListBox, Path=SelectedItem}" Margin="5">
<TextBlock>FirstName:</TextBlock>
<TextBox Text="{Binding Path=FirstName}" />
<TextBlock>LastName:</TextBlock>
<TextBox Text="{Binding Path=LastName}" />
</StackPanel>
</StackPanel>
As you can see in the code above, we’ve got a ListBox listing our contacts, and underneath a StackPanel containing a couple TextBlocks and TextBoxes which detail the selected contact. This StackPanel is data-bound to the SelectedItem of the Contact ListBox, so selecting a contact will automatically display its details underneath.
Here’s the code-behind (just a single line to load all contacts in our ListBox):
public MasterDetail()
{
InitializeComponent();
_contactsListBox.ItemsSource = ContactCollection.LoadAll();
}
Here’s the result:
CodeFluent Entities and WPF: Paging Data
Surprisingly, WPF DataGrid and ListView controls don’t provide built-in support to page data, nonetheless you can implement it pretty easily as illustrated with the WPF Pager Control example provided by Microsoft and available here: http://cid-51b2fdd068799d15.office.live.com/self.aspx/.Public/Samples%5E_2010/20100929%5E_DataPagerForWPF.zip
The DataPager control is a simple stack panel with buttons allowing to navigate pages. As provided in the sample, pages are built when assigning the full collection of elements, and it exposes a CurrentPage property which other controls can bind to. Consequently, here’s our paged window:
<StackPanel>
<ListView ItemsSource="{Binding ElementName=_dataPager, Path=CurrentPage}">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn Header="FirstName" Width="100" DisplayMemberBinding="{Binding FirstName}"/>
<GridViewColumn Header="LastName" Width="100" DisplayMemberBinding="{Binding LastName}"/>
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
<local:DataPager x:Name="_dataPager" ItemsPerPage="4" />
</StackPanel>
And here’s the code-behind of our window:
public PagingData()
{
InitializeComponent();
_dataPager.ItemsSource = ContactCollection.LoadAll();
}
As you can see once initialized, we’re assigning the complete collection of items to our DataPager control, and our ListView is bound to the CurrentPage property of the pager.
Note 1: To use actual pages of data from database, you’d have to change the DataPager control so it uses behind the scenes the PageLoadAll method with the proper page index and page sizes, instead of loading everything and creating pages.
Note 2: for this sample to work, we slightly modified the DataPager provided so it uses the IList type (implemented by CodeFluent Entities generated classes) instead of the ObservableCollection<object> type.
Here’s the result:
