Jednoduchý textový editor ve VB

Tvorba jednoduchého textového editoru ve Visual Basicu ve stylu Poznámkového bloku.

Tak tu máme další článek na přání. Budeme programovat jednoduchý textový editor podobný Poznámkovému bloku, který je ve Windows. Nebudeme vytvářet nic převratného.

Nejprve si stanovíme body, tedy to, co chceme, aby náš editor uměl, a také body postupu. Protože když máte stanovenou osnovu, lépe se pak pracuje (tedy aspoň mně ano).

• Layout – rozvržení je velmi důležité pro práci s rogramem
• Standardní funkce – Nový, Uložit, Kopírovat… (prostě klasika)
• Nadstandardní funkce – barvy, řádkování (možná)
• Ladění a kompilace – hurá na „exáč“

Tak, něco jako osnovu máme a můžeme se dát do práce. Začneme tedy Layoutem–– GUI.

Layout

Odborněji se tomu říká grafické uživatelské rozhraní (anglicky Graphical User Interface, známe pod zkratkou GUI). Na tomto prvku velmi záleží, jestliže vaše GUI nebude uživatelský příjemné, intuitivní a přehledné, nebudou chtít s tímto programem uživatelé moc pracovat, i když bude aplikace po stránce programové velmi dobrá. Inspirovat se můžete například od úspěšných komerčních programů (například MS Word).

Proto je důležité si GUI navrhnout (nejlépe pomocí tužky a papíru). I když je tento program jednoduchý, namaloval jsem si jeho rozvržení pro představu, jak by to mělo vypadat. (Je to rychlý náčrtek od ruky, tak podle toho to také vypadá.)

Po menší teoretické části se pustíme do navržení GUI v samotném Visual Basicu. Pro náš případ bude stačit jen malé množství ovládacích prvků.

• Menu – navrhneme přes Menu Editor
• 1× ToolBar
• 1× StatusBar
• 1× RichTextBox

Rozmístěte prvky podle našeho návrhu. Ponechejte jim defaultní názvy (pro jednoduší orientaci v článku)!

Tvorba menu

Menu vytvoříme jednoduše pomocí Menu Editoru [CTRL + E]. Jednotlivé položky menu pojmenujeme (nejlépe standardními názvy), není dobré být až tak moc originální. Je dobré přiřazovat osvědčené klávesové zkratky. Například pro nápovědu klávesu [F1] namísto [CtrlL + C] (protože by tato zkratka mohla mást uživatele). Nezapomínejte i na uživatele, kteří nemají myš nebo ji prostě nemohou použít, a využívejte podtržítko. [Alt] se používá pro zkrácenou volbu [Alt + podtržené písmeno]. Toho docílíte tak, že před nějaký znak v menu v položce Caption dáte znak & (ampersand), například &Soubor. Více Menu Editor rozebírat nebudu, předpokládám, že to není nutné.

ToolBar a StatusBar

ToolBar a StatusBar přidáte takto: jděte do menu Project → Components [Ctrl + T] a najděte v záložce Controls položku Microsoft Windows Common Controls 6.0, zaškrtněte a dejte OK. Najděte v Ovládacích prvcích ToolBar a vložte ho na formulář, takto přidejte i StatusBar. Tímto prozatím skončíme práci s těmito ovládacími prvky a vrhneme se na vložení Rich TextBoxu.

Rich TextBox

Místo klasického TextBoxu použijeme jeho vylepšenou verzi nazvanou Rich TextBox. V menu Project → Components v záložce Controls najděte Microsoft Rich TextBox Control 6.0 a zaškrtněte a dejte OK. V Ovládacích prvcích se objeví zmíněný prvek, ten vložte na formulář.

Tímto jsme rozmístili naše důležité prvky po formuláři. Menu a ToolBar by měly být nahoře, StatusBar dole a umístění Rich TextBoxu je libovolné, protože jeho umístění si později upřesníme ve zdrojovém kódu.

