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 a new Visual Basic 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 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">  
  3. In the class, declare the following private variables:
     
    Public Class Form1
        Inherits System.Windows.Forms.Form
        Private HexBG, HexText, HexLink, HexALink, HexVLink As String
  4. 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
  5. 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
  6. Test the application and return to Visual Basic
  7. 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
  8. 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
  9. Save and test the application then return to Visual Basic
  10. 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
  11. 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
  12. Test the application
 

Home Copyright 2004 FunctionX, Inc.