Borland C++ Builder Examples - Body Tag Formatter

	Body Tag Formatter

Introduction

In this application, we will create a dialog box equipped with various controls. The subject is to create a format for the HTML's body tag.

Practical Learning: Starting the Exercise

Start Borland C++ Builder with its default form or create a new project
Save the project in a new folder named BodyTag
Save the unit as Exercise and save the project as BodyTag
From the Standard tab of the Component Palette, click the RadioGroup control and click the left side of the form
On the Object Inspector, double-click (TStrings) from the Items field
Type Background and press Enter. Complete the list with Text, Link, Active Link, and Visited Link
Click OK
While the RadioGroup control is still selected, on the Object Inspector, change its properties as follows:
Caption = Body Attributes
ItemIndex = 0
Name = grpBodyAttributes

Complete the design of the form as follows:

Control	Name	Text/Caption	Other Properties
Form	frmMain	Body Tag Formatter	BorderStyle: bsDialog Position: poScreenCenter
RadioGroup	grpBodyAttributes	Body Attributes	ItemIndex: 0
Edit	edtBackground	#000000
Edit	edtText	#0000FF
Edit	edtLink	#FF0000
Edit	edtALink	#008000
Edit	edtVLink	#800000
Label		Preview ___________
Panel	pnlPreview		Color: clWhite
Label		R
ScrollBar	scrRed		Kind: sbVertical Max: 255 Position: 255
Label		G
ScrollBar	scrGreen		Kind: sbVertical Max: 255 Value: 255
Label		B
ScrollBar	scrBlue		Kind: sbVertical Max: 255 Value: 255
BitBtn		&Close	Kind: bkClose
Memo	mmoPreview		Lines: Nothing
Edit	edtPreviewText	Body tag formatter and colorizer	Font->Color: clBlue ReadOnly: true
Edit	edtPreviewLink	Sample text as link	Font->Color: clRed ReadOnly: true
Edit	edtPreviewALink	Active link that is being visited	Font->Color: clGreen ReadOnly: true
Edit	edtPreviewVLink	This link has been already been visited	Font->Color: clMaroon ReadOnly: true
GroupBox		Hexadecimal
Label		Red:
Edit	edtHexaRed	00
Label		Green:
Edit	edtHexaGreen	00
Label		Blue:
Edit	edtHexaBlue	00
GroupBox		Numeric
Label		Red:
Edit	edtRed	00
Label		Green:
Edit	edtGreen	00
Label		Blue:
Edit	edtBlue	00
BitBtn	btnCopy	Cop&y
Edit	edtBody	<body bgcolor="#FFFFFF" text="#0000FF" link="#FF0000" alink="#008000" vlink="#800000">

Access each edit box in the lower-left memo and set its BorderStyle property to bsNone

In the header file of the form, declare the following private variables:

private:	// User declarations
    AnsiString HexBG, HexText, HexLink, HexALink, HexVLink;
    
public:		// User declarations
    __fastcall TForm1(TComponent* Owner);
};
//---------------------------------------------------------------------------

In the ClassExplorer window, right-click TForm1 and click New Method...
Set the method options as follows:
Method Name: ApplyColor
Function Result: void
Visibility: private
Directives: __fastcall

Click OK and implement the method as follows:

//---------------------------------------------------------------------------
void __fastcall TfrmMain::ApplyColor()
{
    //TODO: Add your source code here
    // Retrieve the current hexadecimal colors from their Edit controls
    HexBG = edtBackground->Text;
    HexText = edtText->Text;
    HexLink = edtLink->Text;
    HexALink = edtALink->Text;
    HexVLink = edtVLink->Text;

    // Get the integral position of each ScrollBar control
    int Red   = 255 - scrRed->Position;
    int Green = 255 - scrGreen->Position;
    int Blue  = 255 - scrBlue->Position;

    // Display the position of each ScrollBar
    // in its corresponding Edit control
    edtRed->Text   = Red;
    edtGreen->Text = Green;
    edtBlue->Text  = Blue;

    // Get the hexadecimal equivalent of each ScrollBar control
    AnsiString HexRed   = IntToHex(Red, 2);
    AnsiString HexGreen = IntToHex(Green, 2);
    AnsiString HexBlue  = IntToHex(Blue, 2);

    // Display the hexadecimal value in the appropriate Edit controls
    edtHexaRed->Text   = HexRed;
    edtHexaGreen->Text = HexGreen;
    edtHexaBlue->Text  = HexBlue;

    // Change the color of the Preview panel
    // according to the values of the ScrollBar positions
    pnlPreview->Color = TColor( RGB(Red, Green, Blue) );

    // Get the position of each ScrollBar control
    // Create a hexadecimal color starting with #
    // And display the color in the appropriate Edit control
    switch( grpBodyAttributes->ItemIndex )
    {
    case 0:
        edtBackground->Text = "#" +
                              IntToHex(Red, 2) +
                              IntToHex(Green, 2) +
                              IntToHex(Blue, 2);
        mmoPreview->Color = pnlPreview->Color;
        edtPreviewText->Color = pnlPreview->Color;
        edtPreviewLink->Color = pnlPreview->Color;
        edtPreviewALink->Color = pnlPreview->Color;
        edtPreviewVLink->Color = pnlPreview->Color;
        HexBG = edtBackground->Text;
        break;
    case 1:
        edtText->Text = "#" +
                        IntToHex(Red, 2) +
                        IntToHex(Green, 2) +
                        IntToHex(Blue, 2);
        edtPreviewText->Font->Color = TColor( RGB(Red, Green, Blue) );
        HexText = edtText->Text;
        break;

    case 2:
        edtLink->Text = "#" +
                        IntToHex(Red, 2) +
                        IntToHex(Green, 2) +
                        IntToHex(Blue, 2);
        edtPreviewLink->Font->Color = TColor( RGB(Red, Green, Blue) );
        HexLink = edtLink->Text;
        break;

    case 3:
        edtALink->Text = "#" +
                         IntToHex(Red, 2) +
                         IntToHex(Green, 2) +
                         IntToHex(Blue, 2);
        edtPreviewALink->Font->Color = TColor( RGB(Red, Green, Blue) );
        HexALink = edtALink->Text;
        break;

    case 4:
        edtVLink->Text = "#" +
                         IntToHex(Red, 2) +
                         IntToHex(Green, 2) +
                         IntToHex(Blue, 2);
        edtPreviewVLink->Font->Color = TColor( RGB(Red, Green, Blue) );
        HexVLink = edtVLink->Text;
        break;
    }

    // Update the contents of the bottom Edit control
    edtBody->Text = "<body bgcolor=\"" +
                    HexBG +
                    "\" text=\"" +
                    HexText +
                    "\" link=\"" +
                    HexLink +
                    "\" alink=\"" +
                    HexALink +
                    "\" vlink=\"" +
                    HexVLink +
                    "\">";
}
//---------------------------------------------------------------------------

