Practical Learning Logo

Body Tag Formatter
Visual Basic Examples - Body Tag FormatterBody 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 Microsoft Visual Basic and create a Standard EXE application
  2. Save the application in a new folder named BodyTag
  3. Save the form as frmMain and save the project as BodyTag
  4. Design the form as follows:
     
    Body Tag Formatter - Form Design
     
    Control Name Text Other Properties
    Frame grpBodyAttributes Body Attributes  
    OptionButton rdoBackground Background Checked: True
    OptionButton rdoText Text  
    OptionButton rdoLink Link  
    OptionButton rdoActiveLink Active Link  
    OptionButton rdoVisitedLink Visited Link  
    TextBox txtBackground #000000  
    TextBox txtText #0000FF  
    TextBox txtLink #FF0000  
    TextBox txtActiveLink #008000  
    TextBox txtVisitedLink #800000  
    PictureBox pnlPreview   BackColor: White
    Label   _____Color Preview______  
    VScrollBar scrRed   Max: 255
    Value: 255
    Label   R  
    VScrollBar scrGreen   Maximum: 255
    Value: 255
    Label   G  
    VScrollBar scrBlue   Maximum: 255
    Value: 255
    Label   B  
    PictureBox pnlBody   BackColor: White
    TextBox txtTextPreview Body tag formatter and colorizer ForeColor: Blue
    Alignment: 2 - Center
    TextBox txtLinkPreview Sample text as link ForeColor: Red
    Alignment: 2 - Center
    TextBox txtALinkPreview Current active link ForeColor: Green
    Alignment: 2 - Center
    TextBox txtVLinkPreview This link has been visited ForeColor: Maroon
    Alignment: 2 - Center
    Label   Color Values  
    Frame   Hexadecimal  
    Label   Red:  
    TextBox txtHexRed 00 Alignment: 1 - Right Justify
    Label   Green:  
    TextBox txtHexGreen 00 Alignment: 1 - Right Justify
    Label   Blue:  
    TextBox txtHexBlue 00 Alignment: 1 - Right Justify
    Frame   Numeric  
    Label   Red:  
    TextBox txtNumRed 00 Alignment: 1 - Right Justify
    Label   Green:  
    TextBox txtNumGreen 00 Alignment: 1 - Right Justify
    Label   Blue:  
    TextBox txtNumBlue 00 Alignment: 1 - Right Justify
    Button btnClose Close  
    TextBox txtResult <body bgcolor="#FFFFFF" text="#0000FF" link="#FF0000" alink="#008000" vlink="#800000">  
  5. In the top section of the form's module, declare the following private variables:
      
    Option Explicit

Private HexBG, HexText, HexLink, HexALink, HexVLink As String
  6. In the module, create the following sub procedure:
      
    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 = RGB(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.Value = 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.Value = True Then
        Txt = "#" & FmtRed & FmtGreen & FmtBlue
                        
        txtText.Text = Txt
        txtTextPreview.ForeColor = RGB(scrRed.Value, scrGreen.Value, scrBlue.Value)
        HexText = txtText.Text
    ElseIf rdoLink.Value = True Then
        TL = "#"
        TL = TL & FmtRed
        TL = TL & FmtGreen
        TL = TL & FmtBlue
                        
        txtLink.Text = TL
        txtLinkPreview.ForeColor = RGB(scrRed.Value, scrGreen.Value, scrBlue.Value)
        HexLink = txtLink.Text
    ElseIf rdoActiveLink.Value = True Then
        AL = "#"
        AL = AL & FmtRed
        AL = AL & FmtGreen
        AL = AL & FmtBlue
        
        txtActiveLink.Text = AL
        txtALinkPreview.ForeColor = RGB(scrRed.Value, scrGreen.Value, scrBlue.Value)
        
        HexALink = txtActiveLink.Text
    ElseIf rdoVisitedLink.Value = True Then
        VL = "#"
        VL = VL & FmtRed
        VL = VL & FmtGreen
        VL = VL & FmtBlue
        
        txtVisitedLink.Text = VL
        txtVLinkPreview.ForeColor = RGB(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
  7. Double-click each scroll bar to create its Change event
  8. Also initiate each scroll bar's Scroll event
  9. Implement the events as follows:
      
    Private Sub scrBlue_Change()
    Me.ApplyColor
End Sub

Private Sub scrBlue_Scroll()
    Me.ApplyColor
End Sub

Private Sub scrGreen_Change()
    Me.ApplyColor
End Sub

Private Sub scrGreen_Scroll()
    Me.ApplyColor
End Sub

Private Sub scrRed_Change()
    Me.ApplyColor
End Sub

Private Sub scrRed_Scroll()
    Me.ApplyColor
End Sub
  10. Test the application and return to Visual Basic
  11. 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 module, create the following sub procedure:
      
    Private Sub ClickOption(lngColor As Long, 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
  12. Double-click each radio button and implement their events as follows:
      
    Private Sub rdoBackground_Click()
    ' If the user clicks Background radio button
    ' set color of the panel to that of the radio button
    Dim BGColor As Long
    
    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 rdoLink_Click()
    Dim BGColor As Long
    
    BGColor = pnlBody.BackColor
    txtLinkPreview.BackColor = BGColor
    ClickOption txtLinkPreview.ForeColor, txtLink.Text
    HexLink = txtLink.Text
End Sub

Private Sub rdoText_Click()
    Dim BGColor As Long
    
    BGColor = pnlBody.BackColor
    txtTextPreview.BackColor = BGColor
                    
    ClickOption txtTextPreview.ForeColor, txtText.Text
    HexText = txtText.Text
End Sub

Private Sub rdoVisitedLink_Click()
    Dim BGColor As Long
    
    BGColor = pnlBody.BackColor
    txtVLinkPreview.BackColor = BGColor
    ClickOption txtVLinkPreview.ForeColor, txtVisitedLink.Text
    HexVLink = txtVisitedLink.Text
End Sub
  13. Double-click the Close button and implement it as follows:
      
    Private Sub Command1_Click()
    End
End Sub
  14. Save and test the application
 
Home Copyright © 2004-2014 FunctionX, Inc.