Archive

Archive for the ‘WPF’ 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

Visual Studio Tip: Opening XAML files fast

December 22, 2011 2 comments

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:

image

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

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:

image

Now try opening one of your big WPF screen, and taa-daa!! It’s lightning fast!

Carl

CodeFluent Entities & WPF

December 6, 2011 Leave a comment

Last week we posted a series of blog posts on “CodeFluent Entities & WPF”, so here’s a quick post listing all those posts:

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

December 1, 2011 1 comment

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:

image

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:

image

Tadaaa!

CodeFluent Entities and WPF: Master/Details

November 30, 2011 2 comments

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:

image

CodeFluent Entities and WPF: Paging Data

November 29, 2011 1 comment

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:

image image

CodeFluent Entities and WPF: Selecting Data

November 28, 2011 1 comment

Following our ASP.NET post series, this post starts a new one but this time in WPF Smile

Selecting data in a WPF application using CodeFluent Entities generated .NET classes, known as the Business Object Model (BOM), is very straightforward. There’s actually very little to do since the generated classes implement all .NET interfaces so developers get the best experience possible when building there UI: IEnumerable, IEnumerable<T>, IList, IList<T>,  ICollection, ICollection<T>, IBindingList, INotifyPropertyChanged, INotifyCollectionChanged, IRaiseItemChangedEvents, etc.

Therefore, to display a list of items in an ItemsControl all you have to do is is set the loaded collection as the ItemsSource of the control:

XAML:

<StackPanel>
    <StackPanel Orientation="Horizontal" Margin="0,5,0,5">
        <Button Name="_loadAllButton" Content="LoadAll" Click="OnLoadAllButtonClick" Width="100" Margin="20,5,20,5" />
        <Button Name="_clearAll" Content="Clear" Click="OnClearAllClick" Width="100" Margin="20,5,20,5" />
    </StackPanel>
    
    <ListBox Name="_contactsListBox" />
</StackPanel>

C#:

private void OnLoadAllButtonClick(object sender, RoutedEventArgs e)
{
    _contactsListBox.ItemsSource = ContactCollection.LoadAll();
}

private void OnClearAllClick(object sender, RoutedEventArgs e)
{
    _contactsListBox.ItemsSource = null;
}

This will display the following:

image

As you can see, if no data template is specified, the Entity Display Name is used which in our case is the FirstName property of our Contact entity.

If you want to display your contacts in the following format: “<LastName>, <FirstName>” you can define a data template such as this:

<ListBox Name="_contactsListBox">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding LastName}" FontWeight="Bold" />
                <TextBlock Text=", " />
                <TextBlock Text="{Binding FirstName}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Here’s the result:

image

Generate WPF Smart-Clients using CodeFluent Entities (video)

June 29, 2011 4 comments

CodeFluent Entities ships a WPF Smart-Client Producer (beta) which allows developers to generate a WPF application using WCF to communicate with the server.

The following video shows the producer’s output, and the application you see running in it is a 100% generated (database, object model, WCF services, WCF proxy, as well as WPF screens).

WPF Smart-Client Producer

This demo is actually part of the webinar so if you want to know more on what is shown, I invite you to take a look at our last webinar: http://blog.codefluententities.com/2011/06/16/codefluent-entities-webinar-june-15th-2011/

BooleanToVisibilityConverter


Developing a WPF application, and you’re looking for a way to display automatically a control depending if a value is true or false?

You probably noticed by now that there are no boolean property Visible on WPF controls like there was in Windows Forms, but instead a Visibility property taking a Visibility enumeration. This then means that you’re going to have to convert your boolean value into a Visibility enumeration value.

We’ve seen in several projects that developers usually write a WPF converter so they can bind to their boolean while converting it to the proper value. That’s great and that’s the way to do it, however, did you know that the .NET Framework already provides such converter?!

Starting from the .NET 3.0, the PresentationFramework.dll, in the System.Windows.Controls namespace, provides a BooleanToVisibilityConverter which does the job, without you having to write some extra-lines of code Winking smile

Carl Anderson

Follow

Get every new post delivered to your Inbox.

Join 48 other followers