Component-Based Web Development With XVCL

Table Of Contents

  1. Overview
  2. Web Development Technologies
  3. Problems With Template/Tag Technologies
  4. XVCL Project
  5. "Hello, World!" Example
  6. Document Object Model
  7. "Form" Example
  8. Data Sources in XVCL
  9. "DBTable" Example
  10. Creating Custom Components
  11. "Advanced Form" Example
  12. Putting it all together
  13. Links


In this article we are going to talk about Web development in general and it's typical problems. Then we will define the concept of component based Web development, how it can help developing complex Web applications. The main topic of this article is XVCL - an open source library that provides support for component-based development of Web apps. We will use sample applications shipped with XVCL to illustrate different topics starting from creating a simplest "Hello, World!" application and finishing with advanced topics of generating database driven HTML pages and creating custom components.


Web Development Technologies


Problems With Template/Tag Technologies

XVCL attempts to address these issues and provide Delphi programmers with robust object oriented support for building highly dynamic web applications.


XVCL Project


"Hello, World!" Example

This is a classic "Hello, World" program - the simplest Delphi program that produces an HTML page containing "Hello, World" using XVCL.

The source code is located in Demos\HTML\HelloWorld directory of your XVCL installation.


Document Object Model

As you can see from "Hello, World!" example, you create HTML content by manipulating objects. This is the main difference between XVCL and Template/Tag based technologies. All documents and HTML documents in particular are represented with objects of different classes. Hierarchy of classes and objects representing a document at run-time constitute Document Object Model.


Document Object Model in XVCL is designed based on XML DOM created by World Wide Web Consortium, but it is not an implementation of XML DOM. Since the purpose of DOM in XVCL is quite different, we didn't try to achieve compatibility with XML DOM. The purpose of XML DOM is to provide a standard interface for working with XML documents in general, XVCL attempts to provide type safety and ease of use for building XML documents.

Core document classes

Document object hierarchies

The nature of HTML documents is hierarchical. <HTML> element has <HEAD> and <BODY> child elements, <HEAD> has <TITLE> and so forth. XVCL objects are arranged in hierarchies using Parent, Attributes and Elements properties defined in TJvxNode class and inherited by all classes. To make one element a child element of another, you can either assign child's Parent property, or add child to Elements collection of the parent.

In the following example a <DIV> element is inserted into <BODY>

  DivElement := TJvxHTMLDiv.Create(Self);
  DivElement.Text.Add('Hello World!');
  DivElement.Parent := FHTML.Body;

"Form" Example

This example illustrates use of document object hierarchies to create a simple user interface document - HTML form containing several different HTML controls.

The source code is located in Demos\HTML\Form directory of your XVCL installation.


Data Sources in XVCL

One of the very common tasks in any software development is database application development. A database application displays and allows manipulating data retrieved from a database. Facilitating database development was one of the goals for XVCL design. A set of XVCL components allows building complex HTML documents that retrieve their content from database tables and other external sources.


This class is a base class of different data field components. Data fields in XVCL allow retrieving values of individual elements and attributes from elsewhere. Any document node that can have a value can be connected to a data field through TJvxNode.DataField property. When connected to a data field, document node loads data from the field automatically, every time the field is changed. The concept of data field in XVCL is very similar to the concept of data field (TField) in VCL.

For example, TJvxDBDataField allows you to make an HTML attribute retrieve it's value from a database table field.


This class represents an abstract data source. It provides access to a tabular data through a "cursor" - set of data fields, where each field points to the current record's field at any given point in time. The concept of data source is very similar to the concept of dataset (TDataSet) in VCL.

For example, TJvxDBDataSource allows you to connect to any TDataSet descendant.

When a data source is connected to a composite element using TJvxCompositeElement.DataSource property, from the outside, it appears that the element now has many child elements that are virtually stored in the data source. On the inside, every one of those virtual child elements is generated using the data retrieved from the current record in the data source and based on the element template.


Template is an element that you want to be replicated for every record in the data source. You create the template to have a desired internal structure, for example, a template might be a <TR> element that contains <TD> elements, which display data from a database table. When you create a template for use with data source, you need to use the data fields provided by the data source in order to make virtual nodes correspond to records in the data source.


"DBTable" Example

This example illustrates use of data sources, data fields and templates to generate an HTML document containing a table with data from CUSTOMER table in DBDEMOS.

The source code is located in Demos\HTML\DBTable directory of your XVCL installation.


Creating Custom Components

Web applications often have UI elements that are used over and over again. For example, in a web application that often requires users to enter date you might have a calendar control consisting of HTML table with 3 combo-boxes for selecting day, month and year.

The strength that distinguishes XVCL from Template/Tag based technologies, like Page Producer, is the simplicity and safety of reusing code by creating new components in addition to existing ones.


Creating new components is simple because you have a whole library of standard HTML components to use as your starting point - a base class and building blocks for your new component. Once you've built your first component, you can reuse it to create another component and so forth.


Creating new components is safe, because you don't need to worry about such typical mistakes like forgetting to put a closing tag, typos, breaking containership relations. XVCL has built in mechanisms for validating hierarchies of elements and attributes and new components are treated exactly like standard ones in this respect.

Common Tasks


"Advanced Form" Example

This example illustrates creation of custom components in XVCL. Two custom components are created in this example - TLookupEdit (control similar to a combo box but having a lookup button instead of drop down button and drop down list) and TCalendar (control consisting of 3 combo boxes for entering date as month, day and year).

The source code is located in Demos\HTML\Advanced Form directory of your XVCL installation.


Putting it all together

Component-based Framework

XVCL is a component-based framework for building HTML and other Document and Document/View based applications. Although it's not available at this time, XVCL will eventually provide a sophisticated two way design time support for visual document development supporting visual inheritance and visual aggregation.

Alternative To Template/Tag Based Technologies

XVCL is an alternative to traditional Template/Tag based technologies. It has both advantages and drawbacks compared to Template/Tag solutions. It's typically easier to use Template/Tag for simple HTML applications but the value of component based architecture grows with the size and complexity of the application. The bigger and more complex the application is - the harder it is to build with Template/Tag and easier with component-based architecture.

Open Source Project

XVCL is an open source project which means that it is free, comes with full source code, but it doesn't have any warranty and support is done only through mailing list. If you are serious about using XVCL, we highly recommend getting in touch with the developers, giving them your feedback, suggestions, etc.



XVCL Web Site

Located at this web site is a home of XVCL project, you can download the most recent released version of the code, find news and other information about the project.

XVCL Project Control Center

For those who want to get deeper inside the project, the control center located at has much more information for developers. You can find detailed information on when the next version will be released, what features are going to be included, current development progress, etc.

General Information About Web Technologies

MSDN Online

DevEdge Online

World Wide Web Consortium