Ohjelmointi

Luo asiakaspuolen käyttöliittymiä HTML-muodossa, osa 1

Tässä kuussa palaan ohjelmointiin hetkeksi. Tarvitsen levätä viime kuukauden sarakkeen Talkback-keskustelun oudosta. Aion kuitenkin kirjoittaa lisää teoriakysymyksistä tulevaisuudessa, mutta en seuraavien parin kuukauden ajan.

Minun on tehtävä yksi selvennys viime kuukauden sarakkeesta. Monet ihmiset tulkitsivat käyttöliittymiä koskevia kommenttejani puolustamaan raskaita esineitä, joissa oli miljardeja renderointimenetelmiä. Se ei ollut mielessäni. On olemassa useita käyttökelpoisia tapoja luoda käyttöliittymiä paljastamatta toteutuksen yksityiskohtia. Neljän rakentajan jengi- ja vierailijamallit tulevat heti mieleen. Yksinkertainen Piirrä itsesi() menetelmä ei selvästikään voi toimia millään muulla kuin yksinkertaisimmilla esineillä, ja sillä on 50 drawYourselfInThisFormat () ja drawYourselfInThatFormat () Methods on järjetön resepti hallitsemattomalle koodille. Monien mielestä kannatan kuitenkin tätä lähestymistapaa, joten pyydän anteeksi, jos annoin tuon vaikutelman.

Koska olen nähnyt paljon väärinkäsityksiä käyttöliittymäkysymyksessä, aion näyttää sinulle muutamia olio-orientoitujen (OO) käyttöliittymien rakentamisen lähestymistapoja tulevissa sarakkeissa. Esitin yhden tällaisen ratkaisun vuonna JavaWorld muutama vuosi sitten (katso Resurssit), mutta olen rakentanut parempia järjestelmiä tulevina vuosina. Tämä nykyinen sarake esittelee osan näistä käyttöliittymäjärjestelmistä: infrastruktuuriluokan, jota olen käyttänyt asiakaspuolen käyttöliittymien rakentamisessa OO-tavalla. Se ei sinänsä ole ratkaisu käyttöliittymän ongelmaan, mutta se on hyödyllinen rakennusosa.

Koska koodinäytteet ovat melko suuria, jaan esityksen kahteen osaan. Tämä kuukausi on dokumentaatio ja sovelluskoodi; ensi kuussa on lähdekoodi.

Lue koko Luo asiakaspuolen käyttöliittymät HTML-muodossa -sarja:

  • Osa 1: Tee JEditorPanesta hyödyllinen (lokakuu 2003)
  • Osa 2: HTMLPane-lähteet (marraskuu 2003)

HTML: n käyttö asiakaspuolella

HTML on hieno asia. Sen avulla voit suunnitella monimutkaisia ​​käyttöliittymiä vähällä hässäkällä; se tekee hienoa työtä erottaakseen käyttöliittymän rakenteen ja ulkoasun liiketoimintalogiikasta; se on helppo kirjoittaa; ja se on helppo ylläpitää. Abstract Window Toolkit (AWT) / Swing-asettelua on sitä vastoin ärsyttävän vaikea käyttää. Sinun on muokattava (ja käännettävä uudelleen) koodia, jotta voit muuttaa näyttöjen ulkoasua, ja triviaalin asettelun koodi ei itsessään ole triviaali, ulottuu monille sivuille. Eikö olisi hienoa, jos voisit määrittää koko asiakaspuolen käyttöliittymän HTML-muodossa?

