PROGRAMACIÓ D'APLICACIONS EDUCATIVES AMB VISUAL BASICMÒDUL 1ENRERA
PRÀCTICA 1 2 3 4
 
Executar el programa m1p1.exe per conèixer el seu comportament. Cliqueu si no funciona correctament

Veure el llistat del codi del programa, m1p1.

Executar Visual Basic per editar el projecte (acabat): m1p1.vbp. Cliqueu si no funciona correctament


Un primer contacte amb el Visual Basic

Aquest primer projecte consisteix en crear una finestra en la qual hi haurà tres botons. En clicar cada un d’ells es realitza una de les tasques següents:
  • Botó de comandament Salutació: escriptura, en una caixa de text, del missatge “Hola món, existeixo”.
  • Botó de comandament Esborra missatge: s’esborra el missatge anterior.
  • Botó de comandament Fi: s’acaba l’execució del programa i es tanca la finestra de treball.
El formulari se semblarà finalment al següent:




Carregueu el Visual Basic i observeu les diferents finestres que componen l’entorn de treball. Si teniu com a fons la finestra de l'administrador del Windows és millor que la minimitzeu.


Per tal que Visual Basic demani la declaració de constants i variables (dades a manipular) en el codi que intervé en el programa, cal que activeu l’opció Opciones... del menú Herramientas. Us apareix un check box que heu d'activar a la fila Requerir declaración de variables. És recomanable que ho feu en tots els projectes.







Activeu l’opció Nuevo Proyecto del menú Archivo per crear un nou projecte. Observeu l’aparició automàtica d’un formulari (formulari principal) en blanc.




Apareix un nou quadre de diàleg on podem escollir diferents tipus de projectes i ens quedarem amb el que se'ns ofereix per defecte, EXE estándar. O sigui que prémerem RETURN.




Creeu un subdirectori nou: C:\VBCurs\VBActivi\m1\p1 que servirà per guardar tots els fitxers del projecte.



Fase de disseny de la interfície d’usuari

Feu més petit el formulari anterior per tal de veure les finestres de projecte i de propietats i apliqueu al formulari les propietats següents, activant la icona de la barra d’eines:


Nota: Si no veieu la caixa d'eines, cliqueu en l'opció del menú indicada en la figura següent i apareixerà.




El valor de la propietat (Nombre) dels objectes és bo que segueixi un criteri:
veure els prefixos recomanats per als objectes.


Objecte

Propietat

Valor

Formulari

Caption

"Primer programa Windows"

 

(Nombre)

frmPrimerPrograma




Tema: Properties Window Subtema: Properties Window

Tema: Caption Subtema: Caption Property

Observeu que un objecte, en aquest cas un formulari, té unes quantes característiques o propietats que podeu establir inicialment a la finestra de propietats. En aquest cas, les propietats que heu establert són: el títol de la finestra i el nom de l’objecte. Aquesta propietat (Nombre) és molt important per a tots els objectes perquè l’haureu d’utilitzar sempre que vulgueu fer referència a un objecte des del codi de programació, tal com veureu més endavant. Les propietats d’un formulari les podeu consultar a l’ajuda:

Tema: Forms: Properties

Activeu l’opció Start del menú Run i observeu els resultats obtinguts: la finestra del formulari principal i el títol (Caption) a la part superior de la finestra.

Heu fet una finestra nova de Windows amb algunes de les seves característiques: els títols, els botons de maximitzar i minimitzar, el menú de la barra espaiadora i també la possibilitat de redimensionar-la. Acabeu l’execució del programa activant l’opció End del menú Run.

Ara haureu d’afegir al formulari: una caixa de text i tres botons de comandament.

Les caixes de text s’utilitzen, bàsicament, per introduir o mostrar text. Cal tenir present que quan introduïu nombres en una caixa de text heu d’utilitzar les conversions entre tipus de dades. Això ho veureu a l’activitat 3.

Tema: Text Box Subtema: Text Box Control

Tema: Command button Subtema: Command button control

Per tant, per a la caixa de text, activeu, a la caixa d’eines, el botó Eina quadre de text. Arrossegueu el ratolí i deixeu-lo anar al lloc on voleu situar el nou control de text. Canvieu la grandària del control creat fins a obtenir les dimensions adients per tal de poder escriure la frase “Hola món, existeixo”.

Tema: controls: creating Subtema: Drawing a control

Establiu per a aquest control les propietats següents:


Objecte

Propietat

Valor

Caixa de text

Text

 
 

(Nombre)

txtMissatge

 

Enabled

False




Ja s’ha dit anteriorment que la propietat (Nombre) és fonamental per fer referència a un objecte en el codi d’un programa. Pel que fa a les altres dues propietats noves, la propietat Text serveix per emmagatzemar el contingut textual de la caixa i la propietat Enabled s’utilitza per permetre la interacció de l’usuari a la caixa de text (en aquest cas, no es permet la interacció perquè Enabled té el valor False).

