PROGRAMACIÓ D'APLICACIONS EDUCATIVES AMB VISUAL BASICMòdul 4ENRERA
PRÀCTICA 1
 
Executar el programa m4p1.exe per conèixer el seu comportament.

Veure el llistat del codi del programa, m4p1.

Executar Visual Basic per editar el projecte (acabat): m4p1.vbp.


Creació d'un editor de textos

Aquest projecte contindrà un formulari que us permetrà simular un petit editor de textos. Aquest editor, amb prestacions senzilles, incorpora menús. Treballareu també amb els mètodes associats a la carpeta.

En aquest formulari introduireu una caixa de text que ocupi tot l'espai disponible del formulari i que serà l'editor pròpiament dit. Aquest formulari serà semblant al següent:




Només amb aquest senzill objecte ja podeu escriure diverses línies de text en la caixa de text, seleccionar-ne un tros, esborrar-lo, moure'l, etc.

També creareu un menú amb una sèrie d'opcions.

El conjunt de tots els títols corresponents als menús dissenyats sortiran sota el títol del formulari.

Per crear aquest projecte cal que seguiu els passos següents:

Obrireu un nou projecte com en la última pràctica del mòdul anterior, és a dir, Controles de VB Edición Profesional que permetà fer servir un nou control, CommonDialog


Fase de disseny de la interfície d'usuari

Heu de crear un formulari principal, amb els següents objectes:

Objecte

Propietat

Valor

Formulari

(Nombre)

frmEditor
 

Caption

Editor de textos

Caixa de text

(Nombre)

txtQuadreText
 

Multiline

True
 

Scrollbars

2.-Vertical
 

Text

Diàleg comú (CommonDialog)

(Nombre)

CMDialog1


El darrer objecte us dóna la possibilitat de manegar de manera fàcil el tractament de fitxers (per escollir-ne un, obrir-lo, desar-lo, etc). La icona que heu d'utilitzar per a la creació d'aquest objecte és:

Tema: Common Dialog Subtema: Common Dialog Control


Fase de disseny del menú

En el formulari nou que heu creat heu de definir una barra de quatre menús anomenats Arxiu, Edició, Opcions i les seves propietats seguint els passos explicats a continuació:

    a) Per obrir l'editor de menús cliqueu amb el botó dret damunt del formulari i s'obrirà un menú contextual. Cliqueu en la opció, Editor de menús...


    b) A continuació, introduïu els diferents menús que voleu crear emplenant la finestra de disseny de menús mostrada més avall. Cada menú té diverses propietats. Per exemple, la propietat Caption o la propietat (Nombre). Si inseriu un símbol & davant de la propietat Caption de l'opció de menú, aleshores aquest menú es podrà activar amb el ratolí (per defecte) o amb la combinació de tecles ALT+INICIAL del Caption. En Caption s'escriu el nom del menú (el que es visualitza per pantalla). En (Nombre) s'escriu el nom amb que es coneixerà aquest menú en l'àmbit de programació. Per exemple, per crear el menú Arxiu heu d'escriure Arxiu en la casella Caption i mnuArxiu en la casella (Nombre). És recomanable que els noms dels menús comencin pel prefix mnu.


    c) Introduïu els noms de les opcions que componen el menú: trieu el menú al qual voleu associar opcions, activeu el botó Next, premeu la fletxa , per entrar en un nivell més interior, i escriviu les diverses opcions del menú.

    Exemple: Edició

      ··· Retallar

      ··· Copiar

      ··· Enganxar

    que defineix el menú Edició amb les opcions Retallar, Copiar i Enganxar.

    Nota: en la figura adjacent no es veu la definició del menú Arxiu. Observeu que la barra de desplaçament de la dreta no és a dalt de tot. Per tant, abans del menú Edició heu d'afegir la declaració del menú Arxiu:

    Arxiu

      Obrir

      Desar

      Tancar

      -

      Sortir

    En aquesta declaració està definit un separador entre les opcions Tancar i Sortir. Observeu que per afegir una línia de separació entre les diverses opcions d'un menú heu d'inserir una nova línia d'opció i assignar-li un guió (-) a la propietat Caption. Per exemple, en el menú Arxiu podeu posar una línia de separació davant de l'opció Sortir.

    d) Creeu un submenú. Cadascuna de les opcions d'un menú pot convertir-se en un submenú si cadascuna d'elles conté un conjunt d'opcions.

    Per exemple l'opció Fonts té tres opcions que són Courier New, Arial i Symbol.

    Dissenyeu el menú amb les opcions i subopcions següents amb les propietats:

Caption

      

(Nombre)

