Generate data-bound Extensible Application Markup Language using IBM Database Add-ins for Visual Studio

Learn to create Windows Presentation Foundation XAML applications with ease utilizing IBM Database Add-ins for Visual Studio

IBM® now has support for the new .NET Framework 3.5 Windows® Presentation Foundation (WPF), allowing you to create data-bound Extensible Application Markup Language (XAML) applications that map directly to any IBM data server relational object. The IBM Database Add-ins for Visual Studio toolset allows you to create data-bound XAML applications without having knowledge of XAML or a deep understanding of IBM databases. The Microsoft® WPF provides the base for building applications and high fidelity experiences in Windows Vista, blending together application UI, documents, and media content, while exploiting the full power of your computer. WPF is a new technology to create rich applications on the Windows platform with ease. It provides a simple interface to meet growing demands of graphics, images, and audio and video in applications.

Share:

Farzad Farahbod, Technical Lead, IBM DB2 .NET XML and LINQ Tooling, IBM, Software Group

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, Advisory Software Engineer, IBM

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



18 December 2008

Also available in Chinese

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.

Figure 1. Add Connection
Add Connection

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.

Figure 2. Add Connection dialog
Add Connection dialog

Expand the Tables node under the connection.

Figure 3. Expand Tables node
Expand Tables node

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.

Figure 4. Generate XAML application
Generate XAML application

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

Figure 5. Generated XAML application
Generated XAML application

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

Figure 6. Generated XAML application 2
Generated XAML application 2

Generated XAML code is shown here

Listing 1. Generated XAML code
<!-- <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.

Listing 2. Generated code
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.

Figure 7. Execute the created XAML application
Execute the created XAML application

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

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

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Information management on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Information Management, XML
ArticleID=359448
ArticleTitle=Generate data-bound Extensible Application Markup Language using IBM Database Add-ins for Visual Studio
publish-date=12182008