CodeFluent Entities Documentation
A Custom WPF Rich Client
See Also Send comments on this topic.
CodeFluent Entities > Tutorials > Using The Modeler Edition > Developing Desktop Applications > A Custom WPF Rich Client

Glossary Item Box

Creating the foundations of your application

Before taking care of the user interface, we must set up a data tier. The data tier is the place where the application will persist all of its data and is therefore commonly referred to as the persistence layer. On top of that layer, CodeFluent Entities allows us to generate a middle tier which will contain a set of objects enabling developers to:
  1. manipulate the data objects stored in the persistence layer,
  2. define the business logic of our application.
Therefore, this middle tier is known as the Business Object Model (BOM). In the end, whatever the user interface or the type of architecture is, the persistence layer (containing the data) and the business layer (containing the business logic) are always the fundamental pillars of an application. Since those two layers are common to all types of applications, their creation won't be detailed in this article; instead this article extends the The Persistence and the Business Layers one by using them in a Windows Presentation Foundation (WPF) rich client.

Preparing the WPF application development environment

First of all we're going to add a new WPF Application Project to our solution. To do so:
• Select the solution in the Solution Explorer, right-click, and select Add, then New Project...
• In the project types tree view select the Windows type, and select the WPF Application project template,
• Name it Sample.WPFApplication,
 


 

• Reference the Sample project, and the CodeFluent.Runtime.dll,
• Add an application configuration file named App.config to the project.
At this point your Sample.WPFApplication should look like this:


 

Before starting to code our application, we need to configure it properly. First, we're going to add a configuration section to the App.config file of our project that indicates our Business Object Model (BOM) to which database to connect to.
Open the App.config file in Visual Studio and add the following below the configuration XML node:

App.config Copy Code 
<configSections>
   <section name="Sample" type="CodeFluent.Runtime.CodeFluentConfigurationSectionHandler, CodeFluent.Runtime" />
</configSections>
<Sample connectionString="server=(local);database=Sample;Integrated Security=true"/>

 

Note: Depending on your configuration, you might have to modify the connection string so it points to the Sample that was generated in the The Persistence And The Business Layers tutorial.

Now that our environment is properly configured (our application has a connection string pointing to its database, and is executed under an account with the rights to read and update data), we can develop our User Interface (UI).

Setting the Target framework

By default, Microsoft Visual Studio sets the target framework to .NET Framework 4 Client Profile. We're going to change the target to .NET Framework 4 in order to use the standard libraries.

Note: Skip this section of the tutorial if you're using Microsoft Visual Studio 2008

 

Click Yes on the information popup.


 

Developing the UI

The UI layer should only contain presentation code, all of the business logic should be in the Business Object Model (BOM). Hence, BOM objects are made to be data bound to, and provide advanced features to ease presentation layer developments such as validation capabilities, paging, sorting, caching, and so on.

In this tutorial, we'll focus on a basic example that illustrates the data binding principle. We're going to create a Windows Form which allows end-users to create and view customers.

You'll see that thanks to the BOM, practically no code behind is needed, the presentation layer will contain exclusively presentation code: this is a capital concern in order to create highly evolutive and maintainable applications. Thanks to this architecture, adding user interfaces is made easier, since only the way of presenting the same business data and logic is changed.
In the MainWindow class, we'll create our user interface. Here's the XAML:

Window1.xaml Copy Code 
<Window x:Class="Sample.WPFApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="500">
    <Window.Resources>
        <DataTemplate x:Key="CustomerDataTemplate">
            <StackPanel>
                <TextBlock Text="{Binding Path=Name}" FontWeight="Bold"/>
                <TextBlock Text="{Binding Path=Address}" Margin="5,0,0,0"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <GroupBox Header="Create a customer">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <StackPanel Grid.Column="0">
                        <Label Content="Name:"/>
                        <TextBox Name="_customerNameTextBox" Margin="2,0,2,0"/>
                    </StackPanel>
                    <StackPanel Grid.Column="1">
                        <Label Content="Address:"/>
                        <TextBox Name="_customerAddressTextBox" Margin="2,0,2,0"/>
                    </StackPanel>
                    <Button Grid.Column="2" Name="_createCustomerButton"
                           Content="Create" VerticalAlignment="Bottom"
                           Click="OnCreateCustomerButtonClick"/>
                </Grid>
            </GroupBox>
            <Button Name="_loadCustomerListButton" Content="Load Customer List" Margin="5,5,5,5"
                   Click="OnLoadCustomerListButtonClick"/>
            <GroupBox Header="List customers">
                <ListBox Name="_customerListBox" MinWidth="450" MinHeight="100"
                        ItemTemplate="{StaticResource CustomerDataTemplate}"/>
            </GroupBox>
        </StackPanel>
    </Grid>
</Window>

Here's the code behind:

MainWindow.xaml.cs Copy Code 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void OnCreateCustomerButtonClick(object sender, RoutedEventArgs e)
        {
            Customer customer = new Customer();
            customer.Name = _customerNameTextBox.Text;
            customer.Address = _customerAddressTextBox.Text;
            customer.Save();
        }
        private void OnLoadCustomerListButtonClick(object sender, RoutedEventArgs e)
        {
            _customerListBox.ItemsSource = CustomerCollection.LoadAll();
        }
    }

In the end, the WPF Application will look as so:


 

See Also