Shortcut

Checked

Enabled

Arxiu

      

mnuArxiu

cap

no

sí
 

Obrir

    

mnuObrir

cap

no

sí
 

Desar

    

mnuDesar

cap

no

sí
 

Tancar

    

mnuTancar

cap

no

sí
 

- (guió)

    

mnuSeparador

      
 

Sortir

    

mnuSortir

Ctrl+S

no

sí

Edició

      

mnuEdició

cap

no

sí
 

Retallar

    

mnuEdicióRetallar

F1

no

no
 

Copiar

    

mnuEdicióCopiar

F2

no

no
 

Enganxar

    

mnuEdicióEnganxar

F3

no

no

Opcions

      

mnuOpcions

cap

no

sí
 

Fonts

    

mnuFonts

cap

no

sí
   

Courier New

  

mnuFont(Index :0)

cap

no

sí
   

Arial

  

mnuFont(Index:1)

cap

sí

sí
   

Symbol

  

mnuFont(Index:2)

cap

no

sí
 

Mida

    

mnuMides

cap

no

sí
   

10

  

mnuMida(Index:0)

cap

sí

sí
   

12

  

mnuMida(Index:1)

cap

no

sí
   

24

  

mnuMida(Index:2)

cap

no

sí
 

Colors

    

mnuColors

cap

no

sí
   

Fons

  

mnuColorsFons

cap

no

sí
     

Negre

mnuColorFons(Index:0)

cap

no

sí
     

Verd

mnuColorFons(Index:1)

cap

no

sí
     

Blau

mnuColorFons(Index:2)

cap

no

sí
   

Text

  

mnuColorsText

cap

no

sí
     

Blanc

mnuColorText(Index:0)

cap

no

sí
     

Verd

mnuColorText(Index:1)

cap

no

sí
     

Blau

mnuColorText(Index:2)

cap

no

sí


Tema: Menu Subtema: Creating a Menu Bar

Tingueu en compte que el nom dels tipus de font, de la seva mida, del color del fons i del color de text són: Font, Mida, ColorsFons i ColorsText respectivament.

Observeu que les opcions d'un menú poden ser definides com un control array per tal que en el procés de programació els procediments que afectin a aquestes opcions depenguin de l'índex que tinguin. Per tant, cal que poseu el valor corresponent de l'índex (indicat entre parèntesi en la taula anterior).
  • Com a exemple veieu com seria la finestra Menu Design quan editem l'opció de menú, Arial:





Fase de programació de respostes a events

Declaracions generals d'àmbit el formulari principal 
    Dim IndexFont As Integer
Dim IndexMida As Integer
Dim TextModificat as integer
Const SI = True
Const No = False
Const DLG_FILE_OPEN = 1
Const DLG_FILE_SAVE = 2
Const IDYES = 6
Const MB_YESNO = 4
Const MB_OK = 0
Const MB_ICONSTOP = 16

Tema: MsgBox Subtema: tots


Mètodes associats a l'event Load

Per al formulari principal: 
    Sub Form_Load ()
  IndexFont = 1
  txtQuadreText.FontName = "Arial"
  IndexMida = 0
  txtQuadreText.FontSize = 10
  TextModificat = NO
End Sub

Aquest procediment fa activa la font Arial amb mida 10.

El procediment que canvia el valor de la variable d'estat TextModificat a SI és el procediment associat a l'event Change: txtQuadreText_Change(). Fareu ús d'aquesta variable en els procediments de disc, per demanar si voleu guardar el text cas que n'hi hagi canviat. 
    Sub txtQuadreText_Change ()
  TextModificat = SI
End Sub

Mètodes associats a l'event Click i associats als elements dels menús

Per al menú Edició:

Observeu que cada element del menú: menús, submenús i opcions s'activen quan cliqueu el ratolí a sobre d'ells. Recordeu que també hi podeu definir combinacions de teclat que activin aquests menús.

En un editor de textos tenen molta importància les opcions del menú Edició. Per tal d'implementar-les necessiteu introduir unes propietats de les caixes de textos i de l'objecte ClipBoard.

Tema: Clipboard Subtema: Clipboard Object

Les caixes de text tenen una sèrie de propietats que us permeten treballar amb el text seleccionat a través de la Carpeta. Aquestes propietats són SelStart, SelLength i SelText.

SelText: és una cadena de caràcters (String) que conté el text seleccionat.

SelStart: és un enter (Long) que diu la posició de començament d'un text seleccionat. Si no hi ha text seleccionat indica la posició del cursor.

SelLenght: és un enter (long) que especifica el nombre de caràcters seleccionats.

