První praktická ukázka použití Atlasu

Když už jsem v minulém spotu napsal takovou pěknou webovou službu, proč ji nevyužít k praktické ukázce využití Atlasu :) Následůjící kód převádí zadaný text v Texy syntaxu na XHTML a zobrazí ho do stránky s polečně s výpisem získaného kódu.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Texy Converter v Atlasu</title>
    <style type="text/css">
        .bordered {border:3px double #CCC;}
        .pre {font-family:monospace;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <atlas:ScriptManager ID="ScriptManager1" runat="server" />

        <div>
            <fieldset>
                <legend>Převést Texy! do XHTML</legend>
                <label for="texyInput">Texy kód</label>
                <br />
                <textarea id="texyInput" cols="80" rows="12">
                ukázkový kód v "Texy!":[http://www.texy.info]
                </textarea>
                <br />
                <input type="button" id="convertButton" value="Převeď" />
            </fieldset>

            <!-- Zprava behem nacitani dat -->
            <div id="progress">Načítám data...</div>

            <!-- Placeholder pro vystup -->
            <div id="output">
                <h2>Formátovaný text</h2>
                <div id="xhtmlOutput" class="bordered"></div>
                <h2>XHTML kód</h2>
                <div id="textOutput" class="bordered pre"></div>
            </div>
        </div>
    </form>

    <script type="text/xml-script">
        <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
            <components>
                <control id="output" visible="false" />
                <control id="progress" visible="false" />

                <label id="xhtmlOutput">
                  <bindings>
                    <binding id="resultsBinding1" dataContext="texyService"
                             dataPath="result" property="text" automatic="false" />
                  </bindings>
                </label>

                <label id="textOutput" htmlEncode="true">
                  <bindings>
                    <binding id="resultsBinding2" dataContext="texyService"
                             dataPath="result" property="text" automatic="false" />
                  </bindings>
                </label>

                <textBox id="texyInput" />

                <button id="convertButton">
                  <click>
                    <invokeMethod target="texyService" method="invoke" />
                    <setProperty target="progress" property="visible" value="true" />
                  </click>
                </button>

                <serviceMethod id="texyService" methodName="ConvertToXhtml"
                               url="/ws/TexyService.asmx">
                  <bindings>
                    <binding property="parameters" propertyKey="text"
                             dataContext="texyInput" dataPath="text" />
                  </bindings>
                  <completed>
                    <invokeMethod target="resultsBinding1" method="evaluateIn" />
                    <invokeMethod target="resultsBinding2" method="evaluateIn" />
                    <setProperty target="output" property="visible" value="true" />
                    <setProperty target="progress" property="visible" value="false" />
                  </completed>
                </serviceMethod>
            </components>
        </page>
    </script>
</body>
</html>

Celá ukázka se obešla bez napsání jediného řádku JS kódu – byla použita deklarativní metoda :) Na ukázce neni moc zvláštností. Jde o standardní ASP.NET stránku s přidaným ScriptManagerem, formulářem pro zadávání textu a placeholdery pro vypsání výsledku. Následuje XML-Script a tomu se podíváme na zoubek.

Prvním krokem je přidání komponent – navázání HTML prvků s objektovým modelem Atlasu. Přidal jsem output a zneviditelnil ho, aby se neukazovaly prázdné divy a nadpisy před příchodem dat. Přidal jsem další dva divy jako labely, které načítají data z webové služby, a ten druhý encoduje HTML na entity.

Přidání textBoxu pro vstup je samozřejmostí :) Odesílacímu tlačítku přiřadíme ovladač události click a nastavíme, aby odeslal data webové službě a zobrazil box s výsledkem. Poslední komponentou je samotná služba. Ta má pouze jeden vstupní parametr text, který je svázaný s hodnotou vstupního políčka.

A pokud proběhla komunikace se službou v pořádku a máme výsledek, svážeme ho s výstupními placeholdery. A to je pro dnešek vše, přátelé. Na případné dotazy rád odpovím v komentářích.

Doplnění

Díky věcné připomínce Petra v komentářích jsem doplnil zobrazení zprávy o průběhu akce při probíhající komunikaci se službou. Díky ;)

Ukázka aplikace

Komentáře

Discogio

14.33 - 21. dubna 2006 | #

Tak tohle se ti vskutku povedlo ;) Šikula.
DeaLer

19.54 - 21. dubna 2006 | #

Je nějak možné rozběhat Atlas v Opeře (mám verzi 9 BETA)? W3 validátor mi hlásí chyby v XML scriptu na konci stránky (DTD XHTML 1.0 Transitional) – je to chyba validátoru, nebo scriptu? IMHO myslím že validátor by si neměl všímat kódu mezi tagy <script></script>.
Aleš Roubíček

21.48 - 21. dubna 2006 | #

Opera je zatim na vedlejší koleji, její JS neumožňuje nějakým způsobem implementovat vrstvu kompatibility, autoři spolu sice jednají o nápravě, ale uvidíme… AD validátor: :D :D a chodíš bez něj na záchod? Už dlouho mě omezuje DTD, asi začnu dělat něco jinýho :)
DeaLer

10.57 - 22. dubna 2006 | #

Já nejsem typ, co se po napsání řádku kódu hned dívá jestli je to validní, ale přesto mi na čistotě kódu záleží a rozhodně mě to neomezuje, proto mě zajímá jak je to s tím XML scriptem (dokážu přejít, že to není validní, ale rád bych zjistil kde je chyba). DTD si vybírám podle typu webu.
Aleš Roubíček

17.11 - 22. dubna 2006 | #

Sorry, to byl jen vtip. Mě taky záleží na validitě a na well-formed, ale občas se člověk nemůže brzdit validátorem, kterej je taky plnej chyb – dokument je, jak jsi správně psal, v pořádku. Co mě však štve, je že Atlas nerozparsuje XML-Script v dokumentu s typem application/xhtml+xml. Doufám, že další release Atlasu bude umožňovat vkládání externích XML-Scriptů, tím by se spousta věcí ulehčila.
Petr Šnobelt

09.28 - 25. dubna 2006 | #

Ahoj V ukázce mi chybí indikátor, že se něco děje (pro pomalejší linky)