Data Binding Techniques Using Visual Studio.NET and JDeveloper

Introduction

Today data binding techniques are very easy to apply using IDE such as Microsoft Visual Studio.NET and Oralce JDeveloper. In this article, I will show how to develop a client/server enterprise application by applying the Model-View-Controller (MVC) design pattern and using development tools such as Microsoft Visual.NET and Oracle JDeveloper.

Data binding in Visual Studio.NET

In this section, we're going to build a two-tier enterprise application using Visual Studio.NET and the underlying data binding framework. The first step is to start the Visual Studio.NET, and then create a connection to the underlying database using Data Connection tree in the Server Explorer. Go to the Server Explorer window, right-click on the Data Connections node and choose Add Connection from the context menu. In the Add Connection dialog, enter the information to connect to the AdventureWorks database shipped with the installation of Microsoft SQL Server 2005 (see Figure 1).



Figure 1

Now let's create a solution and two projects: one as class library to package the business logic layer's components (see Figure 2) and the other as Windows Application (see Figure 3) to package the presentation layer's components.



Figure 2



Figure 3

Now we're going to create the business components for the business logic module. As illustrative, we're going to use the Production.Product and Production.ProductModel tables in the AdventureWorks. For this purpose, we're going to create the business entities using Dataset object model. In the Solution Explorer window, right-click on the BusinessLogicCompPkg project, select Add | New Item from the context menu and select Dataset item from the Add New Item dialog box (see Figure 4).



Figure 4

Once the DataSet designer is open, you can define business entities by right-clicking on the DataSet designer and selecting Add | TableAdapter option from the context menu. When the Table Adapter Configuration Wizard appears, in the Step 1, you choose the created data connection (see Figure 5). Click on Next button.



Figure 5

In the Step 2, you specify how to store the connection string in the configuration file. Click on Next button. In the Step 3, you can specify the access method to the database. In this case, we're going to write SQL statements (see Figure 6).



Figure 6

In the Step 4, you must write the underlying SQL SELECT statement (see Figure 7). Click on the Next button.



Figure 7

The final step is for choose the methods associated to the Data Adapter in order to interact with the data source (see Figure 8).



Figure 8

Repeat this step in order to create the ProductModel entity. After that, the data set resembles as in Figure 9.



Figure 9

Finally, compile this project and we're read to use these business components. Now let's move on to the presentation project. Let's add a MenuStrip control from the Toolbox onto the main form. In the menu, create a sub-menu named Entities with two inner child menus named Product and Product Model. Finally, let's add an event handler for the Click event for the Product and Product sub-menu (see Figure 10).



Figure 10

Now let's add two child forms to display data of the Product and ProductModel entities and a reference to the BusinessLogicCompPkg assembly in order to invoke its objects (see Figure 11).



Figure 11

Now let's work on the ProductForm. Go to the Data Sources window and click on Add New Data Source icon in order to open the Data Source Configuration Wizard. In the first step, we choose to consume the data from the objects (the business entities created before). Click on Next button. In the Step 2, choose the data objects to bind to the GUI application, in this case the ProductDS object (see Figure 12).



Figure 12

Now you can see the Product and ProductModel entities in the Data Sources window. The next step in the application is to configure the Product to be displayed in details mode (see Figure 13) and the.



Figure 13

You must configure the ProductModelID attribute as a combo box (Figure 14).



Figure 14

Drag and drop the ProductModel node from the Data Sources window onto the ProductModelID attribute.

Now we need to add the business logic using C# to fill the data set and update the data source from the changes from the data set (see Listing 1)

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using BusinessLogicCompPkg;
using BusinessLogicCompPkg.ProductsDSTableAdapters;

namespace AppGUI
{
    public partial class ProductForm : Form
    {
        public ProductForm()
        {
            InitializeComponent();
        }

        private void ProductForm_Load(object sender, EventArgs e)
        {
            ProductTableAdapter taProduct = new ProductTableAdapter();
            taProduct.Fill(productsDS.Product);
 
            ProductModelTableAdapter taProductModel = new ProductModelTableAdapter();
            taProductModel.Fill(productsDS.ProductModel);
        }

        private void productBindingNavigatorSaveItem_Click(object sender, EventArgs e)
        {
            this.Validate();
            this.productBindingSource.EndEdit();
 
            ProductTableAdapter taProduct = new ProductTableAdapter();
            taProduct.Update(productsDS.Product);
        }
    }
}

Listing 1

Now let's go to the ProductModelForm form how to create a master/detail oriented form. Let's configure the ProductModel node as Details (see Figure 15).



Figure 15

