Ta mesec se za nekaj časa vračam k programiranju. Potrebujem počitek od nenavadnosti razprave Talkback v rubriki prejšnjega meseca. V prihodnosti nameravam pisati več o teoretičnih vprašanjih, vendar ne v naslednjih nekaj mesecih.
Moram narediti eno pojasnilo iz prejšnjega meseca. Mnogi so moje komentarje o uporabniških vmesnikih razlagali kot zagovarjanje težkih predmetov z milijardami metod upodabljanja. Nisem imel tega v mislih. Obstajajo številni izvedljivi načini za ustvarjanje uporabniških vmesnikov (UI) brez razkrivanja podrobnosti izvedbe. Takoj mi pridejo na pamet vzorci Gang of Four Builder in Visitor. Preprosto nariši se () metoda očitno ne more delovati na nič drugega kot na najbolj preproste predmete in ima 50 drawYourselfInThisFormat () in drawYourselfInThatFormat () metode je nesmiseln recept za neobvladljivo kodo. Mnogi ljudje mislijo, da zagovarjam tak pristop, zato se opravičujem, če sem dal tak vtis.
Ker sem pri vprašanju uporabniškega vmesnika videl veliko nesporazumov, vam bom v prihodnjih stolpcih pokazal nekaj izvedb objektno usmerjenega (OO) pristopa gradnje uporabniškega vmesnika. Eno takšno rešitev sem predstavil v JavaWorld pred nekaj leti (glej Vire), vendar sem v vmesnih letih zgradil boljše sisteme. Ta trenutni stolpec predstavlja del enega od teh sistemov uporabniškega vmesnika: infrastrukturni razred, ki sem ga uporabil za izdelavo uporabniških vmesnikov na strani odjemalca na način OO. Sama po sebi ni rešitev problema uporabniškega vmesnika, je pa koristen gradnik.
Ker so vzorci kode precej veliki, bom predstavitev razdelil na dva dela. Ta mesec je dokumentacija in koda prijave; naslednji mesec je izvorna koda.
Preberite celotno serijo "Ustvari uporabniške vmesnike na strani odjemalca v HTML":
- 1. del: Naj bo JEditorPane uporaben (oktober 2003)
- 2. del: Viri HTMLPane (november 2003)
Uporaba HTML-ja na strani odjemalca
HTML je čudovita stvar. Omogoča vam postavitev zapletenih uporabniških vmesnikov z najmanj truda; odlično loči strukturo in postavitev uporabniškega vmesnika od poslovne logike; enostavno je pisati; in ga je enostavno vzdrževati. Apstraktna zbirka orodij za okna (AWT) / postavitev nihanja je v nasprotju s tem nadležno težka za uporabo. Kodo morate spremeniti (in znova prevesti), da spremenite videz zaslona, koda za trivialno postavitev pa je sama po sebi netrivialna in se razteza na veliko strani. Ali ne bi bilo lepo, če bi lahko v HTML-ju določili celoten uporabniški vmesnik na strani odjemalca?
(Vem, da boste nekateri na prejšnje vprašanje odgovorili z vznemirljivim "Ne, ne bi bilo lepo!". Mnogi trdijo, da se HTML in dobra uporabniška izkušnja medsebojno izključujeta, saj HTML sili vaš uporabniški vmesnik v "neskončno kaskadno pogovorno okno "način. Po drugi strani pa lahko veliko aplikacij učinkovito uporabi HTML v vsaj nekaterih delih uporabniškega vmesnika - za tabelarična poročila, če ne drugega. Otroka ne morete vreči z vodo za kopanje.)
Gugalnice JEditorPane class sprva zdi odgovor na težavo s postavitvijo HTML. Ne razume vnosa HTML po modi. Na primer, naslednja koda pokaže okvir, ki prikazuje nekaj preprostega besedila HTML:
JFrame main_frame = nov JFrame (); Podokno JEditorPane = novo JEditorPane (); pane.setContentType ("besedilo / html"); pane.setEditable (false); pane.setText ("" + "" + "" + "" + "zdravoSvet"+" "+" "); main_frame.setContentPane (podokno); main_frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE); main_frame.pack (); main_frame.show (); Pravim "po modi", ker JEditorPane ni posebej dober pri obdelavi zapletenega HTML-ja. Z ugnezdenimi tabelami se ne obnese odlično in tudi Cascading Style Sheets (CSS) ne deluje dobro. (Povedali so mi, da bodo številne te težave odpravljene v izdaji Java 1.5 prihodnje leto, toda za zdaj jih moramo vsi prenašati.) Končno, JEditorPane ne dela posebej dobro pri postavljanju stvari, kot so radijski gumbi. Niso pravilno poravnani z osnovno črto besedila in vedno prikažejo sivo ozadje, zato ne delujejo dobro, če spremenite barvo ozadja strani (s slogom na na primer).
Vse te pomanjkljivosti so moteče, toda težava z razstavnim zamaškom JEditorPane je, da deluje kot nadzor besedila in ne kot postavitev. Določite lahko HTML na primer v vhodu, vendar se obrazec pošlje spletnemu strežniku, ko pritisnete gumb Pošlji. Če želite biti uporabni pri določanju uporabniškega vmesnika na strani odjemalca, želite, da se podatki obrazca vrnejo v program, ki je prikazal obrazec, in ne na oddaljeni strežnik. Potrebujete tudi priročno način za dodajanje oznak po meri za nestandardne namene vnosa ali prikaza ali za zagotavljanje držala za standardni Swing JComponents želite uporabiti na obrazcu. (JEditorPane vam omogoča, da to storite, vendar mehanizem še zdaleč ni primeren.) Končno morate ravnati s stvarmi, kot je gumb Prekliči, ki v HTML-ju ne obstaja.
Na srečo je mogoče najhujše od zgoraj navedenih težav rešiti z vgrajenimi napravami za prilagajanje JEditorPane sama. Odpravljanje teh težav pa vključuje določeno mero kompromisa. Na primer, težave z gumbom za preklic lahko rešite tako, da uvedete tolmač JavaScript in podprete onclick atribut, ampak to je strašno veliko dela. Podobno je z obstoječim razčlenjevalnikom zelo težko zagotoviti resnično podporo po meri (kjer lahko obdelate vse, kar je med začetno in končno oznako). Lahko zamenjate JEditorPaneje razčlenjevalnik z boljšim, vendar je tudi to veliko dela. Odločil sem se za preprostejše rešitve, ki so opravile svoje delo. V svoj razred sem dal dovolj funkcionalnosti, da bi ga lahko uporabil za izdelavo uporabniškega vmesnika za program, ki sem ga pisal, vendar nisem ponudil "popolne" rešitve. Težava, ki sem jo reševal, je bila: zagotoviti način za določitev uporabniškega vmesnika v HTML-ju. Težave nisem rešil: zagotovite način za prikaz vseh možnih HTML-jev v odjemalski aplikaciji. The HTMLPane razred, ki sem ga predstavil v tem članku, lepo rešuje težavo Specificiraj uporabniški vmesnik v HTML.
Uporaba HTMLPane
Moj razred za vnos HTML samo na strani odjemalca, HTMLPane, je JEditorPane izpeljanka, ki odpravlja prej omenjene težave. Seznam 1 prikazuje, kako uporabljati HTMLPane. Ustvaril sem preprosto JDialog izpeljanka imenovana HtmlDialog v katerem lahko postavite pogovorno okno kot HTML. The HtmlDialog je nepomemben primer vzorca oblikovanja fasade. Samo naredi naključno delo, potrebno za postavitev HTMLPane v pogovorno okno in ga prikažite.
The HtmlDialog.Test razred (Seznam 1, vrstica 134) ponuja preprost primer uporabe HtmlDialog. Ustvari večinoma prazen glavni okvir (lastnik). Z uporabo kode, kot je spodnji delček, glavni () ustvari HtmlDialog objekt, katerega vsebina je podana v datoteki, relativni CLASSPATH com / holub / ui / HTML / test / okay.html (Seznam 2). Niz "Preizkusi HtmlDialog" se prikaže v naslovni vrstici. Končno, glavni () pokaže se pogovorno okno s klicem d.popup (), ki se ne vrne, dokler uporabnik ne izklopi pogovornega okna:
// Datoteka okay.html se prikaže v pogovornem oknu, ki ima// naslov "Test HtmlDialog".// HtmlDialog dialog = new HtmlDialog (owning_frame, "com / holub / ui / HTML / test / okay.html", "Test HtmlDialog"); // Pojavi se pogovorno okno in počaka, da ga uporabnik zavrne.// dialog.popup (); // Natisni podatke "obrazca", ki jih je uporabnik vpisal.// System.out.println ("hidden =" + dialog.data (). GetProperty ("hidden") + "user-input" + dialog.data (). GetProperty ("user-input")); Podatki obrazca (besedilo, ki ga je uporabnik vtipkal v element ali enakovreden), je na voljo prek HtmlDialogje podatki () metoda, ki vrne a java.util.Lastnosti objekt, ki vsebuje pare ključ / vrednost, ki predstavljajo podatke obrazca. Zgornji poziv k dialog.data (). getProperty ("skrit") vrne niz "podatki skritega polja". The dialog.data (). getProperty ("uporabniški vnos") call vrne vse, kar je uporabnik vpisal v polje za vnos.
Večina dela je bila vključena v instanciranje inkapsuliranega HTMLPane se zgodi v HtmlDialog konstruktor (seznam 1, vrstica 46). Konstruktor najprej nastavi ActionListener ki obdeluje gumb Pošlji na obrazcu. Ta opazovalec izklopi trenutno pogovorno okno in kopira vse podatke obrazca iz HTMLPane do podatkov spremenljivka primerka. Nato konstruktor dobi vhodno datoteko iz CLASSPATH in nato naloži HTML v HTMLPane uporabo setText (). (Obstaja tudi setPage (URL) , toda za absolutno pot do datoteke bi potrebovali URL, če bi jo uporabili. Želel sem, da je ime datoteke HTML relativno CLASSPATH.)
Preklic obdelamo pojavno okno () (vrstica 121), ki predpostavlja, da je bil pritisnjen gumb Prekliči, če v predloženih podatkih obrazca obstaja tipka Prekliči. (Več o tem, kako ti podatki pridejo v Lastnosti predmet v trenutku.)
