Medii vizuale de programare

Suport de Curs 3
Modul de lucru in MIT App Inventor

App Inventor a fost conceput pentru a dezvolta aplicaţii pentru telefoanele cu Android, folosind un
browser web şi un telefon conectat la Internet sau emulatorul (Fig. 1.42). Serverele App Inventor sto-
chează aplicațiile dezvoltate şi oferă, de asemenea, o formă a versiunii de management, prin urmărirea
modificării (change tracking). Practic, aceasta înseamnă că mediul de programare face uz de metoda
numită cloud computing - utilizatorul/programatorul folosește computerul său doar să se conecteze la
Internet şi la server şi utilizează serverul cu resursele lui partajate — spaţiu de stocare sau chiar puterea
de procesare.

Fig. 1.42 Mediul de dezvoltare App Inventor

Aplicaţiile pot fi construite în App Inventor astfel:

• în App Inventor Designer, sunt selectate componentele care vor alcătui aplicația
• în App Inventor Blocks Editor, blocurile din program sunt asamblate pentru a specifica modul în
care componentele trebuie să se comporte. Se pot asambla programele vizual, montând piesele
împreună, ca piesele unui puzzle.
care ulterior se poate instala. Dacă nu este disponibil un telefon cu Android, aplicațiile pot fi rulate cu
ajutorul emulatorului Android, un software care rulează pe calculator şi se comportă exact ca pe telefon.

Mediul de dezvoltare App Inventor poate rula pe Mac OS X, GNU/Linux, sistemele de operare Windows,
şi pe modele de telefon deja populate cu Android. Aplicațiile create cu App Inventor pot fi instalate pe
orice telefon Android. Înainte ca App Inventor să fie folosit, este necesară instalarea pachetului App
Inventor pentru computer.

Pentru a putea lucra cu App Inventor, sunt absolut necesare o conexiune la Internet și un cont Gmail. Cu
un browser web se navighează la pagina http://beta.appinventor.mit.edu/, unde se cere logarea cu con-
tul Gmail. Ceea ce se deschide este App Inventor Designer (Fig. 1.43 App Inventor Designer), unde se
creează proiectele și se adaugă componentele viitoarei aplicații. Pentru a stabili comportamentul aplica-
ției, este necesară pornirea editorului de blocuri (Blocks Editor), care se va deschide conform cu (Fig.
1.44), dacă este instalată, în prealabil, Java.

Selectarea componentelor pentru crearea de aplicații

Componentele App Inventor sunt situate pe partea stângă a ecranului Designer (Fig. 1.43 App Inventor
Designer), sub titlul Palette și sunt elementele de bază care pot fi utilizate pentru a face aplicații pentru
telefon cu Android. Unele componente sunt foarte simple, ca Label, care arată doar textul de pe ecran,
sau o componentă buton care se apasă pentru a iniţia o acţiune. Alte componente sunt mai elaborate: o
pânză de desen, care poate conţine imagini statice sau animații, un accelerometru (senzor pentru mişca-
re), care funcţionează ca un controler Wii şi detectează deplasarea sau scuturarea telefonului, compo-
nentele care fac sau trimit mesaje text, componente care rulează muzică şi video, componente care
obţin informaţii de la situri web etc.

Fig. 1.43 App Inventor Designer

Pentru a utiliza o componentă în aplicație, aceasta se selectează printr-un clic şi se trage pe mijlocul
Designer-ului. După adăugare, componenta va apărea și în lista de componente, pe partea dreaptă a
afișorului. Componentele au proprietăţi care pot fi ajustate pentru a schimba modul în care aceasta apa-
re în aplicație. Pentru a vizualiza şi modifica proprietăţile unei componente, ea trebuie selectată, mai
întâi, din listă.

Fig. 1.44 App Inventor Blocks Editor

Deschiderea editorului de blocuri și pornirea emulatorului