Tema: SelLength, SelStart, SelText Properties

La carpeta (Clipboard) és un objecte que no té propietats ni esdeveniments però sí una sèrie de mètodes que us permetran transferir informació entre els vostres documents i la carpeta. Els mètodes són SetText, GetText i Clear.

SetText: aquest mètode copia en la carpeta el text seleccionat i es destrueix la informació que aquesta contenia anteriorment.

GetText: aquest mètode agafa el contingut de la carpeta.

Clear: neteja tot el contingut de la Carpeta.

Tema: Clipboard Subtema: Clipboard Object

Tal com ja s'ha esmentat, cada opció de menú és un objecte amb les seves propietats i un event, l'event Click. Per tant, heu de posar el codi que voleu que s'executi quan un usuari tria una opció a l'event Click d'aquesta opció.

Les opcions del menú Edició tenen el codi de programació següent: 
    Sub mnuEdicióCopiar_Click ()
  ClipBoard.SetText txtQuadreText.SelText
End Sub 

Sub mnuEdicióEnganxar_Click ()
  txtQuadreText.SelText = ClipBoard.GetText()
End Sub

Sub mnuEdicióRetallar_Click ()
  ClipBoard.SetText txtQuadreText.SelText
  txtQuadreText.SelText = ""
End Sub

Per tal que quan obriu el menú Edició apareguin les opcions adients assenyalades heu d'assignar els valors corresponents a la propietat Enabled de cada una d'elles. Així, si no teniu text seleccionat, les opcions Retallar i Copiar han d'aparèixer desactivades (propietat Enabled = False). L'opció Enganxar ha d'aparèixer desactivada si no hi ha text en la carpeta (Clipboard). 
    Sub mnuEdició_Click ()
  mnuEdicióRetallar.Enabled = (txtQuadreText.SelLength) > 0
  mnuEdicióCopiar.Enabled = (txtQuadreText.SelLength) > 0
  mnuEdicióEnganxar.Enabled = (Len(ClipBoard.GetText())) > 0
End Sub

Observeu que (Text.SelLength) > 0 és una comparació que dóna com a resultat True si teniu text seleccionat i False si no el teniu. El resultat d'aquesta comparació és assignat a la propietat Enabled de mnuEdicióRetallar o mnuEdicióCopiar mitjançant la igualtat.

Tema: > Subtema: Boolean expression i Comparison Operators

Per al menú Opcions:

Canvi de font de text:

Per a l'opció Fonts introduireu només tres fonts per al tipus de lletra: Courier New, Arial i Symbol. Per fer-ho caldrà canviar la propietat FontName de la caixa de text que utilitzeu com a editor. En una caixa de text només podeu utilitzar una sola font de text.

El nom de les fonts per canviar la propietat FontName el teniu en la propietat Caption de les opcions de menú mnuFont ja que mnuFont(0).Caption és Courier New, mnuFont(1).Caption és Arial i mnuFont(2).Caption és Symbol. Com que mnuFont és un array de controls el procediment que canvia el tipus de lletra és el següent: 
    Sub mnuFont_Click (Index As Integer)
  mnuFont(IndexFont).Checked = NO
  txtQuadreText.FontName = mnuFont(Index).Caption
  mnuFont(Index).Checked = SI
  IndexFont = Index
End Sub

Canvi de la mida de la font de text:

Les mides que incloureu en aquest projecte són: 10, 12 i 24 punts.

El procediment següent modifica la mida d'una font en una caixa de text fent servir la propietat fontsize de la caixa de text. Observeu l'array de controls format per les opcions de menú que fan referència a la mida i els valors de les seves propietats: Mida(0).Caption="10", Mida(1).Caption="12" i Mida(2).Caption= "24". 
    Sub mnuMida_Click (Index As Integer)
  mnuMida(IndexMida).Checked = NO
  txtQuadreText.FontSize = Val(mnuMida(Index).Caption)
  mnuMida(Index).Checked = SI
  IndexMida = Index
End Sub

Canvi del color de fons: 
    Sub mnuColorFons_Click (Index As Integer)
  Select Case Index
  Case 0  'Color negre de fons
    txtQuadreText.BackColor = RGB(0, 0, 0)
  Case 1  'Color verd de fons
    txtQuadreText.BackColor = RGB(0, 255, 0)
  Case 2  'Color blau de fons
    txtQuadreText.BackColor = RGB(0, 0, 255)
  End Select
End Sub

Tema: RGB Subtema: RGB Function

Per canviar el color del fons (colors negre, verd i blau) heu de modificar el valor de la propietat Backcolor de la caixa de text. Recordeu que heu definit un array de controls per les diverses opcions del color del fons.

