Java Applet krok za krokem

27. září 2002

•

V tomto článku projdeme krok za krokem proces tvorby jednoduchého appletu v prostředí Microsoft J++ a jeho zabudování do HTML stránky, včetně jeho spolupráce s JavaScriptem, který bude HTML stránka obsahovat, a tím i s ostatními ovládacími prvky na stránce. Výsledek práce bude zcela platformově nezávislý a vytvořený applet spolu s HTML kódem bude možné použít v kterémkoli prohlížeči s nainstalovaným Virtual Java Machine.

Applet (program v jazyce Java) je při každé návštěvě webové stránky, v níž je obsažen, natažen do internetového prohlížeče a je spouštěn v prostředí Virtual Java Machine, které se na počítač instaluje spolu s prohlížečem. U některých prohlížečů (například Microsoft Internet Explorer) není instalace Virtual Java Machine (terminologie Microsoftu uvádí Microsoft Virtual Machine) obsažena v typické instalaci.

Applet může mít zpřístupněny některé své vlastnosti a metody jako veřejné, což umožňuje externím programům manipulaci s nimi. V našem případě budou externími programy JavaScripty, s jejichž pomocí lze definovat chování appletu a jeho propojení s jinými částmi HTML stránky. Java Applety lze tvořit prakticky v jakémkoli prostředí programovacího jazyka Java. V naší demonstraci použijeme Visual J++ ve verzi 6.0 od firmy Microsoft. Jedná se o doplněk Visual Studia 6.0, který se distribuuje na samostatném instalačním CD.

Po spuštění prostředí Visual J++ je v úvodním dialogu vývojového prostředí nutné zvolit typ aplikace, která se bude vytvářet (| Visual J++ Projects | Web Pages | Applet on HTML |). Po volbě se otevře nový projekt, v jehož projektovém okně se ukáží dva dokumenty – javový kód (Applet1.java) a příslušná HTML stránka (Page1.htm). První dokument je vlastně jednoduchým funkčním Java Appletem, který sestává pouze z prázdného formuláře, jemuž je přiřazena šedá barva. Druhý dokument je HTML stránka, v níž se applet zobrazuje (viz též obrázek).

Implicitně je ve výpisu HTML kódu applet zobrazen graficky, což není pro fázi programování nejvhodnější. Pro přepínání mezi grafickým zobrazením a textovým výpisem tagu APPLET v rámci HTML kódu použijte příkazy horizontálního menu | View | View Controls As Text a View | View Controls Graphically |. Příkazy jsou dostupné ve chvíli, kdy je v editoru editovaná stránka HTML a editor je přepnut na záložku Source (zdrojový kód).

Pokusme se nyní přepsat oba dokumenty tak, abychom dostali jednoduchý applet. Applet bude sestávat ze tří ovládacích prvků: návěští (Label), textového pole (TextField) a tlačítka (Button).

Tlačítko bude mít jedinou funkci, převod textu zapsaného v textovém poli na velká písmena. Druhý dokument (HTML stránku) následně upravíme tak, aby s tímto appletem spolupracoval. Budeme JavaScriptem číst a zapisovat do textového pole, které je součástí Java Appletu.

Ještě než se pustíme do práce, můžete si v ukázce prohlédnout výsledek našeho snažení.

Kód appletu

Programový kód Java Appletu upravme tak, aby obsahoval následující text (řádky kódu jsou očíslovány čistě z pedagogických důvodů, aby bylo možno kód jednoduše popsat):

1. import java.awt.*;
2. import java.applet.*;
3. import java.awt.event.*;
4. public class Applet1 extends Applet implements MouseListener
5. {
6. String txt = new String();
7. Label l = new Label(„Zadejte text“);
8. TextField t = new TextField();
9. Button b = new Button(„UCase“);
10. public void init(){
11.      this.setLayout(new GridLayout(1,3,50,10));
12.      this.addNotify();
13.      this.add(„1“,l);
14.      t.setText(getParameter(„TextValue“));
15.      this.add(„2“,t);
16.      b.addMouseListener(this);
17.      this.add(„3“,b);
18. }
19. public void mousePressed(MouseEvent e) {}
20. public void mouseReleased(MouseEvent e) {}
21. public void mouseEntered(MouseEvent e) {}
22. public void mouseExited(MouseEvent e) {}
23. public void mouseClicked(MouseEvent e) {
24.      if (e.getSource() == b) {
25.           t.setText(t.getText().toUpperCase());
26.      }
27. }
28. public String Vypis() {
29.      return (t.getText());
30. }
31. public void VepisText(String txt) {
32.      t.setText(txt);
33. }
34. }

Pro psaní kódu appletů je zapotřebí znát programovací jazyk Java, jeho syntaxi a sémantiku. K celkovému porozumění, jak uvedený příklad pracuje, však stačí i obecné základní znalosti programování.

Na řádcích 1 až 3 jsou definovány moduly jazyka Java, které jsou v našem programu využívány a musejí být tudíž na začátku k programu importovány:

AWT je základní balík, který bývá přidáván do prakticky každého Java programu
APPLET je balík obsahující základní definici appletu, kterou následný kód rozšiřuje
AWT.EVENT je balíček v našem případě je zvlášť důležitý, aby bylo možné obsloužit v appletu události

Řádek 4 říká, že se pokoušíme vytvořit veřejnou třídu (public class) s názvem Applet1, která je rozšířením třídy Applet (extends Applet) a navíc obsahuje ošetření událostí myši, které se na jednotlivých ovládacích prvcích appletu mohou vyskytnout (implements MouseListener). Kód této třídy musí být uzavřen do složených závorek.

