Změna vzhledu po kliknutí na objekt - javascript
Listeners
Listener je funkce, která reaguje na nějakou událost v appletu.
Musíme ji jednak naprogramovat, jednak ji musíme při načítání appletu "registrovat", k čemuž jsou v GeoGebra Apps API připravené funkce.
V našem appletu tedy máme:
function ggbOnInit() {
ggbApplet.registerClickListener("vyznac");
}
Funkci daného jména naprogramujeme tak, aby po kliknutí na objekt s názvem AA vyznačení všech objektů zrušila a po kliknutí na kterýkoliv jiný objekt tento zvýraznila (předepsaným způsobem).
Poznámka: V appletu ani nepoužíváme tlačítko, jen bod – jen jako demonstraci, že se nemusí klikat vždy jen na tlačítko. Ale mohlo by, samozřejmě.
Funkce si ještě zaslouží komentář, dvě větve podmínky (ošetření, je-li objekt, na který klikáme, ovladač,
nebo vyznačovaný objekt v konstrukci) jsou zde úmyslně řešeny různě,
první (if (par == "AA")) trochu nedbale, nestará se o typ objektu (a v tomto případě to nevadí),
druhá větev (else) je napsána pečlivěji a zkoumá, jestli jsme kliknuli na bod nebo čáru. Někdy (jindy) se to může hodit.
function vyznac(par) {
var typ = ggbApplet.getObjectType(par); // zjistíme, nač jsme kliknuli
if (par == "AA") { // když je to klikátko-tlačítko (které ruší zvýraznění)
var pocet = ggbApplet.getObjectNumber();
for (i = 0; i < pocet; i++) { // projedeme všechny objekty
var jmeno = ggbApplet.getObjectName(i);
if (jmeno != "AA") { // a pokud ten objekt není to naše klikátko
ggbApplet.setLineThickness(jmeno, 2);
ggbApplet.setPointSize(jmeno, 3);
ggbApplet.setColor(jmeno, 0, 0, 0);
} // nastavíme mu "tuctový" vzhled
}
} else { // pokud jsme ale klikli na objekt, tak ho chceme zvýraznit
if (typ != "point") {
ggbApplet.setLineThickness(par, 8); // a tak bude čára tlustší
} else {
ggbApplet.setPointSize(par, 6); // a bod větší
}
ggbApplet.setColor(par, 255, 0, 0); // a jakýkoliv objekt červený
}
}
Kód, který provádíme se všemi objekty, můžeme také úsporněji
zapsat pomocí javascriptové iterace přes prvky pole:
pole.forEach(nejaka_funkce);
například napíšeme-li si funkci s názvem zbledni, pak zapíšeme:
var prvky = ggbApplet.getAllObjectNames();
prvky.forEach(zbledni);
Kliknutím na "Vrátit vzhled" zrušíme zvýraznění všech objektů
Klik tam a klik zpátky
Pokud nám nevyhovuje hromadné rušení zvýraznění (třeba se jen "uklikneme" a chceme zrušit zvýraznění jen toho jednoho objektu), můžeme z aktuálního stavu objektu nějak poznat, zda je zvýrazněný nebo ne, a podle toho kliknutím stav změníme. To jde řešit různě. Třeba zkoumat barvu...
Nebo k tomu účelu využijeme nějakou zrovna nepoužívanou vlastnost. V naší ukázce je to vrstva objektu. V appletu jsme nepotřebovali objekty skládat do vrstev, tak si to můžeme dovolit.
Pak v appletu není žádné tlačítko pro vrácení vzhledu a reakce na kliknutí vypadá například takto:
function vyznac(par) {
var i = ggbApplet.getLayer(par); // zjistíme, ve které vrstvě objekt leží (nevyznačené leží v 0)
ggbApplet.setLayer(par, Math.abs(1 - i)); // a změníme ji 0 <--> 1
var typ = ggbApplet.getObjectType(par); // stejné jako nahoře, můžeme se starat o typ a nemusíme
if (i == 1) { // byl-li objekt zvýrazněný (ve vrstvě 1)
ggbApplet.setLineThickness(par, 2); // nastavíme mu "tuctový" vzhled
ggbApplet.setPointSize(par, 3);
ggbApplet.setColor(par, 0, 0, 0);
} else { // jinak (ve vrstvě 0)
if (typ != "point") {
ggbApplet.setLineThickness(par, 8); // čára bude tlustší
} else {
ggbApplet.setPointSize(par, 6); // a bod větší
}
ggbApplet.setColor(par, 255, 0, 0); // a kterýkoliv objekt červený
}
}