(Tiedän, että jotkut teistä vastaavat edelliseen kysymykseen kiihtyvällä "Ei, se ei olisi kiva!" Monet väittävät, että HTML ja hyvä käyttökokemus ovat toisiaan poissulkevia käsitteitä, koska HTML pakottaa käyttöliittymän "äärettömään CSS: ään valintaikkunatila. Toisaalta monet sovellukset voivat hyödyntää HTML: ää tehokkaasti ainakin jossakin käyttöliittymän osassa - taulukkoraportteja varten, ellei mitään muuta. Et voi heittää vauvaa kylpyveden kanssa.)

Keinut JEditorPane class, aluksi näyttää olevan vastaus HTML-asettelun ongelmaan. Se ymmärtää HTML-syötteen muodin jälkeen. Esimerkiksi seuraava koodi ponnahtaa esiin kehyksen, joka näyttää yksinkertaista HTML-tekstiä:

JFrame main_frame = uusi JFrame (); JEditorPane-paneeli = uusi JEditorPane (); pane.setContentType ("teksti / html"); pane.setEditable (false); pane.setText ("" + "" + "" + "" + "HeiMaailman"+" "+" "); main_frame.setContentPane (ruutu); main_frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE); main_frame.pack (); main_frame.show (); 

Sanon "muodin jälkeen", koska JEditorPane ei ole erityisen hyvä käsittelemään monimutkaista HTML-koodia. Se ei tee hyvää työtä sisäkkäisillä pöydillä, eikä se tee CSS-CSS-levyjä kovin hyvin. (Minulle on kerrottu, että monet näistä ongelmista korjataan Java 1.5 -julkaisussa ensi vuonna, mutta toistaiseksi meidän kaikkien on siedettävä ne.) Lopuksi, JEditorPane ei tee erityisen hyvää työtä asettamalla esimerkiksi radiopainikkeita. Niitä ei ole kohdistettu oikein tekstin perusviivan kanssa, ja niissä on aina harmaa tausta, joten ne eivät toimi hyvin, jos muutat sivun taustaväriä (tyylillä esimerkiksi).

Kaikki nämä puutteet ovat ärsyttäviä, mutta show-stopper-ongelma JEditorPane on se, että se toimii tekstinhallintana, ei asettelutoimintona. Voit määrittää HTML-koodin esimerkiksi syötteessä, mutta lomake lähetetään Web-palvelimelle, kun painat Lähetä-painiketta. Jos haluat olla hyödyllinen asiakaspuolen käyttöliittymän määrittämisessä, haluat, että lomaketiedot palaavat lomaketta näyttäneeseen ohjelmaan, ei johonkin etäpalvelimeen. Tarvitset myös a kätevä tapa lisätä mukautettuja tunnisteita epätyypillisiin syöttö- tai näyttötarkoituksiin tai tarjota paikanpitäjiä tavalliselle Swingille JComponents jota haluat käyttää lomakkeessa. (JEditorPane voit tehdä tämän, mutta mekanismi ei ole kaukana kätevästä.) Lopuksi sinun on käsiteltävä asioita, kuten Peruuta-painike, jota ei ole HTML-muodossa.

Onneksi kaikkein törkein edellä mainituista ongelmista voidaan ratkaista sisäänrakennetuilla mukautustiloilla JEditorPane itse. Näiden ongelmien korjaamiseen liittyy kuitenkin tietty kompromissi. Voit esimerkiksi käsitellä Peruuta-painiketta-ongelmaa ottamalla käyttöön JavaScript-tulkin ja tukemalla klikkaamalla ominaisuus, mutta se on hirvittävän paljon työtä. Vastaavasti todellisen mukautetun tagin tuen (jossa voit käsitellä kaikkea alku- ja lopputagin välissä) tarjoamista on erittäin vaikea tehdä olemassa olevan jäsentimen kanssa. Voit korvata JEditorPaneparseri paremmalla, mutta se on myös paljon työtä. Valitsin yksinkertaisemmat ratkaisut, jotka tekivät työn. Lisäsin luokkaani tarpeeksi toimintoja, jotta voisin käyttää sitä rakentamaan käyttöliittymän kirjoittamalleni ohjelmalle, mutta en tarjonnut "täydellistä" ratkaisua. Ratkaisemani ongelma oli: tarjota tapa määrittää käyttöliittymä HTML-muodossa. En ratkaissut ongelmaa: tarjoa tapa näyttää kaikki mahdolliset HTML-tiedostot asiakaspuolen sovelluksessa. HTMLPane Tässä artikkelissa esittelemäni luokka ratkaisee Specif-a-UI-in-HTML -ongelman hyvin.

