Visual Basic .Net 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 a new Visual Basic project as a Windows Application named BodyTag

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	ForeColor: Blue TextAlign: Center
TextBox	txtLinkPreview	Sample text as link	ForeColor: Red TextAlign: Center
TextBox	txtALinkPreview	Current active link	ForeColor: Green TextAlign: Center
TextBox	txtVLinkPreview	This link has been visited	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">

In the class, declare the following private variables:

Public Class Form1
    Inherits System.Windows.Forms.Form
    Private HexBG, HexText, HexLink, HexALink, HexVLink As String

In the module, create the following sub procedure:

Private Sub ApplyColor()
        Dim strRed As String
        Dim strGreen As String
        Dim strBlue As String
        Dim FmtRed As String
        Dim FmtGreen As String
        Dim FmtBlue As String
        Dim BG As String
        Dim Txt As String
        Dim TL As String
        Dim AL As String
        Dim VL As String
        Dim BD As String

        HexBG = Me.txtBackground.Text
        HexText = Me.txtText.Text
        HexLink = Me.txtLink.Text
        HexALink = Me.txtActiveLink.Text
        HexVLink = Me.txtVisitedLink.Text

        ' Get the integral position of each ScrollBar control
        strRed = CStr(255 - Me.scrRed.Value)
        strGreen = CStr(255 - Me.scrGreen.Value)
        strBlue = CStr(255 - Me.scrBlue.Value)

        ' Display the position of each ScrollBar
        ' in its corresponding Edit control
        Me.txtNumRed.Text = strRed
        Me.txtNumGreen.Text = strGreen
        Me.txtNumBlue.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)

        FmtRed = Hex(255 - scrRed.Value)
        If Len(FmtRed) = 1 Then
            FmtRed = "0" & FmtRed
        End If

        FmtGreen = Hex(255 - scrGreen.Value)
        If Len(FmtGreen) = 1 Then
            FmtGreen = "0" & FmtGreen
        End If

        FmtBlue = Hex(255 - scrBlue.Value)
        If Len(FmtBlue) = 1 Then
            FmtBlue = "0" & FmtBlue
        End If

        ' Display the position of each ScrollBar
        ' in its corresponding hexadecimal text control
        Me.txtHexRed.Text = FmtRed
        Me.txtHexGreen.Text = FmtGreen
        Me.txtHexBlue.Text = 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 Then
            BG = "#" & FmtRed & FmtGreen & 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

        ElseIf rdoText.Checked = True Then
            Txt = "#" & FmtRed & FmtGreen & FmtBlue

            txtText.Text = Txt
            txtTextPreview.ForeColor = System.Drawing.Color.FromArgb(scrRed.Value, scrGreen.Value, scrBlue.Value)
            HexText = txtText.Text

        ElseIf rdoLink.Checked = True Then
            TL = "#"
            TL = TL & FmtRed
            TL = TL & FmtGreen
            TL = TL & FmtBlue

            txtLink.Text = TL
            txtLinkPreview.ForeColor = System.Drawing.Color.FromArgb(scrRed.Value, scrGreen.Value, scrBlue.Value)
            HexLink = txtLink.Text
        ElseIf rdoActiveLink.Checked = True Then
            AL = "#"
            AL = AL & FmtRed
            AL = AL & FmtGreen
            AL = AL & FmtBlue

            txtActiveLink.Text = AL
            txtALinkPreview.ForeColor = System.Drawing.Color.FromArgb(scrRed.Value, scrGreen.Value, scrBlue.Value)

            HexALink = txtActiveLink.Text
        ElseIf rdoVisitedLink.Checked = True Then
            VL = "#"
            VL = VL & FmtRed
            VL = VL & FmtGreen
            VL = VL & FmtBlue

            txtVisitedLink.Text = VL
            txtVLinkPreview.ForeColor = System.Drawing.Color.FromArgb(scrRed.Value, scrGreen.Value, scrBlue.Value)

            HexVLink = txtVisitedLink.Text
        End If

        ' Update the contents of the bottom Edit control
        BD = "<body bgcolor=""" & txtBackground.Text & """" & " text=""" _
             & txtText.Text & """" & " link=""" & txtLink.Text & """" & " alink=""" _
             & txtActiveLink.Text & """" & " vlink=""" & txtVisitedLink.Text _
             & """ >"

        txtResult.Text = BD
    End Sub

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

Private Sub scrRed_Scroll(ByVal sender As System.Object, ByVal e As System.Windows.Forms.ScrollEventArgs) Handles scrRed.Scroll
        Me.ApplyColor()
    End Sub

    Private Sub scrGreen_Scroll(ByVal sender As System.Object, ByVal e As System.Windows.Forms.ScrollEventArgs) Handles scrGreen.Scroll
        Me.ApplyColor()
    End Sub

    Private Sub scrBlue_Scroll(ByVal sender As System.Object, ByVal e As System.Windows.Forms.ScrollEventArgs) Handles scrBlue.Scroll
        Me.ApplyColor()
    End Sub

Test the application and return to Visual Basic

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 Sub ClickOption(ByVal lngColor As Long, ByVal Result As String)
        ' These variables will hold the red, green, and blue
        ' values of the passed color
        Dim iRed As Integer
        Dim iGreen As Integer
        Dim iBlue As Integer

        ' Colorize the Preview panel with the passed color
        pnlPreview.BackColor = lngColor

        ' Get the red value of the color of the Preview panel
        iRed = lngColor Mod 256
        ' Get the green value of the color of the Preview panel
        iGreen = (lngColor / 256) Mod 256
        ' Get the blue value of the color of the Preview panel
        iBlue = lngColor / 65536

        ' Now that we have the red, green, and blue values of the color,
        'Update the scroll bars with the new values
        scrRed.Value = iRed
        scrGreen.Value = iGreen
        scrBlue.Value = iBlue

        ' Update the red, green, and blue values
        ' of the Numeric Values group box
        txtNumRed.Text = CStr(iRed)
        txtNumGreen.Text = CStr(iGreen)
        txtNumBlue.Text = CStr(iBlue)

        'Update the string that was passed using
        ' the retrieved red, green, and blue values
        Result = "#" & Hex(iRed) & Hex(iGreen) & Hex(iBlue)
    End Sub

Double-click each radio button and implement it as follows:

Private Sub rdoBackground_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles rdoBackground.CheckedChanged
        ' If the user clicks Background radio button
        ' set color of the panel to that of the radio button
        Dim BGColor As System.Drawing.Color

        BGColor = pnlBody.BackColor
        ' pnlBody.BackColor = BGColor;

        ' Call the ClickOption procedure to calculate
        ' the hexadecimal value of the color
        ClickOption(pnlBody.BackColor, txtBackground.Text)

        HexBG = txtBackground.Text
    End Sub

    Private Sub rdoText_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles rdoText.CheckedChanged
        Dim BGColor As System.Drawing.Color

        BGColor = pnlBody.BackColor
        txtTextPreview.BackColor = BGColor

        ClickOption(txtTextPreview.ForeColor, txtText.Text)
        HexText = txtText.Text
    End Sub

    Private Sub rdoLink_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles rdoLink.CheckedChanged
        Dim BGColor As System.Drawing.Color

        BGColor = pnlBody.BackColor
        txtLinkPreview.BackColor = BGColor
        ClickOption(txtLinkPreview.ForeColor, txtLink.Text)
        HexLink = txtLink.Text
    End Sub

    Private Sub rdoActiveLink_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles rdoActiveLink.CheckedChanged
        Dim BGColor As System.Drawing.Color

        BGColor = pnlBody.BackColor
        txtALinkPreview.BackColor = BGColor
        ClickOption(txtALinkPreview.ForeColor, txtActiveLink.Text)
        HexALink = txtActiveLink.Text
    End Sub

    Private Sub rdoVisitedLink_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles rdoVisitedLink.CheckedChanged
        Dim BGColor As System.Drawing.Color

        BGColor = pnlBody.BackColor
        txtVLinkPreview.BackColor = BGColor
        ClickOption(txtVLinkPreview.ForeColor, txtVisitedLink.Text)
        HexVLink = txtVisitedLink.Text
    End Sub

Save and test the application then return to Visual Basic

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

Private Sub btnCopy_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnCopy.Click
        Me.txtResult.SelectAll()
        Me.txtResult.Copy()
    End Sub

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

Private Sub btnClose_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnClose.Click
        Close()
    End Sub

Test the application


Home	Copyright � 2004 FunctionX, Inc.