Microsoft Visual C++ .NET Tutorials

	Body Tag Formatter

This exercise combines a panel, a button, and three scroll bars combined to create an application.

Prerequisites:
Dialog Box
Group Boxes
Radio Buttons
Text Boxes
Panel
Button
Scroll Bars

Practical Learning: Introducing Scroll Bar Controls

Start a new Windows Forms Application named BodyTag1
Set form's FormBorderStyle property to FixedDialog
Set its MaximizeBox and its MinimizeBox properties to False each

Design the form as follows:

Control	Name	Text	Other Properties
GroupBox		Body Attributes
RadioButton	rdoBackground	Background	Checked: True
TextBox	txtBackground	#FFFFFF
RadioButton	rdoText	Text
TextBox	txtText	#0000FF
RadioButton	rdoLink	Link
TextBox	txtLink	#FF0000
RadioButton	rdoActiveLink	Active Link
TextBox	txtActiveLink	#008000
RadioButton	rdoVisitedLink	Visited Link
TextBox	txtVisitedLink	#800000
Panel	pnlPreview		BackColor: White BorderStyle: Fixed3D
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	255
Label		Green:
TextBox	txtGreen	255
Label		Blue:
TextBox	txtBlue	255
Button	btnClose	Close
Button	btnCopy	Copy
TextBox	txtResult	<body bgcolor="#FFFFFF" text="#0000FF" link="#FF0000" alink="#008000" vlink="#800000">

Save all

Add three VScrollBar controls and three labels to the top-right section of the form

Control	Name	Text	LargeChange	Maximum	Value
VScrollBar	scrRed		1	255	0
VScrollBar	scrGreen		1	255	0
VScrollBar	scrBlue		1	255	0
Label		R
Label		G
Label		B

Right-click the form and click View Code. Declare the following private String pointers:

#pragma once


namespace BodyTag1
{
	using namespace System;
	using namespace System::ComponentModel;
	using namespace System::Collections;
	using namespace System::Windows::Forms;
	using namespace System::Data;
	using namespace System::Drawing;

	/// <summary> 
	/// Summary for Form1
	///
	/// WARNING: If you change the name of this class, you will need to change the 
	///          'Resource File Name' property for the managed resource compiler tool 
	///          associated with all .resx files this class depends on.  Otherwise,
	///          the designers will not be able to interact properly with localized
	///          resources associated with this form.
	/// </summary>
	public __gc class Form1 : public System::Windows::Forms::Form
	{	
	public:
		Form1(void)
		{
			InitializeComponent();
		}
  
	protected:
		void Dispose(Boolean disposing)
		{
			if (disposing && components)
			{
				components->Dispose();
			}
			__super::Dispose(disposing);
		}
	private: System::Windows::Forms::VScrollBar *  scrRed;
	private: System::Windows::Forms::Button *  btnCopy;
	private: System::Windows::Forms::Label *  label5;
	private: System::Windows::Forms::Label *  label4;
	private: System::Windows::Forms::TextBox *  txtResult;
	private: System::Windows::Forms::Panel *  pnlBody;
	private: System::Windows::Forms::TextBox *  txtVLinkPreview;
	private: System::Windows::Forms::TextBox *  txtALinkPreview;
	private: System::Windows::Forms::TextBox *  txtLinkPreview;
	private: System::Windows::Forms::TextBox *  txtTextPreview;
	private: System::Windows::Forms::Label *  label6;
	private: System::Windows::Forms::VScrollBar *  scrBlue;
	private: System::Windows::Forms::GroupBox *  groupBox1;
	private: System::Windows::Forms::TextBox *  txtVisitedLink;
	private: System::Windows::Forms::RadioButton *  rdoVisitedLink;
	private: System::Windows::Forms::TextBox *  txtActiveLink;
	private: System::Windows::Forms::RadioButton *  rdoActiveLink;
	private: System::Windows::Forms::TextBox *  txtLink;
	private: System::Windows::Forms::RadioButton *  rdoLink;
	private: System::Windows::Forms::TextBox *  txtText;
	private: System::Windows::Forms::RadioButton *  rdoText;
	private: System::Windows::Forms::TextBox *  txtBackground;
	private: System::Windows::Forms::RadioButton *  rdoBackground;
	private: System::Windows::Forms::Button *  btnClose;
	private: System::Windows::Forms::GroupBox *  groupBox2;
	private: System::Windows::Forms::TextBox *  txtBlue;
	private: System::Windows::Forms::Label *  label3;
	private: System::Windows::Forms::TextBox *  txtGreen;
	private: System::Windows::Forms::Label *  label2;
	private: System::Windows::Forms::TextBox *  txtRed;
	private: System::Windows::Forms::Label *  label1;
	private: System::Windows::Forms::VScrollBar *  scrGreen;
	private: System::Windows::Forms::Panel *  pnlPreview;

	private:
		/// <summary>
		/// Required designer variable.
		/// </summary>
		System::ComponentModel::Container * components;
		
		typedef String *string;
		string HexBG, HexText, HexLink, HexALink, HexVLink;

		/// <summary>
		/// Required method for Designer support - do not modify
		/// the contents of this method with the code editor.
		/// </summary>
		void InitializeComponent(void)
		{
			
			. . .
			
		}	
	};
}

