IBM Database Add-ins for Visual Studio gives users of WPF an easy way to create database data sources for an XAML application. The IBM Visual Studio Add-ins creates three types of database bindings in a generated XAML application:

• Free text: Demonstrating how a textbox can be bound to a table column
• List box: Demonstrating how a list box can be bound to a table column
• Grid: Demonstrating how a grid view can be bound to a table

Prerequisites

In order to create a WPF applications using the IBM Database Add-ins for Visual Studio XAML generation feature, you must have the following:

• Visual Studio 2008 Professional Edition
• IBM Database Client, V9.5 FP2 or later
• IBM Database Add-ins for Visual Studio, Version 9.5 FP2 or later
• Access to an IBM databases (DB2® or Informix®)

General familiarity with the IBM Database Add-ins for Visual Studio is also assumed. To become more familiar with the general features of the IBM Database Add-ins for Visual Studio, read "Overview of IBM Database Add-ins for Visual Studio 2005" (developerWorks, December 2005) and the Develop proof-of-concepts .NET applications tutorial series.

New users to WPF concepts and .NET Framework 3.0 can get acquainted to this new technology by referring to the following resources:

WPF on Microsoft .NET Framework

Microsoft Windows Client .NET

Windows Presentation Foundation on MSDN .NET Framework Developer Center

Create a WPF application

This article provides an insight into creating an XAML application that connects to an IBM database server and also how data is shown and synchronized in XAML applications. In this sample application, information from Employee table is bound to an XAML form, and when the application is executed, a list box shows all employee IDs. When a particular ID is selected, all related records from that ID are displayed in the specified text box and also detailed information of the selected Employee is shown in a grid. This sample application shows ease of use of this technology and users can utilize sample code to customize their applications.

Launch Visual Studio 2008 and create connection to the database. Right-click on Data Connection in Server Explorer and select Add Connection, which launches the Add connection dialog, as shown in Figure1.

In the Data Source field, select IBM DB2, IDS and U2 Servers (IBM DB2, IDS, and U2 Data Provider for .NET Framework), and provide a server name, user ID, and password. Click Test Connection to verify if the connection has been made successfully. Click OK.

Expand the Tables node under the connection.

A table, view, or stored procedure can be selected in Server Explorer to create an XAML application.

Right-click the EMPLOYEE table and select Generate XAML application from the context menu.

The XAML application is generated using the selected object, which includes a combination of all binding types, as mentioned above.

The generated application and XAML for the Employee table is shown in Figure 6.

Generated XAML code is shown here

				
<!-- <snippet1> -->
<!-- <snippet2> -->
<Window x:Class="IBMWPFSampleApp.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" 
    Title="Employee Information"
    Loaded="WindowLoaded" Width="595" Height="650" AllowsTransparency="False"
         Background="LightSteelBlue" ShowInTaskbar="True">
	<!-- </snippet2> -->
