Rapidly Develop GUI with Forms Designer

Author: Iqbal Khan

TierDeveloper is an object relational mapping code generator for .NET. It lets you map business and data objects to your relational tables, embed SQL and stored procedure calls in them, and generate fully working code in C# or VB.NET. This lets you achieve in days what would otherwise take you weeks and months. And, it also improves your code quality by generating standardized code for the entire application and even across projects.

Traditionally, TierDeveloper has focused on generating business and data objects for your application and you have had to develop GUI by hand and call the objects from it. The reason was that GUI by nature is very customized and therefore not a good candidate for simple code generation. However, .NET 2.0 now provides a Custom Controls Framework that makes it practical for rapid GUI development. TierDeveloper uses this framework to let you quickly design and develop your GUI and connect it with the generated business and data objects.

TierDeveloper has developed powerful "GUI designers" to cover different areas of your application's GUI. They are:

1. Forms Designer: Lets you design forms for manipulating individual records along with displaying 1-n, n-1, 1-1, and m-n related records.
2. List Page Designer: Lets you design a list page to display multiple rows. The user can select one row and perform a "command" on it.
3. Ad Hoc Search Page Designer: Lets you design an ad hoc search page. The result of this search is always some list page being displayed.
4. App Menu Designer: Lets you design the menu for the application.

Each designer allows you to design and develop different parts of your application and together they allow you to develop your application in record time. All the designers are available for ASP.NET and Windows Forms applications.

In addition to the designers, TierDeveloper also contains an App GUI Wizard that lets you quickly specify different forms, list pages, ad hoc search pages, and app menu structure. It then generates GUI code based on the Custom Control Framework so you can easily customize this GUI from the different designers provided by TierDeveloper inside Visual Studio 2005.

In this article, I am going to describe how to use the most important designer, namely the Forms Designer. You'll see how easy it is to develop a real life Form for your application and have it automatically call all the appropriate business and data objects.

Developing an Employees Form

We will use Northwind database in our example to develop an Employees Form. This form is used to load, edit, and save an employee. You can develop both ASP.NET and Windows based forms with this Forms Designer. Below is a picture:

Please note the following special things in the form above:

1. Drop down control: This is used to display the name of the related Employee (supervisor) instead of showing the employee id. This drop down actually shows a concatenation of FirstName and LastName fields.
2. Date Field: Hire Date and Birth Date fields are being shown in a date field that displays a calendar when you want to edit this field.
3. Picture Box: This is used to display the employee's picture. Notice the "Browse" and "Clear" buttons to let you load a different picture or to clear this one.
4. Multi-column List: This is used to display a list of related employees (subordinates). Although, in this example, this is a read-only list but it can also let you select rows and execute commands on them.
5. Command buttons: These buttons are mapped to the appropriate methods in the business and data objects. This is explained in more detail below.
6. Link: This is a link that when clicked opens up another form. In this case, this would be a list page showing a list of related employees.

Below is the same Employees Form for an ASP.NET application.

Business and Data Objects

For the Form displayed above, three business and data objects are used. They are Employees, EmployeesFactory, and TDBindingList<Employees>. They are described below:

[Serializable]
public class Employees {
    // Some of the private data members
    // ...
    public Employees () { }

    // Properties for Employee object
    public String  EmployeeId { get; set; }
    public String  FirstName { get; set; }
    public int  LastName { get; set; } //... rest of data member properties

    // relationship properties
    public Employees  Supervisor { get; set; }
    public TDBindingList<Employees> Subordinates { get; set; }
}

public class EmployeesFactory {

    public EmployeesFactory () { }

    // Methods for EmployeeFactory object
    public void  Load (ref Employees emp, int depth) { /* ... */ }
    public void  Insert (ref Employees emp, int depth) { /* ... */ }
    public void  Update (ref Employees emp, int depth) { /* ... */ }
    public void  Delete (ref Employees emp, int depth) { /* ... */ }

    // n-1 relationship methods
    public void  LoadSupervisor (ref Employees emp, int depth) { /* ... */ }
    public void  LoadSubordinates (ref Employees emp, int depth) { /* ... */ }
}

The above code includes a domain object called Employees that keeps all the data of an Employee and also its related Employees (supervisor and subordinates). The second object is a persistence class called EmployeesFactory that contains all the code related to the database access. The third class TDBindingList<Employees> is a Generic class provided by TierDeveloper Framework and therefore not described further here.

The above classes need to be called from the GUI in order to implement the functionality.

Steps for Creating Employees Form with Forms Designer

