Ukázka webového formuláře typu 2
V některých případech je vhodné při editování vidět data z okolních záznamů, případně celou databázovou tabulku. Například při editování výkonových norem pro nový sortiment je vhodné vidět data starších výrobků a tedy již odladěných norem, při editování technologického postupu v aplikaci Nástrojárna je žádoucí vidět celý techologický postup při editování jedné, dílčí operace. Některé jednoduché tabulky, typicky číselníky, jsou rovněž vhodné pro použití tohoto typu formuláře.
V podstatě jde o to, že je zobrazena celá tabulka a kliknutím na vybraný řádek je otevřen editovací formulář pouze pro tento jeden řádek. Formulář je vizuálně součástí tabulky a takový způsob práce by mohl vzdáleně připomínat práci s tabulkovým procesorem. Pracovně to nazývám editování inline.
Ukázka formuláře není plně interaktivní, tj. formulář je trvale otevřen na jednom předvoleném řádku a nejde přepnout na jiný řádek, editovaná data se nikam neukládají. Cílem ukázky je funkční kompaktní formulář, zobrazující tabulková a formulářová data zarovnaná do zákrytu pod sebe, při zachování stejného vzhledu v běžných browserech.
Zarovnání tabulkových a formulářových dat vlevo i vpravo se shoduje v prohlížečích IE a FireFox. Opera dělá jedno pixelovou chybu v zarovnání čísel způsobenou nastavením padding: 1px 1px 0 0;. Použití padding: 0; odstraní chybu, bohužel pak zmizí textový kurzor při pravém okraji prvku v browserech IE a Opera. Problém dělá i vložený checkbox, který rozhodí výšku formulářového řádku, což je velice obtížné doladit stylováním. Šířka tabulky je shodná v IE, FF a Opeře.
Zdá se, že v Safari neposlouchá fixní layout tabulky a vytvořená tabulka je mimo předepsané požadavky. Ani zarovnání textů a čísel v tabulce a formuláři není v Safari bezchybné.
V reálné aplikaci po odeslání formuláře a uložení změn je zobrazena updatovaná, stejná stránka aby bylo možné pokračovat v editování. Je dobré nastavit barevné pozadí naposledy editovaného řádku. Usnadní to zpětnou kontrolu vložených dat. Někdy je vhodné rozšířit formulář o přídavné tlačítko pro ukončení editování (zavření formuláře), případně o další tlačítko pro smazání záznamu. V číselnících, kde není možné smazat záznamy, nastavíme záznam do neaktivního stavu pomocí <input type="checkbox".../>.
Formátování tabulky a řádkový kuzor je popsáno ve článku tabulky a CSS.
<style type="text/css">
/* ---- table ----- */
table, input {font: normal 13px Arial, SansSerif, Verdana;}
table {
border: 0;
border-left: 1px solid #aaa;
border-top: 1px solid #aaa;
table-layout: fixed;
}
th, td {
border: 0;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
}
th {
background: url(/at/files/bg_table.png);
font-weight: normal;
border-left: 1px solid #cff;
border-right: 1px solid #358;
}
td {text-align: center; padding: 0 4px; margin: 0;}
.tdL {text-align: left;}
.tdR {text-align: right;}
/* ------- form -------- */
td.inp {background: #ffa;}
.iL, .iR, .iC {width: 100%; margin:0; border:0; padding: 0 1px 0 0;
background: #ffa; float: left;}
.iL {text-align: left;}
.iR {text-align: right;}
.iC {text-align: center;}
.ok {width: 13px; height: 14px; margin: 0; border: 0;}
</style>
Dlouhá stránka
Při práci s tímto typem formuláře je na server střídavě posílán požadavek na otevření formuláře v tabulce, následovaný požadavkem na uložení editovaných dat (a zavření formuláře). Server vrací vždy stejnou (mírně upravenou) tabulku. Pokud stránka přesahuje výšku browseru budeme potřebovat udržet svislou pozici posuvníku stránky tak, aby se stránka vrácená ze serveru zobrazila ve stejné vertikální pozici. Jinak bychom museli rolovat svislým posuvníkem a hledat otevřený formulář, nebo právě upravený řádek.
Následující skript vrací horní pozici svislého posuvníku, tuto hodnotu uloží validační skript do skrytého pole formuláře před odesláním na server. Server vrátí pozici svislého posuvníku pomocí příkazu pro narolování stránky scrollTo(...) v elementu body.
<script type="text/javascript">
...
function topSL() {
if (window.innerHeight) {
return window.pageYOffset; // FF
}
else if (document.documentElement && document.documentElement.scrollTop) {
return document.documentElement.scrollTop; // IE
}
else if (document.body) {
return document.body.scrollTop;
}
return 0;
}
</script>
<body onload="scrollTo(0, 245)">
...
</body>
Pokud Vás napadlo, že pro podobný způsob editování databázových tabulek je vhodné použít technologii Ajax, rád se podělím o zkušenosti. Nejprve jsem zkoušel dynamicky měnit obsah řádku <tr> na formulářový řádek a po uložení změn zpět na datový řádek. To fungovalo jen v IE. Proto jsem nahradil tabulku soustavou vnořených tágů <div>. Pak už to fungovalo ve všech běžných browserech.
Nedokončeno zůstalo zpracování chyby na straně serveru a "přepínání" řádků. Zápis do databáze je kritické místo každé webové aplikace. Při klasickém způsobu práce s formulářem se při chybě vrátí stránka s chybovou zprávou. Někteří uživatelé ji vytisknou, pošlou mailem, nebo zavolají a nadiktují programátorovi. V případě Ajaxu byly zprávy o chybě na serveru skryty. Nejhorší jsou chyby o kterých se nedozvíte.
Udělal jsem bilanci zdaleka ne produkční verze. Minimálně jeden serverový script navíc, klientský skript na udržení svislé pozice stránky v případě použití technologie Ajax není zapotřebí, ale nahradí jej poněkud složitější skript pro odesílání a příjmání zpráv XMLHttpRequest. Sekce CSS trochu zbytněla díky mnoha tágům <div>. Výsledný efekt z pohledu uživatele byl prakticky totožný.
Formuláře pro inline editování tedy zůstaly v původní, klasické verzi (prozatím). Nová technologie by měla buď zjednodušit řešení, nebo přinést nový zážitek. Změnit stávající řešení jen proto, že je k dispozici něco nového se mi zdálo samoúčelné.
updated 18.12.2007