C# - HTML beviteli kontrolok "emlékező" képessége

forráskód letöltése
Bizonyára mindenkinek ismerős az a jelenség, amikor egy Webes űrlap beviteli szövegmezőjének kitöltésekor, az adatok begépelésekor megjelenik egy vagy több lehetséges érték, melyek közül választhatunk csakúgy, mint Windows-os alkalmazásainkban. Cikkünkben arra keresünk választ, hogy ez a tulajdonság miként valósítható meg HTML vezérlők esetén, és bizonyos attribútumok megadásával hogyan szabályozható viselkedése.
Mellékelt példa megnyitása előtt szükséges egy HtmlAutoComplete nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
A Weboldalainkban használt HTML űrlapok kulcsfontosságúak a felhasználók és a szerver közötti információcserében. Széles körben elterjedtek, nélkülük elképzelhetetlen lenne Weboldalakat készíteni például árurendeléshez.
HTML Autocomplete
A Microsoft az Internet Explorer 5-ös verziójától kezdve elérhetővé tett egy tulajdonságot, melynek neve Autocomplete. Segítségével felgyorsítható az űrlapok mezőinek kitöltése. Az Autocomplete fejlesztés eredményeként a HTML INPUT (TEXT, PASSWORD) mezőibe beírt információk biztonságosan tárolhatók. A technológia lehetővé teszi, hogy amikor egy felhasználó kitölt egy Webes űrlapot, az űrlapot reprezentáló FORM komponens neve, domain-jellemzői titkosított módon tárolásra kerüljenek. Amikor a felhasználó egy egysoros beviteli mezőt elkezd kitölteni, a tárolt információk alapján a bevitt karakterekkel kezdődő értékek kiegészülnek.
Amikor a felhasználó következő alkalommal a Weblapra látogat, és elkezdi kitölteni az azonos NAME attribútummal (és nem azonos ID-vel) rendelkező, valamint az AUTOCOMPLETE tulajdonsággal felruházott beviteli mezőt, akkor a tárolt értékekkel megegyező kezdőbetűvel kezdődő bevitelkor egy prompt ablak jelenik meg a beviteli mező mellett felkínálva a tárolt értékeket, mint választási lehetőségeket. Amíg csak kiválaszt egy értéket a listából a felhasználó, addig az értékek csak a felhasználó számítógépén tárolódnak, és semmilyen formában nem jutnak el a Web-oldalt üzemeltetető szerverhez. Ebből fakadnak az Autocomplete funkció előnyei is.
Az Autocomplete tulajdonságai
Az előzőekben érintőlegesen már kiderülhetett az Autocomplete funkció szinte összes előnye, foglaljuk össze most ezeket:
  • Az információk a felhasználó számítógépén tárolódnak.
  • A felhasználónak nem okoz időveszteséget a nagymennyiségű adatbevitel sem.
  • A felhasználó privát adatai addig nem láthatóak a szerver számára, amíg azok közül egy ki nem lesz választva és el nem lesz küldve a szerver-alkalmazás számára (SUBMIT).
