Home

Example Application: HTML Body Tag

 

Body Tag Formatter

Description

If you have ever created web pages using HTML, you are probably familiar with that language's various tags and you may know that a tag can contain attributes. An example of a tag would be <body> and inside of the tag, you can create the attributes you want.

This application shows an example of visually creating the attributes of the HTML's body tag, mainly the colors.

       

Practical LearningPractical Learning: Introducing Scroll Bar Controls

  1. Start a new Windows Application named HTMLBodyTag1
  2. In the Solution Explorer, right-click Form1.vb and click Rename
  3. Type BodyTag.vb and press Enter
  4. 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">
  5. On the form, click one of the scroll bars
  6. Press and hold Ctrl
  7. Click the other two scroll bars and release Ctrl
  8. In the Properties window, click Maximum, type 255, and press Enter
  9. Click an unoccupied area of the form to make sure no control is selected
  10. On the form, click one of the scroll bars
  11. Press and hold Ctrl
  12. Click the other two scroll bars and release Ctrl
  13. In the Properties window, click LargeChange, type 1, and press Enter
     
    Body Tag Formatter - Vertical Scroll Bars
  14. Right-click the form and click View Code
  15. Change the file as follows:
     
    Public Class BodyTag
        Private HexBG As String
        Private HexText As String
        Private HexLink As String
        Private HexALink As String
        Private HexVLink As String
    
        Private Sub 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
            Dim strRed As String = CStr(255 - scrRed.Value)
            Dim strGreen As String = CStr(255 - scrGreen.Value)
            Dim strBlue As String = CStr(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)
    
            Dim FmtRed As String = (255 - scrRed.Value).ToString("X")
            If FmtRed.Length = 1 Then FmtRed = "0" & FmtRed
    
            Dim FmtGreen As String = (255 - scrGreen.Value).ToString("X")
            If FmtGreen.Length = 1 Then FmtGreen = "0" & FmtGreen
    
            Dim FmtBlue As String = (255 - scrBlue.Value).ToString("X")
    
            If FmtBlue.Length = 1 Then FmtBlue = "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 Then
                Dim BG As String = "#"
                BG = BG & FmtRed
                BG = BG & FmtGreen
                BG = 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
            ElseIf rdoText.Checked = True Then
                Dim Txt As String = "#"
                Txt = Txt & FmtRed
                Txt = Txt & FmtGreen
                Txt = Txt & FmtBlue
    
                txtText.Text = Txt
                txtTextPreview.ForeColor = Color.FromArgb(255 - scrRed.Value, 
                                                          255 - scrGreen.Value, 
                                                          255 - scrBlue.Value)
                HexText = txtText.Text
            ElseIf rdoLink.Checked = True Then
                Dim TL As String = "#"
                TL = TL & FmtRed
                TL = TL & FmtGreen
                TL = TL & FmtBlue
    
                txtLink.Text = TL
                txtLinkPreview.ForeColor = Color.FromArgb(255 - scrRed.Value, 
                                                          255 - scrGreen.Value, 
                                                          255 - scrBlue.Value)
    
                HexLink = txtLink.Text
            ElseIf rdoActiveLink.Checked = True Then
                Dim AL As String = "#"
                AL = AL & FmtRed
                AL = AL & FmtGreen
                AL = AL & FmtBlue
    
                txtActiveLink.Text = AL
                txtALinkPreview.ForeColor = Color.FromArgb(255 - scrRed.Value, 
                                                           255 - scrGreen.Value, 
                                                           255 - scrBlue.Value)
    
                HexALink = txtActiveLink.Text
            ElseIf rdoVisitedLink.Checked = True Then
                Dim VL As String = "#"
                VL = VL & FmtRed
                VL = VL & FmtGreen
                VL = VL & FmtBlue
    
                txtVisitedLink.Text = VL
                txtVLinkPreview.ForeColor = Color.FromArgb(255 - scrRed.Value, 
                                                           255 - scrGreen.Value, 
                                                           255 - scrBlue.Value)
    
                HexVLink = txtVisitedLink.Text
            End If
    
            ' Update the contents of the bottom text box
            Dim BD As String = "<body bgcolor="""
            BD = BD & HexBG
            BD = BD & """ text="""
            BD = BD & HexText
            BD = BD & """ link="""
            BD = BD & HexLink
            BD = BD & """ alink="""
            BD = BD & HexALink
            BD = BD & """ vlink="""
            BD = BD & HexVLink
            BD = BD & "">"
    
            txtResult.Text = BD
        End Sub
    End Class
  16. In the Class Name combo box, select scrRed
  17. In the Method Name combo box, select Scroll and implement the event as follows:
     
    Private Sub scrRedScroll(ByVal sender As Object, 
                              ByVal e As System.Windows.Forms.ScrollEventArgs) 
                                  Handles scrRed.Scroll
            ApplyColor()
    End Sub
  18. In the Class Name combo box, select scrGreen
  19. In the Method Name combo box, select Scroll and implement the event as follows:
     
    Private Sub scrGreenScroll(ByVal sender As Object, 
                                ByVal e As System.Windows.Forms.ScrollEventArgs) 
                                    Handles scrGreen.Scroll
            ApplyColor()
    End Sub
  20. In the Class Name combo box, select scrBlue
  21. In the Method Name combo box, select Scroll and implement the event as follows:
     
    Private Sub scrBlueScroll(ByVal sender As Object, 
                               ByVal e As System.Windows.Forms.ScrollEventArgs) 
                               Handles scrBlue.Scroll
            ApplyColor()
    End Sub
  22. Execute the application to test the form
  23. Close the form and return to your programming environment
  24. 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 End Sub line of the scrBlueScroll event, create the following procedure:
     
    Private Sub ClickOption(ByVal Clr As Color, 
                                ByVal Result As String)
            ' These variables will hold the red, green, and blue
            ' values of the passed color
            Dim red As Integer
            Dim green As Integer
            Dim blue As Integer
    
            ' 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 = Result & "#"
            Result = Result & red.ToString("X")
            Result = Result & green.ToString("X")
            Result = Result & blue.ToString("X")
    End Sub
  25. In the Class Name combo box, select rdoBackground 
  26. In the Method Name combo box, select CheckedChanged and implement the event as follows:
     
    Private Sub rdoBackgroundCheckedChanged(ByVal sender As 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 Color = 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
    End Sub
  27. In the Class Name combo box, select rdoText
  28. In the Method Name combo box, select CheckedChanged and implement the event as follows:
     
    Private Sub rdoTextCheckedChanged(ByVal sender As Object, 
                                           ByVal e As System.EventArgs) 
                                           Handles rdoText.CheckedChanged
            Dim BGColor As Color = pnlBody.BackColor
            txtTextPreview.BackColor = BGColor
    
            ClickOption(txtTextPreview.ForeColor, txtText.Text)
            HexText = txtText.Text
    End Sub
  29. In the Class Name combo box, select rdoLink
  30. In the Method Name combo box, select CheckedChanged and implement the event as follows:
     
    Private Sub rdoLinkCheckedChanged(ByVal sender As Object, 
                                           ByVal e As System.EventArgs) 
                                           Handles rdoLink.CheckedChanged
            Dim BGColor As Color = pnlBody.BackColor
            txtLinkPreview.BackColor = BGColor
    
            ClickOption(txtLinkPreview.ForeColor, txtLink.Text)
            HexLink = txtLink.Text
    End Sub
  31. In the Class Name combo box, select rdoActiveLink
  32. In the Method Name combo box, select CheckedChanged and implement the event as follows:
     
    Private Sub rdoActiveLinkCheckedChanged(ByVal sender As Object, 
                                             ByVal e As System.EventArgs) 
                                             Handles rdoActiveLink.CheckedChanged
            Dim BGColor As Color = pnlBody.BackColor
            txtALinkPreview.BackColor = BGColor
    
            ClickOption(txtALinkPreview.ForeColor, txtActiveLink.Text)
            HexALink = txtActiveLink.Text
    End Sub
  33. In the Class Name combo box, select rdoVisitedLink
  34. In the Method Name combo box, select CheckedChanged and implement the event as follows:
     
    Private Sub rdoVisitedLinkCheckedChanged(ByVal sender As Object, 
                                              ByVal e As System.EventArgs) 
                                            Handles rdoVisitedLink.CheckedChanged
            Dim BGColor As Color = pnlBody.BackColor
            txtVLinkPreview.BackColor = BGColor
    
            ClickOption(txtVLinkPreview.ForeColor, txtVisitedLink.Text)
            HexVLink = txtVisitedLink.Text
    End Sub
  35. In the Class Name combo box, select btnCopy
  36. In the Method Name combo box, select Click and implement the event as follows:
     
    Private Sub btnCopyClick(ByVal sender As Object, 
                                  ByVal e As System.EventArgs) 
                                  Handles btnCopy.Click
            txtResult.SelectAll()
            txtResult.Copy()
    End Sub
  37. In the Class Name combo box, select btnClose
  38. In the Method Name combo box, select Click and implement the event as follows:
     
    Private Sub btnCloseClick(ByVal sender As Object, 
                                   ByVal e As System.EventArgs) 
                                   Handles btnClose.Click
            End
    End Sub
  39. Execute the application
     
    Body Tag Formatter
  40. Close the form

Download

 

Home Copyright © 2008-2012 FunctionX