D57. Mòdul 1. Pràctica 2. Programació d'aplicacions educatives amb Visual Basic

Executar el programa m1p2.exe per conèixer el seu comportament. Cliqueu si no funciona correctament

Veure el llistat del codi del programa, m1p2.

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

Un paisatge i tres cares

El programa següent mostra, en clicar un botó, una cara que presenta un estat d’ànim determinat: normal, somrient o disgust. També s’hi afegeix la possibilitat de mostrar o amagar, amb botons addicionals, les tres cares.

Els botons Normal, Somriu i Disgust fan aparèixer la cara corresponent. El botó Totes fa aparèixer totes les cares i el botó Cap fa desaparèixer les tres cares. Tot això es realitza amb un paisatge de fons.

En aquesta activitat es tracta l’objecte Image i algunes de les seves propietats. Així mateix, es fa esment de la manera de canviar, en fase d’execució del programa (runtime) les propietats d’un objecte mitjançant codi de programació. Recordeu doncs, que en la creació d’un programa queden establerts uns valors inicials per a les propietats dels objectes que es poden canviar en el decurs de l’execució del programa. La finestra principal del projecte serà semblant a la següent:

Fase de disseny de la interfície d’usuari

Com podeu observar, en el formulari anterior hi ha tres tipus d’objectes: el formulari principal que anomenareu Paisatge.frm, els 6 objectes button (els botons que hi apareixen), i els tres objectes image (les tres cares). En el quadre d'eines és la icona senyalada pel cercle vermell.

Tema: Image Subtema: Image Control

Tema: Properties: Window

Les tres cares (imatges) que apareixen al centre del formulari són tres objectes del tipus Image que es mostraran en funció del botó premut. En executar el programa, no es veuran aquestes imatges perquè, inicialment, la propietat Visible té el valor False. Els botons tenen un codi associat a l’event Click que canvia la propietat Visible de False a True i a l’inrevés, tal com veureu més endavant. La propietat Visible és responsable de que un objecte aparegui o no en un formulari.

Tema: Visible Subtema: Visible Property

Creeu un subdirectori nou: C:\VBCurs\VBActivi\m1\p2 que servirà per guardar tots els fitxers del projecte. Tot seguit, creeu un nou projecte anomenat m1p2 en aquest directori. Per desar-los recordeu el que s'explica a la guia.

Els objectes que intervenen en aquest projecte tenen les propietats següents:

Els BMPs els trobareu en el directori C:\VBCurs\VBHtml\vibam1\m1p2. Copieu-los (fons.bmp, disgust.bmp, normal.bmp, somriu.bmp) en el vostre directori de treball, C:\VBCurs\VBActivi\m1\p2.

Objecte	Propietat	Valor
Formulari principal	Caption	Paisatge
	(Nombre)	frmPaisatge
	Picture	(bitmap) (fons.bmp)
	BorderStyle	1-FixedSingle
	MaxButton	False
Imatge normal	(Nombre)	imgNormal
	Visible	False
	Picture	(bitmap) (normal.bmp)
	Left	2640
	Top	420
Imatge somrient	(Nombre)	imgSomriu
	Visible	False
	Picture	(bitmap) (somriu.bmp)
	Left	1980
	Top	1080
Imatge disgustada	(Nombre)	imgDisgust
	Visible	False
	Picture	(bitmap) (disgust.bmp)
	Left	3330
	Top	1080
Botó Normal	Caption	Normal
	(Nombre)	cmdNormal
Botó Somriu	Caption	Somriu
	(Nombre)	cmdSomriu
Botó Disgust	Caption	Disgust
	(Nombre)	cmdDisgust
Botó Totes	Caption	Totes
	(Nombre)	cmdTotes
Botó Cap	Caption	Cap
	(Nombre)	cmdCap
Botó Fi	Caption	Fi
	(Nombre)	cmdFi

Les propietats noves d’aquests objectes són:

Per al formulari: la propietat Picture indica la imatge de fons del formulari (fons.bmp en aquest cas), la propietat BorderStyle té el valor 1-FixedSingle (per evitar que l’usuari canviï la grandària) i la propietat MaxButton adopta el valor False per no mostrar el botó Maximitzar. A més d’establir les propietats especificades, modifiqueu la grandària del formulari per tal d’adaptar-lo a les mides del dibuix de fons.

Tema: Picture Subtema: Picture Property

Tema: BorderStyle Subtema: BorderStyle Property

Tema: MaxButton Subtema: MaxButton Property

Per a les tres imatges: les propietats Left i Top indiquen el lloc on estan situades. Per tant, els valors donats anteriorment són només indicatius. Depenen del lloc on situeu les imatges.

Tema: Left Subtema: Left, Top Properties

Observeu que els tres objectes del tipus Image, no són visibles inicialment i que tenen associat un fitxer del tipus .BMP (normal.bmp, somriu.bmp i disgust.bmp).