Double-click each scroll bar and implement their OnChange event as follows:

//---------------------------------------------------------------------------
void __fastcall TForm1::scrRedChange(TObject *Sender)
{
    ApplyColor();
}
//---------------------------------------------------------------------------
void __fastcall TForm1::scrGreenChange(TObject *Sender)
{
    ApplyColor();
}
//---------------------------------------------------------------------------
void __fastcall TForm1::scrBlueChange(TObject *Sender)
{
    ApplyColor();
}
//---------------------------------------------------------------------------

Test the application and return to C++ Builder

When the user clicks a radio button from the Body Attributes group box, we need to display its color on the Preview panel. When a particular button is clicked, we will retrieve the color of its font from the Body text box, translate that color into red, green, and blue values, and then use those values to automatically update the scroll bars and the edit boxes. While we are at it, we also need to update the corresponding text box in the Body Attributes group box. Since this functionality will be used by all radio buttons in the group, we will use a global function to which we can pass two variables.
When the user clicks a particular radio button, that button is represented by a text box in the lower-left Body section. We need to get the color of that edit box and pass it to our function. Since the clicked radio button has a corresponding text box in the Body Attributes group box, we need to change/update that value with the hexadecimal value of the first argument. Therefore, we will pass a String argument to our function.
In the header file of the form, declare a method as follows:

private:	// User declarations
    AnsiString HexBG, HexText, HexLink, HexALink, HexVLink;
    void __fastcall ApplyColor();
    void __fastcall ClickOption(TColor Clr, AnsiString Result);
public:		// User declarations
    __fastcall TForm1(TComponent* Owner);
};
//---------------------------------------------------------------------------

In the source code of the form, implement the function as follows:

//---------------------------------------------------------------------------
void __fastcall TfrmMain::ClickOption(TColor Clr, AnsiString Result)
{
    long lngColor;
    int Red, Green, Blue;

    pnlPreview->Color = Clr;
    lngColor = Clr;

    Red = 255 - (lngColor % 256);
    Green = 255 - ((lngColor / 256) % 256);
    Blue = 255 - (lngColor / 65536);

    scrRed->Position = Red;
    scrGreen->Position = Green;
    scrBlue->Position = Blue;

    edtRed->Text   = Red;
    edtGreen->Text = Green;
    edtBlue->Text  = Blue;

    edtHexaRed->Text = IntToHex(Red, 2);
    edtHexaGreen->Text = IntToHex(Green, 2);
    edtHexaBlue->Text = IntToHex(Blue, 2);

    Result = "#" + IntToHex(Red, 2) + IntToHex(Green, 2) + IntToHex(Blue, 2);
}
//---------------------------------------------------------------------------

Save all

Double-click the grpBodyAttributes RadioGroup control and implement its OnClick as follows:

//---------------------------------------------------------------------------
void __fastcall TfrmMain::grpBodyAttributesClick(TObject *Sender)
{
    // If the user clicks a button from the RadioGroup control
    // find out what button the user clicked
    // set color of the panel to that of the radio button that was clicked
    TColor BGColor = mmoPreview->Color;

    mmoPreview->Color      = BGColor;
    edtPreviewText->Color  = BGColor;
    edtPreviewLink->Color  = BGColor;
    edtPreviewALink->Color = BGColor;
    edtPreviewVLink->Color = BGColor;

    switch(grpBodyAttributes->ItemIndex)
    {
    case 0:
        ClickOption(mmoPreview->Color, edtBackground->Text);
        HexBG = edtBackground->Text;
        break;
    case 1:
        ClickOption(edtPreviewText->Font->Color, edtText->Text);
        HexText = edtText->Text;
        break;
    case 2:
        ClickOption(edtPreviewLink->Font->Color, edtLink->Text);
        HexLink = edtLink->Text;
        break;
    case 3:
        ClickOption(edtPreviewALink->Font->Color, edtALink->Text);
        HexALink = edtALink->Text;
        break;
    case 4:
        ClickOption(edtPreviewVLink->Font->Color, edtVLink->Text);
        HexVLink = edtVLink->Text;
        break;
    }
}
//---------------------------------------------------------------------------

Save and test the application then return to C++ Builder

Double-click the Copy button and implement it as follows:

//---------------------------------------------------------------------------
void __fastcall TForm1::btnCopyClick(TObject *Sender)
{
    edtBody->SelectAll();
    edtBody->CopyToClipboard();
}
//---------------------------------------------------------------------------

Test the application


Home	Copyright © 2005-2012, FunctionX, Inc.