Firefox 3.6 zlepší práci se soubory ve formulářích

Ve Firefoxu 3.6 se dočkáme dvou novinek týkajících se práce se soubory. Tou první je podpora uploadu více souborů najednou z jednoho formulářového pole po vzoru specifikace HTML5 (dříve WebForms2).

Zápis vypadá jednoduše:

<input type="file" multiple="">

v HTML variantě jej můžete zkrátit i na:

<input type=file multiple>

Pomocí JavaScriptu můžete ověřit, kolik souborů uživatel vybral nebo je (resp. jejich názvy) v cyklu projít (kolekce input.files a vlastnost input.files.length).

Více: ukázka, specifikace.

Sáhněte si na soubor

Tou druhou novinkou je možnost přistupovat přímo z JavaScriptu k obsahu souborů, které uživatel vybral k uploadu pomocí klasického <input type="file">. Dosud bylo totiž nutné takové soubory nahrát na server, z něj získat zpět a teprve pak s nimi šlo dále pracovat. Alternativou bylo použití pluginů, které umožňovaly přímou práci se soubory.

Z JavaScriptu bude pomocí nového API možné zjistit nejen název takového souboru, jeho typ a velikost, ale také přistupovat k jeho obsahu a to třemi asynchronními způsoby (dnes už je takový trend dělat všechny náročnější operace asynchronně, aby nedocházelo k zamrzání stránky v prohlížeči) :

• readAsBinaryString
• readAsText
• readAsDataURL
  

Zvolená metoda se váže na typ obsahu a co s ním chcete dělat. U textových souborů použijete readAsText. Pokud chcete pracovat s obrázky, ale nemáte v úmyslu je měnit, zvolíte readAsDataURL (následně do vlastnosti můžete img.src nastavit přímo tuto hodnotu a obrázek se zobrazí) atd.

Kompletní specifikace (poměrně čerstvá, první návrh přišel před pár týdny právě od Mozilly) počítá i s výše zmíněným přepínačem multiple (bude tedy možné např. označit všechny fotografie v adresáři a následně s nimi v JavaScriptu pracovat).

Firefox 3.6 zatím neimplementoval specifikaci celou, ale dost na to, aby si ji zájemci mohli vyzkoušet (stahujte Firefox 3.6 beta 4).

Více: video s demem, ukázka, specifikace.

Pozn.: Firefox 3.6 těch novinek přinese víc, ale pro účely tohoto příspěvku nejsou podstatné.

Pozn. 2: Specifikace je nová a zatím jsem nenašel reakce dalších prohlížečů, zda ji budou chtít podporovat nebo ne. Uvidíme.

WebForms2 zmigrovány do HTML5

Dnes byla dokončena migrace specifikace WebForms 2 do HTML5. Na začátku specifikace Web Forms2 nyní najdete varování:

This draft has been superseded by the Forms chapter of the HTML5 specification, which now includes many of the features first defined in this document.

This document will not be further updated.

Zmigrována byla většina specifikace, až na některé části, jejich odstranění bylo již dříve avizováno (např. repetition model). Časem si zmigrovanou specifikaci pročtu detailně a pokud bude čas, zkusím pro zájemce sepsat detail změn.

WebForms2 migrují do HTML5

Ian Hickson nedávno zahájil migraci specifikace WebForms2 do HTML5.

WebForms2 je samostatnou specifikací (z historických důvodů) a ačkoliv Ian dříve přislíbil její začlenění do HTML5, dosud neproběhlo. Pravděpodobně, protože John Boyer, předseda Forms WG, k ní měl loni vážné námitky. Za tím účelem byla vytvořena Forms Task Force, která měla problémý vyřešit. Nevšiml jsem si žádného veřejného výstupu, jejich mailová skupina za celý rok poměrně zeje prázdnotou.

Jsem zvědav, jak bude specifikace po začlenění vypadat, Ian v ní nyní provádí drobné úpravy a v nedávném rozhovoru naznačil, že dojde k vypuštění některých částí. Předpokládám, že tak za měsíc budeme moudřejší.

WebForms2 se poslední rok nacházela v patové situaci. Tím, že k ním měl předseda Boyer vážné připomínky, se z ní stal černý Petr, kterého nikdo nechtěl implementovat. No, implementovali byste něco, co se možná zítra změní a vy nevíte, zda kompletně nebo jen trochu?

Začleněním do HTML5 se situace vyjasní a prohlížeče budou mít volnou cestu k implementaci WebForms2. V tuto chvíli jsou WebForms2 implementované pouze v Opeře.

Web Forms 2 do WebKitu v rámci Google SOC

Specifikaci Web Forms 2.0, která - byť zatím separátním dokumentem - je součástí HTML5, implementovala pouze Opera. Pro ostatní prohlížeče existují různé emulace, např. projekt webforms2 na Google Code, ale ty mají do produkční kvality daleko.