Designer-ul este unul dintre cele trei instrumente cheie folosite în crearea de aplicații. Al doilea este
editorul de blocuri, utilizat pentru a atribui comportamente componentelor, cum ar fi ceea ce ar trebui
să se întâmple atunci când utilizatorul apasă un buton. Editorul de blocuri (Fig. 1.44) se rulează într-o
fereastră separată. La deschiderea editorului de blocuri din fereastra Designer, un fișier care permite
computerului să comunice cu un dispozitiv conectat va fi descărcat şi ar trebui să se deschidă în mod
automat. Acest proces poate dura 30 de secunde sau mai mult. În cazul în care nu se deschide editorul,
atunci s-ar putea ca browser-ul să nu fie configurat pentru a rula aplicaţii descărcate în mod automat. În
acest caz, se deschide fişierul descărcat numit AppInventorForAndroidCodeblocks.jnlp.

În partea stângă a ferestrei editorului există trei categorii de seturi de blocuri (pallete): Built-in, My
Blocks (unde vor apărea blocurile adăugate în Designer) și Advanced. Când se acționează un set,
printr-un clic de maus, vor fi vizibile blocurile stocate în acea zonă. Categoria Built-in conține setul stan-
dard de blocuri necesare pentru orice aplicație (text, liste etc.). Categoria Advanced conține blocuri pen-
tru realizarea unor aplicații mai avansate, cu o logică mai complexă.

Designer-ul rulează în browser, iar editorul rulează folosind Java. Cu toate acestea, ele sunt conectate
astfel încât chiar dacă se închide fereastra editorului, toate informațiile din acesta sunt salvate în Desig-
ner. Când se face click pe butonul Open the Blocks Editor, un nou fișier .jnlp este descărcat pe calculator
și acesta va fi deschis. În acest fel, editorul de blocuri va conține toate blocurile care fuseseră deja pro-
gramate în pași anteriori.

Programatorul are posibilitatea să utilizeze un telefon sau tabletă cu Android sau un emulator. Dacă se
selectează emulator (Fig. 1.45), atunci încărcarea va dura câteva minute, timp în care nu se va întreprin-
de nicio acțiune. După pornirea emulatorului, acesta trebuie conectat la editor, prin selectarea lui din
lista disponibilă în colțul din dreapta sus. Mai departe, editorul va începe comunicarea cu emulatorul și
aplicația ar trebui să apară pe emulator. Se poate folosi mausul pentru a acționa butoanele de pe emula-
tor, dar dacă butonul nu a fost programat, atunci nimic nu se va întâmpla. Mergând mai departe, orice
modificări aduse aplicației în Designer şi în editorul de blocuri, acestea vor apărea pe emulator.

Fig. 1.45 Emulatorul App Inventor

Componente App Inventor

Fiecare componentă poate avea metode, proprietăți și evenimente. Majoritatea proprietăților pot fi
modificate de către aplicații, prin blocurile de citire și setare pe care le dețin, restul de proprietăți pu-
tând fi doar citite. În cele ce urmează sunt prezentate doar câteva categorii de componente disponibile
în App Inventor. Mai multe se pot afla la (24).

Componente de bază
Button — componentă pe care utilizatorul o apasă pentru a realiza o acțiune asociată. Butoanele detec-
tează când sunt apăsate și își pot modifica aspectul.

Proprietăți:

• BackgroundColor: culoare pentru fundalul butonului.

 • Enabled: dacă este setat, butonul poate fi apăsat.
• FontBold: dacă este setat, textul de pe buton este bold.
• FontItalic: dacă este setat, textul de pe buton este italic.
• FontSize: dimensiunea textului de pe buton.
• FontTypeface: tipul fontului de pe buton.
• Height: înălțimea butonului (dimensiunea y).
• Width: lățimea butonului (dimensiunea x).
• Image: imagine afișată pe buton.
• Text: text afișat pe buton.
• TextAlignment: stânga, centru, dreapta.
• TextColor: culoarea textului de pe buton.

Evenimente:

• Click(): utilizatorul a apăsat și a eliberat butonul.

• GotFocus(): butonul a devenit componenta activă
• LostFocus(): butonul nu mai este componenta activă.

CheckBox — componentă care detectează acționarea de către utilizator și își modifică starea booleană.

Proprietăți:

• BackgroundColor: culoarea fundalului.

