Programavimas

Sukurkite kliento vartotojo sąsajas HTML, 1 dalis

Šį mėnesį trumpam grįšiu prie programavimo. Man reikia pailsėti nuo keistenybių dėl „Talkback“ diskusijos praėjusio mėnesio skiltyje. Ateityje ketinu rašyti daugiau apie teorijos klausimus, bet ne artimiausius porą mėnesių.

Aš tikrai turiu padaryti vieną paaiškinimą iš praėjusio mėnesio stulpelio. Daugelis žmonių mano komentarus apie vartotojo sąsajas aiškino kaip propaguojančius sunkiasvorius objektus, kuriuose juose buvo milijardai atvaizdavimo būdų. Ne tai turėjau omenyje. Yra daugybė perspektyvių būdų, kaip sukurti vartotojo sąsajas (NS) neatskleidžiant išsamios įgyvendinimo informacijos. Iš karto į galvą ateina „Keturių statybininkų ir lankytojų“ gauja. Paprastas Nupiešk save() metodas akivaizdžiai negali dirbti nieko, išskyrus paprasčiausius objektus, ir turint 50 drawYourselfInThisFormat () ir drawYourselfInThatFormat () metodai yra nesąmoningas nevaldomo kodo receptas. Daugelis žmonių mano, kad vis dėlto pasisakau už tokį požiūrį, todėl atsiprašau, jei padariau tokį įspūdį.

Kadangi mačiau daug nesusipratimų dėl vartotojo sąsajos, būsimose stulpeliuose planuosiu jums parodyti keletą objektinio (OO) vartotojo sąsajos kūrimo metodų. Aš pateikiau vieną tokį sprendimą „JavaWorld“ prieš keletą metų (žr. „Ištekliai“), bet per pastaruosius metus sukūriau geresnes sistemas. Šiame dabartiniame stulpelyje pateikiama vienos iš šių sąsajų sistemų dalis: infrastruktūros klasė, kurią aš naudoju kurdamas kliento vartotojo sąsajas OO būdu. Tai savaime nėra vartotojo sąsajos problemos sprendimas, tačiau tai yra naudingas pagrindas.

Kadangi kodo pavyzdžiai yra gana dideli, aš padalysiu pateiktį į dvi dalis. Šis mėnuo yra dokumentai ir programos kodas; kitas mėnuo yra šaltinio kodas.

Perskaitykite visą seriją „Kurti kliento vartotojo sąsajas HTML“:

  • 1 dalis. Padarykite „JEditorPane“ naudingą (2003 m. Spalio mėn.)
  • 2 dalis: HTMLPane šaltiniai (2003 m. Lapkričio mėn.)

HTML naudojimas kliento pusėje

HTML yra nuostabus dalykas. Tai leidžia išdėstyti sudėtingas vartotojo sąsajas su kuo mažesniu triukšmu; jis puikiai atsiskiria vartotojo sąsajos struktūrą ir išdėstymą nuo verslo logikos; lengva parašyti; ir tai lengva prižiūrėti. Abstrakčių langų įrankių rinkinio (AWT) / „Swing“ išdėstymą, priešingai, erzinančiai sunku naudoti. Jei norite pakeisti savo ekranų išvaizdą, turite modifikuoti (ir iš naujo sukompiliuoti) kodą, o nereikšmingo išdėstymo kodas pats savaime yra nereikšmingas ir apima daugelį puslapių. Ar nebūtų puiku, jei HTML galite nurodyti visą kliento vartotojo sąsają?