Na řádcích 6 až 9 jsou definovány proměnné, které se budou v rámci appletu používat. V našem případě se jedná o jedinou proměnnou txt, která je datového typu String. Dále jsou zde definovány ovládací prvky, jež budou následně vloženy do appletu: návěští, textové pole a příkazové tlačítko (jedná se vlastně o objektové proměnné).

Řádek 10 deklaruje veřejnou metodu init, která se spouští vždy bezprostředně po natažení appletu do internetového prohlížeče. Tato metoda je vhodná především k inicializaci proměnných a ovládacích prvků a také k definici rozložení ovládacích prvků v appletu.

Právě rozložením prvků v appletu se věnuje řádek 11 pomocí metody setLayout. Tato metoda vytváří novou „mřížku“ (GridLayout), která rozděluje formulář na definovaný počet pravoúhlých částí (vlastně podobně jako bývá definovaná tabulka). Metoda GridLayout má obecně 4 parametry. První parametr udává počet řádků a druhý počet sloupců, na které bude formulář appletu rozdělen. My ho budeme dělit na jediný řádek a 3 sloupce.

Třetí a čtvrtý parametr představují horizontální a vertikální rozteč mezi „buňkami“ tabulky. Tato rozteč se udává v obrazovkových bodech (pixelech).

Metoda addNotify na řádku 12 umožní měnit uživatelské rozhraní appletu bez změny funkčnosti.

Metodou add, která je použita na následujících řádcích, přidáváme do jednotlivých „buněk“, definovaných metodou GridLayout, ovládací prvky. Prvním parametrem metody add je číslo „buňky“ mřížky, druhým objektová proměnná, jíž je přiřazen příslušný ovládací prvek. V první buňce tedy bude návěští, ve druhé textové pole a ve třetí tlačítko.

Buňky jsou číslovány po řádcích vždy zleva doprava. Pokud bychom měli mřížku definovanou jako GridLayout(2,2) (syntaxe této metody připouští i zápis pouze se dvěma parametry), tak bychom umístění tlačítka do pravé spodní buňky definovali pomocí this.add("4",b).

Řádek 14 je prvním zárodkem spolupráce mezi appletem a HTML stránkou. Tento řádek naplní textové pole appletu textem, který je vepsán do atributu value HTML elementu <PARAM name="TextValue" value="">. Při profesionální tvorbě appletů by místo řádku 14 měla být podmínka, která naplní textové pole implicitní hodnotou, pokud je hodnota převzatá z HTML stránky prázdná (příslušný element PARAM v HTML stránce chybí). Stejně by bylo vhodné nastavovat barvu formuláře appletu a některé další vlastnosti.

Řádek 16 přidává k tlačítku „sledovač“ událostí myši, čímž si připravujeme půdu pro naprogramování odezvy na kliknutí myší na toto tlačítko. Samozřejmě by bylo možné přidat i sledování dalších událostí.

Na řádcích 19 až 27 jsou naprogramovány funkce ošetření všech událostí myši, přičemž kód je přiřazen pouze události kliknutí myší (mouseClicked). Pokud je zdrojem této události tlačítko, převede se text zapsaný v textovém poli appletu na velká písmena.

K úplnému vysvětlení kódu appletu nám zbývají dvě poslední funkce Vypis a VepisText. Obě jsou definované jako veřejné (public), a proto budou přístupné externím programům, v našem případě JavaScriptu HTML stránky. Vzhledem k tomu, že applet je v rámci HTML stránky objektem, jeví se tyto veřejné funkce jako jeho metody. A přesně tímto způsobem k nim budeme v JavaScriptu přistupovat.

Funkce Vypis vraci text zapsaný do textového pole appletu a nemá žádné parametry. Funkce VepisText má jeden parametr datového typu String a jeho hodnotu zapisuje do textového pole appletu. Obě tyto metody dohromady zpřístupňují hodnotu textového pole appletu pro čtení i zápis. Podobným způsobem by bylo možné zpřístupnit i další ovládací pole appletu, případně i jiné (např. formátovací) vlastnosti těchto prvků.

Tím jsme téměř dokončili první část příkladu. Zbývá nám ještě celý kód převést do modulu CLASS. To provedeme příkazem horizontálního menu | Build | Build | (CTRL+SHIFT+B). Tím vytvoříme soubor Applet1.class, který bude uložen do stejné složky, v jaké je zdrojový kód appletu i příslušná HTML stránka.

HTML stránka

Obraťme svou pozornost k HTML souboru, který je pojmenován Page1.htm. Kód této stránky přepište podle následujícího příkladu:

Zde je nejdůležitější element APPLET a jeho atribut code obsahující odkaz (URL) na soubor s příponou class, který reprezentuje applet a bude natažen do internetového prohlížeče. Detailněji se prací s vloženým appletem zabývá také článek Java aplety na stránke.

V těle elementu APPLET je seznam parametrů, které mohou být použity pro inicializaci appletu. V našem případě se jedná o text, který bude po natažení appletu zobrazen v jeho textovém poli (to zajišťuje řádek 14 v kódu appletu).

Dále jsou v těle HTML dokumentu již jen dvě tlačítka, k jejichž událostem onClick jsou připojeny kódy JavaScriptu, které čtou (tlačítko Read) a zapisují (tlačítko Write) do textového pole appletu. Využívají k tomu jeho veřejných metod Vypis a VepisText, které jsou v appletu naprogramovány.