• Checked: Adevărat dacă este marcată și fals altfel.
• Enabled: dacă este setat, componenta poate fi acționată.
• Height: înălțimea casetei (dimensiunea y).
• Width: lățimea casetei (dimensiunea x).
• Text: text afișat pe casetă.
• TextColor: culoarea textului din casetă.
• Visible: dacă este setat, componenta este vizibilă

Evenimente:

• Click(): utilizatorul a apăsat și a eliberat caseta.

• GotFocus(): caseta a devenit componenta activă
• LostFocus(): caseta nu mai este componenta activă.

Label — componentă pentru afișare de text specificat de proprietatea Text.

Proprietăți:

• BackgroundColor: culoare pentru fundalul etichetei.

• FontBold: dacă este setat, textul din etichetă este bold.
• FontItalic: dacă este setat, textul din etichetă este italic.
 • FontSize: dimensiunea textului din etichetă.
• FontTypeface: tipul fontului textului din etichetă.
• Height: înălțimea etichetei (dimensiunea y).
• Width: lățimea etichetei (dimensiunea x).
• Text: text afișat pe etichetă.
• TextAlignment: stânga, centru, dreapta.
• TextColor: culoarea textului din etichetă.
• Visible: dacă este setat, componenta este vizibilă.

ListPicker — componentă folosită pentru ca utilizatorul să poată selecta un element dintr-o listă care
apare la acționarea componentei. Elementele listei pot fi specificate în proprietatea ElementsFromString
sub forma (selecție1, selectie2, selectie3), sau dintr-o listă externă prin setarea proprietății Elements la o
listă List în editorul de blocuri.

Proprietăți:

• Selection: elementul selectat din listă.

• Items: listă de elemente separate prin virgulă.
• ElementsFromString: folosirea listei de elemente.
• BackgroundColor: culoare pentru fundalul listei.
• FontBold: dacă este setat, textul din listă este bold.
• FontItalic: dacă este setat, textul din listă este italic.
• FontSize: dimensiunea textului din listă.
• FontTypeface: tipul fontului textului din listă.
• Height: înălțimea listei (dimensiunea y).
• Width: lățimea listei (dimensiunea x).
• Text: text afișat în listă.
• TextAlignment: stânga, centru, dreapta.
• TextColor: culoarea textului din listă.
• Visible: dacă este setat, componenta este vizibilă.

Evenimente:

• AfterPicking(): Utilizatorul a selectat un element din listă.

• BeforePicking(): Utilizatorul a acționat lista, dar nu a selectat nimic din ea.
• GotFocus(): lista a devenit componenta activă
• LostFocus(): lista nu mai este componenta activă.

Screen — nu apare în paletă ca alte componente, dar apare automat odată cu proiectul. Fiecare proiect
pornește cu un ecran, numit Screen1. Acest nume nu poate fi schimbat. Ulterior se pot adăuga și alte
ecrane.

Proprietăți
 • AlignHorizontal: un număr care codifică alinierea pe orizontală a conținutului ecranului. Valorile
pot fi 1= aliniere la stânga, 2=centrare, 3=aliniere la dreapta.
• AlignVertical: un număr care codifică alinierea pe verticală a conținutului ecranului. Valorile pot
fi 1= aliniere sus, 2=centrare, 3=aliniere jos.
• BackgroundColor: culoarea de fundal pentru ecran.
• BackgroundImage: o imagine care se încarcă pe fundalul a ecranului.
• Height: înălţimea ecranului (dimensiunea y).
• Icon: o imagine care poate fi utilizată ca pictogramă pentru aplicația instalată pe telefon. Aceas-
ta ar trebui să fie PNG sau JPG; 48x48 este o dimensiune bună. În cazul folosirii altor imagini de-
cât PNG sau JPG, de exemplu fişiere ICO, App Inventor nu va putea să împacheteze aplicația.
• ScreenOrientation: orientarea ecranului. Valorile posibile sunt: unspecified, landscape, portrait,
sensor, user.
• Scrollable: opțiunea este specificată printr-un checkbox în designer. Când este selectat, va exista
o bară de derulare verticală pe ecran şi înălţimea aplicației poate depăşi înălţimea fizică a dispo-
zitivului. Când nu este bifat, înălţimea aplicației va fi constrânsă la înălţimea dispozitivului.
• Title: titlu pentru ecran (text). Aceasta va apărea în partea stângă sus a telefonului atunci când
aplicaţia rulează. O alegere normală pentru titlu este chiar titlul aplicației, dar ar putea fi altceva,
sau poate fi chiar schimbat în timp ce aplicație se execută.
• Width: lăţimea ecranului (dimensiunea x).

