Hola món!

En aquest apartat farem una primera app, el clàssic "Hola món". Anirem avançant en aquesta app per anar provant diferents opcions que ens ofereix l'App Inventor.



Més concretament es pretén donar resposta a les preguntes següents:


  • Com podem incorporar diferents components a la nostra app?
  • Com podem programar el comportament dels components?
  • Com podem incorporar valors aleatoris?


Per començar a fer la nostra app necessitarem un botó, de manera que quan el premem ens aparegui el missatge "Hola món". Necessitem, doncs, dos components diferents: un botó (Button) i una etiqueta (Label).


La diferència entre una etiqueta (Label) i una caixa de text (TextBox) és que el contingut de la caixa de text es pot modificar en mode execució, mentre que en l'etiqueta no es pot.


El primer que cal fer és afegir els dos components, tot arrossegant-los des del llistat de components, de manera que els veurem així en el mode disseny:



Ara canviem el text dels dos components des de les propietats, de manera que en el botó posi "Prem!" i l'etiqueta estigui en blanc.


Tot seguit anem al mode programació. El que volem que passi és que quan es premi el botó aparegui escrit el missatge, així doncs hem d'escriure aquest codi:



El terme set l'utilitzem per assignar un valor a un element.


El valor de la mida del text el trobarem a Built in - Math, el text a posar el trobarem a Built in - Text i el color del text a Built in - Colors.


El que veurem, doncs, al nostre dispositiu mòbil executant l'app serà això:



Ens presentem

Anem ara a ampliar aquest programa de manera que primer ens demani com ens diem, i que després ens digui hola amb el nostre nom.


El que hem de fer, doncs, és modificar el disseny de la pantalla. Quan ho fem veiem que no podem posar dos components, directament, un al costat de l'altre. Per fer-ho cal que al llistat de components de l'esquerra anem a la categoria Layout i arrosseguem el component HorizontalArrangement:



Així doncs, el disseny de l'app queda d'aquesta manera:



Abans de continuar amb la programació de la nostra app, és un bon moment per pensar si ens són útils els noms que l'App Inventor dóna per defecte als nous components que es van creant. Òbviament no ens diuen res, així doncs cal que els components de la nostra app tinguin nom que ens siguin significatius.


Una bona idea és donar noms als components que incloguin el tipus de component, així seran més fàcilment identificables.



Finalment, modifiquem la programació de l'app de la següent forma, tenint en compte com hem de fer per unir més de dos fragments de text:




Posem imatges i colors

Anem a donar-li ara una mica de color. Comencem pel fons de la pantalla. Per fer-ho només hem d'anar al component Screen1, seleccionar el BackgroundColor i triar el color que vulguem:



També podem posar una imatge de fons de pantalla. Per fer-ho hem de seleccionar la propietat BackgroundImage de l'Screen1 i pujar-ne una del nostre ordinador:



Una forma alternativa de pujar la imatge a la nostra app és mitjançant el botó Upload file que hi ha la zona Media; des d'on, a més a més, podem pujar-hi altres arxius multimèdia (imatge, so…) i veure tots els que tenim disponibles a la nostra app:



Aquestes dues propietats també les podem modificar en temps d'execució amb les instruccions següents:



Colors a l'atzar

Una cosa més que podem fer amb el text és que vagi canviant de color cada cop que premem el botó. Per fer-ho hem de construir el color dinàmicament a partir dels seus components RGB. A més a més podem fer que els valors dels tres components del color es generin de forma aleatòria. Un cop fet tot, la nostra app queda de la següent forma: