Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Rapid Web Application Development

0.00/5 (No votes)
27 Sep 2005 1  
An article about the Multiformity Open Source project.

Introduction

The Multiformity engine consists of controls that are easy to configure, and accommodates many of the common needs for a web application that connects to a database. It automatically provides the abilities to add, edit and read data, as well as includes integrated help, treeview and scheduling controls and many other functionalities.

Note: The code has been converted and upgraded to ASP.NET 2.0 :D.

The purpose of this toolset is to allow for your development team to focus on the "rocket science" behind a specific project, rather than the mundane, day to day details of the given application. Below are a few screenshots of the inherent functionality of this system:

Integrated Treeview

Edit/Add Form Generation

Snazzy Grid Control

Features

The Multiformity engine currently supports (Note: this is not a complete list, that would be too long for this article ;):

  • NEW Ability to edit or delete multiple rows at once through filtering.
  • NEW Tabbed edit forms are now accomplished by merely configuring fields in the database through the standard edit forms.
  • NEW Integrated security is now complete. Through the standard web interface you can create user groups that specify if the user has access to see or edit any table or field in the database. It additionally supports group inheritance.
  • NEW Added in MultiListbox control for long multi select listboxes, also allows ordering of the data.
  • Process Automation allows for these controls to be grouped together in a procedural fashion. With little or sometimes no additional coding and recompiling, you can build procedures to email customer lists, create a sale out of inventory and log payment, or update a central server.
  • NEW Treeview is now a control, not a collection of four frame pages.
  • NEW Reduced Database hits by over 75% and CPU usage by 50%. Sometimes requires that the ASPNet_wp process be killed when debugging ;)
  • NEW UserInformation object stores all of the data associated with a user, and is accessible through any page that inherits BasePage.cs automatically.
  • Fixed look and feel in FireFox.
  • One to many relationships between tables in your database are detected and new features are automatically made available.
  • Regular expression validation, without the need to recompile code.
  • An enhanced grid object that supports sorting, paging and filtering with no setup.
  • A Form object, that given a table's name from the database, and an optional row identifier, will automatically generate the appropriate add or edit form, all with customizable taborders, as well as contact sensitive help, tooltips and validation built in. The form will even group together similar controls (checkboxes, dates, etc.).
  • Integrated Help for both administrators and developers, as well as for your end application. All of which is maintained through the standard web interface.
  • Easy to use class library that will allow for your developers and graphic designers to separate form from function, with seamless integration between raw HTML and the standard code-behind files.
  • Plus too many other features to name. There are over 60 classes, including 14 custom controls, extensive SQL tools, and default implementations of all of these controls.

One of the features that makes the Multiformity engine better than your average grid control or databound text box is that they are all inter-related. For example the Grid control displays links that go to pages that display the other controls like the record viewer or form. The grid control also uses a form object to implement its own filter functionality; the treeview uses a record viewer to display row contents. Additionally, these larger controls also use the smaller and simpler "form" controls that also refer to the larger controls. Read on for a partial list of controls currently available:

Control Description
ProcessViewer Displays the current step for a process, as well as a way to return to any previous step. This control is used as part of the process automation framework, which gives the developer the ability to quickly string many of these components and other custom components together to complete a task using systematic steps.
TreeView A TreeView control displays tables from the database where the tables have a one to many relationship, allowing a treeview concept. For example, the integrated help system utilizes a treeview control to display the help topics on the left hand side, with the topic content displayed on the right. This could also be used to display items in an inventory grouped by manufacturer, or color, or many other factors.
Form Used to add or edit data to the database. It contains all of the add/update, cancel and delete buttons for the appropriate situation.
Grid The Grid object needs to do nothing else except display the user that will be accessing the data, and the table that the user wishes to see. It automatically filters, sorts and pages, all the while maintaining state. Contains links to all the appropriate edit/add forms and to some other useful links.
PropertiesEditor Edits a text file with the extension of .properties and contains name value pairs separated by equal signs. This toolset was designed with the purpose of not needing to update code and compile in order to make many minor and some major types of customizations. Editing various properties on the server through the web site makes it easy to accomplish a lot of these goals.
RecordViewer Views a record of data, expanding any large text field to be read in full on the page.
Button A Button is actually a placeholder, either with a button, link or an image on it, and it can either have simply a link to redirect to, or an event handler assigned to its click.
Calendar Contains three controls. The default Calendar control, a button and a textbox. The button will hide and/or show the calendar control, and clicking a date in the calendar will place the selected date into the textbox.
CheckBox Implements a "True/False/Default" implementation of a checkbox using JavaScript and images.
DropDown Contains a dropdown and a button. Clicking the button will open the default grid displaying the linked table.
MultiSelect Contains two multiselect dropdown lists with move one or all buttons to move the source list to the selected target lists. This control is databound, and saves and reads the result into the database as a comma separated list.
TextBox Provides a basic databound Textbox