Evenimente:

• BackPressed(): apăsarea butonului de pe spatele echipamentului.

• Initialize(): semnalat atunci când aplicaţia începe. Acesta poate fi utilizat pentru stabilirea valori-
lor iniţiale şi efectuarea altor operaţiuni de configurare.
• ErrorOccurred(): semnalat atunci când apare o eroare. Este utilizat în prezent pentru un set limi-
tat de erori.
• OtherScreenClosed(text otherScreenName, any result): închiderea unui alt ecran și returnarea
controlului ecranului curent.
• ScreenOrientationChanged(): modificarea orientării ecranului

Metode:

• CloseScreenAnimation(text animType): pregătește animația pentru închiderea ecranului curent

și întoarcerea la ecranul anterior. Opțiuni valide sunt: default, fade, zoom, slidehorizontal,
slidevertical și none.
• OpenScreenAnimation(text animType): pregătește animația pentru trecerea la alt ecran. Opțiuni
valide sunt: default, fade, zoom, slidehorizontal, slidevertical și none.

TextBox — componentă pentru introducerea de text. Se poate stabili o valoare inițială (în proprietatea
Text), sau se poate oferi o sugestie de completare (în proprietatea Hint). Textul introdus poate avea una
sau mai multe rânduri (proprietatea MultiLine). Dacă este permisă o singură linie de text, la completarea
ei, tastatura se va închide automat la semnalizarea utilizatorului (apăsarea tastei Done). De regulă, case-
tele de text sunt folosite în combinație cu butoane, astfel încât utilizatorul să acționeze un buton când a
finalizat introducerea textului.

Proprietăți:

• BackgroundColor: culoare pentru casetă.

• Enabled: dacă este setat, se poate introduce text în casetă.
• FontBold: dacă este setat, textul din casetă este bold.
• FontItalic: dacă este setat, textul din casetă este italic.
• FontSize: dimensiunea textului din casetă.
• FontTypeface: tipul fontului testului din casetă.
• Height: înălțimea casetei (dimensiunea y).
• Width: lățimea casetei (dimensiunea x).
• Text: text afișat în casetă.
• TextAlignment: stânga, centru, dreapta.
• TextColor: culoarea textului din casetă.
• Visible: dacă este setat, componenta este vizibilă
• Hint: text pentru sugestionarea utilizatorului. Vizibil doar dacă Text nu conține nimic.
• MultiLine: dacă este adevărat, atunci este permisă introducerea mai multor linii.
• NumbersOnly: dacă este adevărat, atunci caseta acceptă ca intrări doar valori numerice

Evenimente:

• GotFocus(): caseta a devenit componenta activă.

• LostFocus(): caseta nu mai este componenta activă.

Metode:

• HideKeyboard(): ascunde tastatura. Este necesară pentru mai multe linii. La o singură linie se
apasă tasta Done.

TinyDB se face pentru a stoca datele care vor fi disponibile de fiecare dată când aplicaţia se execută.
TinyDB este o componentă non-vizibilă (adică utilizatorul nu o vede pe ecranul aplicației).

Aplicațiile create cu App Inventor sunt iniţializate de fiecare dată când rulează. Dacă o aplicaţie stabileş-
te valoarea unei variabile şi utilizatorul închide apoi aplicația, valoarea acelei variabile nu va fi memorată
data viitoare când aplicația rulează. TinyDB este un stocator de date persistent pentru aplicație, adică
datele stocate vor fi disponibile de fiecare dată când aplicaţia se execută. Un exemplu ar putea fi un joc
care a salvat scorul cel mai mare, şi refăcut de fiecare dată când jocul este jucat.