HTMLPanen käyttäminen

Vain asiakaspuoleni HTML-syöttöluokka, HTMLPane, on JEditorPane johdannainen, joka korjaa aiemmin käsitellyt ongelmat. Luettelossa 1 näkyy, kuinka HTMLPane. Loin yksinkertaisen JDialog johdannainen kutsutaan HTMLDialog jossa voit määrittää valintaikkunan asettelun HTML-muodossa. HTMLDialog on triviaali esimerkki julkisivumallista. Se vain tekee tarvittavan työn HTMLPane valintaikkunaan ja näytä se.

HTMLDialog.Test luokka (Listaus 1, rivi 134) tarjoaa yksinkertaisen esimerkin siitä, kuinka HTMLDialog. Se luo pääosin tyhjän pääkehyksen (omistaja). Käyttämällä koodia, kuten alla oleva katkelma, main () luo HTMLDialog objekti, jonka sisältö on määritetty suhteellisessa CLASSPATH-tiedostossa fi / holub / ui / HTML / test / okay.html (Luettelo 2). Jousi "Testaa HTMLDialog" näkyy otsikkorivillä. Lopuksi, main () avaa valintaikkunan soittamalla d.popup (), joka palaa vasta, kun käyttäjä sulkee valintaikkunan:

// Näytä okay.html-tiedosto valintaikkunassa, jolla on// otsikko "Test HtmlDialog".// HtmlDialog-valintaikkuna = uusi HtmlDialog (omistava_kehys, "com / holub / ui / HTML / test / okei.html", "Testaa HtmlDialog"); // Avaa valintaikkuna ja odota, että käyttäjä hylkää sen.// dialog.popup (); // Tulosta käyttäjän kirjoittamat "lomaketiedot".// System.out.println ("hidden =" + dialog.data (). GetProperty ("hidden") + "user-input" + dialog.data (). GetProperty ("user-input")); 

Lomaketiedot (teksti, jonka käyttäjä kirjoitti tai vastaava), on saatavana HTMLDialogon tiedot () menetelmä, joka palauttaa a java.util.Kiinteistöt objekti, jolla on avain / arvo-parit, jotka edustavat lomaketietoja. Yllä oleva kutsu dialog.data (). getProperty ("piilotettu") palauttaa merkkijonon "piilotetun kentän tiedot". dialog.data (). getProperty ("käyttäjän syöttö") call palauttaa käyttäjän kirjoittaman syötekentän.

Suurin osa kapseloidun pikaviestinnän työstä HTMLPane tapahtuu HTMLDialog rakentaja (Listaus 1, rivi 46). Rakentaja perustaa ensin ActionListener joka käsittelee lomakkeen Lähetä-painiketta. Tämä tarkkailija sammuttaa nykyisen valintaikkunan ja kopioi kaikki lomaketiedot HTMLPane että tiedot instanssimuuttuja. Rakentaja saa sitten syötetiedoston CLASSPATH: lta ja lataa sitten HTML-tiedoston HTMLPane käyttämällä setText (). (Siellä on myös setPage (URL) menetelmä, mutta tarvitset URL-osoitteen tiedoston absoluuttiselle polulle, jos käytät sitä. Halusin, että HTML-tiedostonimi olisi CLASSPATH-suhteellinen.)

Peruuta käsittely käsitellään ponnahdusikkuna() (rivi 121), joka olettaa, että Peruuta-painiketta painettiin, jos lähetetyissä lomaketiedoissa on Peruuta-näppäin. (Lisätietoja siitä, miten nämä tiedot pääsevät Ominaisuudet esine hetkessä.)

$config[zx-auto] not found$config[zx-overlay] not found