Practical Learning Logo

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

  1. Start Borland C++ Builder with its default form or create a new project
  2. Save the project in a new folder named BodyTag
  3. Save the unit as Exercise and save the project as BodyTag
  4. From the Standard tab of the Component Palette, click the RadioGroup control RadioGroup and click the left side of the form
  5. On the Object Inspector, double-click (TStrings) from the Items field
  6. Type Background and press Enter. Complete the list with Text, Link, Active Link, and Visited Link
     
  7. Click OK
  8. While the RadioGroup control is still selected, on the Object Inspector, change its properties as follows:
    Caption = Body Attributes
    ItemIndex = 0
    Name = grpBodyAttributes
  9. 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">
  10. Access each edit box in the lower-left memo and set its BorderStyle property to bsNone
     
    Body Tag Formatter - Form Design
  11. 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);
    };
    //---------------------------------------------------------------------------
  12. In the ClassExplorer window, right-click TForm1  and click New Method...
  13. Set the method options as follows:
    Method Name: ApplyColor
    Function Result: void
    Visibility: private
    Directives: __fastcall
  14. 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 +
                        "\">";
    }
    //---------------------------------------------------------------------------
  15. 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();
    }
    //---------------------------------------------------------------------------
  16. Test the application and return to C++ Builder
  17. 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);
    };
    //---------------------------------------------------------------------------
  18. 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);
    }
    //---------------------------------------------------------------------------
  19. Save all
  20. 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;
        }
    }
    //---------------------------------------------------------------------------
  21. Save and test the application then return to C++ Builder
  22. Double-click the Copy button and implement it as follows:
     
    //---------------------------------------------------------------------------
    void __fastcall TForm1::btnCopyClick(TObject *Sender)
    {
        edtBody->SelectAll();
        edtBody->CopyToClipboard();
    }
    //---------------------------------------------------------------------------
  23. Test the application
     
 
 

Home Copyright 2005-2007 FunctionX, Inc.