Instanțele de date sunt stocate în tag-uri. Ulterior, se poate prelua un element care a fost stocat într-un
anumit tag. Dacă nu există nici o valoare depozitată sub într-un tag, atunci valoarea returnată este textul
gol. Prin urmare, pentru a vedea dacă o etichetă are o valoare stocată sub ea, se testează dacă valoarea
returnată este egală cu text gol (de exemplu, o casetă text cu nici un text completat).
Există doar o singură stocare de date pentru o aplicație. Dacă e nevoie de mai multe componente
TinyDB, ele vor folosi aceleaşi date. De asemenea, fiecare aplicație are propriul loc de stocare. Nu se
poate utiliza TinyDB pentru a muta date între două aplicaţii diferite de pe telefon. Pentru a şterge din
baza de date a unei aplicaţii, de pe telefon din meniul Settings→Applications→ Manage applications, se
alege aplicaţia şi se apasă Clear data.

Datele din TinyDB sunt persistente numai după împachetarea şi descărcarea aplicației. Dacă aplicația
este în curs de dezvoltare și telefonul este conectat la PC şi se repornește aplicaţia App Inventor, sau
dacă se deconectează şi apoi reconectează telefonul, baza de date va reîncepe în stare proaspătă
(refresh). Acesta este cazul în care aplicația nu este doar oprită şi repornită, ci este ștearsă din telefon şi
apoi reîncărcată.

Proprietăți: nu are

Evenimente: nu are

Metode:

• StoreValue(text tag, valueToStore): salvează valoarea în tag, care trebuie să fie un text. Valoarea
poate fi un text sau o listă.
• GetValue(text tag): citește valoare salvată în tag. Dacă nu e nimic, returnează textul vid.

Componente de tip senzor

AccelerometerSensor — Această componentă detectează accelerometrul dispozitivului Android care, la
rândul lui, detectează scuturarea telefonului și măsoară accelerația în 3 dimensiuni. Dacă telefonul este
așezat pe o suprafață plană, pe spate, accelerația Z este 9.8m/s2. Componenta produce trei valori:

• XAccel: pozitiv când dispozitivul este înclinat spre dreapta (adică partea stângă este ridicată) și
negativ când este înclinat spre stânga.
• YAccel: pozitiv când partea de jos este ridicată și negativ când partea de sus este ridicată.
• ZAccel: pozitiv când ecranul este orientat în sus și negativ când ecranul este orientat în jos.

Proprietăți

• Available: dacă există accelerometru.

• Enabled: activarea accelerometrului.
• XAccel: accelerație pe dimensiunea X.
• YAccel: accelerație pe dimensiunea Y.
• ZAccel: accelerație pe dimensiunea Z.
• MinimumInterval: intervalul de timp minim între scuturarea telefonului.

Evenimente:

• AccelerationChanged(number xAccel, number yAccel, number zAccel): apelat când se modifică

accelerația.
 • Shaking(): apelat repetitiv când echipamentul este scuturat.

Metode:

Nu are.

LocationSensor — Această componentă oferă locaţia dispozitivului Android, folosind GPS-ul dacă este
disponibil şi o metodă alternativă altfel, cum ar fi turnuri celulare sau reţele fără fir cunoscute.
LocationSensor este o componentă non-vizibilă care furnizează informaţii de locație, inclusiv longitudine,
latitudine, altitudine (dacă este acceptată de aparat) şi adresa. Această componentă poate oferi, de
asemenea, geocodare, de conversie a unei adrese date (nu neapărat pe cea curentă) la o latitudine şi o
longitudine. Pentru a funcţiona, componenta trebuie să aibă proprietatea Enabled setată pe true, iar
dispozitivul să aibă activată funcția de detectare a locației.

Proprietăți:

• Accuracy: indică nivelul de exactitate al dispozitivului Android, în metri.

• Altitude: altitudinea dispozitivului Android, dacă este disponibilă.
• AvailableProviders: lista furnizorilor de servicii disponibile, cum ar fi GPS sau de reţea
• CurrentAddress: adresa fizică a dispozitivului Android.
• Enabled: dacă este setat, informaţiile de localizare sunt disponibile.
• HasAccuracy: dacă este adevărat, dispozitivul Android poate raporta nivelul de precizie.
• HasAltitude: dacă este adevărat, dispozitiv Android pot raporta altitudinea sa.
• HasLongitudeLatitude: dacă dispozitivul Android poate raporta longitudinea şi latitudinea.
• Latitude: latitudinea dispozitivului Android.
• Longitude: longitudinea dispozitivului Android.
• ProviderLocked: dispozitivul nu va schimba furnizorul de servicii.
• ProviderName: furnizorul de servicii actual