Then drag and drop the ProductModel onto the ProductModelForm. Then, drag and drop the Product node inside the ProductModel node onto the ProductModelForm. Now we need to add the business logic to fill and update the Product and ProductModel (see Listing 2).

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using BusinessLogicCompPkg;
using BusinessLogicCompPkg.ProductsDSTableAdapters;

namespace AppGUI
{
    public partial class ProductModelForm : Form
    {
        public ProductModelForm()
        {
            InitializeComponent();
        }

        private void ProductModelForm_Load(object sender, EventArgs e)
        {
            ProductTableAdapter taProduct = new ProductTableAdapter();
            taProduct.Fill(productsDS.Product);

            ProductModelTableAdapter taProductModel = new ProductModelTableAdapter();
            taProductModel.Fill(productsDS.ProductModel);
        }

        private void productModelBindingNavigatorSaveItem_Click(object sender, EventArgs e)
        {
            this.Validate();
            this.productModelBindingSource.EndEdit();
            this.productBindingSource.EndEdit();

            ProductTableAdapter taProduct = new ProductTableAdapter();
            taProduct.Update(productsDS.Product);

            ProductModelTableAdapter taProductModel = new ProductModelTableAdapter();
            taProductModel.Update(productsDS.ProductModel);
        }
 
    }
}

Listing 2

Data binding in JDeveloper

In this section, we're going to build a two-tier enterprise application using ADF Business Components as the business layer containing the business logic, validations and business rules and ADF Swing as the presentation layer for gathering and displaying information.
The first step is to start the JDeveloper, and then create a connection to the default ORCL database (shipped with Oracle database installation) using JDBC as the main API to access the relational data source from your application. Go to the Connections Navigator window, right-click on the Database node and choose New Database Connection from the context menu. The Create Database Connection Wizard appears then; click on Next button and in the Step 1 set a name for the connection (see Figure 16). Then click on the Next button.



Figure 16

In the Step 2, you must enter the authentication information (see Figure 17). Click on Next button.



Figure 17

In the Step 3, you must specify the connection details (see Figure 18). Click on Next button.



Figure 18

And finally, you test the created connection.

Now let's create the application by going to the Applications Navigator, right-click on the Applications node and select New Application from the context menu. In the Create Application dialog box, enter the name for the application, the working directory and the application package prefix (see Figure 19).



Figure 19

Then, create a project for the business logic components (see Figure 20).



Figure 20

Now we're going to create the business components for the business logic module. As illustrative, we're going to use the SCOTT schema shipped with the default installation of Oracle. For this purpose, we're going to create the business entities using ADF Business Components based on tables. In the Application Navigator window, right-click on the business_logic project and select New from the context menu and select Business Components from Tables from the New Gallery dialog box (see Figure 21). Click on OK button.



Figure 21

Then, a window appears where you have to select the connection to the database and click on OK button and then the Create Business Components Wizard appears. Click on Next button; and in the Step 1, you must select a list of tables for which you want to create entity objects. You can also change the name of the business entities by clicking on Selected list and typing the new name in the Entity Name field (see Figure 22). Click on the Next button.



Figure 22

In the Step 2, you can create the views associated to the entities created in the Step 1. Select all the entities and change the name of the views as well as to add them to a new package (see Figure 23). Click on the Next button.



Figure 23

In the Step 3, you can create read-only business entities. In our example, we don't need to create this kind of view. Then click on the Next button. In the Step 4, you set the name for the application module (see Figure 24). The application module bundles together the components and enables transaction support as well as other important data-centric services. Click on the Next button.



Figure 24

In the Step 5, you can specify the diagram of the components and their relationships (see Figure 25).



Figure 25

Click on the Next button, and you can see the result of the Wizard, and finally click on the Finish button.

Before you create to the presentation layer, let's implement several business logic, format and validation code according to our business requirements. Go to the Applications Navigator and double-click on the Department entity and the Entity Object Editor window appears. Go to the Attributes node to select the attributes to be customized then go the Control Hits tab which enables to specify its format for the graphical presentation of the entity.

For the Deptno attribute, we have (see Figure 26).



Figure 26

And for the Dnam attribute, we have (see Figure 27).



Figure 27

Finally, for the Loc attribute, we have. We can go on using the same approach for the rest of the attributes of the Employee entity (see Figure 28).



Figure 28

Now let's develop the Presentation Layer components. Go to the Application Navigator and add a new project named client_presentation (see Figure 29).



Figure 29

The right-click on the project and select New from the context menu, go to the Client Tier/ ADF Swing node and select Empty Form as the main form (see Figure 30).