Now that you know what your form should look like and how does the underlying business and data objects look, you're ready to actually design this form. You'll see how easy it is to design this form. Here is step by step instructions on how to go about this.

Step 1: Create Application

Open Visual Studio 2005 and create a new Windows Application using 'New Project Wizard'.

Step 2: Add References

Before we start working with Forms Designer, we need to add Domain and Persistence objects assembly references to the project. Code in these assemblies is generated by TierDeveloper. To add references, do the following:

1. Open Solution Explorer and right-click on 'References' tree node, an 'Add Reference' dialog box will appear.
2. Go to the 'Browse' tab and browse to the folder Northwind\Data\Persistence\bin, where Northwind is the root folder name of the generated code.
3. Add references of Northwind.Businsess.Domain.dll, Northwind.Data.Persistence.dll and EnterpriseNonServicedLibEval.dll, which you will find in the said folder. Also, browse to the folder where TierDeveloper 6.0 or later is installed and go to bin folder, add reference to TierDeveloper form designer assembly which would be TierDeveloper.Windows.Forms.dll for Windows Forms applications and TierDeveloper.Web.dll for Web/ASP.NET applications.
4. Copy EnterpriseNonServicedLibEval.dll.config and Northwind.Data.Persistence.dll.config file into your application's output directory. These files contain configuration information that will be used by application to accomplish certain tasks. For example, Northwind.Data.Persistence.dll.config file holds information of databases used in the Persistence layer. Keeping database information in a config file makes our application more flexible. In case of change of database server, we will not have to modify and re-compile the code. Application will work fine with mere modification in the config file.

Step 3: Design Employees Form

Follow these steps to design a form:

1. Open Windows Form 'Form1', which will be generated with the creation of new application in Step 1 above.
2. Go to the toolbox, expand TierDeveloper Win tab and drag 'EditFormManager' control on the Form.
3. Rename 'EditFormManager' to 'EmployeeEditFormManager'.
4. Click on the arrow appearing on the top right corner of 'EmployeeEditFormManager'. A menu will appear containing some tasks.
5. Click on 'Configure Binding' as shown in the figure below.

When you do the above, an 'Object Selection Wizard' will appear. 'Object Selection Wizard' helps in selecting domain and persistence objects for the form. Select Employees object from Northwind.Business.Domain namespace and EmployeesFactory object from Northwind.Data.Persistence namespace through the wizard. Now select the fields, which you want to map against UI controls, from the 'Available Fields'. Click 'Add' button to add the selected fields to the 'Mapped fields'. Select appropriate UI controls for the mapped fields.

Next, add the commands by pressing 'Add' button on 'Commands tab' as shown below. Specify the 'Control Type', 'Target' and 'Dependent' for the command. Here is a brief description of these options.

1. Command Control Type: Type of control you want to create for your command.
   1. Command Target: Three types of targets are supported in Forms Designer.
   2. <Persistence Object>: calls a method residing in Persistence layer. You will also have to specify the method type, name and parameters by clicking the button right next to 'Target' dropdown for this option.
   3. Form: Opens another Form available in the Application. We can also pass parameters to this Form by clicking the button right next to 'Target' dropdown.
2. Clear Form Command: Resets all the controls available on the Form
3. Dependent Commands: This option is used when you want to trigger another command(s) explicitly after execution of this command.

Press OK to close this dialog. Now Forms Designer creates all the controls which we have mapped in Fields and Commands tab in a top to bottom sequence. Rearrange the controls to make Form more attractive. Note that don't rename any control's id created by Forms Designer otherwise you will loose its binding.

Step 4: Form Designer Event Handlers

Forms Designer also exposes some events that allow you to integrate your own custom code. In this example, we have implemented two events. One is OnExceptionOccured, which is used to show any raised exception. Another is OnCommandExecuted that notifies the user about completion of a particular command.

Employees Form GUI Code

Once your Employees Form is created with Forms Designer, its code is based on the standard .NET 2.0 Custom Controls Framework. TierDeveloper provides various Custom Controls of its own based on this framework and they are shown below.

Conclusion

As you have seen, TierDeveloper makes it very simple to quickly design and develop rich GUI and connect the underlying business and data objects to it. This is yet another step toward simplifying and speeding up your development time and improving your code quality. Remember, the less code you have to write by hand, the faster your projects are completed and the better is your code quality.

---

Author: Iqbal Khan works for Alachisoft, a leading software company providing .NET and Java distributed caching, O/R Mapping and SharePoint Storage Optimization solutions. You can reach him at iqbal@alachisoft.com.