Nezapomeňte ve vlastnosti Text smazat obsah této vlastnosti. Vlastnost Multiline nastavte na True, vlastnost Scrollbars na 2 – rtfVertical.

Standardní funkce

Tak, máme za sebou první část nazvanou Layout. Nyní přikročíme k programování jednotlivých funkcí našeho editoru. Nejprve ale dokončíme rozvržení Rich TextBoxu pomocí kódu.

Co s Rich TextBoxem?

Ještě než se vrhneme na náš Rich TextBox, přejmenujeme si náš formulář na frmMain. Jak je vidět, naše textové pole se dynamicky nemění s velikostí formuláře. To ihned napravíme. Do projektu vložte modul, menu Project → Add Module. Vytvoří se nám Modul1. Do tohoto modulu napíšeme novou proceduru ResizeBlok.

Sub ResizeBlok()
On Error Resume Next
If frmMain.Toolbar1.Visible Then
  With frmMain.RichTextBox1
    .Top = frmMain.Toolbar1.Height
    .Left = 0
    .Width = frmMain.ScaleWidth
    .Height = frmMain.ScaleHeight - 770
  End With
 Else
  With frmMain.RichTextBox1
    .Top = 0
    .Left = 0
    .Width = frmMain.ScaleWidth
    .Height = frmMain.ScaleHeight - 770
  End With
End If
End Sub

Tato naše procedura zajistí při změně velikosti okna i změnu velikosti našeho textového pole. Ošetřeno je i zmizení ToolBaru, takže se nám textové pole přizpůsobí. Aby nám vše fungovalo, do procedury Form_Resize() vložíme název námi napsané procedury – ResizeBlok.

Private Sub Form_Resize()
  ResizeBlok
End Sub

Teď už se vrhneme na programování funkcí našeho editoru. Do deklarační části Modul1 nadeklarujeme veřejnou proměnou Zmena s datovým typem Boolean. Tato proměnná nám bude užitečná před ukončením, ukládáním nebo otevíráním nového dokumentu.

Public Zmena As Boolean

Nový dokument?

Všechny naše nové procedury budeme psát do Modul1. Vytvořte si proceduru NovyDokument. Jestli máme otevřený nějaký dokument a provedli jsme v něm změnu, program se dotáže na uložení. Pro nový dokument potřebujeme prázdné textové pole a zajistíme změnu názvu dokumentu.

Sub NovyDokument()
  If Zmena = True Then
    Ulozit   'naše další procedura
  End If
    frmMain.RichTextBox1.Text = ""
    frmMain.Caption = "Poznámkový blok - Bezejména"
End Sub

V našem menu vyberte Soubor → Nový a do procedury mnuSouborNovy_Click() napište NovyDokument

Private Sub mnuSouborNovy_Click()
  NovyDokument
End Sub

To, jak jste si pojmenovali vaše položky menu, je na vás. Já používám styl mnu + název_hlavní + název_položky (př. Soubor → Nový = mnuSouborNovy), tímto si zajistím, že se budu i po delší době orientovat ve svém projektu.

Ukládání

Nejprve do deklarační části Modul1 nadeklarujeme veřejnou proměnou Soubor a datový typ String.

Public Soubor As String

Vytvoříme si proceduru Ulozit. Název naší proceduru vložte do mnuSouborUlozit().

Sub Ulozit()
  If Soubor = "" Then
    UlozitJako
  Else
    Zmena = False
    frmMain.RichTextBox1.SaveFile Soubor, rtfRTF
   End If
End Sub

Pokud v proměnné Soubor není cesta k dokumentu, dokument se nám neuloží, ale dotáže se na Uložit jako… Jestliže cesta existuje, soubor se uloží a proměnnou Zmena nastavíme na False.

Uložit jako…

Pro ukládání využijeme komponentu Common Dialog. Tu do Ovládacích prvků přidáme následovně. Jděte do menu Project → Components a v záložce Controls si najděte Microsoft Common Dialog Control 6.0. Vložte ji libovolně na formulář a pojmenujte ji CD namísto CommonDialog1.