Canvi del color del text: 
    Sub mnuColorText_Click (Index As Integer)
  Select Case Index
  Case 0  'Color blanc
    txtQuadreText.ForeColor = RGB(255, 255, 255)
  Case 1  'Color verd
    txtQuadreText.ForeColor = RGB(0, 255, 0)
  Case 2  'Color blau
    txtQuadreText.ForeColor = RGB(0, 0, 255)
  End Select
End Sub

Per al menú Arxiu:

Les opcions d'aquest menú fan ús del control CMDialog1. Aquest control permet presentar en pantalla els quadres de diàleg com el de la figura de sota. Aquest és el quadre de diàleg que us permet cercar el nom d'un fitxer amb el disc i el camí en què es troba aquest fitxer.




L'eina quadre de diàleg permet obrir altres quatre tipus de quadre, que són els de Desar, Imprimir, Font i Color.

Tema: CMDialog Subtema: Common Dialog Control

Per a l'opció Desar:

Els procediments d'aquest menú són: 
    Sub mnuDesar_Click ()
  Desa
End Sub

Aquest procediment fa la crida al procediment Desa d'àmbit tot el formulari. No està associat a un event d'una opció de menú perquè es crida des de totes les opcions de menú. El seu codi és: 
    Sub Desa ()
  On Error GoTo TractamentErrorsDesar

  CMDialog1.CancelError = True
  CMDialog1.Filter = "Tots els fitxers (*.*)|*.*|Fitxers de text (*.txt)|*.txt|"
  CMDialog1.FilterIndex = 2
  CMDialog1.Action = DLG_FILE_SAVE

  Open CMDialog1.Filename For Output As #1
  Print #1, txtQuadreText.Text
  Close #1
  TextModificat = False
  Exit Sub

  TractamentErrorsDesar:
    MsgBox "Ho sento, no he gravat el fitxer", MB_ICONSTOP
  Exit Sub
End Sub

Per aconseguir el símbol | que hi ha a l'expressió anterior: CMDialog1.Filter = "Tots els fitxers (*.*)|*.*|Fitxers de text (*.txt)|*.txt|", podeu mantenir premuda la tecla Alt i el número 124 al teclat numèric.

En aquest procediment es poden produir errors de lectura i escriptura en disc i cal tenir-ho present. Per tant creareu un mecanisme per controlar els errors. La línia On Error GoTo TractamentErrorsDesar fa que, si es produeix qualsevol error després de la seva execució, el flux del programa salta del lloc on es produeix l'error fins a l'etiqueta TractamentErrorsDesar: que és al final del procediment. A partir d'aquesta etiqueta posareu les instruccions del tractament d'errors. Observeu que per fer una etiqueta heu de posar-li dos punts (":") darrera el seu identificatiu.

El codi de programa que hi ha després de l'etiqueta és molt senzill, però normalment es farà una crida a una funció o procediment de tractament d'errors molt més complex.

Tema: Err, ErrorHandler Subtema: Err function, On Error Statement

Després de prevenir els errors s'obre la finestra de diàleg comú de Desar.

Modifiqueu algunes de les propietats de l'objecte CMDialog: poseu la propietat CancelError a True perquè així quan l'usuari premi el botó Cancel·lar es produeixi un error i el flux del programa salti fins a l'etiqueta. Si la propietat CancelError té el valor False no es podria controlar la interacció de l'usuari amb el botó Cancel·lar.

Després declareu els tipus de fitxers que apareixeran a la llista fent els filtres convenients: modifiqueu la llista Filter, que farà aparèixer els fitxers escaients indicats en la finestreta Mostrar arxius del tipus. El valor 2 de la propietat FilterIndex fa que aparegui per defecte el segon element de la llista i també *.TXT en el nom de l'arxiu la primera vegada. En darrer lloc el fet de canviar el valor de la propietat Action fa que el quadre de diàleg aparegui en pantalla. Heu emprat la constant DLG_FILE_SAVE i per això l'heu definit al codi general del formulari. Una altra opció d'incloure constants és incorporar el fitxer CONSTANT.TXT en la finestra de projecte.

Tema: CONSTANT.TXT Subtema: Loading...

Quan l'usuari surt de la finestra de diàleg hi haurà un nom de fitxer amb tot el seu path en la propietat CMDialog1.Filename. Graveu el text que hi ha en aquest fitxer d'accés seqüencial. Les instruccions per gravar un fitxer seqüencial són:

    a) Obertura del fitxer amb la instrucció open i el format del procediment.

    b) Escriptura en el fitxer del contingut de variables amb la instrucció print.

    c) Tancament del fitxer amb la instrucció close.

