Programmēšana

Izveidot klienta puses lietotāja saskarnes HTML, 1. daļa

Šomēnes es kādu laiku atgriezīšos pie programmēšanas. Man ir nepieciešams atpūsties no dīvainībām par Talkback diskusiju pagājušā mēneša slejā. Es tomēr domāju nākotnē rakstīt vairāk par teorijas jautājumiem, bet ne nākamajiem pāris mēnešiem.

Man patiešām ir jāsniedz viens precizējums no pagājušā mēneša slejas. Daudzi cilvēki manus komentārus par lietotāja saskarnēm interpretēja kā tādu, kas aizstāv smagsvaru objektus ar miljardiem renderēšanas metožu. Tas nebija tas, ko es biju domājis. Ir daudz reālu veidu, kā izveidot lietotāja saskarnes (UI), neatklājot ieviešanas detaļas. Uzreiz nāk prātā Četru celtnieku un apmeklētāju modeļu banda. Vienkāršs izdarīt pats () metode acīmredzami nevar strādāt ar neko citu, kā vien pie vienkāršākajiem objektiem un kam ir 50 drawYourselfInThisFormat () un drawYourselfInThatFormat () metodes ir bezjēdzīga koda recepte. Daudzi cilvēki domā, ka tomēr aizstāvu šo pieeju, tāpēc es atvainojos, ja atstāju tādu iespaidu.

Tā kā esmu saskatījis daudz pārpratumu par lietotāja saskarnes problēmu, es plānoju nākamajās slejās parādīt dažus objektorientētu (OO) UI veidošanas pieeju ieviešanas variantus. Es iesniedzu vienu šādu risinājumu JavaWorld pirms dažiem gadiem (skat. resursus), bet starplaikā esmu izveidojis labākas sistēmas. Šajā pašreizējā slejā ir redzams gabals no vienas no šīm lietotāja saskarnes sistēmām: infrastruktūras klase, kuru es izmantoju, veidojot klienta puses lietotāja interfeisu OO veidā. Tas pats par sevi nav UI problēmas risinājums, bet tas ir noderīgs veidojošais elements.

Tā kā kodu paraugi ir diezgan lieli, es sadalīšu prezentāciju divās daļās. Šis mēnesis ir dokumentācija un lietojumprogrammas kods; nākamais mēnesis ir pirmkods.

Izlasiet visu sēriju “Izveidot klienta puses lietotāja saskarnes HTML”:

  • 1. daļa: Padariet JEditorPane noderīgu (2003. gada oktobris)
  • 2. daļa: HTMLPane avoti (2003. gada novembris)

HTML izmantošana klienta pusē

HTML ir brīnišķīga lieta. Tas ļauj izkārtot sarežģītas lietotāja saskarnes ar minimālu satraukumu; tas lieliski palīdz nodalīt lietotāja saskarnes struktūru un izkārtojumu no biznesa loģikas; to ir viegli rakstīt; un to ir viegli uzturēt. Abstract Window Toolkit (AWT) / Swing izkārtojumu savukārt ir kaitinoši grūti izmantot. Jums ir jāpārveido (un jāpārkompilē) kods, lai mainītu ekrānu izskatu, un nenozīmīga izkārtojuma kods pats par sevi nav triviāls, tas attiecas uz daudzām lappusēm. Vai nebūtu jauki, ja HTML formātā varētu norādīt visu klienta lietotāja saskarni?

(Es zinu, ka daži no jums uz iepriekšējo jautājumu atbildēs ar uzmundrinošu “Nē, tas nebūtu jauki!” Daudzi apgalvo, ka HTML un laba lietotāja pieredze ir savstarpēji izslēdzoši jēdzieni, jo HTML liek jūsu lietotāja saskarnei nonākt “bezgalīgā kaskādē”. dialoglodziņa "režīmā. No otras puses, daudzas lietojumprogrammas var efektīvi izmantot HTML vismaz kādā lietotāja interfeisa daļā - tabulas veidā, ja nekas cits. Jūs nevarat izmest bērnu ar vannas ūdeni.)

Šūpoles JEditorPane klase sākumā šķiet atbilde uz HTML izkārtojuma problēmu. Tas saprot HTML ievadi pēc modes. Piemēram, tiek parādīts šāds kods rāmī, kas parāda vienkāršu HTML tekstu:

JFrame main_frame = jauns JFrame (); JEditorPane rūts = new JEditorPane (); pane.setContentType ("text / html"); pane.setEditable (false); pane.setText ("" + "" + "" + "" + "SveikiPasaule"+" "+" "); main_frame.setContentPane (rūts); main_frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE); main_frame.pack (); main_frame.show (); 

Es saku "pēc modes", jo JEditorPane nav īpaši labs sarežģīta HTML apstrādē. Tas nedara lielisku darbu ar ligzdotām tabulām, un tas nedarbojas ļoti labi Kaskādes stila lapas (CSS). (Man teica, ka daudzas no šīm problēmām tiks novērstas Java 1.5 laidienā nākamgad, taču pagaidām mums visiem tās ir jāpaciešas.) Visbeidzot, JEditorPane nedara īpaši labu darbu, lai izliktu tādas lietas kā radio pogas. Tie nav pareizi saskaņoti ar teksta bāzes līniju, un tajos vienmēr tiek parādīts pelēks fons, tāpēc tie nedarbojas labi, ja maināt lapas fona krāsu (ar stilu uz tagu).