Vytvoříme si proceduru UlozitJako a tento název vepíšeme do mnuSouborUlozitJako.

Sub UlozitJako()
  With frmMain.CD
    .Flags = cdlOFNHideReadOnly
    .FileName = ""
    .Filter = "Formátované textové soubory (*.rtf)|*.rtf"
    .ShowSave
  End With
  
  frmMain.RichTextBox1.SaveFile frmMain.CD.FileName, rtfRTF
  Zmena = False
End Sub

Program nám již ukládá textové soubory, teď si uděláme i otevírání dokumentů.

Otevřít

Pro otevírání dokumentů využijeme také Common Dialog. V Modul1 si vytvoříme proceduru OtevritDokument a název procedury vložíme do mnuSouborOtevrit.

Sub OtevritDokument()
  With frmMain.CD
    .Filter = "Formátované textové soubory (*.rtf)|*.rtf|Textový soubor (*.txt)|*.txt"
    .FileName = ""
    .ShowOpen
  End With
  
  frmMain.RichTextBox1.FileName = frmMain.CD.FileName
  frmMain.Caption = "Poznámkový blok " & " - " & frmMain.CD.FileTitle
  Soubor = frmMain.CD.FileName
  Zmena = False
End Sub

Pomocí Filter vybereme textové soubory RTF a TXT, otevřeme dialog Open. Nastaví se cesta k souboru, upraví se titulek okna. Do proměné Soubor se načte cesta.

Tiskneme náš dokument

Tuto záležitost rovněž vyřešíme pomocí Common Dialog (pozn.: ještě, že ho máme, co?). Vytvoříme si proceduru Tisk.

Sub Tisk()
On Error GoTo Chyba
  With frmMain.CD
    .Flags = cdlPDReturnDC + cdlPDNoPageNums
      If frmMain.RichTextBox1.SelLength = 0 Then
       .Flags = .Flags + cdlPDAllPages
      Else
       .Flags = .Flags + cdlPDSelection
      End If
    .ShowPrinter
  End With
  
  frmMain.RichTextBox1.SelPrint frmMain.CD.hDC
Chyba:
  MsgBox "Chyba tisku, nelze tisknout. Zkuste to prosím znovu.", vbCritical, "Chyba"
End Sub

Pokud se vyskytne chyba, On error GoTo Chyba nám ji zachytí a program nám nespadne. Přeruší se tisknutí, resp. k němu nedojde. Pokud chcete rozlišovat chyby, nic vám v tom nebrání a náš prográmek si můžete klidě o tuto možnost vylepšit.

Ukončujeme

Napíšeme si proceduru Ukoncit.

Sub Ukoncit()
  Dim Text As String, NazevSouboru As String
    
  NazevSouboru = Right(frmMain.Caption, (Len(frmMain.Caption) - InStr(2, frmMain.Caption, "-")))
  Text = "V souboru " & """" & Trim(NazevSouboru) & """" & " byly provedeny změny. Chcete je uložit?"
     
  If Zmena = True Then
   If NazevSouboru = "Bezejména" Then
    Select Case MsgBox(Text, vbYesNo + vbInformation, "Dotaz na ukončení")
     Case vbYes
      UlozitJako
      Unload frmMain
     Case vbNo
      Unload frmMain
    End Select
   Else
    Select Case MsgBox(Text, vbYesNo + vbInformation, "Dotaz na uložení")
     Case vbYes
      Ulozit
      Unload frmMain
     Case vbNo
      Unload frmMain
    End Select
   End If
  Else
    Unload frmMain
  End If
End Sub

K tomuto snad není co dodávat. Snad jen, že je to možná trochu zbytečně složitá konstrukce, která však plní dobře svoji úlohu.

Tímto se nám podařilo dokončit všechny položky v menu Soubor. Proto se ihned vrhneme na menu Úpravy.

Menu Úpravy se vším všudy