Figure 30

Disable the Generate a menu bar checkbox (because we're going to create a customized menu bar) and set a name for the main form in the Wizard such as MainForm (see Figure 31).



Figure 31

Now let's design the main menu of the application by drag and drop JMenuBar from Components Palette to the form. Then, create a sub-menu named Entities with inner child menus named Employee and Department. Finally, let's add an event handler for the actionPerformed event for the Employee and Department sub-menus (see Figure 32).



Figure 32

Now it's time to add the child forms by right-clicking on the project and selecting New from the context menu (see Figure 33 and Figure 34).



Figure 33



Figure 34

Let's work on the EmployeeForm. First of all, select the navigation bar (this is generic for each table) and delete it. Now, go to the Data Control palette, and drag and drop the EmployeeVO1 onto the form, and from the Context Menu select Add Child | Navigation Bar. The go to the Data Control palette and drag and drop the Empno attribute from the EmployeeVO1 node onto the form, and from the Context Menu select Child | Text Field. Repeat this step for each attribute of the EmployeeVO1 node.

Now let's add a label for each text field to describe it. Go to the Component Palette, select the ADF Swing Controls library, and drag and drop a JULabel onto the form in front of the Empno textfield. Right-click on the JULabel and select Create Binding | Label For from the context menu in order to bind this control to metadata defined on the Business Component Entity Object. When the Attribute Binding Editor window is open, then go to the EmployeeVO1, and choose the Empno attribute (see Figure 35).



Figure 35

Now let's repeat this step for each attribute of the EmployeeVO1 node. It's remarkable to say that in the case of the Depno attribute, actually we don't want to display the department number, instead we want to display the department name using a combo box control which allows to select a from a list of department name. Drag and drop the Deptno attribute on EmployeeVO1 from the Data Control Palette onto the form and then choose Add Child | Combo box. If you run the application, you can see a list of department number.

In order to bind the department number to department name, you need to set up the underlying binding. Go to the Applications Navigator window, and navigate to the EmployeeFormPageDef.xml and then go to the Structure window, and double-click on the EmployeeVO1Deptno node and the List Binding Editor appears. Select the Dynamic List option, then click on Add… button and inside the Add Data Source window, select the DepartmentVO1 node (see Figure 36).



Figure 36

Next, you have to map the attributes from the Base Data Source and the List Data Source. Finally, set the Display Attribute to Dept to DName (see Figure 37).



Figure 37

When you run this application which resembles as shown in Figure 38.



Figure 38

The last part of this solution is to show how to create a master/detail oriented form. The first step is to create a form to display department data along with the associated employees using the master/detail concepts related to data binding. This approach is similar to the previous data binding tasks, the only difference is that you will base the binding on the DepartmentVO1 and its inside view EmployeeVO2 (see Figure 39).



Figure 39

After the form is created, we drag and drop the DepartmentVO1 onto the form and select Add Edit Form from the context menu (see Figure 40).



Figure 40

Then, in order to add a child entity in this case the employees associated to their department (the parent), drag and drop the EmployeeVO2 inside the DepartmentVO1 node onto the form and select Add Child | Table from the context menu. In order to navigate inside the table as well, we need to drag and drop the EmployeeVO2 inside the DepartmentVO1 node onto the form and select Add Child | Navigation Bar. Now let's test the application and see how it resembles as shown in Figure 41.



Figure 41

As you can see the last column of the table (showing the department number) is displaying a number and not the department name. We can solve this problem like we did before. Right-click on the Table control and select ADFm Binding Properties and then the Table Binding Editor appears. Then go to the Attribute Properties tab and select the Deptno and map it to a combo box. Finally, click on the configuration button, and the Editor Properties appears (see Figure 42).



Figure 42

By clicking on Create button, the List Binding Editor window appears, and we can configure the same way as we did in the employee form (see Figure 43).



Figure 43

The final step is to deploy the solution to the production environment using a Java Archive file (JAR). To create JAR in JDeveloper, you have to go to the client_presentation project, right-click over it and choose New from the context menu. In the New Gallery window, go to the Deployment Profiles node and select JAR file (see Figure 44).



Figure 44

Then a new profile with the specified name is created on the project and you have to edit it to customize your deployment. In order to create the JAR file from this customized deployment, you go to the project, right-click on the deploy extension file inside the Resources folder and select Deploy to JAR file option (see Figure 45).



Figure 45

Conclusion

In this article, I explain how to create data binding oriented applications using Microsoft Visual Studio.NET and Oracle JDeveloper. You can compare both solutions and apply this techniques to your own business scenario.