XVCL example - Advanced HTML Form

The purpose of this example is to illustrate how to you can create custom HTML controls and use them as building blocks to create complex HTML documents.

TLookupEdit is a sample HTML control that looks similar to a combo box but instead of drop down button it has an elipsis (...) button to invoke a dialog for selecting new value.
TCalendar is a sample HTML control that consists of 3 combo boxes containing months, days and years.

Press F9 to generate HTML content...

Components/classes used in this example

TJvxHTMLFieldSet - incapsulates rarely used HTML <FIELDSET> element, which is displayed as a groupbox.
TJvxHTMLSelect - incapslates HTML <SELECT> element.
TJvxHTMLOption - incapslates HTML <OPTION> element.
TJvxHTMLOptions - collection class that provides type safe quick access to <OPTION> child elements of <SELECT> element.
TJvxHTMLTable - incapslates HTML <TABLE> element.
TJvxHTMLCustomDiv - used as a base clas of new custom controls.
TJvxXMLGenerator - generates XML/XHTML content from TJvxHTMLElement object.

Key properties/technologies illustrated in this example

TJvxNode.Parent - Available to all HTML classes, this property allows to build complex object hierarchies representing HTML documents.
property Value - Can be used to assign value to any HTML attribute. This property is declared with different types specific to a particular attribute. You can also use generic AsBoolean, AsString, AsInteger, AsFloat, AsDateTime and AsVariant properties to access attribute or element values.
property Text: TStrings - Can be used to manipulate content of any HTML element that is allowed to have content.

Implementation details

Sample custom HTML controls are implemented in units LookupEdit.pas and Calendar.pas. Both controls descend from TJvxHTMLCustomDiv class and use HTML tables for their layout.

Main form creates a template of an HTML document (FHTML). It then creates an instance of TJvxHTMLForm class and inserts it into the body of the HTML document. Two instances of TJvxHTMLFieldSet class are created - one for each custom control.

After that an instance of TJvxXMLGenerator class is used to generate HTML content using the template. Generated content is saved in Output.htm file.