Text Editor (Part Three)

This tutorial concludes the Text Editor Tutorial, please follow all the Steps of Text Editor (Part One) and Text Editor (Part Two) before starting this Tutorial, or use the Source Code from Part Two and start from there. In this final part you will add Find and Replace!

www.cespage.com/vb/vb08tut4.html

Step 1

Start Microsoft Visual Basic 2008 Express Edition, then select File then Open Project... and select the Solution File for Part Two (e.g. TextEditorPartTwo.sln) or Part One if Part Two was added to this, the following should then appear:

Text Editor (Part Two)

Step 2

Then select Project then Add Windows Form... and choose the "Windows Form" Template if it is not already selected and give it the Name "frmFindReplace.vb" without the quotes, see below:

Add New Item frmFindReplace Dialog

Step 2

A Blank Form named frmFindReplace should then appear, this will form the basis of the Find/Replace Dialog, see below:

Blank frmFindReplace Form

Step 3

With this form selected goto the Properties box and change the following: FormBorderStyle to FixedDialog, MaximizeBox to False, MinimizeBox to False, ShowInTaskBar to False, Size to 350, 150, StartPosition to CenterParent and set TopMost to True, see below:

frmFindReplace Properties

Step 4

Then from the Common Controls tab on the Toolbox select the Button component:

Button Component

Step 5

Double-click on the Button option on the Toolbox or drag a button onto the Form, repeat this until there are four buttons on the form, with the first one on the top, with the next Button below that, see below:

frmFindReplace Buttons

Step 6

Click on or select Button1 and the goto the Properties box and change the following: Name to btnFindNext, Location to 260, 7 and Text to "Find Next" without the quotes, see below:

frmFindReplace Button1 Properties

Step 7

Click on or select Button2 and set the Properties to the following: Name to btnReplace, Location to 260, 34 and Text to "Replace" without the quotes.
Select Button3 and set the Properties to the following: Name to btnReplaceAll, Location to 260, 62 and Text to "Replace All" without the quotes.
Select Button4 and set the Properties to the following: Name to btnCancel, Location to 260, 89 and Text to "Cancel" without the quotes.
The form should appear as below:

frmFindReplace Buttons Completed

Step 8

Then from the Common Controls tab on the Toolbox select the Label component:

Label Component

Step 9

Double-click on the Label option on the Toolbox or drag a label onto the Form, do this twice so there are two labels positioned as in the image below:

frmFindReplace Labels

Step 10

Click on Label1 and the goto the Properties and set the Text property to "Find what:" and the Name property to "lblFind" without the Quotes, select or click on Label2 and set the Text property for this to "Replace with:" and the Name property to "lblReplace" again without the quotes, see below for the completed labels:

frmFindReplace Completed Labels

Step 11

Then from the Common Controls tab on the Toolbox select the Textbox component:

Textbox Component

Step 12

Double-click on the Textbox option on the Toolbox or drag a Textbox onto the form, do this twice so there are two text boxes positioned and sized as in the image below, the position and size of the labels and textboxes does not matter just the order, top to bottom:

frmFindReplace Textboxes

Step 13

Click on the first textbox (TextBox1) and goto the Properties box and change the Name to "txtFind" without the quotes, this will be the one next to "Find what:", and the select the second textbox (TextBox2) and change the Name to "txtReplace", again without the quotes.
Then from the Common Controls tab on the Toolbox select the Checkbox component:

Checkbox Component

Step 14

Double click on the Checkbox on the Toolbox, or drag the Checkbox onto the form, then select the CheckBox (CheckBox1) and goto the Properties Box, and set the following Properties: Name to "chkMatchCase" without the quotes, Text to "Match case", the Find Replace interface is now complete and should appear as below:

frmFindReplace Completed User Interface

Step 15

Right click on the Form (frmFindReplace) either on the Form itself or the entry for it in the Solution Explorer and choose the View Code option.
Enter the following above the Public Class frmFindReplace:

Imports System.Text.RegularExpressions

Enter the following below the Public Class frmFindReplace:

    Private txt As New TextBox
    Private FindReplaceRegex As Regex
    Private FindReplaceMatch As Match
    Private IsFirstFind As Boolean = True

See Below:

frmFindReplace Imports and Declarations

Step 16