Zpět – tuto funkci zajistíme odesláním kláves [Ctrl + Z]. Vytvoříme si proceduru Zpet.

Sub Zpet()
  If Zmena = True Then
    SendKeys "^{Z}"
  End If
End Sub

Vyjmout – zde si pomůžeme schránkou. Nejprve schránku vyprázdníme, poté ji naplníme vybraným textem a tento text smažeme z dokumentu. Nyní ho máme ve schránce. Vytvoříme si proceduru Vyjmout.

Sub Vyjmout()
  Clipboard.Clear
  Clipboard.SetText frmMain.RichTextBox1.SelText
  frmMain.RichTextBox1.SelText = ""
End Sub

Kopírovat – též práce pro naši schránku. Do Modul1 si vložíme proceduru Kopirovat.

Sub Kopírovat()
  Clipboard.SetText frmMain.RichTextBox1.SelText
End Sub

Vložit – ta naše schránka si užije. Vytvořte si proceduru Vlozit.

Sub Vlozit()
  On Error Resume Next
  Dim strText As String
  strText = Clipboard.GetText(vbCFText)
  frmMain.RichTextBox1.SelText = strText
End Sub

Odstranit – zde využijeme samotného Rich TextBoxu. Vytvořte proceduro Odstranit.

Sub Odstranit()
  frmMain.RichTextBox1.SelText = ""
End Sub

Vybrat vše – vytvořte proceduru VybratVse a jdeme na to.

Sub VybratVse()
  With frmMain.RichTextBox1
    .SelStart = 0
    .SelLength = Len(.Text)
  End With
End Sub

Tímto bychom měli mít základní funkce hotovy. Funkci Datum a čas si necháme na později.

Nadstandardní funkce

Nyní se budeme věnovat funkcím, které nejsou nezbytně potřebné pro chod našeho textového editoru.

Menu Zobrazení

Jděte do procedury mnuZobrazeniListaNastroju_Click() a vložte následující zdrojový kód.

Private Sub mnuZobrazeniListaNastroju_Click()
    Toolbar1.Visible = Not Toolbar1.Visible
    mnuZobrazeniListaNastroju.Checked = Toolbar1.Visible
    ResizeBlok
End Sub

Tímto kouskem kódu zajistíme změnu velikosti Rich TextBoxu po zmizení (schování) našeho ToolBaru.

Datum a čas

Pokud chcete vkládat do vašeho dokumentu čas a datum a nechcete to stále vypisovat ručně, naprogramujeme si tuhle vychytávku, která vloží systémový čas a datum za vás jedním kliknutím. Do mnuUpravyCasDatum_Click() vložte tento řádek.

Private Sub mnuUpravyCasDatum_Click()
  frmMain.RichTextBox1.SelText = Now
End Sub

ToolBar

Vrhneme se na náš ToolBar. Zatím nic neumí, ale to se brzy změní. Nejprve si ho nastavíme tak, aby nám padl do oka. Klikněte na ToolBar a v Properties jděte do volby Custom. V záložce Buttons vložte 15 tlačítek. V záložce General nastavte Appearance na 0 – ccFlat a Style na 1 – tbrFlat.

Máme teď tlačítka, ale nic na nich není, prostě jen holá tlačítka. Pro to, abychom je oživili obrázky, použijeme ovládací prvek ImageList. Vložte ho libovolně na formulář a ponechejte název ImageList1. Jděte do okénka Properties a vyberte Custom. V záložce Images budeme přidávat naše obrázky pro tlačítka. Ty budeme přidávat tlačítkem Insert. Tímto způsobem si přidáme všechny obrázky (ikonky), které budeme potřebovat.

Všimněte si v záložce Images hodnoty Index. Tato hodnota (Index) bude představovat obrázek pro zápis do ToolBaru. Tímto jednoduchým způsobem budeme přiřazovat obrázky k našim tlačítkům v ToolBaru.

Obrázky v ToolBaru