Creeu els tres botons de comandament, activant la icona de la caixa d’eines i doneu-los-hi els valors següents a les propietats esmentades:


Objecte

Propietat

Valor

Botó Salutació

Caption

&Salutació

 

(Nombre)

cmdSalutació

Botó Esborrar

Caption

&Esborra missatge

 

(Nombre)

cmdEsborraMissatge

Botó Fi

Caption

&Fi

 

(Nombre)

cmdFi



Nota: Com que suposem que a aquestes alçades ja se sap canviar les propietats en el formulari Properties ja no posem el dibuix de com quedaria un cop canviat.

Els botons de comandament tenen la propietat Caption amb el valor &Salutació, &EsborraMissatge i &Fi perquè el símbol & davant una lletra fa que aparegui subratllada després i que el procediment associat a l'event Click del botó corresponent s'executi també amb la combinació de tecles Alt+Lletra. Per exemple, prémer la combinació de tecles Alt+S és equivalent a clicar el botó Salutació.

Tema: Command button Subtema: Command button Control



Fase de programació de respostes a events

Heu dissenyat la interfície de pantalla per a l'usuari. Cal que afegiu el codi de programa que faci possible que en clicar un dels botons creats “passi alguna cosa”. Si premeu dues vegades (doble clic) sobre el botó Salutació, apareix la finestra d'edició de codi associada al formulari. Aquesta finestra conté, a la part superior, una subfinestra per escollir un dels objectes que conté. En aquest cas, el botó cmdSalutació.



Tema: Code Window Subtema: Code Window

    • Nota: Si pel que fos no veiéssiu la finestra anterior, cliqueu amb el botó dret damunt de frmPrimerPrograma (m1p1.frm) , apareix un menú contextual. Cliqueu en l'opció, Ver código. Aquestra finestra s'anomena finestra de projecte (Proyecto). Aquí anireu veient tots els fitxers que componen el vostre projecte i clicant en cadascun d'ells podreu desplaçar-vos d'un a l'altre. En aquest cas el vostre projecte només està compost d'un formulari, m1p1.frm.



    • Nota de la nota anterior: si no veiéssiu la finestra de projecte, clicant en l'opció del menú de la figura següent farà que la veieu.




L’altra subfinestra,


serveix per escollir l’event al qual se li vol associar codi de programa.

Tema: Procedure Box Subtema: Code Window

Així doncs, com el botó cmdSalutació, en clicar-lo, ha de provocar l’escriptura del missatge “Hola món, existeixo” a la caixa de text, la subfinestra Object tindrà activat l’objecte: cmdSalutació. De la mateixa manera, la subfinestra Proc. tindrà activada l’opció Click.

Observeu que la finestra de codi genera automàticament la primera i última línies de codi. Heu d’escriure el codi de programa que desitgeu entre aquestes dues línies. En aquest cas, el codi que escriviu ha de fer que a la caixa de text aparegui la frase "Hola món, existeixo" cada vegada que premeu el botó Salutació. Per tant heu d'escriure la instrucció:

    txtMissatge.Text = "Hola món, existeixo"

Aquesta instrucció introdueix un concepte molt important: la modificació de la propietat d’un objecte. En aquest cas, es modifica la propietat Text de l’objecte anomenat txtMissatge. La sintaxi emprada per fer referència a aquesta propietat és:

Nomobjecte.Propietat_a_modificar (txtMissatge.Text en aquest cas).

Tema: Properties: changing/setting Subtema: Setting Form and control properties

De la mateixa manera, creeu els procediments o subrutines corresponents als altres dos botons.

Botó Esborrar

    Sub cmdEsborraMissatge_Click () txtMissatge.Text = "" End Sub

Botó Fi

    Sub cmdFi_Click () End End Sub


La instrucció txtMissatge.Text=“” modifica la propietat Text i li assigna la cadena de caràcters buida. En general, tal com s’ha dit anteriorment, tindreu instruccions amb sintaxi semblant a:

    txtMissatge.Text = "Hola món, existeixo"

és a dir, Nomobjecte.PropietatAEstablir=Valor de la propietat de l’objecte

Tema: Object Subtema: Object Property

Nota: per tal de fer més llegible el codi de programa, és recomanable que el començament del nom dels objectes indiqui el tipus d’objecte. Per exemple, a l’activitat anterior el formulari principal s’anomena frmPrimerPrograma (prefix frm), la caixa de text (prefix txt) s’anomena txtMissatge i els tres botons definits a l’activitat s’anomenen cmdSalutació, cmdFi i cmdEsborrar (cmd és el prefix utilitzat). Cliqueu aquí, hi ha un annex que especifica una proposta de prefixos per als objectes que intervenen en un projecte de Visual Basic.