While still in the View Code of frmFindReplace, type the following Function below the Declarations (this will be above the "End Class" line):

    Private Function SearchRegEx() As Regex
        If chkMatchCase.Checked Then ' Search with Match Case
            Return New Regex(Regex.Escape(txtFind.Text))
        Else ' Search with Ignore Case
            Return New Regex(Regex.Escape(txtFind.Text), RegexOptions.IgnoreCase)
        End If
    End Function

See Below:

SearchRegEx Function

Step 17

Again while still in the Code View enter this sub below the SearchRegEx() Function (just after it's "End Function"):

    Private Sub FindText(ByRef TextBox As TextBox)
        If IsFirstFind Then
            FindReplaceRegex = SearchRegEx()
            FindReplaceMatch = FindReplaceRegex.Match(TextBox.Text)
            IsFirstFind = False
        Else
            FindReplaceMatch = FindReplaceRegex.Match(TextBox.Text, _
                                                      FindReplaceMatch.Index + 1)
        End If
        If FindReplaceMatch.Success Then
            TextBox.Focus()
            TextBox.SelectionStart = FindReplaceMatch.Index
            TextBox.SelectionLength = FindReplaceMatch.Length
        Else
            IsFirstFind = True
        End If
    End Sub

See Below:

FindText Function

Step 18

Again while still in the Code View enter this sub below the FindText() Sub (just after it's "End Sub"):

    Private Sub ReplaceText(ByRef TextBox As TextBox)
        Dim ReplaceRegex As Regex = SearchRegEx()
        Dim ReplaceMatch As Match = ReplaceRegex.Match(TextBox.SelectedText)
        If ReplaceMatch.Success Then
            If ReplaceMatch.Value = TextBox.SelectedText Then
                TextBox.SelectedText = txtReplace.Text
            End If
        End If
        FindText(TextBox)
    End Sub

See Below:

ReplaceText Function

Step 19

Again while still in the Code View enter this sub below the ReplaceText() Sub (just after it's "End Sub"):

    Private Sub ReplaceAllText(ByRef TextBox As TextBox)
        Dim ReplaceRegex As Regex = SearchRegEx()
        Dim strReplaced As String
        Dim selectedPos As Integer = TextBox.SelectionStart
        strReplaced = ReplaceRegex.Replace(TextBox.Text, txtReplace.Text)
        If TextBox.Text <> strReplaced Then ' Replace Text if Changed
            TextBox.Text = strReplaced
            TextBox.SelectionStart = selectedPos ' Restore SelectionStart
        End If
        TextBox.Focus()
    End Sub

See Below:

Replace All Function

Step 20

While still in the Code View enter these Public Subs below the ReplaceAllText() Sub (just after it's "End Sub"):

    Public Sub Find(ByRef TextBox As TextBox)
        Me.Text = "Find"
        btnReplace.Visible = False
        btnReplaceAll.Visible = False
        lblReplace.Visible = False
        txtReplace.Visible = False
        txt = TextBox
        txtFind.Text = txt.SelectedText
        txtFind.Focus()
    End Sub

     Public Sub Replace(ByRef TextBox As TextBox)
        Me.Text = "Replace"
        btnReplace.Visible = True
        btnReplaceAll.Visible = True
        lblReplace.Visible = True
        txtReplace.Visible = True
        txt = TextBox
        txtFind.Text = txt.SelectedText
        txtFind.Focus()
    End Sub

    Public Sub FindNext(ByRef TextBox As TextBox)
        FindText(txt)
    End Sub

See Below:

frmFindReplace Public Functions

Step 21

Click on [Design] tab or double click on the Form's name in Solution Explorer then Double Click on the "Find Next" button (btnFindNext) and type the following in the btnFindNext_Click() Sub:

FindNext(txt)

Click on [Design] tab or double click on the Form's name in Solution Explorer again, then Double Click on the "Replace" button (btnReplace) and type the following in the btnReplace_Click() Sub:

ReplaceText(txt)

Click on [Design] tab or double click on the Form's name in Solution Explorer again, then Double Click on the "Replace All" button (btnReplaceAll) and type the following in the btnReplaceAll_Click() Sub:

ReplaceAllText(txt)

Click on [Design] tab or double click on the Form's name in Solution Explorer again, then Double Click on the "Cancel" button (btnCancel) and type the following in the btnCancel_Click() Sub:

Me.Hide()

See Below:

frmFindReplace Button Click Event Handlers

Step 22

Return to the [Design] tab or Double click on the Form's name in Solution Explorer then Double Click on the Textbox next to "Find what:" (txtFind) and type the following in the txtFind_TextChanged() Sub:

IsFirstFind = True

Click on [Design] tab or double click on the Form's name in Solution Explorer again, then Double Click on the "Match case" Checkbox (chkMatchCase) and type the following in the chkMatchCase_CheckedChanged() Sub:

IsFirstFind = True

See Below:

frmFindReplace Changed Event Handlers

Step 23

Double-click on the frmMain entry in the Solution Explorer or click on the frmMain [Design] Tab to show the main form.
Click on or select the MenuStrip, this is the component with "File" on the top left of the Form, then click on the "Edit" menu, see below:

Text Editor Edit Menu

Step 24

At the bottom of the Edit menu will be a "Type Here" box, type "Find...", then in the box below that "Find Next", then finally "Replace...", see below:

Find, Find Next and Replace Edit Menu Items

Step 25

With the Edit Menu displayed or Click on "Edit" on the MenuStrip to show the MenuStrip, Double Click on the Menu Item Labeled "Find..." (FindToolStripMenuItem) and type the following in the FindToolStripMenuItem_Click() Sub:

Dim FindReplace As New frmFindReplace
FindReplace.Find(txtEditor)
FindReplace.Show(Me)

Click on [Design] tab or double click on the frmMain entry in Solution Explorer again, then Double Click on the Menu Item Labeled "Find Next" (FindNextToolStripMenuItem) and type the following in the FindNextToolStripMenuItem_Click() Sub:

Dim FindReplace As New frmFindReplace
FindReplace.FindNext(txtEditor)
txtEditor.Focus()

Click on [Design] tab or double click on the frmMain entry in Solution Explorer again, then Double Click on the Menu Item Labeled "Replace..." (ReplaceToolStripMenuItem) and type the following in the ReplaceToolStripMenuItem_Click() Sub:

Dim FindReplace As New frmFindReplace
FindReplace.Replace(txtEditor)
FindReplace.Show(Me)

See Below:

Edit Menu Find, Find Next and Replace Events

Step 26

Steps 27-30 are optional and just add Keyboard Shortcuts to the MenuItems and clean-up the Edit menu you don't have to do these if you don't want to!
Return the the [Design] Tab for frmMain, or Double-click on the frmMain Entry on the Solution Explorer then click on "Edit" on the Form, then mouse over the "Type Here" box and click on the Drop Down arrow inside this box, and select the Separator option, see below:

Edit Menu with Type Here Options Displayed on the Bottom

Step 27

Repeat this on the "Type Here" box below the Separator, then move one of the Separators so it is above the "Find..." option in the Edit menu, do this by clicking on the separator (the horizontal line which has appeared) then whilst keeping clicked move it up.
Also move the "Select All" so it appears below the Separator on the Bottom of the menu just click on the menu option and drag it towards the "Type Here" box at the bottom, do the same with the "Time/Date" menu item, so they are still in the same order, see below:

Edit Menu with Dividers above and below the Find Menu Items

Step 28

With the "Edit" Menu still being displayed click on "Find..." then in the Properties box look for the "Shortcut Key" option and click on the Drop Down arrow where "None" appears. Check the "Ctrl" Checkbox in "Modifiers" and then in the "Key" dropdown list select "F", see below:

Edit Menu Find Menu Item Shortcut Key

Step 29

Set other added "Edit" MenuItem "Shortcut Key" Properties , "Find Next" should be set to the Key "F3" only and "Replace" should be "Ctrl" and "H", the Edit Menu should appear as below:

Edit Menu with all Shortcut Keys

Step 30

Save the Project as you have now finished the application, then click on Start:

Start

When you do the following will appear:

Text Editor Running

Step 31

Click on the File Menu and select Open...,this will show the Open File Dialog, then select a Text File on your Computer this should appear in the Textbox, see below:

Text Editor with Opened Document

Step 32

Click File then Exit or click on the Close button Close on the top right of the Text Editor to end the application.

This Text Editor contains all the features of a Text Editor, only Printing is missing - however feel free to add this yourself, use the Menu Techniques mentioned in this and the prior tutorial to integrate it into this example. By adding Find and Replace, a very useful feature this makes the Text Editor a little more useful even for everyday use!