Visi šie trūkumi ir kaitinoši, taču problēma ir ar izstādes aizbāzni JEditorPane tas darbojas kā teksta vadība, nevis kā izkārtojuma iespēja. Varat norādīt HTML piemēram, ievadā, bet veidlapa tiek iesniegta tīmekļa serverim, nospiežot pogu Iesniegt. Lai būtu noderīgi klienta lietotāja saskarnes norādīšanai, vēlaties, lai veidlapas dati atgrieztos programmā, kas parādīja veidlapu, nevis uz kādu attālo serveri. Jums ir nepieciešams arī ērti veids, kā pievienot pielāgotus tagus nestandarta ievades vai attēlošanas vajadzībām vai nodrošināt vietas īpašniekus standarta Swing JKomponenti kuru vēlaties izmantot veidlapā. (JEditorPane ļauj jums to izdarīt, taču mehānisms ir tālu no ērta.) Visbeidzot, jums ir jārīkojas, piemēram, poga Atcelt, kas HTML nav.

Par laimi, vissmagākās no iepriekšminētajām problēmām var atrisināt, izmantojot iebūvētās pielāgošanas iespējas JEditorPane pati. Šo problēmu novēršana tomēr ietver zināmu kompromisu. Piemēram, jūs varētu rīkoties ar pogas Atcelt pogu, ieviešot JavaScript tulku un atbalstot onclick atribūts, bet tas ir šausmīgi daudz darba. Līdzīgi, nodrošinot patiesu pielāgotu tagu atbalstu (kur jūs varat apstrādāt visu, kas notiek starp sākuma un beigu tagu), ir ļoti grūti izdarīt ar esošo parsētāju. Jūs varētu aizstāt JEditorPaneir parsētājs ar labāku, bet arī tas ir daudz darba. Es izvēlējos vienkāršākus risinājumus, kas paveica šo darbu. Es savā klasē ievietoju pietiekami daudz funkcionalitātes, lai to varētu izmantot, lai izveidotu lietotāja saskarni manis rakstītajai programmai, taču nesniedzu "ideālu" risinājumu. Problēma, kuru es risināju, bija: jānodrošina veids, kā norādīt lietotāja saskarni HTML. Es neatrisināju problēmu: nodrošiniet veidu, kā klienta puses lietojumprogrammā parādīt visu iespējamo HTML. The HTMLPane klase, kuru es pasniedzu šajā rakstā, lieliski atrisina HTML-UI-in-HTML problēmu.

Izmantojot HTMLPane

Mana klienta puses HTML ievades klase, HTMLPane, ir JEditorPane atvasinājums, kas novērš iepriekš apspriestās problēmas. 1. saraksts parāda, kā lietot HTMLPane. Es izveidoju vienkāršu JDialog atvasinājums sauc HtmlDialog kurā dialoglodziņa izkārtojumu var norādīt kā HTML. The HtmlDialog ir niecīgs fasādes dizaina parauga piemērs. Tas vienkārši veic vajadzīgo darbu, lai ievietotu HTMLPane dialoglodziņā un parādiet to.

The HtmlDialog.Test klase (1. saraksta 134. rinda) sniedz vienkāršu piemēru, kā to izmantot HtmlDialog. Tas rada galvenokārt tukšu galveno rāmi (īpašnieks). Izmantojot kodu, piemēram, fragmentu, kas reproducēts zemāk, galvenais () izveido HtmlDialog objekts, kura saturs ir norādīts relatīvā failā CLASSPATH com / holub / ui / HTML / test / labi.html (2. saraksts). Stīga "Pārbaudīt HtmlDialog" parādās virsraksta joslā. Visbeidzot, galvenais () uznirst dialogs, zvanot d.popup (), kas neatgriezīsies, kamēr lietotājs nebūs izslēdzis dialogu:

// Parādiet failu okay.html dialoglodziņā, kurā ir// nosaukums "Test HtmlDialog".// HtmlDialog dialog = new HtmlDialog (owning_frame, "com / holub / ui / HTML / test / okay.html", "Test HtmlDialog"); // Uznirstošais dialoglodziņš un jāgaida, kamēr lietotājs to noraidīs.// dialog.popup (); // Izdrukājiet lietotāja ievadītos veidlapas datus.// System.out.println ("hidden =" + dialog.data (). GetProperty ("slēpts") + "lietotāja ievade" + dialog.data (). GetProperty ("lietotāja ievade")); 

Veidlapas dati (teksts, kurā lietotājs ierakstīja vai ekvivalents), ir pieejams caur HtmlDialog's dati () metodi, kas atgriež a java.util.Īpašības objekts, kurā ir atslēgas / vērtības pāri, kas apzīmē formas datus. Iepriekš minētais zvans uz dialog.data (). getProperty ("slēpts") atgriež virkni "slēptā lauka dati". The dialog.data (). getProperty ("lietotāja ievade") call atgriež visu, ko lietotājs ievadījis ievades laukā.

Lielākā daļa no darba, kas saistīts ar iekapsulēto momentānošanu HTMLPane notiek HtmlDialog konstruktors (1. saraksta 46. rinda). Konstruktors vispirms izveido ActionListener kas apstrādā veidlapas pogu Iesniegt. Šis novērotājs izslēdz pašreizējo dialoglodziņu un kopē visus veidlapas datus no HTMLPane uz dati instances mainīgais. Pēc tam konstruktors iegūst ievades failu no CLASSPATH un pēc tam ielādē HTML HTMLPane izmantojot setText (). (Ir arī a setPage (URL) metodi, taču, ja to izmantosit, faila absolūtajam ceļam ir nepieciešams URL. Es gribēju, lai HTML faila nosaukums būtu relatīvs CLASSPATH.)

Tiek atcelta apstrādes atcelšana uznirstošais logs () (121. rinda), kas pieņem, ka poga Atcelt tika nospiesta, ja iesniegtajos veidlapas datos ir atcelšanas taustiņš. (Vairāk par to, kā šie dati nonāk Rekvizīti objektu vienā mirklī.)

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