Proto mě potěšilo, že v rámci akce Google Summer of Code, které se účastní i WebKit, se objevil projekt implementace Web Forms 2 do WebKitu. Podle popisu projektu nebude student Michelangelo De Simon, který se k úkolu přihlásil, implementovat celou specifikaci, ale odhadem tak 40 %.

Jsem zvědav, zda se Michelangelovi jeho projekt povede (úspěšnost projektů v Google SOC není příliš velká). Navíc ostatní implementátoři v tuto chvíli vyčkávají, než Forms Task Force rozhodne, zda budou Web Forms 2 do HTML5 zahrnuty tak jak jsou nebo zda se před tím dočkají nějakých změn.

V pátek na WebCamp'08 o HTML5

Tento pátek budu mít v rámci konference WebCamp'08 přednášku HTML5 a budoucnost webu. Představím v ní hlavní přínosy HTML5, ukážu, jak je na tom podpora prohlížečů a předvedu i nějaké praktické příklady. Pro účast je nutná registrace.

Pokud se přijdete podívat, nezapomeňte se stavit i na kus řeči, rád se setkám se známými i neznámými čtenáři tohoto blogu.

A máte-li něco konkrétního, co byste si o HTML5 určitě přáli slyšet, napište mi to do komentářů a já se to pokusím do přednášky zahrnout.

Aktualizováno:

• Prezentace o HTML5
• Prezentace o Web Forms 2.0
• Příklady z přednášky
• HTML5 trailer
  

Jak na našeptávač s HTML5

Je to pár let, co se objevil Google Suggest, nedlouho poté ho následovaly české portály se svými Našeptávači a Rádci. Princip je jednoduchý, ale ne každý chce našeptávač vytvářet na zelené louce (ten od Seznamu se blíží k 300 řádkům a dokonce padlo obvinění, že české portály od sebe kód opsaly).

Pojďme se podívat, nakolik se nám zmíněných 300 řádků kódu zkrátí v případě, že prohlížeč bude podporovat HTML5. Anne van Kesteren tvorbu našeptávače podrobně popisuje v návodu An HTML5-style "Google Suggest".

My si zobrazíme rovnou výsledek. Klientskou část našeptávače v HTML5 lze napsat na 4 řádky (a to se kód zalamuje, jinak by to byly dva):

<input list="suggest" name="q"
oninput="list.data = '?w=' + encodeURIComponent(value)">
<datalist id="suggest"></datalist>

Kód si můžete vyzkoušet ve všech prohlížečích, které již implementovali WebForms2, tj. zatím jen v Opeře.

Příklad využívá nové značky <datalist> a její schopnosti snadno dynamicky měnit obsah. Není třeba kódovat žádný AJAX, to vše má na starosti prohlížeč. Kodér pouze při změně hodnoty v textovém boxu nastaví vlastnosti datalistu na novou URL a datalist si data získá sám.

Značka <datalist> nebude v HTML5 zdaleka tou nejmocnější. Další možnosti skrývá např. značka <datagrid>, která umožňuje vytvářet vnořené rozbalovací seznamy, ve kterých se bude obsah jednotlivých větví automaticky načítat ze serveru jen v případě, kdy jsou skutečně potřeba.

Pokud se chcete o základních kamenech nových webových formulářů, tzv. Web Forms2, které činí jeden ze základních stavebních kamenů HTML5, přečtěte si WHATWG - budoucnost webu? od Davida Majdy. Zmíněný našeptávač je jen malou ukázkou toho, jak se život webových vývojářů s příchodem HTML5 změní.

Kdy se Web Forms 2 stanou součástí HTML5?

Ačkoliv se adopce týkala obou specifikací WHATWG, tedy HTML5 a Web Forms2, zatím se stále jedná o oddělené dokumenty.

Gregory J. Rosmaita se ptá:

when -- if ever -- is the WF2 document to be incorporated into the HTML5 draft, much less moved to W3C web space? are we to pick apart the WF2 draft in the same wise we are carefully reviewing HTML5, or is there still the possibility of a collaboration between WF2 and XForms integration? if so, the WF2 draft should be submitted to the W3C as a working group draft...

Narážka na XForms se týká výsledků hlasování o adopci, kde právě nekompatibilita Web Forms2 s XForms byla předmětem jedné námitky. Je pravda, že od té doby se otázkou webových formulářů nikdo nezajímal. V tuto chvíli se řeší základní otázky HTML5 a je otázkou kdy na formuláře dojde.

Ian Hickson odpovídá:

The "HTML5" language includes both the drafts that were called Web Forms 2 and Web Apps 1 at the time this group decided to adopt them. I haven't gotten around to merging the two into one document; but it's one of the many things that needs to happen over the next few years.

Já mám někdy pocit, že Ian měří čas v letech a desetiletích místo ve dnech a měsících, ale je pravda, že se dosud jeho odhady ukázaly jako reálné.