In Class View, expand BodyTag1 and expand the other BodyTag1. Right-click Form1 -> Add -> Add Function...
Set the method options as follows:
Return Type: void
Function Name: ApplyColor
Access: private

Click Finish and implement the method as follows:

void ApplyColor(void)
{
	// Retrieve the current hexadecimal colors from their Edit controls
    HexBG = txtBackground->Text;
    HexText = txtText->Text;
    HexLink = txtLink->Text;
    HexALink = txtActiveLink->Text;
    HexVLink = txtVisitedLink->Text;

	int iRed   = 255 - scrRed->Value;
	int iGreen = 255 - scrGreen->Value;
	int iBlue  = 255 - scrBlue->Value;

    // Get the integral position of each ScrollBar control
	// and convert it to String
	String *strRed   = Convert::ToString(iRed);
    String *strGreen = Convert::ToString(iGreen);
    String *strBlue  = Convert::ToString(iBlue);

    // 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 = Drawing::Color::FromArgb(iRed, iGreen, iBlue);

	String *strHexRed   = iRed.ToString(S"X");
	String *strHexGreen = iGreen.ToString(S"X");
	String *strHexBlue  = iBlue.ToString(S"X");

	if( iRed < 10 )
		strHexRed = String::Concat(S"0", iRed.ToString(S"X"));
	if( iGreen < 10 )
		strHexGreen = String::Concat(S"0", iGreen.ToString(S"X"));
	if( iBlue < 10 )
		strHexBlue = String::Concat(S"0", iBlue.ToString(S"X"));

    // 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 = S"#";
		BG = BG->Concat(BG, strHexRed);
		BG = BG->Concat(BG, strHexGreen);
		BG = BG->Concat(BG, strHexBlue);
        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 = S"#";
		Txt = Txt->Concat(Txt, strHexRed);
		Txt = Txt->Concat(Txt, strHexGreen);
		Txt = Txt->Concat(Txt, strHexBlue);
		txtText->Text = Txt;
		txtTextPreview->ForeColor = Drawing::Color::FromArgb(iRed, iGreen, iBlue);
       HexText = txtText->Text;
	}
	else if( rdoLink->Checked == true )
	{
		String *TL = S"#";
		        TL = TL->Concat(TL, strHexRed);
				TL = TL->Concat(TL, strHexGreen);
				TL = TL->Concat(TL, strHexBlue);
		txtLink->Text = TL;
       txtLinkPreview->ForeColor = Drawing::Color::FromArgb(iRed, iGreen, iBlue);
       HexLink = txtLink->Text;
	}
	else if( rdoActiveLink->Checked == true )
	{
		String *AL = S"#";
		        AL = AL->Concat(AL, strHexRed);
		        AL = AL->Concat(AL, strHexGreen);
		        AL = AL->Concat(AL, strHexBlue);
		txtActiveLink->Text = AL;
       txtALinkPreview->ForeColor = Drawing::Color::FromArgb(iRed, iGreen, iBlue);
       HexALink = txtActiveLink->Text;
	}
	else if( rdoVisitedLink->Checked == true )
	{
		String *VL = S"#";
		        VL = VL->Concat(VL, strHexRed);
		        VL = VL->Concat(VL, strHexGreen);
		        VL = VL->Concat(VL, strHexBlue);
		txtVisitedLink->Text = VL;
       txtVLinkPreview->ForeColor = Drawing::Color::FromArgb(iRed, iGreen, iBlue);
       HexVLink = txtVisitedLink->Text;
    }

    // Update the contents of the bottom Edit control
    String *BD = S"<body bgcolor=\"";
            BD = BD->Concat(BD, HexBG);
            BD = BD->Concat(BD, S"\" text=\"");
            BD = BD->Concat(BD, HexText);
            BD = BD->Concat(BD, S"\" link=\"");
            BD = BD->Concat(BD, HexLink);
            BD = BD->Concat(BD, S"\" alink=\"");
            BD = BD->Concat(BD, HexALink);
            BD = BD->Concat(BD, S"\" vlink=\"");
            BD = BD->Concat(BD, HexVLink);
            BD = BD->Concat(BD, S"\">");
    txtResult->Text = BD;
}