Tema: Sequential Subtema: Tots els que apareixen

Per a l'opció Obrir:
Recordeu que no cal que escriviu aquest codi. Llegiu-lo, per tal de saber per a què serveix i com ho fa. A continuació, el podeu copiar a la carpeta i enganxar-lo en la finestra d'edició de Visual Basic.
    Sub mnuObrir_Click ()
  On Error GoTo TractamentErrorsObrir

  Dim QueVol As Integer, Text As String

  If TextModificat Then
    Text = "Tens un text sense guardar." + Chr(13) + Chr(10)
    Text = Text + "Ho vols desar?"
    QueVol = MsgBox(Text, MB_ICONSTOP + MB_YESNO, "!!!! Atenció !!!!")
    If QueVol = IDYES Then Desa
  End If
  CMDialog1.CancelError = True
  CMDialog1.Filter = "Tots els fitxers (*.*)|*.*|Fitxers de text (*.txt)|*.txt|"
  CMDialog1.FilterIndex = 2
  CMDialog1.Action = DLG_FILE_OPEN
  Open CMDialog1.Filename For Input As #1
  If LOF(1) > 65536 Then
    MsgBox "Text massa llarg. Ho sento", MB_ICONSTOP
  Else
    TextModificat = False
    txtQuadreText.Text = Input$(LOF(1), 1)
  End If
  Close #1
  Exit Sub

  TractamentErrorsObrir:
    MsgBox "Ho sento, no he carregat cap fitxer", MB_ICONSTOP
  Exit Sub
End Sub

És un procediment molt semblant al procediment Desa. Hi ha dues diferències. Una és que en aquest procediment d'obertura de fitxers cal demanar si voleu gravar el text de la pantalla, cas que n'hi hagi canviat el text. L'altra és que caldrà llegir un fitxer de disc: heu d'obrir el fitxer (Open), llegir l'arxiu, amb la instrucció Input$, i tancar el fitxer (Close). També cal comprovar la llargada del fitxer, ja que no es poden introduir més de 65536 caràcters en un quadre de text.

Per a les opcions Sortir i Tancar:

Són dos procediments molt semblants que comproven si teniu modificat algun text i, cas que n'hi hagi, es demana si el voleu gravar. Després el procediment mnuSortir_Click() acaba l'execució del programa i el procediment mnuTancar_Click() esborra el text del quadre (txtQuadreText = "") i actualitza el valor de la variable d'estat TextModificat a NO: 
    Sub mnuSortir_Click ()
  Dim Text As String
  Dim QueVol As Integer

  Text = "Tens un text sense guardar." + Chr(13) + Chr(10)
  Text = Text + "Ho vols desar?"
  If TextModificat Then
    QueVol = MsgBox(Text, MB_ICONSTOP + MB_YESNO, "!!!! Atenció !!!!")
    If QueVol = IDYES Then Desa
  End If
  End
End Sub

Sub mnuTancar_Click ()
  Dim Text As String
  Dim QueVol As Integer

  Text = "Tens un text sense guardar." + Chr(13) + Chr(10)
  Text = Text + "Ho vols desar?"
  If TextModificat Then
    QueVol = MsgBox(Text, MB_ICONSTOP + MB_YESNO, "!!!! Atenció !!!!")
    If QueVol = IDYES Then Desa
  End If
  txtQuadreText = ""
  TextModificat = NO
End Sub

Exercicis

Per enviar al professor tutor. (Directori C:\VBCurs\VBExerci\m4\p1 )

E1. Recorda l'exercici m1p3e1, la finestra principal del programa en mode edició quedava més o menys així:




Fes el mateix programa, però en lloc de ser comandat per botons fes que ho sigui mitjançant un menú.


La finestra principal del programa ha de quedar més o menys així:





Cal enviar els següents fitxers:
    Fitxer projecte m4p1e1.vbp
    Fitxer formulari m4p1e1.frm
    Fitxer executable m4p1e1.exe



E2. Recorda l'exercici m1p4e1, la finestra principal del programa en mode edició quedava més o menys així:




Fes el mateix programa, però en lloc de ser comandat per botons fes que ho sigui mitjançant un menú, fent que els dos submenús estiguin habilitats o deshabilitats segons calgui.


La finestra principal del programa amb el menú desplegat ha de quedar més o menys així:





Cal enviar els següents fitxers:
    Fitxer projecte m4p1e2.vbp
    Fitxer formulari m4p1e2.frm
    Fitxer executable m4p1e2.exe