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 FunctionX, Inc.