Web forms a konverze textových smajlíků v ASP.NET

15. ledna 2003

•

V předchozím článku jsme si ukázali konverzi textových smajlíků na obrázkové v aplikacích postavených na PHP. Dnešní článek řeší totéž pomocí tzv. web forms v ASP.NET.

Následující ukázka je celý webový formulář, v úplném nasazení by bylo potřeba namísto prostého vypsání odesílaného textu zařadit uložení příspěvku do databáze nebo textového souboru. Dávám přednost jazyku C# a pro jednoduchost naší ukázky jsem zvolil pro záhlaví a zápatí XHTML dokumentu zastaralou, ale přesto stále použitelnou metodu include (ačkoli je možné tento způsob stále využívat, zkušenější ji nahradí například metodou uživatelských ovládacích prvků). V ukázkovém kódu tak vidíme typickou deklaraci jazyka stránky, zavedení potřebných prostorů názvů, obslužnou logiku formuláře a vlastní prvky formuláře, které se zobrazí uživateli. Ve vložených souborech je záhlaví a zápatí stránky tak, aby byl výsledný dokument v prohlížeči korektním XHTML dokumentem.

Pro konverzi kódu smajlíku na tag obrázku vyžijeme metodu Text.Replace (pro její použití je dobré explicitně zavést prostor názvů System.Text.Regular.Expressions, který tuto metodu zpřístupňuje). Bylo by možné vytvořit asociativní pole, postupně ho procházet a smajlíky nahrazovat. Smajlíků však není zase tolik, a tak nebude velkým prohřeškem, pokud konverzi každého smajlíku provedeme na zvláštním řádku. Konverzi provedeme jako obsluhu události, která nastane po odeslání příspěvku tlačítkem Odeslat.

Nad formulářem je ve stránce webový ovládací prvek – návěští (label) VystupZadano. Pomocí něj budeme zobrazovat ukázkový výstup konverze.

Formulář, který umožňuje vkládat smajlíky kliknutím na obrázek (vychází z předchozího článku), má nastaven atribut runat="server", což je důležité k tomu, abychom mohli zpracovat události na straně serveru. Vkládání smajlíků je zpracováváno v prohlížeči JavaScriptem, pokud se ale blíže podíváte na kód obrázků, zjistíte, že to nejsou klasické tagy img – je využito ovládacích prvků HTML. Formulář tak máme předpřipraven pro případ, že bychom i vkládání smajlíků kliknutím chtěli obsloužit funkcí na straně serveru. Bylo by však samozřejmě možné použít i klasické tagy obrázků, záleží, co vše s aplikací dále zamýšlíme a jak dalece má být kompatibilní s různými prohlížeči. Čím více věcí ponecháme zpracovávat na serveru, tím bude aplikace kompatibilnější. Systém rozpoznává jednotlivé prohlížeče a v závislosti na tom generuje i rozdílný kód.

<%@ page language="C#" %>
<%@ import namespace="System.Text.RegularExpressions" %>
<script runat="server">
void OnConvert (Object sender, EventArgs e)
{
VystupZadano.Text = txtbody.Text;
VystupZadano.Text = VystupZadano.Text.Replace(":-D","<img src=\"smileys/1.gif\" />");
VystupZadano.Text = VystupZadano.Text.Replace(":-D","<img src=\"smileys/1.gif\" />");
VystupZadano.Text = VystupZadano.Text.Replace(":oD","<img src=\"smileys/15.gif\" />");
VystupZadano.Text = VystupZadano.Text.Replace(":-))","<img src=\"smileys/2.gif\" />");
VystupZadano.BackColor = System.Drawing.Color.Tomato;
}
void Reset (Object sender, EventArgs e)
{
txtbody.Text = "";
VystupZadano.Text = "";
}
</script>
<!– #include file="hlavicka.asp.inc" –>
<h3><b>Konverze smajlíků</b></h3>
<asp:label id="VystupZadano" runat="server" />
<hr />
<script type="text/javascript">
<!–
function Smile(xsmile)
{
document.forms[0].txtbody.value=document.forms[0].txtbody.value+xsmile
}
// –>
</script>
<form runat="server">
<asp:image onclick="Smile(‚:-D ‚)" src="smileys/1.gif" width="15" height="15" align="middle" runat="server" />
<asp:image onclick="Smile(‚:oD ‚)" src="smileys/15.gif" width="15" height="15" align="middle" runat="server" />
<asp:image onclick="Smile(‚:-)) ‚)" src="smileys/2.gif" width="15" height="15" align="middle" runat="server" />
<asp:image onclick="Smile(‚:-) ‚)" src="smileys/3.gif" width="15" height="15" align="middle" runat="server" />
<asp:image onclick="Smile(‚;-) ‚)" src="smileys/4.gif" width="15" height="15" align="middle" runat="server" />
<br />
<asp:TextBox textmode="multiline" id="txtbody" rows="5" cols="50" runat="server" />
<br />
<asp:Button Text="Odeslat" onclick="OnConvert" runat="server" />
<asp:Button Text="Vymazat" onclick="Reset" runat="server" />
</form>
<!– #include file="paticka.asp.inc" –>

Jakmile se webový formulář odešle, dojde k obsluze události funkcí OnConvert. Veškeré smajlíky v textu jsou nahrazeny odpovídajícím obrázkem, nakonec je pro názornost ještě nastavena barva pozadí textu příspěvku. Celý příspěvek s převedenými smajlíky je nastavenou barvou vypsán v místě ovládacího prvku návěští VystupZadano. Všimněte si standardní vlastnosti webových formulářů v ASP.NET – formulář si po odeslání pamatuje svůj stav, programátor se o to nemusí vůbec starat. V poli textarea tak zůstává i po odeslání zadaný text, ačkoli v prvku návěští (v HTML kódu stránky je realizován tagem SPAN) jsou již smajlíky převedeny na obrázky.

Povšiměte si také řešení tlačítka pro výmaz formuláře – díky tomu, že web forms si v ASP.NET uchovávají stav, by klasické tlačítko Reset (které jen nastaví výchozí stav s jakým byla stránka načtena) formulář nevymazalo. Vymazání je potřeba provést na serveru vyprázdněním proměnné formulářového pole txtbody. K tomu nám slouží definovaná funkce Reset.

Kód naší ukázky si můžete stáhnout včetně obrázků, snadno si jej pak upravíte pro vlastní aplikaci.