2. Android alapok

2.1. A Blokk-lista

Miután megvagyunk a felhasználói felület kialakításával, meg kelll írnuk a program működését meghatározó kódot a környezet Blokk nézetében. Az AppInventor az esemény-vezérelt programozást támogatja. A mobil környezetben az esemény lehet egy gomb lenyomása, szöveg begépelése egy mezőbe, egy bejövő üzenet, stb., Azt kell el kell döntenünk, hogy milyen eseményekre hogyan kell az alkalmazásunknak reagálnia és ennek megfelelően "megírni" a programkódot. A programkódot blokkokból állítjuk össze. Egyrészt vannak beépített általános célú blokkok, amelyek "fiókokba" vannak rendezve a rendeltetési céljuk alapján. A másik blokk-csoportot az alkalmazáshoz hozáadott komponensekhez tartozó blokkok alkotják, amelyek képernyő szerint csoportosítva találhatók meg a blokk-listában. Ha rákattinutunk egy komponensre, megjelennek azok a blokkok, amelyket az adot komponens kontextusában használhatunk: 

  • a komponens által támogatott események (barna színben)

  • a komponens tulajdonságait lekérdező blokkok (világoszöld színben)

  • A komponensen értelmezett műveletek (sötétzöld színben).

 

A blokkok illeszkednek egymáshoz, a program megírása tulajdonképpen a blokkok "összelegózását" jelenti. Az így keletketett programot akár értelmes angol mondatokként is fel lehet olvasni.

 

2.2. A Színkeverő alkalmazás

 
 

2.2.1. feladat
 

Készítsünk egy alkalmazást, amely három csúszkával rendelkezik, amelyek az alkalmazás háttérszínének piros, zöld és kék komponenseit állítja be. Ahogy a csúszkák mozognak, dinamikusan változzon a háttér színe és jelenjen meg a a színkomponensek értéke a csúszkák állásának függvényében. 

img008 - 2.2 - 1.png
 
  1. Első lépésben tervezzük meg az alkalmazás képernyőjét. Adjunk hozzá a programhoz három Slider komponenst, állítsuk be szélességeket, valamint a MinValue és MaxValue értékeit. 

  2. Adjunk a programhoz három Label komponenst, ezek muntatják majd az R, G, B értékeit.

  3. Igazítsuk el egymáshoz képest a kompoenseket.

  4. Írjuk meg a Slider komponensek WhenPositionChanged eseménykezelőit, használjuk:

    • a Screen komponens SetBackgroundColor műveletét

    • MakeColor általános célú blokkot

    • Label komponens SetText műveletét a Text.join blokkal együtt

    • Slider komponens ThumbPosition tulajdonságát kiolvasó blokkot.

  5. Oldjuk meg a Math.round blokkal, hogy az RGB értékek egész számként jelenjenek meg.

2.3. Képek használata

Az alkalmazásunkban több helyen is használhatunk képeket, ezeket előzetesen fel kell tölteni a Média szekcióba. Az így feltöltött alkalmazások közül később kiválaszthatjuk, hogy melyikel akarunk dolgozni. A feltöltött képet felhasználhatjuk a képernyőnk háttereként (Screen.BackgroundImage tulajdonság). A kép minden esetben teljesen ki fogja tölteni a képernyőt, ha kell, át lesz méretezve, tehát érdemes olyan képet feltölteni, amely nem érzékeny az átméretezésre. Programkódból a SetScreenBackgroundImage blokkot felhasználva állíthatjuk be a háttérképet.

download.png

2.3.1. feladat
 

Készítsünk egy alkalmazást, keressünk hozzá három hátteret és töltsük fel a képeket. Adjunk hozzá az alkalmazáshoz 3 nyomógombot, amelyre kattintva az annak megfelelő háttérkép kerül beállításra. Mi történik, ha olyan képre hivatkozunk, amelyet nem töltöttünk fel?

img009 - 2.3 - 1.png
download.png
 
 

Képeket használhatunk Image komponensekben is. Ennek az az előnye a háttérképek használatával szemben, hogy méretezni és pozicionálni tudjuk a komponenst (és így a képet) a képernyőn. Fontosabb tulajdonságok: Height, Width, Picture, ScalePictureToFit.

2.3.2. feladat
 

Keressétek ki a négy dámát ábrázoló kártya képét az interneten és egy új alkalmazásban jelenítsétek meg a képernyő négy sarkában.

img009 - 2.3 - 2.png

Tipp: a képek pozicionálásához kombináld a HorizontalArrangement és VerticalArrangement layout-ok használatát vagy használd a

TableArrangement layout-ot.

download.png
 

Az Image komponensnek nincs semmilyen eseménye, amire reagálni lehetne. Ha viszont szeretnénk ha a képre kattintva történne valami, akkor a Button komponensre rakott (az Image tulajdonság felhasználásával) képet használhatunk. 

2.3.3. feladat
 

