12. Aktivita 8 - aplikace s více obrazovkami a správci rozložení

Téma

Tematický celek

Tvroba aplikace s více obrazovkami a kombinovaní správců rozložení.

Motivační rámec

Získání větší kontroly nad vzhledem a organizací aplikace.

Počet žáků

5-15

Věk žáků

10+

Pomůcky

PC odpovídajících parametrů,
webový prohlížeč Mozilla Firefox nebo Google Chrome,
zařízení s Androidem připojené k internetu,
případně emulátor zařízení s Androidem,
účet pro Google služby.

Stručný popis aktivity

Přihlášení k prostředí App Inventoru http://appinventor.mit.edu/
Prohloubení znalostí o chování a využití správců rozložení "layout managerů". Teoretické a praktické seznámení s konceptem více obrazovek "screens" v rámci jedné aplikace.

Vhodné místo

Počítačová učebna

Cíle aktivity

Studenti si vyzkouší kombinaci layout managerů. Studenti se seznámí s konceptem obrazovek a vyzkouší si vyrobit vlastní aplikaci s více obrazovkami.

Předchozí znalosti

Aktivita navazuje na předchozí lekci tohoto kurzu.

Časový plán

Fáze činnosti s přístrojem

Metody a formy, motivace

5-25m

Seznámení s tématem lekce. Volitelně předvedení a popis ukázkové aplikace. Popis jednotlivých správců rozložení, jejich kombinování a ovlivnění jejich chování pomocí parametrů, zarovnání, výška a šířka.

Seznámení s konceptem obrazovek. Seznámení s omezeními při sdílení kódu a proměnných mezi obrazovkami.

Frontální výklad, ukázka.

25-50m

 Prohlídka ukázkových aplikací. Modifikace ukázkových aplikací, případně využití znalosti seznamů při tvorbě vlastní aplikace.

Samostatná a skupinová práce s využitím získaných znalostí, infromací v tomto kurzu a externích zdrojů.

15-30m

Prezentace prací žáků, sdílení poznatků, diskuze.
Motivace žáků k domácí práci.

Prezentace prací a diskuze

Hodnocení

Zpětná vazba je okamžitá. Student reflektuje vzdělávací cíle, svůj postup a dosažené výsledky. Student průběžně srovnává vlastní výsledky s výsledky ostatních studentů.

Návaznosti

Na tuto aktivitu navazují následující aktivity, které prohlubují a kombinují znalosti prostředí App Inventoru.

Poznámky

Pro případ výpadku připojení k internetu nebo technických problémů s App Inventorem doporučuji připravit záložní aktivitu, založenou na podobných principech blokového programování, například offline aplikaci MIT Scratch, BYOB nebo některou z variant programovacích prostředí LOGO.

Informace ke správcům rozložení.

Informace k blokům kódu řídících screen.

Video-tutoriál k tvorbě

. 

Video-tutoriál k tvorbě více "virtuálních" obrazovek v jedné aplikaci pomocí skrývání bloků správce rozložení. 

Informace ke správcům rozložení a obrazovkám

Správci rozložení "layout managers" pomáhají uspořádat objekty grafického prostředí "widgety". AI2 nabízí 3 správce rozložení, verikálního, horizontálního a tabulkového. Tito správci mohou být zanořeni do sebe. Důležité pro určení chování widgetů jsou i další parametry, jako je určení šířky / výšky, případně vyplnění celého prostoru nadřazené komponenty, vertikální a horizontální zarovnání.

Obrazovky "Screens" jsou významný koncept práce s aplikací, v prostředí Androidu velmi rozšířený. Na screen lze v AI2 pohlížet jako na samostatnou aplikaci. V editoru má svůj vlastní design a má svůj vlastní kód. S jinými obrazovkami ve stejné aplikaci nesdílí ani proměnné. Na práci s obrazovkami je třeba si v AI2 trochu zvyknout. Při práci s návrhářem se vám v zařízení nebo emulátoru přepínají obrazovky podle toho, který máte v AI2 vybraný. Ne vždy je reakce na přepnutí rychlá, nezřídka k ní vůbec nedojde. Bohudík výrazně lepší odezva a funkčnost je při použití vyexportované .apk.

Názvy obrazovek nemohou být přejmenovány, proto se vyplatí vhodnému názvu věnovat patřičnou pozornost. Screen1 nemůže být smazán. 

Aplikace pro ukázku práce s vnořenými správci rozložení a s více obrazovkami

Práce se správci rozložení a s obrazovkami je ukázána na aplikaci, která zabezpečuje přístup k "tajnému" obsahu. Aplikace generuje klávesnici s náhodným zamícháním kláves, aby nebylo snadné vysledovat heslo. Aplikace umožňuje zadat i heslo pro případ nebezpečí. Heslo je přijato, ale místo tajného obsahu je zobrazen falešný obsah.