Evenimente:

• LocationChanged (number latitude, number longitude, number altitude): apelat atunci când dis-
pozitivul Android găsește o locaţie nouă.
• StatusChanged(text provider, text status): apelat atunci când starea furnizorului de servicii se
modifică.

Metode:

• LatitudeFromAddress (text locationName): determină latitudinea adresei indicate.

• LongitudeFromAddress (text locationName): determină longitudinea adresei indicate.

OrientationSensor — este o componentă ce se folosește pentru a determina spaţial orientarea telefonu-

lui. Acesta este o componentă non-vizibilă care raportează următoarele trei valori, în grade:
 • Roll: 0° atunci când dispozitivul este drept, crescând la 90° când dispozitivul este înclinat cu par-
tea de sus spre partea stângă şi scăzând la -90° atunci când dispozitivul este înclinat cu partea de
sus spre partea dreaptă.
• Pitch: 0° atunci când dispozitivul este drept, crescând la 90° când dispozitivul este înclinat astfel
încât vârful său este îndreptat în jos, creşterea în continuare la 180° când acesta devine întors
invers. În mod similar, când aparatul este înclinat astfel încât partea sa de jos este îndreptată în
jos, scade la -90°, apoi până la -180° pe măsură ce este răsucit tot drumul peste cap.
• Azimuth: 0° atunci când partea de sus a aparatului este îndreptată spre nord, la 90° atunci când
este îndreptat spre est, la 180° atunci când este îndreptat spre sud, la 270° de grade atunci când
este îndreptat spre vest, etc

Aceste măsurători presupun că aparatul în sine nu este în mişcare.

Proprietăți:

• Available: arată dacă senzorul de orientare este prezent pe dispozitivul Android.

• Enabled: dacă este setat, senzorul de orientare este activat.
• Azimuth: returnează unghiul de deviaţie al dispozitivului.
• Pitch: returnează unghiul de întoarcere peste cap al dispozitivului.
• Roll: returnează unghiul de rotire al dispozitivului.
• Magnitude: returnează un număr între 0 şi 1, care indică gradul de înclinare al dispozitivului.
Mărimea dă magnitudinea forţei pe care ar simţi-o o bilă pe suprafaţa de rulare a dispozitivului.
• Angle: returnează unghiul care spune direcţia în care dispozitivul este îndreptat. Adică, se spune
direcţia forţei pe care ar simţi-o o bilă pe suprafaţa de rulare a dispozitivului.

Evenimente

• OrientationChanged(number yaw, number pitch, number roll): numit atunci când orientarea s-a
schimbat.

Blocuri din App Inventor

În cele ce urmează sunt prezentate principalele tipuri de blocuri care pot fi utilizate pentru realizarea
unei aplicații cu App Inventor. Materialul complet poate fi găsit la (24).

Blocuri de definire
procedure (procedureWithResult) — grupează o secvență de blocuri care, ulterior, poate fi utilizată în
mod repetat, ca apel de procedură. La crearea unei proceduri, App Inventor creează în mod automat un
bloc de apel (call) care va fi plasat în zona My Definitions. Acest bloc de apel poate fi folosit pentru a
invoca procedura. La crearea unui nou bloc de acest tip, App Inventor alege un nume care poate fi, ulte-
rior, modificat. Acest nume, la nivel de aplicație, trebuie să fie unic. Fig. 1.46 prezintă modul de afișare al
acestor blocuri.
 a)
b)
Fig. 1.46 Blocuri de proceduri, fără a) și cu b) returnare de rezultat

name — creează un argument cu nume care poate fi utilizat la apelul unei proceduri. Argumentul pro-
cedurii se specifică prin plasarea unui astfel de bloc la intrarea arg a procedurii. Numărul de argumente
nu este limitat, la completarea unuia apărând, de fiecare dată, un port nou. La specificarea unui argu-
ment, App Inventor va asocia acest argument cu blocul call generat pentru procedură: sloturile pentru
argumente ale blocului de apel vor vizualiza numele argumentelor. Pentru fiecare bloc name definit, App
Inventor creează un bloc value asociat și îl plasează în zona My Definitions. Aceste blocuri vor fi folosite
pentru referirea la valori la apelul procedurilor.