Keressétek ki egy kártyalap képét és egy kártya hátlapjának képét. Ha a kártya képére kattuntunk, jelenjen meg a hátlap. Bónusz, ha valaki azt is le tudja programozni, hogy a hátlapra kattintva ismét a kártya képe jelenjen meg.

img011 - 2.3 - 3.png
download.png
 

2.3.4. feladat
 

Jeleníts meg négy Button komponesben négy ország zászlaját. Ha a zászlók valamelyikére kattintunk, jelenjen meg annak az országnak a neve.

img012 - 2.3 - 4.png

Tipp: a nyomógombok pozicionálásához használd a TableArrangement layout-ot..

download.png
 
 

2.4. Figyelmeztetések és hibák

A blokkokból felépített programunkban előfordulhatnak különféle problémák, amelyek következtében a programunk egyáltalán nem (error), vagy helytelenül fog működni (warning). Alaphelyzetben a figyelmeztetéseknek csak a száma jelenik meg egy sárga háromszög mellett, a Show Warnings-ra kattintve a hibás vagy hiányos kód helyét szintén sárga háromszögekkel jelöli az AppInventor. Egy ilyen háromszöge fölé húzva az egeret megjelenik a figyelmeztetést kiváltó oknak a leírása.

img013 - 2.4 - 1.png

 

A figyelmeztetésekkel ellentétben a hibák helyét mindig azonnal megjelöli az AppInventor piros háromszögekkel. Ahogy a figyelmeztetések esetében is, a háromszög felé húzva az egeret megjelenik a konkrét hibaüzenet. Az alábbi példában ha lemásolunk egy eseménykezelő blokkot, akkor hibajelzést kapunk, mivel egy eseményhez nem tartozhat több kezelő kód.

img014 - 2.4 - 2.png

Ahhoz, hogy az elvárásoknak megfelelően működjön a programunk, az összes hibaüzenet és figyelmeztetés okát ki kell vizsgálnunk és a kódot úgy kell kijavítanunk, hogy azok megszűnjenek.

 

Természetesen ettől még maradhatnak logikai hibák a programunkban, az AppInventor csak a "nyelvi" hibákat képes kiszűrni.

2.5. Hangfájlok lejátszása

AppInventor-ban hangfájlok lejátszására elsősorban a Media csoportban található Sound komponenst használjuk. Ez a komponens nem vizuális komponens, azaz nem jelenik meg a képernyőn, a funkcióját csak kódból használhatjuk. A Source tulajdonságban adhatjuk meg azt a hangfájlt, amelyet le szeretnénk játszani. A hangfájlt a használat előtt fel kell töltenünk az AppInventor-ba ugyanúgy, ahogy a képeket is. A Sound komponens a következő műveletekkel rendelkezik: 

  • Play - hangfájl lejátszásának elindítása

  • Pause - szünet

  • Resume - folytatás

  • Stop - leállítás

  • Vibrate - rezgő funkció megadott ideig

A megszólaltatni kívánt hangállományt természetesen előre el kell készteni, vagy beszerezni. Egy nagyon hasznos forrás különféle zörejeket, zajokat és egyéb hangokat tartalmazó fájlok letöltéséhez a freesound.org oldal.

 

2.5.1. feladat
 

Módosítsd úgy a 2.3.3-as feladatban elkészített alkalmazást, hogy egy kártyalap súrlódására emlékeztető hanghatás kísérje a kártyalap megforulását.

download.png
 

2.5.2. feladat
 

Módosítsd úgy a 2.3.4-es feladatban megírt alkalmazást, hogy egy 'klikk' hanghatás és 50 milliszekundomos vibrálás kísérje a zászló kiválasztását.

download.png
 
 

2.5.3. feladat
 

Készítsünk egy primitív zongora alkalmazást, amelynek az 5 billentyűje a C4-G4 hangokat szólaltatja meg azok lenyomáskor. Az 5 hangállományra keressünk rá az interneten, töltsük azokat le a saját gépre, majd adjuk hozzá a projektünkhöz.

download.png
img015 - 2.5 - 1.png

2.5.4. feladat
 

Készits egy programot, amely 4 különböző állat képét jeleníti meg. Amikor egy képre kattintunk, szólaljon meg annak az állatnak a hangja..

 

Sound komponens mellett a Player komponens is használható hangállományok lejátszására. A Player komponens hosszabb hangállományok lejátszására alkalmasabb. A Volume tulajdonsága használható a kívánt hangerő beállításához, a Loop tulajdonság beállítása pedig végtelenített lejátszást tesz lehetővé. Ellentétben a Sound komponensel, nem rendelkezik Resume funkcióval.

 

2.6. Egyéb programozást segítő funkciók

  • Megjegyzések használata

  • Kódblokk duplikálása

  • Kódblokk összecsukása és kinyitása

  • A hátizsák (backpack) használata

  • Súgó használata