In addition to these features, Multiformity is a breeze to use and setup. We only suggest that you read the readme and other documentation before trying to utilize these tools with your existing databases, as we have a naming convention that we use that allows for the "defaults" to kick in. You do not have to use our naming conventions, but it will require a bit more setup otherwise.

Using the code

Utilizing the code is rather easy, and entails many of the specifics that any developer will have to account for in their custom projects. Things like absolute paths to system directories, DSN strings, and other similar things do need to be configured, which I will detail in the following sections.

For a full information on how to use the code, you can read the documentation included in the source zip file (multiformity.chm). For a brief rundown on the basics:

To display a grid on a page:

    using System.Web.UI.WebControls;
    using rasp.Components.HTML.PageControls;

    //Note that the page must implement the BasePage class.

    public class Display : rasp.Components.BasePage	{

	...

    //Find the placeholder or any other control 

    //that you wish to put the grid on:

    PlaceHolder ph = (PlaceHolder)FindControl("Grid");

    //Create the grid object, giving the constructor 

    //a reference to the page that the

    //control will be displayed on, and a 

    //UserInformation object that is maintained

    //by a basepage object that the page 

    //inherits from. Any required information is 

    //automatically retrieved off of the querystring 

    //object by the grid itself, although

    //the grid object can take a parameterized list 

    //in the constructor to specify the table

    //in the database that that you wish the grid 

    //to bind to and other information.

    Grid wc = new Grid(this, this.UserInformation);

    //Add the control and you are done!

    ph.Controls.Add(wc.TheGrid);

You will probably notice that there are really only six lines of code here, the rest is just commenting...

To display the edit form:

    using System.Web.UI.WebControls;
    using rasp.Components.HTML.PageControls;

    //Note that the page must implement the BasePage class

    public class Edit : rasp.Components.BasePage {

    ...

    //Get the control to hold the form.

    PlaceHolder EditForm = (PlaceHolder)FindControl("EditForm");

    //Get a form object, providing the page 

    //that will contain the form, and 

    //the userinformation maintained by 

    //the basepage. Again the details of 

    //the form are accessed from the pages 

    //querystring, but you can provide

    //a prameterized list to the constructor 

    //to give it a table which you will

    //be adding a row to or adding to 

    //it a possible row ID to edit a row instead

    //of add.

    Form  f = new Form(this, this.UserInformation);

    //The form does not actually sort and 

    //generate the HTML until you tell it

    //that you are ready for the current 

    //implementation of the form object.

    //This is done so that you can dynamically 

    //change things on the form before

    //it is generated.

    EditForm.Controls.Add(f.RecordEditor);

Most of the other controls are similar to this, but I won't bore you with those details, but it is important to note again that there are just six lines of code to display an edit form.

Now, let's see how you do some really cool stuff. The form control that I have created automatically generates databound controls, it additionally will automatically sort the controls and place them on the tabs for you, but there may be a situation where you need to display a "custom" edit or add form for a particular table (if not all of them). This is the classic "separating form from control" situation, you have web designers that design the look and feel of a page, but don't know much about how to create a databound control programmatically. For this I have provided another class that inherits from the BasePage class that automatically finds a place to put the controls for the form. With this architecture, the web designer can simply put in <asp:placeholder> tags that designate the control to be obtained from the DB. I will be improving on this concept later, but for now, here is how it works:

The ASPX Page:

<%@ Page language="c#" Codebehind="EditRow.aspx.cs" 
                   AutoEventWireup="false" Inherits="EditRow.cs" %>
<HTML>
    <HEAD>
        <title>EditField</title>
    </HEAD>
    <body MS_POSITIONING="GridLayout">
        <form id="EditField" method="post" runat="server">
            <table>
            <tr><td>
                <asp:PlaceHolder ID=Form_Name Runat="server" />
            </td><td>
                <asp:PlaceHolder ID=Form_Caption Runat="server" />
            </td></tr>
            <tr><td>
                <asp:PlaceHolder ID="Form_Submit_Button" Runat="server" />
            </td></tr>
            </table>
        </form>
    </body>
</HTML>

Note here that the IDs of the placeholders are the field names preceded by "Form_", it's that simple!

The code-behind file:

...

//Note that this inherits the FormPage class that inherits from BasePage.


public class EditRow : FormPage {

...

    private void Page_Load(object sender, System.EventArgs e) {
        //Set the name of the table that will be edited or added to

        this._Adapter = "TableName";
        //Put the controls on the page.

        this.PopulateControls(this);
    }

...

The base class in question (FormPage.cs) is a little specific to explain here, but I will simply state that it has the protected _Adapter string member, and with that figures out where to place the desired controls designated by the IDs of the placeholders in the ASPX file.

This way, edit pages can be created by web designers rather than web developers.

Installation

Files included in download:

  • multiformity_src.zip - Unzip the source code into a folder located in your wwwroot folder. The exact location is not important because the local paths are determined at runtime. In the IIS configuration manager, be sure that the folder that you unzip (we will assume c:\inetpub\wwwroot\rasp) is configured as its own application, and that your ASPNET user has full control over it and all of its subfolders. Next, look in c:\inetpub\wwwroot\rasp for a file named constants.properties. Within that file you will need to enter in your DSN string, as well as your base URL for the site. The Multiformity engine does reference absolute URLS in the program code, so you will have to assure that the correct base URL is configured for other people to utilize the links in the site.

    Note: There is also a folder in this Zip file called RaspDocs that has a lot more detailed information about how the system works; although they are still works in progress, they will shed light on how the plumbing and other features are organized.

  • multiformity_Data.zip - Unzip the database Zip file into a directory of your choosing, and attach the two DB files to your SQL Server (if using the MSDE, then you will need to do this from the command prompt, but there is another documentation online that explains that).
  • multiformity_Images.zip - Unzip this to the root of your website, this is required for now. You should be able to refer to these images with the relative path of "/images/image.gif".

Points of Interest

Dynamic creation of databound HTML controls is a topic that is not covered by many, if any books or online references. I have, however learned much about the topic, and plan on writing about my findings at a later date when I get some time, so keep an eye out for those articles! Email me at Multiformity@austin.rr.com for a current status of where I am with my articles, as I plan on writing many in the near future!

History

This is the second release of the Multiformity engine, further development depends on the community, so please donate and it will come back to you tenfold!

Icons for the Multiformity engine were graciously donated by the folks at Ace Icons, a division of Can Do Software. They are the one stop for all of your icon and graphic needs. Please support our partner and purchase a set of icons to keep the look and feel of Multiformity consistent in your projects.

Multiformity is an open source project. We welcome any feedback and new code that the community would wish to share, but it is not required. This toolset is released under the GNU public license, which means that you can utilize it in any public or private project. We do however appreciate any improvements that can be incorporated back into the source ... Share the love ;). Again though, since the icons were donated, please be mindful of that, and utilize Ace Icons for any graphic needs that you may have. The reason that I have released this project as open source is because it is now too much for me to handle at once.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here