variable — creează o valoare care poate fi modificată pe parcursul rulării aplicației și dă un nume pentru
această valoare. Variabilele sunt globale și pot fi folosite oriunde în aceeași aplicație. Numele variabilei
trebuie să fie unic. Fig. 1.47 prezintă modul de afișare a blocurilor name și variable.

b)
Fig. 1.47 Bloc de tip nume a) și bloc de tip variabilă b)

Handler de evenimente
Programele App Inventor descriu cum ar trebui se comporte telefonul în anumite circumstanțe: un bu-
ton a fost apăsat, telefonul a fost scuturat etc. Aceste acțiuni specifice sunt descrise de un handler de
evenimente care începe cu cuvântul when. Majoritatea handler-elor au culoare verde.

Fig. 1.48 Handler de evenimente

Evident, când un eveniment apare, handler-ul asociat va fi executat.

 Comenzi și expresii
Când este executat un handler de evenimente, de fapt se rulează o secvență de comenzi din corpul său.
O comandă este un bloc care specifică o acțiune care va fi realizată pe telefon. Majoritatea comenzilor
sunt mov sau albastre.

Fig. 1.49 Exemplu de comenzi

Anumite comenzi au nevoie de una sau mai multe valori de intrare (cunoscute și sub numele de parame-
trii sau argumente) pentru a-și putea realiza acțiunea. Spre exemplu (Fig. 1.49), Sound1.Vibrate are ne-
voie de un timp de vibrare, în milisecunde. Nevoia unui parametrul este marcată de socket-ul din partea
dreaptă a comenzii.

Socket-ul poate primi valori și de la o expresie, adică blocuri cu valori. Blocurile de expresii au un capăt
de prindere în partea stângă, prin care își transmit valoarea socket-ului. Pot fi construite expresii foarte
complexe folosind expresii mai simple, prin compunere orizontală (Fig. 1.50).

Fig. 1.50 Expresii

Forma comenzilor este astfel realizată, încât ele se pot compune pe verticală într-o stivă de comenzi. De
fapt, aceasta este o comandă complexă compusă din comenzi mai simple.

Fig. 1.51 Comenzi compuse

Dacă o astfel de stivă este plasată în handler-ul unui eveniment, comenzile vor fi executate de sus în jos.
Spre exemplu, în Fig. 1.51 telefonul va emite un sunet, apoi va vibra, apoi eticheta își va schimba culoa-
rea și va afișa textul specificat. Dat fiind faptul că execuția are lor foarte repede, toate acțiunile au loc
aproape simultan.

Aranjarea elementelor pe ecran

Implicit, componentele sunt aranjate pe verticală. Dacă se dorește modificarea acestui mod de aranjare,
atunci se poate folosi una dintre componentele HorizontalArrangement, VerticalArrangement sau
TabletArrangement din secțiunea ScreenArrangement.

Manipularea stării componentelor

Fiecare componentă este caracterizată de numeroase proprietăți. Valorile curente ale acestor proprie-
tăți reprezintă starea componentei. Un program App Inventor poate determina și schimba starea orică-
rei componente prin metode prin blocuri specifice de tip getter și setter (exemplu pentru etichetă).

Fig. 1.52 Getter-e și setter-e pentru etichetă

Evenimente ale butoanelor

Cel mai frecvent eveniment legat de butoane este Click. Alte evenimente asociate sunt LongClick,
GetFocus și LostFocus. Majoritatea componentelor primesc focusul când sunt atinse și îl pierd când nu
mai sunt atinse. Butonul este special pentru că, atunci când este atins, lansează evenimentul Click.

Comentarii
O parte importantă din munca de programare o constituie realizarea unei documentații. App Inventor
permite încorporarea de comentarii chiar în cod care explică diverse elemente și aspecte ale codului.
Adăugarea unui comentariu pentru blocuri se face cu clic dreapta pe bloc (Fig. 1.53).

Fig. 1.53 Adăugarea de comentarii