<!-- <snippet8> -->
	<Grid x:Name="mainGrid">
	<!-- </snippet8> -->

		<!-- <snippet3> -->
		<Grid.Resources>
			<DataTemplate x:Key="ListItemsTemplate">
				<TextBlock Text="{Binding Path=EMPNO}"/>
			</DataTemplate>
		</Grid.Resources>
		<!-- </snippet3> -->

		<!-- <snippet4> -->
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" MinHeight="238" />
			<RowDefinition Height="307"/>
			<RowDefinition Height="3"/>
		</Grid.RowDefinitions>

		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="181*" />
            <ColumnDefinition Width="46*" />
            <ColumnDefinition Width="100*" MinWidth="75" />
			<ColumnDefinition Width="2*" />
            <ColumnDefinition Width="183*" />
            <ColumnDefinition Width="61*" />
        </Grid.ColumnDefinitions>
		<!-- </snippet4> -->

		<!-- <snippet5> -->
		<StackPanel Orientation="Vertical" Grid.Column="4"
                 HorizontalAlignment="Right" Margin="0,0,84.677,0" Width="0"></StackPanel>
		<!-- </snippet5> -->

		<!-- <snippet6> -->
		<StackPanel Orientation="Vertical" Grid.ColumnSpan="2"
                 HorizontalAlignment="Left">
			<Label Margin="20,5,5,0">EMPNO</Label>
			<ListBox x:Name="listBox1" Height="216" Width="202"
                 HorizontalAlignment="Left" 
                     ItemTemplate="{StaticResource ListItemsTemplate}"
                     IsSynchronizedWithCurrentItem="True" Margin="20,5,5,5"
                     Background="BurlyWood" />
		</StackPanel>

		<StackPanel Orientation="Vertical" Grid.Column="4"
                 HorizontalAlignment="Right" Height="238.277" VerticalAlignment="Top"
                 Width="51" Margin="0,0,33.677,0"></StackPanel>
		<!-- </snippet6> -->
		
		<!-- <snippet7> -->
		<WindowsFormsHost Grid.Row="1" Grid.ColumnSpan="5" Margin="20,5,38.677,2">
			<wf:DataGridView x:Name="dataGridView1"/>
		</WindowsFormsHost>
        <TextBox Margin="0,33.277,0,0" Text="{Binding Path=EMPNO}" Grid.Column="2"
         Height="19.277" VerticalAlignment="Top" HorizontalAlignment="Left" Width="68" />
        <Label Margin="1,4,0,0" Grid.Column="2" Height="23.277"
         VerticalAlignment="Top" HorizontalAlignment="Left" Width="68">EMPNO:</Label>
        <Label Height="23.277" HorizontalAlignment="Left" Margin="1,67,0,0"
         VerticalAlignment="Top" Width="68" Grid.Column="2">First Name:</Label>
        <TextBox Height="19.277" HorizontalAlignment="Left" Margin="1,88,0,0"
         Text="{Binding Path=FIRSTNME}" VerticalAlignment="Top" Width="68"
         Grid.Column="2" />
        <Label Height="23.277" HorizontalAlignment="Left" Margin="1,113,0,0"
         VerticalAlignment="Top" Width="68" Grid.Column="2">Last Name:</Label>
        <TextBox Height="19.277" HorizontalAlignment="Left" Margin="1,0,0,103"
         Text="{Binding Path=LASTNAME}" VerticalAlignment="Bottom" Width="68"
         Grid.Column="2" />
        <!-- </snippet7> --></Grid>
</Window>
<!-- </snippet1> -->

The data binding code and data synchronization code are also generated automatically. The following C# code is generated by IBM Database Visual Studio Add-in to bind the Employee table.

				
namespace IBMWPFSampleApp
{
    public partial class Window1 : Window
    {
        //<snippet11>
        private System.Windows.Forms.BindingSource sampleBindingSource;
        private  SampleDataset  smplDataSet;
        private SampleDatasetTableAdapters.EMPLOYEETableAdapter  dept1TableAdapter = 
            new SampleDatasetTableAdapters.EMPLOYEETableAdapter() ;
        //</snippet11>
        //<snippet12>
        public Window1()
        {
            InitializeComponent();

            // Create a DataSet for the EMPLOYEE data.
            this.smplDataSet = new SampleDataset();
            this.smplDataSet.DataSetName = "smplDataSet";

            // Create a BindingSource for the EMPLOYEE data.
            this.sampleBindingSource = new System.Windows.Forms.BindingSource();
            this.sampleBindingSource.DataMember = "EMPLOYEE";
            this.sampleBindingSource.DataSource = this.smplDataSet;
        }
        //</snippet12>
  
        //<snippet13>
        private void WindowLoaded(object sender, RoutedEventArgs e)
        {
            // Fill the Employee  table adapter with data.
            this.dept1TableAdapter.ClearBeforeFill = true;
            this.dept1TableAdapter.Fill(this.smplDataSet.EMPLOYEE);

            // Assign the BindingSource to 
            // the data context of the main grid.
            this.mainGrid.DataContext = this.sampleBindingSource;

            // Assign the BindingSource to 
            // the data source of the list box.
            this.listBox1.ItemsSource = this.sampleBindingSource;

            // Because this is a master/details form, the DataGridView
            // requires the foreign key relating the tables.
            this.dataGridView1.DataSource = this.sampleBindingSource;

            // Handle the currency management aspect of the data models.
            // Attach an event handler to detect when the current item 
            // changes via the WPF ListBox. This event handler synchronizes
            // the list collection with the BindingSource.
                        
            BindingListCollectionView cv = CollectionViewSource.GetDefaultView(
                this.sampleBindingSource) as BindingListCollectionView;
            cv.CurrentChanged += new EventHandler(WPF_CurrentChanged);
        }
        //</snippet13>