Observeu també que el nom de tots els botons que hi ha en aquest formulari comença per cmd i el de les imatges per img. Ja s’ha dit anteriorment que és un bon costum utilitzar aquesta notació perquè d’aquesta manera el codi del programa és més llegible i entenedor. Recordeu els prefixos txt i cmd de l’activitat 1. Veure els prefixos recomanats per als objectes.

Fase de programació de respostes a events

En aquest projecte només definireu el codi associat a les possibles respostes als events que succeeixin. Recordeu que també podeu definir el codi de programació de caire general, que es pot utilitzar en qualsevol lloc del programa, mitjançant els mòduls (constants, variables, funcions i procediments d’ús global, etc.). Això ho veureu posteriorment.

L’event que heu de controlar en aquest programa és l’event Click (per a cada botó).

Comenceu per definir el codi de programa associat al botó Cap quan es produeix l’event Click: cliqueu dues vegades el botó Cap i, en aparèixer la finestra de codi, observeu l’escriptura automàtica de les línies primera i última del procediment associat. Escriviu les instruccions associades a aquest event segons el codi següent:

Aquestes instruccions estableixen el lloc on hi seran les tres cares i a més, les fan invisibles. Observeu que les cares sempre hi són al formulari. L’event Click amaga els objectes, no els elimina.

Perquè surti la finestra d'edició de codi podeu arribar-hi fent doble-clic damunt del botó corresponent.

Sub cmdCap_Click ()
  imgNormal.Visible = False
  imgNormal.Left = 2520
  imgNormal.Top = 1380
  imgSomriu.Visible = False
  imgSomriu.Left = 2520
  imgSomriu.Top = 1380
  imgDisgust.Visible = False
  imgDisgust.Left = 2520
  imgDisgust.Top = 1380
End Sub

Per als altres botons, heu de fer un procés semblant a l’especificat anteriorment incloent el codi corresponent a cada un d’ells i associat a l’event Click:

Botó cmdDisgust

Sub cmdDisgust_Click ()
  imgNormal.Visible = False
  imgSomriu.Visible = False
  imgDisgust.Visible = True
End Sub

Botó cmdSomriu

Sub cmdSomriu_Click ()
  imgNormal.Visible = False
  imgSomriu.Visible = True
  imgDisgust.Visible = False
End Sub

Botó cmdNormal

Sub cmdNormal_Click ()
  imgNormal.Visible = True
  imgSomriu.Visible = False
  imgDisgust.Visible = False
End Sub

Botó cmdTotes

Sub cmdTotes_Click ()
  imgNormal.Left = 2640
  imgNormal.Top = 420
  imgNormal.Visible = True
  imgSomriu.Left = 1980
  imgSomriu.Top = 1080
  imgSomriu.Visible = True
  imgDisgust.Left = 3330
  imgDisgust.Top = 1080
  imgDisgust.Visible = True
End Sub

Podeu veure que en el codi anterior, el procediment associat al botó cmdDisgust fa visible la imatge corresponent a una cara disgustada. Anàlogament, els botons cmdNormal i cmdSomriu fan el mateix amb la cara respectiva. Finalment, el procediment cmdTotes les mostra totes i estableix el lloc on es visualitzaran.

En tots aquests procediments d’event es fan visibles les imatges que convinguin. Per això, heu d’assignar a la propietat Visible el valor True. Anàlogament, si voleu amagar un objecte, la propietat Visible ha de tenir el valor False.

Finalment, el botó cmdFi té associat el procediment d’event Click:

Sub cmdFi_Click ()
  End
End Sub

Com podeu veure, aquest procediment conté la instrucció End, ja comentada anteriorment, que acaba el programa.

Comproveu el funcionament del programa i, una vegada aquest sigui el correcte, deseu el projecte activant l’opció Guardar proyecto del menú Archivo. O cliqueu

Exercicis

Per enviar al professor tutor. (creeu el directori de treball d'aquest projecte C:\VBCurs\VBExerci\m1\p2 )

E1. Simuleu un semàfor. Afegiu tres botons de comandament que mostraran els tres estats possibles d’un semàfor. Els gràfics del semàfor són a: C:\VBCurs\VBHtml\vibam1\m1p2 (TRFFC10A.ICO, TRFFC10B.ICO, TRFFC10C.ICO). Copieu aquests fitxers en el vostre directori de treball C:\VBCurs\VBExerci\m1\p2.

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

Cal enviar els següents fitxers: Per desar-los recordeu el que s'explica a la guia

m1p2e1.vbp

m1p2e1.frm

m1p2e1.exe

E2A. A partir de l'exercici anterior feu que es vegi un únic semàfor i que canviï de color clicant en ell.

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

Per no haver de començar de nou tot el projecte:

Deseu el fitxer m1p2e1.frm amb el nom m1p2e2.frm (Guardar archivo como...).
Deseu el projecte m1p2e1.vbp amb el nom m1p2e2.vbp (Guardar proyecto como...).
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:

m1p2e2.vbp

m1p2e2.frm

m1p2e2.exe