(Žinau, kad kai kurie iš jūsų atsakys į ankstesnį klausimą jaudinančiu „Ne, nebūtų puiku!“ Daugelis teigia, kad HTML ir gera vartotojo patirtis yra viena kitą išskiriančios sąvokos, nes HTML priverčia jūsų vartotojo sąsają „begaliniu kaskadu“. dialogo lango "režimas. Kita vertus, daugybė programų gali efektyviai panaudoti HTML bent tam tikroje vartotojo sąsajos dalyje - lentelėse pateikiamoms ataskaitoms, jei nieko nėra. Jūs negalite išmesti kūdikio su vonios vandeniu.)

Sūpynės „JEditorPane“ klasė iš pradžių atrodo atsakymas į HTML išdėstymo problemą. Jis supranta HTML įvestį po mados. Pavyzdžiui, šis kodas pasirodo rėmelį, kuriame rodomas paprastas HTML tekstas:

JFrame main_frame = naujas JFrame (); JEditorPane sritis = new JEditorPane (); pane.setContentType ("text / html"); pane.setEditable (false); pane.setText ("" + "" + "" + "" + "SveikiPasaulis"+" "+" "); main_frame.setContentPane (sritis); main_frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE); main_frame.pack (); main_frame.show (); 

Aš sakau „po mados“, nes „JEditorPane“ nėra ypač gerai tvarkantis sudėtingą HTML. Tai nėra puikus darbas su įdėtomis lentelėmis ir „Cascading Style Sheets“ (CSS). (Man buvo pasakyta, kad daugelis šių problemų bus išspręstos kitais metais išleistoje „Java 1.5“ versijoje, tačiau kol kas visi turime jas susitaikyti.) Galiausiai, „JEditorPane“ nedaro ypač gero darbo dėliodamas tokius dalykus kaip radijo mygtukai. Jie nėra tinkamai sulyginti su pagrindine teksto linija ir visada rodo pilką foną, todėl jie neveikia gerai, jei pakeisite puslapio fono spalvą (su stiliumi pvz., žyma).

Visi šie trūkumai yra erzinantys, tačiau „show-stopper“ problema „JEditorPane“ yra tai, kad jis veikia kaip teksto valdymas, o ne kaip išdėstymo priemonė. Galite nurodyti HTML Pavyzdžiui, įvestyje, bet forma pateikiama žiniatinklio serveriui, kai paspausite mygtuką Pateikti. Norėdami būti naudingi nurodant kliento vartotojo sąsają, norite, kad formos duomenys grįžtų į programą, kurioje buvo rodoma forma, o ne į kokį nors nuotolinį serverį. Jums taip pat reikia a patogu būdas pridėti nestandartines žymas nestandartiniams įvesties ar rodymo tikslams arba suteikti vietos savininkams standartinį „Swing“ „JComponents“ norite naudoti formoje. („JEditorPane“ leidžia tai padaryti, tačiau mechanizmas toli gražu nėra patogus.) Galiausiai, jums reikia elgtis, pvz., mygtuką „Atšaukti“, kurio nėra HTML.

Laimei, rimtiausias iš minėtų problemų galima išspręsti naudojant įmontuotas pritaikymo galimybes „JEditorPane“ pats. Tačiau šių problemų sprendimas susijęs su tam tikru kompromisu. Pvz., Galite išspręsti mygtuką „Atšaukti mygtuką“ įdiegdami „JavaScript“ vertėją ir palaikydami paspaudus atributas, bet tai yra nepaprastai daug darbo. Panašiai su esamu analizatoriumi labai sunku suteikti tikrą pasirinktinių žymų palaikymą (kur galite apdoroti viską, kas yra tarp pradžios ir pabaigos žymų). Galite pakeisti „JEditorPane“analizatorius su geresniu, bet ir tai daug darbo. Aš pasirinkau paprastesnius sprendimus, kurie atliko darbą. Į klasę įdėjau pakankamai funkcionalumo, kad galėčiau ją naudoti kurdamas vartotojo sąsają mano parašytai programai, tačiau nepateikiau „tobulo“ sprendimo. Problema, kurią sprendžiau, buvo: pateikti būdą, kaip nurodyti vartotojo sąsają HTML. Aš neišsprendžiau problemos: pateikite būdą, kaip kliento pusėje esančioje programoje rodyti visą įmanomą HTML. HTMLPane klasė, kurią pristatau šiame straipsnyje, puikiai išsprendžia „HTML-UI-in-HTML“ problemą.