Úvodní obrazovka modelové aplikace

Tato obrazovka po dotyku plochy zavolá obrazovku s přihlašovacím dialogem.

pamai_a080_layout_managers_and_screens_intro_screen.png

Kód obsahuje jediný blok, který zavolá obrazovku "ScreenLogin".

pamai_a080_layout_managers_and_screens_intro_screen_blocks.png

Obrazovka pro přihlášení uživatele

Je zde ukázáno použití vnoření vertikálního a tabulkového správce rozložení. Poprvé je použito také políčko pro zadání hesla. Chová se stejně jako prosté textové pole, ale místo znaků zobrazuje tečky.

pamai_a080_layout_managers_and_screens_login_screen.png

Kód obrazovky pro přihlášení

Tomuto kódu dominuje procedura pro zamíchání číslic na klávesách. Postup je následující: Nejdříve jsou vytvořeny 2 seznamy. Seznam klavesy nelze naplnit ihned a je třeba ho plnit až v bloku inicializace obrazovky. Seznam je naplněn instancemi tlačítek a pak je zavoláno zamíchání.

Pro každé tlačítko / button je volán cyklus, který vybere náhodně jednu číslici, kterou tlačítku přiřadí. Přiřazenou číslici dále nechceme přiřazovat dalšímu tlačítku, a tak je vytvořen seznam pouzita_cisla, do kterého se použitá čísla ukládají. Cykus while test se opakuje tak dlouho, dokud není pomocí random vybráno takové číslo, které ještě žádné tlačítko nemá.

V programu se náhodná čísla generují jen pro 4 tlačítka. Obsluha dalších tlačítek může být předmětem samostatné práce žáků.

pamai_a080_layout_managers_and_screens_login_screen_blocks1.png

Zápis vybraných znaků do pole password

Uživatel může zapisovat heslo rovnou do pole password, ale pokud píše na zabezpečené klávesnici, pak je třeba obloužit předávání stisknutých kláves. Pro všechna tlačítka jde o stejnou akci, kterou obsluhuje procedura stisknuti_tlacitka. Pokud je v AI2 mnoho stejných bloků, doporučuji si je poskládat přes sebe a ušetřit místo.

pamai_a080_layout_managers_and_screens_login_screen_blocks2.png

Ověření hesla

V poslední ukázce kódu se řeší ověření hesla a reset hodnot.

Předem je třeba přiznat, že zabezpečení hesla je u této aplikace velmi slabé. Takto zadané heslo by případný útočník, který by se dostal k .apk naší aplikace, velmi snadno našel ve zdrojovém kódu. V praxi se heslo neporovnává přímo s konkrétním řetězcem, ale bývá uložena jeho zašifrovaná podoba. 

V této ukázce nám však jde o managery rozložení a o práci s obrazovkami. Při zadání správného hesla "000" (můžete samozřejmě libovolně změnit) se otevře obrazovka s tajným obsahem. Při zadání bezpečnostního hesla se také otevře ScreenTajne, ale je mu předán řetězec "Nebezpečí".

pamai_a080_layout_managers_and_screens_login_screen_blocks3.png

Obrazovka s tajným obsahem

Obrazovka s tajným obsahem využívá ještě více správce rozložení. Používá je i k akci tzv. "virtuálních obrazovek", kdy pouze jeden vrcholový layout manager je zobrazen, zatímco ostatní jsou skryti. Tím lze vytvořit iluzi více obrazovek. Na obrázku si všiměte, že "Display hidden component in Viewer" nad ukázkou obrazovky je zapnutý a v properties je pro HorizontalArrangementTOP2.visible vypnuto.

pamai_a080_layout_managers_and_screens_tajne_design.png

Kód obrazovky s tajným obsahem

V bloku when ScreenTajne.initialize se vyhodnocuje, zda byla obrazovka otevřena bezpečnostním heslem. Pokud ano a obdržela žetězec "Nebezpecí", pak zajistí skrytí tajného obsahu a přidá falešný obsah "Nic tu není."

Následující dva bloky se starají o přepínání mezi virtálními obrazovkami.

pamai_a080_layout_managers_and_screens_tajne_blocks.png

Tipy na modifikace programu:

  • doplnění funkce bezpečnostní klávesnice pro další tlačítka,
  • vyladění vzhledu bezpečnostní klávesnice, např. zarovnání na střed obrazovky, velikost a rozmístění tlačítek,
  • přidání vlastní obrazovky, na kterou by byl uživatel odkázán při zadání jiného hesla,
  • drobné zabezpeční hesla, aby nebylo v programu jako viditelný text "plain text".