Základem téměř všech aplikací, které využívají jakoukoli formu GUI (grafického uživatelského rozhraní), jsou formuláře – tedy interaktivní oblast, v níž uživatel zadává vstupní data. Flex (samozřejmě) nabízí podporu pro formuláře, a rozhodně nejde o podporu ledabylou.

Poznámka: Určitou nevýhodou formulářů ve Flexu je, že jsou z hlediska prohlížeče „jednolité“ (jsou v HTML stránce jako jeden objekt bez rozlišení na jednotlivé elementy), a nefungují s nimi tedy různé doplňky a nástroje pro prohlížeče, které s formuláři pracují – např. nástroje pro zapamatování hesla či předvyplnění údajů (Roboform). – pozn. red.

Formulář je ve Flexu kontejner, který v podstatě zformátuje vložené prvky. Rozlišujeme 3 základní formulářové prvky.

• Form – samotný formulář
• FormHeading – hlavička
• FormItem – formulářový prvek

Pojďme si rovnou ukázat jednoduchý Flexový formulář:

<mx:Form>
        <mx:FormHeading label="Vyplňte prosím následující formulář" />
        <mx:FormItem label="E-mail">
            <s:TextInput id="txtEmail" />
        </mx:FormItem>
</mx:Form>

Funguje, ale nenabízí skoro nic výjimečného – prostě políčko pro libovolný řetězec s popiskem. Určitě by se hodilo ověřit, že text, který uživatel zadal, je opravdu ve formátu mailové adresy.

Naštěstí nabízí Flex takzvané Validátory, tedy nástroje, které ověří, zda uživatel zadal data, jaká jsme po něm chtěli. Zde nám stačí použít EmailValidator. Jako zdroj uvedeme txtEmail a property  text.

    <fx:Declarations>
        <mx:EmailValidator source="{txtEmail}" property="text" />
    </fx:Declarations>
    <mx:Form id="myForm" >
        <mx:FormHeading label="Vyplňte prosím následující formulář" />
        <mx:FormItem label="E-mail" required="true">
            <s:TextInput id="txtEmail" />
        </mx:FormItem>
        <mx:FormItem>
            <s:Button label="Odeslat" click="" />
        </mx:FormItem>
    </mx:Form>

Výsledkem bude formulář s validátorem. Navíc jsme určili položku jako povinnou ( required="true"), což Flex naznačí hvězdičkou.

Validace e-mailu dokáže rozpoznat několik různých chybových stavů – např. nevyplněný zavináč (missingAtSig­nError), chybu v doméně (invalidDomai­nError), chybu v IP adrese (invalidIPDoma­inError), chybné znaky (invalidCharError) atp. Flex umožňuje pro každý chybový stav nadefinovat vlastní text upozornění. Další informace o možnostech naleznete v dokumentaci FormValidatorů.

Tím se dostáváme k podstatě validátorů – vyvarovat se nekonečným podmínkám if, elseif při kontrole vstupu, a zpřehlednit tak co nejvíc samotný kód.

Flex obsahuje řadu užitečných validátorů CreditCardValidator, CurrencyValidator, DateValidator, EmailValidator, NumberValidator, PhoneNumberValidator, RegExpValidator, SocialSecurityValidator, StringValidator, StyleValidator, ZipCodeValidator. A ty, které neobsahuje, si můžete sami implementovat rozšířením třídy Validator. Nicméně si myslím, že RegExpValidator pokryje velké množství běžných problémů.

Zabudované validátory a techniky použití

Pojďme se nyní podívat na několik příkladů a technik z praxe, které ukážou možnosti formulářů a validace dat ještě hlouběji.

Omezení TextInputu na určité znaky

Pokud si přejete, aby šly zadávat do TextInputu pouze určité znaky, můžete použít parametr restrict. Následující kód omezí znaky pouze na čísla:

<s:TextInput restrict="0-9" />

Navázání dat z formuláře – Model

