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.

Prerequisites:

Radio Buttons

Text Boxes

Panel

Vertical Scroll Bars

Buttons

Practical Learning: Starting the Exercise

 

  1. Start a new Visual C# project as a Windows Application named BodyTag
  2. Design the form as follows:
     
     
    Control Name Text Other Properties
    GroupBox grpBodyAttributes Body Attributes  
    RadioButton rdoBackground Background Checked: True
    RadioButton rdoText Text  
    RadioButton rdoLink Link  
    RadioButton rdoActiveLink Active Link  
    RadioButton rdoVisitedLink Visited Link  
    TextBox txtBackground #000000  
    TextBox txtText #0000FF  
    TextBox txtLink #FF0000  
    TextBox txtActiveLink #008000  
    TextBox txtVisitedLink #800000  
    Panel pnlPreview   BackColor: White
    BorderStyle: Fixed3D
    VScrollBar scrRed   LargeChange: 1
    Maximum: 255
    Value: 255
    VScrollBar scrGreen   LargeChange: 1
    Maximum: 255
    Value: 255
    VScrollBar scrBlue   LargeChange: 1
    Maximum: 255
    Value: 255
    Panel pnlBody   BackColor: White
    BorderStyle: Fixed3D
    TextBox txtTextPreview Body tag formatter and colorizer BorderStyle: None
    ForeColor: Blue
    TextAlign: Center
    TextBox txtLinkPreview Sample text as link BorderStyle: None
    ForeColor: Red
    TextAlign: Center
    TextBox txtALinkPreview Current active link BorderStyle: None
    ForeColor: Green
    TextAlign: Center
    TextBox txtVLinkPreview This link has been visited BorderStyle: None
    ForeColor: Maroon
    TextAlign: Center
    GroupBox   Color Values  
    Label   Red:  
    TextBox txtRed 0  
    Label   Green:  
    TextBox txtGreen 0  
    Label   Blue:  
    TextBox txtBlue 0  
    Button btnClose Close  
    Button btnCopy Copy  
    TextBox txtResult <body bgcolor="#FFFFFF" text="#0000FF" link="#FF0000" alink="#008000" vlink="#800000">  
  3. In the class, declare the following private variables:
     
    private String HexBG, HexText, HexLink, HexALink, HexVLink;
  4. In Class View, right-click Form1 -> Add -> Add Method...
  5. Set the method options as follows:
    Method Access: private
    Return Type: void
    Method Name: ApplyColor
  6. Click Finish and implement the method as follows:
     
    private void ApplyColor()
    		{
    			// Retrieve the current hexadecimal colors from their Edit controls
    			HexBG    = this.txtBackground.Text;
    			HexText  = this.txtText.Text;
    			HexLink  = this.txtLink.Text;
    			HexALink = this.txtActiveLink.Text;
    			HexVLink = this.txtVisitedLink.Text;
    
    			// Get the integral position of each ScrollBar control
    			String strRed   = Convert.ToString(255 - this.scrRed.Value);
    			String strGreen = Convert.ToString(255 - this.scrGreen.Value);
    			String strBlue  = Convert.ToString(255 - this.scrBlue.Value);
    
    			// Display the position of each ScrollBar
    			// in its corresponding Edit control
    			this.txtRed.Text   = strRed;
    			this.txtGreen.Text = strGreen;
    			this.txtBlue.Text  = strBlue;
    
    			// Change the color of the Preview panel
    			// according to the values of the ScrollBar positions
    			pnlPreview.BackColor = System.Drawing.Color.FromArgb(scrRed.Value, scrGreen.Value, 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 = System.Drawing.Color.FromArgb(scrRed.Value, scrGreen.Value, 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 = System.Drawing.Color.FromArgb(scrRed.Value, scrGreen.Value, 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 = System.Drawing.Color.FromArgb(scrRed.Value, scrGreen.Value, 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 = System.Drawing.Color.FromArgb(scrRed.Value, scrGreen.Value, scrBlue.Value);
           
    				HexVLink = txtVisitedLink.Text;
    			}
    
    			// Update the contents of the bottom Edit control
    			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;
    		}
  7. Double-click each scroll bar and implement them as follows:
     
    private void scrRed_Scroll(object sender, System.Windows.Forms.ScrollEventArgs e)
    {
    	this.ApplyColor();
    }
    
    private void scrGreen_Scroll(object sender, System.Windows.Forms.ScrollEventArgs e)
    {
    	this.ApplyColor();
    }
    
    private void scrBlue_Scroll(object sender, System.Windows.Forms.ScrollEventArgs e)
    {
    	this.ApplyColor();
    }
  8. Test the application and return to Visual C#
  9. 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 source code of the class, implement the following function:
     
    private 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 = pnlPreview.BackColor.R;
    			// Get the green value of the color of the Preview panel
    			Green = pnlPreview.BackColor.G;
    			// Get the blue value of the color of the Preview panel
    			Blue = 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"));
    		}
  10. Double-click each radio button and implement it as follows:
     
    private void rdoBackground_CheckedChanged(object sender, System.EventArgs e)
    		{
    			// If the user clicks Background radio button
    			// set color of the panel to that of the radio button
    			System.Drawing.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;
    		}
    
    		private void rdoText_CheckedChanged(object sender, System.EventArgs e)
    		{
    			System.Drawing.Color BGColor = pnlBody.BackColor;
    			txtTextPreview.BackColor  = BGColor;
    
    			ClickOption(txtTextPreview.ForeColor, txtText.Text);
    			HexText = txtText.Text;   
    		}
    
    		private void rdoLink_CheckedChanged(object sender, System.EventArgs e)
    		{
    			System.Drawing.Color BGColor = pnlBody.BackColor;
    
    			txtLinkPreview.BackColor  = BGColor;
    
    			ClickOption(txtLinkPreview.ForeColor, txtLink.Text);
    			HexLink = txtLink.Text; 
    		}
    
    		private void rdoActiveLink_CheckedChanged(object sender, System.EventArgs e)
    		{
    			System.Drawing.Color BGColor = pnlBody.BackColor;
    
    			txtALinkPreview.BackColor  = BGColor;
    
    			ClickOption(txtALinkPreview.ForeColor, txtActiveLink.Text);
    			HexALink = txtActiveLink.Text;
    		}
    
    		private void rdoVisitedLink_CheckedChanged(object sender, System.EventArgs e)
    		{
    			System.Drawing.Color BGColor = pnlBody.BackColor;
    
    			txtVLinkPreview.BackColor  = BGColor;
    
    			ClickOption(txtVLinkPreview.ForeColor, txtVisitedLink.Text);
    			HexVLink = txtVisitedLink.Text;  
    		}
  11. Save and test the application then return to Visual C#
  12. Double-click the Close button and implement it as follows:
     
    private void btnClose_Click(object sender, System.EventArgs e)
    		{
    			Close();
    		}
  13. Double-click the Copy button and implement it as follows:
     
    private void btnCopy_Click(object sender, System.EventArgs e)
    		{
    			this.txtResult.SelectAll();
    			this.txtResult.Copy();
    		}
  14. Test the application
 

Home Copyright 2004-2007 FunctionX, Inc.