Executeu el programa mitjançant l'ordre Start del menú Run i observeu els resultats.





En acabar el programa es retorna el control al Visual Basic.

Deseu el projecte en el directori C:\VBCurs\VBActivi\m1\p1 que haureu creat anteriorment. Per això, cal que activeu l'opció Guardar proyecto como del menú Archivo.

Observeu que cal introduir el nom del fitxer de formulari m1p1 (m1p1.frm) i el nom del projecte m1p1 (m1p1.vbp "mòdul 1, pràctica 1"). L'extensió del formulari és per defecte .frm i del projecte .vbp. No és bo que la canvieu o sigui que no hi poseu l'extensió, Visual Basic ja les col·loca automàticament si no n'hi poseu.





Sortiu de l’entorn del Visual Basic i observeu el que hi ha al directori de treball escollit.


Com es fa per crear un executable independent? Un cop realitzat un projecte podem desar el programa com un fitxer independent, *.exe. Per fer-ho aneu a l'opció Generar *.exe del menú Archivo:




A continuació us apareixerà un quadre de diàleg estandard on hi haureu d'escriure el nom. Visual Basic us suggereix el del nom del projecte acabat amb exe, el podeu canviar, però no és convenient fer-ho.




Un cop fet això ja teniu un executable independent, el podeu executar sense necessitat de carregar l'entorn de Visual Basic, simplement clicant el seu nom, per exemple desde l'administrador d'arxius de Windows.

Si el voleu distribuir, cal tenir en compte que els executables de Visual basic 6.0 necessiten com a mínim una llibreria, el Run Time (una Dll), que Visual Basic instal.la en el directori System del Windows. És una llibreria que es pot distribuir lliurement, a la majoria d'ordinadors acostuma a ser-hi, ja que ve adjunta a molts programes.

Si es fa servir una altra versió de Visual Basic, doncs s'haurà de distribuir amb la seva llibreria.

Si a més al programa hi posem controls vbx aquestos també hauran d'anar inclosos en la distribució, sinó el programa no funcionará en el nou ordinador.



Exercicis

Observeu:

1.- Les propietats dels formularis, les possibles dades que podeu posar-hi i el seu efecte: BackColor, Enabled, Visible.
    a- Canvieu el color de fons del formulari perquè sigui verd.

    b- Canvieu el valor de la propietat Enabled i observeu que no podeu accedir al formulari. Per tancar el programa premeu:


    c- Què passa si canvies la propietat Visible?


2.- La propietat BorderStyle pot tenir quatre valors diferents. Quin efecte es produeix si es canvien aquests valors?




3.- Canvieu les propietats dels botons de comandament i observeu el seu efecte: Enabled, Visible.

Canvis en la Font. Estilo de fuente: Negrita, Itálica. Fuente. Tamaño. Botons: Tachado, Subrayado.




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

E1. Envieu el mateix programa amb les següents característiques:

    1- BackColor: Fons del formulari verd.

    2- BorderStyle: None.

    3- Botó salutació FontBold: False.

    4- Botó Esborra Missatge FontItalic: true.

    5- Botó Esborra Missatge Enabled: false.

    6- Botó Fi FontName: Tymes New Roman.


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


Per no haver de començar de nou tot el projecte:
  • Copieu els fitxers del directori C:\VBCurs\VBHtml\vibam1\m1p1, m1p1.vbp i m1p1.frm en el directori on feu l'exercici: C:\VBCurs\VBExerci\m1\p1.

  • Cliqueu a sobre el fitxer m1p1.vbp perquè es carregui Visual Basic amb aquest projecte.

  • Deseu el fitxer m1p1.frm amb el nom m1p1e1.frm (Guardar *.frm como...).

  • Deseu el projecte m1p1.vbp amb el nom m1p1e1.vbp (Guardar proyecto como...).

  • Després podeu esborrar el fitxers , m1p1.vbp i m1p1.frm del directori on feu l'exercici: C:\VBCurs\VBExerci\m1\p1.

  • A continuació podeu fer les modificacions que cregueu oportunes.

  • Al final no us oblideu de desar els fitxers. Si no ho feu quan sortiu de Visual Basic aquest us informa que hi ha modificacions fetes. Recomanació, compte !! quan deseu.

Cal enviar els següents fitxers:
    Fitxer projecte m1p1e1.vbp
    Fitxer formulari m1p1e1.frm
    Fitxer executable m1p1e1.exe
En tots els exercicis fareu servir la mateixa nomenclatura. El significat de m1p1e1 és: mòdul 1, pràctica 1, exercici 1.