HTMLPane naudojimas

Mano kliento tik HTML įvesties klasė, HTMLPane, yra „JEditorPane“ darinys, kuris nustato anksčiau aptartas problemas. 1 sąrašas parodo, kaip naudoti HTMLPane. Aš sukūriau paprastą JDialog darinys vadinamas HTMLDialog kuriame galite nurodyti dialogo lango išdėstymą kaip HTML. HTMLDialog yra nereikšmingas fasado dizaino modelio pavyzdys. Tai tiesiog atlieka nepaprastą darbą, būtiną norint įdėti HTMLPane į dialogo langą ir jį parodykite.

HTMLDialog.Test klasėje (1 sąrašas, 134 eilutė) pateikiamas paprastas pavyzdys, kaip naudoti HTMLDialog. Tai sukuria dažniausiai tuščią pagrindinį rėmą (savininkas). Naudodami kodą, pvz., Toliau pateiktą fragmentą, pagrindinis () sukuria HTMLDialog objektas, kurio turinys nurodytas santykiniame CLASSPATH faile com / holub / ui / HTML / test / OK.html (2 sąrašas). Virvelė „Test HtmlDialog“ pasirodo pavadinimo juostoje. Pagaliau, pagrindinis () iškviečia dialogą skambindamas d.popup (), kuris negrįš, kol vartotojas neišjungs dialogo:

// Dialogo lange, kuriame yra, pateikite failą okay.html// pavadinimas „Test HtmlDialog“.// „HtmlDialog“ dialogo langas = naujas „HtmlDialog“ („owning_frame“, „com / holub / ui / HTML / test / okay.html“, „Test HtmlDialog“); // Iškelkite dialogo langą ir palaukite, kol vartotojas jį atmes.// dialog.popup (); // Atspausdinkite vartotojo įvestus „formos“ duomenis.// System.out.println ("hidden =" + dialog.data (). GetProperty ("paslėpta") + "vartotojo įvestis" + dialog.data (). GetProperty ("vartotojo įvestis")); 

Formos duomenys (tekstas, į kurį vartotojas įvedė elementas ar lygiavertis), yra prieinamas per HTMLDialog's duomenys () metodas, kuris grąžina a java.util.Nuosavybės objektas, kuriame yra formos / reikšmės poros, žyminčios formos duomenis. Aukščiau pateiktas skambutis dialog.data (). getProperty ("paslėpta") grąžina eilutę „paslėpto lauko duomenys“. dialog.data (). getProperty ("vartotojo įvestis") skambutis grąžina viską, ką vartotojas įvedė įvesties lauke.

Daugiausia darbo, susijusio su inkapsuliacijos greitinimu HTMLPane atsitinka HTMLDialog konstruktorius (1 sąrašas, 46 eilutė). Konstruktorius pirmiausia nustato „ActionListener“ tvarkantis formos mygtuką „Pateikti“. Šis stebėtojas išjungia dabartinį dialogo langą ir nukopijuoja visus formos duomenis iš HTMLPane į duomenis egzemplioriaus kintamasis. Tada konstruktorius gauna įvesties failą iš CLASSPATH ir įkelia HTML į HTMLPane naudojant setText (). (Taip pat yra setPage (URL) metodą, bet jums reikės URL visam failo keliui, jei jį naudosite. Norėjau, kad HTML failo vardas būtų santykinis CLASSPATH.)

Atšaukti apdorojimą tvarkoma iššokantis langas () (121 eilutė), kuris daro prielaidą, kad mygtukas Atšaukti buvo paspaustas, jei pateiktuose formos duomenyse yra klavišas Atšaukti. (Daugiau apie tai, kaip šie duomenys patenka į Savybės per akimirką.)

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