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 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:

Project

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.

Then verify that your account has the permissions to connect to the Sample database on your SQL server.

To do so:

Open Microsoft SQL Management Studio,
Connect to the instance pointed by your defined connection string,
Select the Security folder in the instance and expand it,
Select the Logins folder in the Security folder, and expand it,
Select your login, right-click on it and select Properties,
In the Login Properties window, select the User Mappings page,
Map the Sample database to your account and grant it the db_owner rights and click OK.

Note: CodeFluent doesn't necessarily need the db_owner rights on a database. For simplicity's sake, this tutorial grants them in order to avoid any unsufficient permission errors later on.

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).

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 Window1 class, we'll create our user interface. Here's the XAML:

Window1.xaml	Copy Code
<Window x:Class="Sample.WpfApplication.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Sample.WpfApplication" Height="300" Width="500" ResizeMode="CanResizeWithGrip"> <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>

Window1.xaml

Copy Code

Here's the code behind:

Window1.xaml.cs	Copy Code
public partial class Window1 : Window { public Window1() { 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(); } }

Window1.xaml.cs

Copy Code

public partial class Window1 : Window
{
       public Window1()
       {
           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();
       }
}

The OnCreateCustomerButtonClick method creates a customer from the values typed-in the _customerNameTextBox and the _customerAddressTextBox. The OnLoadCustomerListButtonClick loads all customers contained in the database.

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

CodeFluent Documentation	Send comments on this topic.
A Custom WPF Rich Client