Teď stačí přiřadit ToolBaru náš ImageList. Klikněte na ToolBar a v Properties klikněte na Custom. V záložce General vyhledejte Image List a z rozbalovací nabídky vyberte ImageList. Pro názornost je vpravo obrázek.

Tímto jsme sice přiřadili ToolBaru ImageList1 s obrázky, ale naše tlačítka ještě přiřazené obrázky nemají. Na to se vrhneme dál.

Přiřazení obrázků a funkcí

Do procedury Toolbar1_ButtonClick(ByVal Button As MSComctlLib.Button) napište následující kód, který si později vysvětlíme.

Private Sub Toolbar1_ButtonClick(ByVal Button As MSComctlLib.Button)
Select Case Button.Key
 Case "Novy"
   NovyDokument
 Case "Otevrit"
   OtevritDokument
 Case "Ulozit"
   Ulozit
 Case "Tisk"
   Tisk
 Case "Vyjmout"
   Vyjmout
 Case "Kopirovat"
   Kopírovat
 Case "Vlozit"
   Vlozit
 Case "Zpet"
   Zpet
 Case "Datum"
   mnuUpravyCasDatum_Click
 Case "Tucne"
   Tucne
 Case "Podtrzene"
   Podtrzene
 Case "Kurziva"
   Kurziva
 Case "Barva"
   Barva
End Select
End Sub

Tak nyní klikněte na ToolBar v Properties a v Custom na záložce Buttons věnujte pozornost hodnotě Key. Každému tlačítku dejte unikátní klíč (Key). Krom tlačítka číslo 5 a 10. Těm vlastnost Style nastavte na 3 – tbrSeparator namísto 0 – tbrDefault. Ostatním tento Style ponechejte. A teď ještě k tomu pojmenování. V předchozím zdrojovém kódu za Case jsou napsány tyto klíče pro každé tlačítko (kromě těch oddělovacích). Na této záložce (Buttons) se přiřadí tlačítkům i obrázky. Hodnotě Image přidejte číslo (index obrázku v ImageList1), které představuje určitý obrázek. Pokud jste to nepochopili, zkuste se podívat na přiložený obrázek.

Doplníme si pár funkcí, které jsou potřeba pro náš textový editor.

Tučné, podtržené, kurzíva

Vytvořte si procedury Tucne, Podtrzene a Kurziva, které budeme psát do Modul1.

Sub Tucne()
  frmMain.RichTextBox1.SelBold = Not frmMain.RichTextBox1.SelBold
End Sub

Sub Podtrzene()
  frmMain.RichTextBox1.SelUnderline = Not frmMain.RichTextBox1.SelUnderline
End Sub

Sub Kurziva()
  frmMain.RichTextBox1.SelItalic = Not frmMain.RichTextBox1.SelItalic
End Sub

Písmo a velikost písma

Klikněte na ToolBar a vložte na něj 2 ComboBoxy. Jeden ComboBox pojmenujte cmbPismo a druhý cmbVelikost. Do procedury Form_Load() vložte kód:

Private Sub Form_Load()
Dim i As Integer
  
  For i = 0 To Screen.FontCount
   cmdPismo.AddItem Screen.Fonts(i)
  Next i
  
  With cmbVelikost
    .AddItem "8"
    .AddItem "9"
    .AddItem "10"
    .AddItem "11"
    .AddItem "12"
    .AddItem "14"
    .AddItem "16"
    .AddItem "18"
    .AddItem "20"
    .AddItem "22"
    .AddItem "24"
    .AddItem "26"
    .AddItem "28"
    .AddItem "36"
    .AddItem "48"
    .AddItem "72"
  End With
End Sub

Do procedury cmbPismo_Click() vložte

Private Sub cmdPismo_Click()
  frmMain.RichTextBox1.SelFontName = cmdPismo.Text
  frmMain.RichTextBox1.SetFocus
End Sub

A do procedury cmbVelikost_Click() vepište

Private Sub cmbVelikost_Click()
  frmMain.RichTextBox1.SelFontSize = cmbVelikost.Text
  frmMain.RichTextBox1.SetFocus
