Home

Example Application: The HTML Body Tag Formatter

     

Description

A scroll bar is used to navigate a bar using a thumb. While navigating, you can get the current value of the control. This application explores the properties of scroll bars.

  

ApplicationApplication: Creating the Application

  1. Start a new Windows Application named HTMLBodyTag1
  2. Design the form as follows:
     
    Body Tag Formatter - Form Designer
     
    Control Name Text Other Properties
    GroupBox GroupBox   Body Attributes  
    RadioButton RadioButton rdoBackground Background Checked: True
    TextBox TextBox txtBackground #000000  
    RadioButton RadioButton rdoText Text  
    TextBox TextBox txtText #0000FF  
    RadioButton RadioButton rdoLink Link  
    TextBox TextBox txtLink #FF0000  
    RadioButton RadioButton rdoActiveLink Active Link  
    TextBox TextBox txtActiveLink #008000  
    RadioButton RadioButton rdoVisitedLink Visited Link  
    TextBox TextBox txtVisitedLink #800000  
    Panel Panel pnlPreview   BackColor: White
    BorderStyle: Fixed3D
    VScrollBar VScrollBar scrRed    
    VScrollBar VScrollBar scrGreen    
    VScrollBar VScrollBar scrBlue    
    Label   R  
    Label   G  
    Label   B  
    Panel Panel pnlBody   BackColor: White
    BorderStyle: Fixed3D
    TextBox TextBox txtTextPreview Body tag formatter and colorizer BorderStyle: None
    ForeColor: Blue
    TextAlign: Center
    TextBox TextBox txtLinkPreview Sample text as link BorderStyle: None
    ForeColor: Red
    TextAlign: Center
    TextBox TextBox txtALinkPreview Current active link BorderStyle: None
    ForeColor: Green
    TextAlign: Center
    TextBox TextBox txtVLinkPreview This link has been visited BorderStyle: None
    ForeColor: Maroon
    TextAlign: Center
    GroupBox GroupBox   Color's Values  
    Label Label   Red:  
    TextBox TextBox txtRed 0  
    Label Label   Green:  
    TextBox TextBox txtGreen 0  
    Label Label   Blue:  
    TextBox TextBox txtBlue 0  
    Button Button btnCopy Copy  
    Button Button btnClose Close  
    TextBox TextBox txtResult <body bgcolor="#FFFFFF" text="#0000FF" link="#FF0000" alink="#008000" vlink="#800000">
  3. On the form, click one of the scroll bars
  4. Press and hold Ctrl
  5. Click the other two scroll bars and release Ctrl
  6. In the Properties window, click Maximum, type 255, and press Enter
  7. Click an unoccupied area of the form to make sure no control is selected
  8. On the form, click one of the scroll bars
  9. Press and hold Ctrl
  10. Click the other two scroll bars and release Ctrl
  11. In the Properties window, click LargeChange, type 1, and press Enter
     
    Body Tag Formatter - Vertical Scroll Bars
  12. Right-click the form and click View Code
  13. Change the file as follows:
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Linq;
    using System.Text;
    using System.Windows.Forms;
    
    namespace HTMLBodyTag1
    {
        public partial class Form1 : Form
        {
            private string HexBG, HexText, HexLink, HexALink, HexVLink;
    
            public Form1()
            {
                InitializeComponent();
            }
    
            internal void ApplyColor()
            {
                // Retrieve the current hexadecimal colors from their Edit controls
                HexBG = txtBackground.Text;
                HexText = txtText.Text;
                HexLink = txtLink.Text;
                HexALink = txtActiveLink.Text;
                HexVLink = txtVisitedLink.Text;
    
                // Get the integral position of each ScrollBar control
                string strRed = Convert.ToString(255 - scrRed.Value);
                string strGreen = Convert.ToString(255 - scrGreen.Value);
                string strBlue = Convert.ToString(255 - scrBlue.Value);
    
                // Display the position of each ScrollBar
                // in its corresponding Edit control
                txtRed.Text = strRed;
                txtGreen.Text = strGreen;
                txtBlue.Text = strBlue;
    
                // Change the color of the Preview panel
                // according to the values of the ScrollBar positions
                pnlPreview.BackColor = Color.FromArgb(255 - scrRed.Value,
                                                      255 - scrGreen.Value,
                                                      255 - scrBlue.Value);
    
                string FmtRed = (255 - scrRed.Value).ToString("X");
                if (FmtRed.Length == 1)
                    FmtRed = String.Concat("0", FmtRed);
    
                string FmtGreen = (255 - scrGreen.Value).ToString("X");
                if (FmtGreen.Length == 1)
                    FmtGreen = String.Concat("0", FmtGreen);
    
                string FmtBlue = (255 - scrBlue.Value).ToString("X");
                if (FmtBlue.Length == 1)
                    FmtBlue = String.Concat("0", FmtBlue);
    
                // Get the position of each ScrollBar control
                // Create a hexadecimal color starting with #
                // And display the color in the appropriate Edit control
                if (rdoBackground.Checked == true)
                {
                    string BG = "#";
                    BG = String.Concat(BG, FmtRed);
                    BG = String.Concat(BG, FmtGreen);
                    BG = String.Concat(BG, FmtBlue);
    
                    txtBackground.Text = BG;
                    pnlBody.BackColor = pnlPreview.BackColor;
                    txtTextPreview.BackColor = pnlPreview.BackColor;
                    txtLinkPreview.BackColor = pnlPreview.BackColor;
                    txtALinkPreview.BackColor = pnlPreview.BackColor;
                    txtVLinkPreview.BackColor = pnlPreview.BackColor;
    
                    HexBG = txtBackground.Text;
                }
                else if (rdoText.Checked == true)
                {
                    string Txt = "#";
                    Txt = String.Concat(Txt, FmtRed);
                    Txt = String.Concat(Txt, FmtGreen);
                    Txt = String.Concat(Txt, FmtBlue);
    
                    txtText.Text = Txt;
                    txtTextPreview.ForeColor = Color.FromArgb(255 - scrRed.Value,
                                                              255 - scrGreen.Value,
                                                              255 - scrBlue.Value);
                    HexText = txtText.Text;
                }
                else if (rdoLink.Checked == true)
                {
                    string TL = "#";
                    TL = String.Concat(TL, FmtRed);
                    TL = String.Concat(TL, FmtGreen);
                    TL = String.Concat(TL, FmtBlue);
    
                    txtLink.Text = TL;
                    txtLinkPreview.ForeColor = Color.FromArgb(255 - scrRed.Value,
                                                              255 - scrGreen.Value,
                                                              255 - scrBlue.Value);
    
                    HexLink = txtLink.Text;
                }
                else if (rdoActiveLink.Checked == true)
                {
                    string AL = "#";
                    AL = String.Concat(AL, FmtRed);
                    AL = String.Concat(AL, FmtGreen);
                    AL = String.Concat(AL, FmtBlue);
    
                    txtActiveLink.Text = AL;
                    txtALinkPreview.ForeColor = Color.FromArgb(255 - scrRed.Value,
                                                               255 - scrGreen.Value,
                                                               255 - scrBlue.Value);
    
                    HexALink = txtActiveLink.Text;
                }
                else if (rdoVisitedLink.Checked == true)
                {
                    string VL = "#";
                    VL = String.Concat(VL, FmtRed);
                    VL = String.Concat(VL, FmtGreen);
                    VL = String.Concat(VL, FmtBlue);
    
                    txtVisitedLink.Text = VL;
                    txtVLinkPreview.ForeColor = Color.FromArgb(255 - scrRed.Value,
                                                               255 - scrGreen.Value,
                                                               255 - scrBlue.Value);
    
                    HexVLink = txtVisitedLink.Text;
                }
    
                // Update the contents of the bottom text box
                string BD = "<body bgcolor=\"";
                BD = String.Concat(BD, HexBG);
                BD = String.Concat(BD, "\" text=\"");
                BD = String.Concat(BD, HexText);
                BD = String.Concat(BD, "\" link=\"");
                BD = String.Concat(BD, HexLink);
                BD = String.Concat(BD, "\" alink=\"");
                BD = String.Concat(BD, HexALink);
                BD = String.Concat(BD, "\" vlink=\"");
                BD = String.Concat(BD, HexVLink);
                BD = String.Concat(BD, "\">");
    
                txtResult.Text = BD;
            }
        }
    }
  14. Return to the form and double-click the left scroll bar
  15. Implement its event as follows:
    private void scrRed_Scroll(object sender, ScrollEventArgs e)
    {
        ApplyColor();
    }
  16. Return to the form and double-click the middle scroll bar
  17. Implement its event as follows:
    private void scrGreen_Scroll(object sender, ScrollEventArgs e)
    {
              ApplyColor();
    }
  18. Return to the form  and double-click the right scroll bar
  19. Implement its event as follows:
    private void scrBlue_Scroll(object sender, ScrollEventArgs e)
    {
             ApplyColor();
    }
  20. Execute the application to test the form
  21. Close the form and return to your programming environment
  22. 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 Code Editor, just after the closing curly bracket of the scrBlue_Scroll event, create the following method:
    internal void ClickOption(System.Drawing.Color Clr, String Result)
    {
    	// These variables will hold the red, green, and blue
    	// values of the passed color
    	int red, green, blue;
    
    	// Colorize the Preview panel with the passed color
    	pnlPreview.BackColor = Clr;
    
    	// Get the red value of the color of the Preview panel
    	red = 255 - pnlPreview.BackColor.R;
    	// Get the green value of the color of the Preview panel
    	green = 255 - pnlPreview.BackColor.G;
    	// Get the blue value of the color of the Preview panel
    	blue = 255 - pnlPreview.BackColor.B;
    
    	// Now that we have the red, green, and blue values of the color,
    	// Update the scroll bars with the new values
    	scrRed.Value   = red;
    	scrGreen.Value = green;
    	scrBlue.Value  = blue;
    
    	// Update the red, green, and blue values
    	// of the Numeric Values group box
    	txtRed.Text   = red.ToString();
    	txtGreen.Text = green.ToString();
    	txtBlue.Text  = blue.ToString();
    
    	// Update the string that was passed using
    	// the retrieved red, green, and blue values
    	Result = String.Concat(Result, "#");
    	Result = String.Concat(Result, red.ToString("X"));
    	Result = String.Concat(Result, green.ToString("X"));
    	Result = String.Concat(Result, blue.ToString("X"));
    }
  23. Return to the form
  24. Double-click the Background radio button and implement its event as follows:
    private void rdoBackground_CheckedChanged(object sender, EventArgs e)
    {
                // If the user clicks Background radio button
                // set color of the panel to that of the radio button
                Color BGColor = pnlBody.BackColor;
    
                pnlBody.BackColor = BGColor;
    
                // Call the ClickOption() method to calculate
                // the hexadecimal value of the color
                ClickOption(pnlBody.BackColor, txtBackground.Text);
                HexBG = txtBackground.Text;
    }
  25. Return to the form
  26. Double-click the Text radio button and implement its event as follows:
    private void rdoText_CheckedChanged(object sender, EventArgs e)
    {
                Color BGColor = pnlBody.BackColor;
                txtTextPreview.BackColor = BGColor;
    
                ClickOption(txtTextPreview.ForeColor, txtText.Text);
                HexText = txtText.Text;   
    }
  27. Return to the form
  28. Double-click the Link radio button and implement its event as follows:
    private void rdoLink_CheckedChanged(object sender, EventArgs e)
    {
                Color BGColor = pnlBody.BackColor;
                txtLinkPreview.BackColor = BGColor;
    
                ClickOption(txtLinkPreview.ForeColor, txtLink.Text);
                HexLink = txtLink.Text; 
    }
  29. Return to the form
  30. Double-click the Active Link radio button and implement its event as follows:
    private void rdoActiveLink_CheckedChanged(object sender, EventArgs e)
    {
                Color BGColor = pnlBody.BackColor;
                txtALinkPreview.BackColor = BGColor;
    
                ClickOption(txtALinkPreview.ForeColor, txtActiveLink.Text);
                HexALink = txtActiveLink.Text;
    }
  31. Return to the form
  32. Double-click the Visited Link radio button and implement its event as follows:
    private void rdoVisitedLink_CheckedChanged(object sender, EventArgs e)
    {
                Color BGColor = pnlBody.BackColor;
                txtVLinkPreview.BackColor = BGColor;
    
                ClickOption(txtVLinkPreview.ForeColor, txtVisitedLink.Text);
                HexVLink = txtVisitedLink.Text;  
    }
  33. Return to the form
  34. Double-click the Copy button and implement it as follows:
    private void btnCopy_Click(object sender, EventArgs e)
    {
                txtResult.SelectAll();
                txtResult.Copy();
    }
  35. Return to the form
  36. Double-click the Close button and implement it as follows:
    private void btnClose_Click(object sender, EventArgs e)
    {
                Close();
    }
  37. Execute the application
     
    Body Tag Formatter
  38. Close the form
 

Home Copyright © 2010-2014, FunctionX