Double-click each scroll bar and implement them as follows:

System::Void scrRed_Scroll(System::Object *  sender, System::Windows::Forms::ScrollEventArgs *  e)
		 {
			 this->ApplyColor();
		 }

private: System::Void scrGreen_Scroll(System::Object *  sender, System::Windows::Forms::ScrollEventArgs *  e)
		 {
			 this->ApplyColor();
		 }

private: System::Void scrBlue_Scroll(System::Object *  sender, System::Windows::Forms::ScrollEventArgs *  e)
		 {
			 this->ApplyColor();
		 }

Execute the application to test the form
Close the form and return to your programming environment

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 Code Editor, just after the closing curly bracket of the scrBlue_Scroll method, create the following method:

void ClickOption(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 = 255 - Red;
    scrGreen->Value = 255 - Green;
    scrBlue->Value = 255 - 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 = Result->Concat(Result, S"#");
    Result = Result->Concat(Result, Red.ToString(S"X"));
    Result = Result->Concat(Result, Green.ToString(S"X"));
    Result = Result->Concat(Result, Blue.ToString(S"X"));
}

In the form, double-click each radio button and implement it as follows:

System::Void rdoBackground_CheckedChanged(System::Object *  sender, System::EventArgs *  e)
{
	// If the user clicks Background radio button
	// set color of the panel to that of the radio button
	pnlPreview->BackColor      = pnlBody->BackColor;

	// Call the ClickOption() method to calculate
	// the hexadecimal value of the color
	ClickOption(pnlBody->BackColor, txtBackground->Text);
	HexBG = txtBackground->Text;
}

private: System::Void rdoText_CheckedChanged(System::Object *  sender, System::EventArgs *  e)
{
	pnlPreview->BackColor  = txtTextPreview->ForeColor;

	ClickOption(txtTextPreview->ForeColor, txtText->Text);
	HexText = txtText->Text;   
}

private: System::Void rdoLink_CheckedChanged(System::Object *  sender, System::EventArgs *  e)
{
	pnlPreview->BackColor  = txtLinkPreview->ForeColor;

	ClickOption(txtLinkPreview->ForeColor, txtLink->Text);
	HexLink = txtLink->Text;   
}

private: System::Void rdoActiveLink_CheckedChanged(System::Object *  sender, System::EventArgs *  e)
{
	pnlPreview->BackColor  = txtALinkPreview->ForeColor;

	ClickOption(txtALinkPreview->ForeColor, txtActiveLink->Text);
	HexALink = txtActiveLink->Text;
}

private: System::Void rdoVisitedLink_CheckedChanged(System::Object *  sender, System::EventArgs *  e)
{
	pnlPreview->BackColor  = txtVLinkPreview->ForeColor;

	ClickOption(txtVLinkPreview->ForeColor, txtVisitedLink->Text);
	HexVLink = txtVisitedLink->Text;  
}

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

System::Void btnClose_Click(System::Object *  sender, System::EventArgs *  e)
{
	 Close();
}

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

System::Void btnCopy_Click(System::Object *  sender, System::EventArgs *  e)
{
	 this->txtResult->SelectAll();
	 this->txtResult->Copy();
}

Execute the application
Close the form


Home	Copyright © 2002-2010 FunctionX, Inc.