Create Data-entry Forms in Minutes Using ComponentOne InputPanel

Introduction

In the business world of deadlines, we need tools to help us get the job done efficiently and professionally. For those of you creating .NET data-entry forms, look no further. With ComponentOne InputPanel™ for WinForms, you can take this single control and create a complete data-entry form in minutes. It manages the design, layout, appearance, and behavior of multiple input components. Supported components include textboxes, numeric and masked input, combo boxes, rich labels, custom controls, and more. This tutorial demonstrates how to create a .NET data-entry form using ComponentOne InputPanel for WinForms.

About ComponentOne InputPanel

ComponentOne InputPanel for WinForms is part of ComponentOne Studio for WinForms, which is part of ComponentOne Studio Enterprise. InputPanel for WinForms is the new paradigm to create and maintain data-entry forms. It is a panel that can be placed on a Windows Form to help developers create powerful data input applications. Developers define what input fields they would like to expose using any combination of the nineteen built-in native data input controls provided or any .NET control. Or simply connect InputPanel for WinForms to a data source, select the record set, and an input control for each field is automatically created for you.

Prerequisite

For this tutorial, you must have Microsoft Visual Studio 2008 or Visual Studio 2005 and ComponentOne Studio Enterprise installed.

Create a Data-entry Form Using ComponentOne InputPanel

With ComponentOne InputPanel, creating a complete .NET data-entry form is as simple as 1-2-3:

1. Create a Windows Forms Application
2. Add the C1InputPanel Control to Your Form
3. Attach the C1InputPanel Control to a Data Source

1 – Create a Windows Forms Application

ComponentOne InputPanel is a WinForms based control. In order to use the C1InputPanel control, we must first create a Windows Forms Application.

Open Microsoft Visual Studio and select File| New Project from the menu.

For this tutorial, you can create either a C# or Visual Basic Windows Forms Application.

2 – Add the C1InputPanel Control to Your Form

Locate the C1InputPanel icon in the Visual Studio Toolbox and double-click it to add it to your application.

With C1InputPanel selected on your form, locate the Dock property in the Properties window and set it to “Fill”.

3 – Attach the C1InputPanel Control to a Data Source

Once you have C1InputPanel on the form and properly docked, it is time to connect to a data source. In this sample we will attach C1InputPanel to the “Employees” table in the Northwind database. To quickly link the C1InputPanel to the data source, click the smart tag to open the C1InputPanel Tasks menu.

From the “Choose Data Source” drop-down list, select “Add Project Data Source”. The Data Source Configuration Wizard opens. Choose Database for the data source type and click “Next”.

To choose your data connection, select the “New Connection” button and locate the Nwind.mdb database from the C:\Program Files\ComponentOne Studio.NET 2.0\Common directory. Click “Next” to continue through the wizard.

To choose your database objects, expand the Tables node and select the Employees node. Click “Finish” to complete the connection.

Notice that C1InputPanel automatically aligns the controls, adds proper label captions, and binds each individual editor to the data. C1InputPanel even adds a navigation control allowing you to quickly navigate the form at run time.

C1InputPanel Item Collection Editor

In just three steps you have created a fully functional data-entry form that can be used to view, modify, or add records to a database. But what if you want to customize the appearance of your data-entry form, such as: 1) rearrange the ordering of the items, 2) break the flow of the controls with a new column, 3) add new items to the form, and 4) spatially arrange the controls on the form? With the C1InputPanel Item Collection Editor, you can quickly locate the items’ settings and easily complete such tasks.

To begin, click the C1InputPanel smart tag and select “Edit Items” to open the Collection Editor.

1 - Re-arrange the Items’ Order on the Form

You can re-arrange controls on the form at any time without worrying about restructuring the entire form. C1InputPanel automatically reconfigures the tab order and realigns the controls.

The Collection Editor makes it easy to move single items or multiple items. From the Members list, select the “lblBirthDate” and ”dtpBirthDate” items and press the down arrow button to move the items just below the “imgPhoto” item.

2 – Break the Flow of the Controls with a New Column

By default, the items flow row-to-row on the form. You can break the flow of the controls by just setting one property. To do this, select the “dtpHireDate” item and set its Break property to “Column”.

The row will break after the “Hire Date” date picker and a new column will begin with the “Address” label and text box. All controls are automatically aligned.

3 – Add a New Item to the Form

So, now you want to add a new item to the form? No problem. Simply select an item from the item drop-down list. For this example, select “InputGroupHeader”, then click “Add”. Use the move up arrow to place the item just after “txtExtension”. Modify its Text property to “&Details”.

The controls are automatically re-aligned to make room for the new object.

4 – Spatially Arrange the Controls on the Form

If the controls appear too congested on the form and you want to space them out, you can simply increase the padding around the controls. For example, select the “lblAddress” and “txtAddress” items and set the padding’s Top property to “45”. All controls below the “Address” label and text box will shift accordingly while maintaining alignment on the form.

Click “OK” to close the Collection Editor. Run the application to observe the changes.

We have altered the layout of our application and added a new object in a short amount of time. Using C1InputPanel’s powerful editor, we didn’t have to write a single line of code.

Summary

ComponentOne InputPanel makes creating data-entry forms a breeze. This tutorial demonstrated how quickly you can create and modify a data-entry form without worrying about restructuring the entire form. InputPanel for WinForms' automatic alignment and tab order makes this possible. This easy setup, paired with low maintenance yields, increased productivity. Achieve polished, interactive .NET data-entry forms in minutes with ComponentOne InputPanel for WinForms.

• Download ComponentOne Studio Enterprise