Model je užitečný objekt, která šetří čas při sběru dat z formuláře i při jeho předvyplnění. Naváže data na formulář v reálném čase – každá změna dat ve formuláři se okamžitě projeví v modelu a obráceně. Model je zároveň objekt, připravený k odeslání na server. K modelu můžete přistupovat z více míst a různě jej upravovat. Jednoduché použití formulářového modelu vypadá například takto:

    <fx:Declarations>
        <fx:Model id="userModel">
            <User>
                <FirstName>{txtName.text}</FirstName>
                <DOB>{txtSurname.text}</DOB>
                <Email>{txtEmail.text}</Email>
            </User>
        </fx:Model>
    </fx:Declarations>
    <mx:Form id="myForm" >
        <mx:FormHeading label="Vyplňte prosím následující formulář" />
        <mx:FormItem label="Jméno">
            <s:TextInput id="txtName" />
        </mx:FormItem>
        <mx:FormItem label="Příjmení">
            <s:TextInput id="txtSurname" />
        </mx:FormItem>
        <mx:FormItem label="E-mail">
            <s:TextInput id="txtEmail" />
        </mx:FormItem>
    </mx:Form>

Validátory plně pod kontrolou

Abychom se nebavili pouze o možnostech různých předdefinovaných validátorů, připomeneme si, že každý validátor nabízí řadu užitečných funkcí.

• – validate(…)  – zavolá validátor z kódu a vrátí ValidationResul­tEvent obsahující podrobnosti o proběhlé validaci
• – [static] validateAll(...)  – zavolá více validátorů a vrátí pole ValidationResul­tEvent[]

  Následující kód např. zjednoduší validaci více validátorů:

  var validatorErrorArray:Array = Validator.validateAll([dateValidator,emailValidator,numberValidator]);
  var isValidForm:Boolean = validatorErrorArray.length == 0;
  if (isValidForm) {
      // hurá
  }

• valid  – událost vyvolaná při úspěšném zvalidování
•   invalid  – událost vyvolaná při neúspěšném zvalidování
• trigger  – prvek, který validaci vyvolá – nemusí být nutně validovaná položka sama, ale např. tlačítko, na které kliknete – např. {myButton}
• triggerEvent  – událost, která validaci vyvolá – např. click

Vlastní validátor

Tvorba vlastního validátoru není nijak obtížná a spočívá především v implementaci několika nutných věcí – jako definování chráněné funkce doValidate. Pokud se zajímáte hlouběji o to, jak vytvořit vlastní validátor, doporučuji vaší pozornosti článek na DevNetu o tvorbě validátoru na validaci přípony souboru.

Formattery – formátování textu

Formatter slouží ke zformátování textu. Typické příklady textů, které používají zaběhnutý formát, jsou telefonní číslo, datum či měna. Můžete zkusit jeden z těchto formatterů: CurrencyFormatter, DateFormatter, NumberFormatter, PhoneFormatter, ZipCodeFormatter.

Jak se formatter používá? Definujeme formatString a podle zadaných parametrů se daný objekt zformátuje. V případě data následovně:

    <fx:Script>
        <![CDATA[
            private function init():void{
                trace(dateFormatter.format(new Date()));
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <mx:DateFormatter id="dateFormatter" formatString="měsíc: MM, den: DD, rok: YYYY"/>
    </fx:Declarations>

Výsledek v konzoli: měsíc: 02, den: 28, rok: 2010

Užitečné formulářové komponenty

Pokud chceme posunout možnosti našich formulářů o kus dál, můžeme využít hotové formulářové komponenty od jiných tvůrců. Ukažme si některé z nich, spíš jako tipy a inspiraci:

Knihovna FlexLib

Open source knihovna FlexLib je k dispozici pod licencí MIT a obsahuje spoustu užitečných pokročilých komponent, a to nejen pro formuláře. Z formulářových komponent jsou zajímavé například tyto:

– AdvancedForm – doplňuje možnosti formuláře o Reset, Undo a Redo (i s pomocí klávesových zkratek)

– PromptingTextInput – doplní do pole text, který po kliknutí zmizí (typicky „Search“)

– PromptingTextArea

– SuperTabBar

Více může napovědět seznam všech komponent FlexLibu.

Další komponenty

– Masked TextInput

– TimeChooser

– Flex 4 AutoComplete

– Rating component

– FlexWheel

– CheckBoxTree FX

– Flex Docking: podpora pro docking a snapping kontejnerů

Další zajímavé komponenty pro své formuláře naleznete např. na Flex.org/softwa­re/component.