        //<snippet14>
        // This event handler updates the current item 
        // of the data binding.
        void WPF_CurrentChanged(object sender, EventArgs e)
        {
            BindingListCollectionView cv = sender as BindingListCollectionView;
            this.sampleBindingSource.Position = cv.CurrentPosition;
        }
        //</snippet14>

The following changes are generated automatically when the XAML project is created:

• A reference to the IBM data provider is added to the XAML project.
• A strongly-typed dataset is added to the project with a collection of all selected data tables (for example the Employee table).
• XAML C# code is generated and the dataset is initialized.
• A new Windows form BindingSource object is created and a dataset gets assigned to the data source property.
• Once the BindingSource is initialized with the dataset, the code loads each table so the sample can access its fields, for example calling a dataset to fill the Employee table.
• BindingSource gets assigned to the data context of the main grid, which is a main container control holding all child controls in the form, and also to the data source property of the list box and the grid control. Once the code binds all controls to the BindingSource object, then all fields are accessible in the XAML part.
• The code generator also generates a sample for the visual part of XAML project defining all UI elements.
• In the UI generation process, each control gets assigned its associated data member (for example, for the list box Employee ID, for grid all fields in the Employee table, and for each text box individual fields from the Employee table gets assigned.

Press F5 to run the generated application. Figure 7 shows the Employee XAML application, which was generated using the IBM DB2 sample database Employee table. The three types of binding are shown in Figure 7. You may need to modify the horizontal alignment or move the text box around to see the values displayed properly.

Conclusion

IBM Database Add-ins for Visual Studio allows the creation of data-bound XAML applications that map directly to relational objects in IBM data servers. Its simplified approach helps users by removing requirements for having knowledge of XAML or extensive understanding of IBM databases. Very little coding effort is required to create rich applications, as generated code provides a sufficient idea on how to customize the applications. WPF provides a platform of choice for demanding applications with improved development experience.

Resources

Learn

• Develop proof-of-concept .NET applications tutorial series (developerWorks): Create proof-of-concept applications to access relational and XML data in IBM DB2 9, using Microsoft Visual Studio .NET 2005.
  
  
• DB2 9.5 Information Center for Linux, UNIX, and Windows: Find information describing how to use the DB2 family of products and features, as well as related WebSphere Information Integration products and features.
  • IBM Database Add-Ins for Visual Studio Overview: Read more about the features that are available in the IBM Database Add-ins.
  
  
• developerWorks IBM Information Management and Visual Studio .NET: Find more resources for DB2 .NET developers.
  
  
• DB2 for .NET: Innovate with Visual Studio. Find more information on the IBM Database Add-Ins for .NET.
  
  
• developerWorks Information Management zone: Learn more about Information Management. Find technical documentation, how-to articles, education, downloads, product information, and more.
  
  
• Stay current with developerWorks technical events and webcasts.
  
  
• developerWorks Architecture zone: Get the resources you need to advance your skills in the architecture arena.
  
  
• Browse the technology bookstore for books on these and other technical topics.
  
  

Get products and technologies

• Download IBM product evaluation versions and get your hands on application development tools and middleware products from IBM Information Management, Lotus®, Rational®, Tivoli®, and WebSphere®.
  
  

Discuss

• Participate in the discussion forum.
  
  
• Check out developerWorks blogs and get involved in the developerWorks community.
  
  

About the authors

Farzad Farahbod is an advisory software engineer working at the IBM Silicon Valley Lab, providing tools for seamless integration with IBM servers. He is the Visual Studio .NET XML tooling lead.

Ajay Aggrwal is an advisory software engineer with the IBM Database Add-ins for Visual Studio team.

Comments (Undergoing maintenance)

Back to top

Trademarks  |  My developerWorks terms and conditions

Table of contents

• Prerequisites
• Create a WPF application
• Conclusion
• Resources
• About the authors
• Comments

Local resources

• IBM Innovation Center - Austin, TX
• IBM Innovation Center - Chicago, IL
• IBM Innovation Center - Dallas, TX
• IBM Innovation Center - San Mateo, CA
• IBM Innovation Center - Waltham, MA
• Technical Briefings in North America

My developerWorks community

Dig deeper into Information Management on developerWorks

DB2 pureScale

See how true transparent scaling architecture can be achieved on distributed platforms

Special offers