Desenvolupament d'aplicacions amb App Inventor

Tutorial Exemples     Recursos CITCEA
Llibre Projectes Dades pràctiques   Inici

1- Afegir elements a la llista

Necessitarem un camp de text (Text Box) per escriure el que hem de comprar, un botó (Button) per poder-ho guardar quan acabem d'escriure i un lloc on mostrar text (Label) que serà on ens sortirà la llista. El camp de text i el botó els posarem dins un organitzador horitzontal (Horizontal Arrangement) per tal que quedin de costat. El resultat, un cop configurats els elements serà aquest:

Disposició dels elements

Les següents taules mostren les propietats de cada un dels elements:

Propietat Valor Comentaris
Nom HorizontalArrangement_Entrada Aquest nom l'hem de posar en el requadre Components

Propietat Valor Comentaris
Nom TextBox_Producte Aquest nom l'hem de posar en el requadre Components
Width 200 pixels... Amplada del requadre
Hint En blanc, no volem text d'ajuda

Propietat Valor Comentaris
Nom Button_Acceptar Aquest nom l'hem de posar en el requadre Components
Image acceptar.gif Imatge del requadre
Text En blanc, no volem text sobre la imatge

Propietat Valor Comentaris
Nom Label_Llista Aquest nom l'hem de posar en el requadre Components
FontSize 16.0 Fem el text una mica més gros

La llista l'hem de mostrar en dos llocs diferents del programa. Per un costat al moment d'inicialitzar i per altre cada cop que afegim un element. Per això el tros de programa que mostra la llista l'hem posat dins d'una funció. Així cada cop que necessitem mostrar la llista farem una crida (call) a aquesta funció.

El programa és el següent:

Programa
Programa

El primer grup d'instruccions crea una variable on guardar la llista.

Quan s'inicialitza la pantalla, cridem a la funció que s'encarrega de mostrar la llista. Aquesta funció primer mira si la llista és buida o no. Si és buida ens n'informa amb un text de color magenta. Si no és buida, fa un bucle iteratiu en el que va afegint al Label els diferents elements de la llista (en color negre). El símbol \n indica que s'ha de fer un salt de línia.

Quan es prem el botó, es comprova si s'ha escrit alguna cosa al requadre de text. Si no s'ha escrit res, mostra un avís en color vermell. Si s'ha escrit, afegeix el producte a la llista i torna a mostrar la llista.

 

 

Llicència de Creative Commons
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.