Az Autocomplete könnyen integrálható Weboldalainkba, jelenléte a felhasználók számára nem zavaró, vagy tolakodó. Mivel a Web-alkalmazások felhasználói interfésze a felhasználó gépén futó böngésző, alapértelmezésben a fejlesztőknek semmit sem kell tenniük annak érdekében, hogy a felhasználó kihasználja az Autocomplete nyújtotta kényelmi funkciókat.
Az Autocomplete titkosan tárolja az adatokat a megjelenő segédablak számára, a tárolás alapja az ’INPUT type=”text”’ beviteli mezők NAME attribútuma. Ez felfogható egy névvel rendelkező absztrakt tárolóként, mint amilyen például egy tömb. A különbség és egyben funkcionális többlet a tömb objektumokhoz képest, hogy egy FROM objektumon belül több egysoros, INPUT beviteli mező rendelkezhet ugyanazzal a névvel, melyek között az Autocomplete által tárolt információ megosztható.
Az Autocomplete ablakocska diszkréten jelenik meg a Web-oldalon a beviteli mező közelében olyan helyen, ahol nincs Web-tartalom. Megjelenik a következő események bekövetkezésekor:
  • Mikor beütjük az első karaktert a mezőben, vagy
  • Mikor az inputfókusz a vezérlőn van és a felhasználó lenyomja a ( gombot, vagy
  • Amikor az inputfókuszban lévő vezérlőben lenyomjuk az ENTER billentyűt.
Az igaz, hogy az említett funkció alapértelmezésben engedélyezett böngészőnkben, azonban testre szabásához néhány beállításra szükség van. Az Internet Explorer-ben ezeket a beállításokat az Internetes beállítások (Internet Options) ablakban az Összetevők (Content) fül alatt tehetjük meg a Személyes információk (Personal Information) csoportban.

Az Autocomplete gombra kattintva egy újabb ablak jelenik meg, ahol arról rendelkezhetünk, hogy milyen összetevők esetén legyen engedélyezve az automatikus tárolási funkció. Amennyiben Form szinten letiltjuk az Autocomplete lehetőséget, beviteli mezőnként kell ezt feloldanunk az AUTOCOMPLETE attribútum használatával. Meghatározható, hogy milyen szempontok érvényesüljenek a jelszavak esetén. Az Autocomplete ezt is jól támogatja: első alkalommal begépelve a jelszót, egy tájékoztató ablakban megjelenik, hogy tárolódott, illetve nem tárolódott (beállítástól függően) az adott jelszó a megadott felhasználói névvel.
Az AUTOCOMPLETE attribútum két lehetséges értéke ON és OFF, melyekkel be-, illetve kikapcsolhatjuk a funkciót.
Az Autocomplete különbözőképpen konfigurálható az egyes számítógépeken, ezek a következők:
  • A fejlesztők által használt AUTOCOMPLETE attribútummal letiltható a funkció, így a bevitt adatok nem tárolódnak, és nem jelenik meg a segédablak sem.
  • A felhasználó a fenti beállító ablakban letilthatja a funkciót, így a szervernek ilyenkor nincs módja ezt engedélyezni, függetlenül az attribútumok állapotától.

VCARD_NAME attribútum
Ahhoz, hogy a beviteli mezők ne azonos értéket tároljanak, nem szükséges megváltoztatni a mezők NAME attribútumát, hanem kihasználhatjuk egy új attribútum, a VCARD_NAME előnyeit.
Az attribútum értékei egy vCard nevű objektum mezőinek értékei. A vCard objektum egy séma, melynek értékeit a felhasználó profiljaként beállított adatlap adatai képezik, s amelyeket a Microsoft Profile Assistant eszköze kezel.
A vCard objektum értékeivel csoportosíthatók a bevitt adatok, ugyanis a vCard tucatnyi mezővel rendelkezik. Ezek a mezők csak írhatók. Lássuk ezeket részletesen:
vCard.Business.City A mező értéke hozzárendelődik az üzleti tevékenységhez kapcsolódó székhelyhez.
vCard.Business.Country Üzleti tevékenységhez kapcsolódó országnév.
vCard.Business.Fax Üzleti tevékenységhez kapcsolódó faxszám.
vCard.Business.Phone Üzleti tevékenységhez kapcsolódó telefonszám.
vCard.Business.State Üzleti tevékenységhez kapcsolódó államnév.
vCard.Business.StreetAddress Üzleti tevékenységhez kapcsolódó utcanév.
vCard.Business.URL Üzleti tevékenységhez kapcsolódó URL.
vCard.Business.Zipcode Üzleti tevékenységhez kapcsolódó irányítószám.
vCard.Cellular Mobil telefonszám.
vCard.Company Cég neve.
vCard.Department Részleg neve.
vCard.DisplayName A felhasználó megjelenített neve.
vCard.Email E-mail címe.
vCard.FirstName Keresztneve.
vCard.Gender Neme.
vCard.Home.City A felhasználó lakcímének város összetevője.
vCard.Home.Country A felhasználó lakcímének ország összetevője.
vCard.Home.Fax A felhasználó otthoni faxszáma.
vCard.Home.Phone A felhasználó otthoni telefonszáma.
vCard.Home.State A felhasználó lakcímének állam-név összetevője.
vCard.Home.StreetAddress A felhasználó lakcímének utcanév összetevője.
vCard.Home.Zipcode A felhasználó lakcímének irányítószám összetevője.
vCard.Homepage A felhasználó weblapjának címe.
vCard.JobTitle A felhasználó beosztása.
vCard.LastName Vezetéknév.
vCard.MiddleName Középsőnév.
vCard.Notes Megjegyzésrovat a sémában.
vCard.Office Iroda helye.
Autocomplete implementálása Weblapokon
Most pedig lássunk néhány példát az említettekre.
  • Az adott űrlapon letilthatjuk az Autocomplete funkciót:
<FORM AUTOCOMPLETE = "off">
...
</FORM>
  • A jelszavaknál is hasonlóan használható:
<INPUT TYPE = "password" NAME = "pw" AUTOCOMPLETE = "off">
  • A vCard objektumok mezői megadhatók csoportnévként:
<INPUT TYPE = "text" NAME = "email" VCARD_NAME = "vCard.Email">
Külön esemény köthető ahhoz a pillanathoz, mikor a felhasználói adatbevitellel frissül a tárolt adatok listája, vagyis új bevitel történik. Ez normál beviteli mezők esetén az „onchange” esemény, itt azonban ugyanarra az „onpropertychange” esemény használható (a másik egyszerűen nem fut le).
A mellékelt alkalmazás
A mellékelt példában két Weblap található. Egyik egy űrlap, melyet elküldve (Elküld gombra kattintva) a másikra juthatunk, majd visszanavigálhatunk, közben a vezérlők eltárolták előző beviteleinket.
Az űrlap első beviteli mezőjében letiltottuk az Autocomplete tulajdonságot. Az acText1 nevű két mezőben, mivel nevük azonos, az ehhez a névhez kapcsolt tárolások listája jelenik meg bevitelkor. Ehhez csupán ezt kellett beírnunk:
<INPUT type="text" name="acText1">
Az vcardText1 és vcardText2 mezőkben két adatcsoport elemei jelennek meg, mivel a VCARD_NAME attribútum értékei eltérőek. Előbbiben a vCard.Email mezőelemek, a másikban a vCard.Department mezőelemek jelennek meg:
<INPUT type="text" name="vcardText1" VCARD_NAME="vCard.Email">
<INPUT type="text" name="vcardText2" VCARD_NAME="vCard.Email">
Látható tehát, hogy kevés kódolás árán egy kényelmes, és nem utolsósorban biztonságos eljárással gazdagíthatjuk Webes űrlapjainkat.