Programování pro Android v prostředí MIT App Inventor

Téma
Tematický celek	Seznámení s dalšími prvky pro interakci s uživatelem a tvorba vlastního webového prohlížeče.
Motivační rámec	Rozšíření znlalostí o funkci a použití užitečných prvků grafického prostředí a tvorba vlastního webového prohlížeče.
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/ Seznámení s dalšími prvky uživatelského prostředí. Obohacení vlastní aplikace o některé z prvků GUI. Tvorba vlastního webového prohlížeče.
Vhodné místo	Počítačová učebna
Cíle aktivity	Studenti se seznámí a vyzkouší si použití nových prvků grafického uživatelského prostředí. Studenti si vyzkouší vytvořit vlastní webový prohlížeč.
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ě teorie o ukládání dat v PC (složky, soubory, databáze). Volitelně ukázka modelové aplikace a popis jednotlivých bloků, týkajících se práce s daty.  Volitelně samostatná činnost žáků, vyhledávání informací k tomuto tématu.	Frontální výklad, ukázka, samostatná práce žáků
30-60m	Analýza, úpravy a modifikace modelové aplikace, volitelně zakomponování funkcí pro ukládání a načítání dat do vlastní aplikace.	Samostatná a skupinová práce s využitím získaných znalostí, infromací v tomto kurzu a externích zdrojů.
15-20m	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 postupu 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.

Wikipedie k tématu grafického uživatelského prostředí GUI.

Popis komponent uživatelských ovládacích prvků User Interface. 

Video-návod, jak pracovat s komponentou  How to work with listpicker.

Video-návod, jak vytvořit vlastní webový prohlížeč. 

.

Ukázková aplikace prvků z nabídky User Interface a WebViewer

V této apliakce je ukázka všech prvků z User Interface, které jsme zatím v nepoužívali. Pro každý prvek je doplněn Label, který reaguje na uživatelskou akci. V dolní části je komponenta WebViewer, do které budeme zobrazovat obsah webových stránek. Screen1 má povolenu vlastnost Scrollable.

Bloky ukázkové aplikace

Výběr data (den, měsíc, rok) reaguje na událost dokončení výběru. V tu chvíli se složí text, který je vložen do popisku LabeldataPicker. Popiskům, které byly použity pro výstup, je nastaveno zelené pozadí.

Následuje vytvoření testovacího seznamu.

U výběrového seznamu ListPicker1 obsluhujeme dvě události. BeforePicking, ve kterém komponentu propojíme se seznamem. A AfterPicking, ve které předáme vybranou položku do textu popisku. 

Bloky ukázkové aplikace

Některé komponenty potřebují inicializaci. Tu můžeme provést například v bloku when Screen1.Initialize. V našem případě inicializujeme komponenty ListView1 a Spinner1 naším testovacím seznamem. Z komponenty ListView1 pak při události AfterPicking předáváme hodnotu vybrané položky do popisku. Spinner1 je ukázán později.

S obsluhou upozornění "notifikace" se pracuje jiným způsobem. Po stisknutí tlačítka ButtonNotifier je zavolána procedura upozornění, které je předán řetězec jako obsah zprávy. Zobrazení upozornění  je závislé na systému. Většinou jde o vrstvu, která se zobrazí nad plochou aplikace.

Šoupátko "slider" umožňuje výběr z předem definovaného rozsahu hodnot. Reaguje na změnu pozice a aktuální hodnotu předává do popisku. 

Bloky ukázkové aplikace

Spinner1 je rotující výběrový seznam. Po výběru předá hodnotu vybrané položky popisku.

TextBox1 patří k základním nástrojům komunikace s uživatelem. V našem případě probíhá předání hodnoty při události LostFocus, tedy při ztrátě výběru. K této události dochází, pokud jiná komponenta získá Focus. V naší modelové aplikaci většina komponent Focus nepoužívá, a tak nemusí být snadné tuto akci vyvolat.

Výběr času je komponenta velmi podobná výběru data (den, měsíc, rok), i obsluha je podobná.

Bloky obsluhy komponenty WebViewer

K webovým stránkám neodmyslitelně patří prohlížeče webových stránek. Jak by bylo možné vyrobit vlastní prohlížeč, když na tak náročném úkolu se podílí tisíce programátorů? Velmi snadno, pokud využijeme připravené komponenty, která většinu funkcí obslouží ve své základní výbavě. 

Pro výrobu vlastního prohlížeče potřebujeme pouze zaznamenat a předat URL adresu webové stránky, kterou má prohlížeč načíst a zobrazit. To řešíme pomocí textového pole TextBoxURL. Je zde doplněna kontrola, zda adresa stránky obsahuje řetězec http://, a pokud ne, doplní ho. Pak je adresa stránky předána proceduře komponenty WebViewer1, která se postará o načtení a zobrazení stránky.

Ukázkový prohlížeč je doplněn o tlačítko s přechodem na domovskou stránku. Podobným způsobem by bylo možné vyrobit tlačítka pro přímý přechod na jiné stránky. Protože by v případě použití systémového tlačítka Zpět byla vypnuta naše aplikace, nelze ho využít pro přechod zpět v prohlížeči. Proto je prohlížeč doplněn o tlačítko zpět, které lze použít k cestě zpět navštívenými stránkami.

Tipy na další práci:

• vytvořit si samostatnou aplikaci s prohlížečem stránek a vyřešit snadný přechod na X oblíbených stránek,
• rozšířit vlastní aplikaci o některé komponenty z User Interface,
• vyzkoušet pomocí slideru ovládat parametry některých komponent, např zvětšování / zmenšování obrázku.