End Sub

Barvy jsou důležité

Pro oživení textu můžete využít i barvy. Výběr barev zajistíme pomocí Common Dialogu (ano již zase náš starý známý). Vytvořte si proceduru Barva.

Sub Barva()
  With frmMain.CD
    .ShowColor
    frmMain.RichTextBox1.SelColor = .Color
  End With
End Sub

Málem bych zapomněl na neméně důležitou proceduru RichTextBox1_Change(). Do této procedury napište následující kód.

Private Sub RichTextBox1_Change()
Zmena = True
mnuUpravyZpet.Enabled = True
End Sub

Nastavíme ještě název frmMain. Do vlastnosti Caption napište Poznámkový blok – Bezejména.

StatusBar

Už se blížíme pomalu k závěru našeho snažení. Mezi posledními věcmi, které náš čekají, je i ovládací prvek StatusBar. Zde se bude nacházet datum, čas, klávesy [Insert], [Num Lock] a [Caps Lock].

Klikněte na StatusBar, v Properties najděte Custom. V záložce Panel vytvořte 5 panelů (tlačítkem Insert Panel). Zde nastavte parametry podle tabulky.

Pro názornost ještě obrázek.

Závěrečné zbytky kódu

Určitě jste si všimli, že pokud vypnete aplikaci křížkem, tak se aplikace ukončí bez nabídnutí uložení našeho dokumentu. To zajistíme procedurou Form_QueryUnload. Do této procedury napište Ukoncit.

Private Sub Form_QueryUnload(Cancel As Integer, UnloadMode As Integer)
  Ukoncit
End Sub

Menu Nápověda

Nakonec nás čeká přidání nápovědy a dialog O programu. Jako nápovědu využijeme HTML soubor, který spustíme pomocí ShellExecute. Do deklarační části Modul1 vložte

Public Declare Function ShellExecute Lib "shell32.dll" Alias "ShellExecuteA" (ByVal hwnd As Long, ByVal lpOperation As String, ByVal lpFile As String, ByVal lpParameters As String, ByVal lpDirectory As String, ByVal nShowCmd As Long) As Long

Do procedury mnuNapovedaTemataNapovedy_Click umístěte následující kód:

Private Sub mnuNapovedaTemataNapovedy_Click()
Dim cesta As String, RetVal
  
  cesta = App.Path & "\napoveda.html"
  RetVal = ShellExecute(frmMain.hwnd, "Open", cesta, "", "", 0&)
End Sub

Dialog O programu

Můžete si ho celý navrhnout sami a nebo využít již přednastavený About dialog, který přidáte do našeho projektu. Jděte do menu na Project → Add Form, vyskočí na vás nabídka. V ní si vyhledejte About Dialog a potvrďte. Jděte do procedury Form_Load a měly by se tam nacházet 3 řádky. Ty smažte. Nahradíme je vlastními texty.

Private Sub Form_Load()
    Me.Caption = "Poznámkový blok"
    lblVersion = "Verze 1.0.0"
    lblTitle = "Poznámkový blok"
    lblDescription = "Ukázkový Poznámkový blok vytvořený pro Programujte.com"
    lblDisclaimer = "Zde si napište, co chcete" & vbCrLf & "Vytvořil: Jan [JMM] Malý"
End Sub

Resumé

No, tak snad to je vše a na nic důležitého jsem nezapomněl. Po dlouhé době jsem sedl k Visual Basicu, proto jsou některé věci krkolomné, nedobře vysvětlené. Věřím, že vám tento jednoduchý příklad naznačil cestu k vytvoření textového editoru. Určitě najdete spousty věcí, které by se daly vylepšit nebo vytvořit. Nic vám v tom nebrání. Určitě byste mohli doplnit vyhledávání, formátování textu a mnoho a mnoho dalšího.

Pokud jste se někde v mém výkladu ztratili, nevadí, k článku je přiložen zabalený zdrojový kód [ZIP].