Náhrada JS alertu blikajícím textem jako server control v ASP.NET

O univerzálním skriptu, pomocí kterého můžeme zobrazit blikající text, jsme již psali. V tomto článku využijeme současné schopnosti prohlížečů v oblasti CSS a SMIL, díky kterým může text blikat i bez použití klientského skriptu a navíc nenarušíme sémantiku dokumentu. Blikající text nakonec zapouzdříme do serverového ovládacího prvku.

Nejprve by bylo dobré zmínit, proč vlastně blikající text – hodí se pro některé speciální případy jako jsou chybová hlášení a různá upozornění. Na rozdíl od JavaScriptového alertu ovšem nenutí uživatele ke kliknutí na „OK“. Vynutíme-li zobrazení alertu, je další zpracování stránky pozastaveno, dokud uživatel onen alert neodklikne, a to nemusí být vždy žádoucí. Další nevýhodou alertu je fakt, že se bez podpory klientského skriptování vůbec nezobrazí. Náš blikající text se zobrazí vždy – alespoň bez blikání jako běžný text. Rozhodně není účelem odteď všude používat blikající text nebo nahradit všechny alerty blikajícím textem – následující návod pouze přináší další možnost, jejíž použití je dobré zvážit.

O tom jak na blikající text v různých prohlížečích pomocí Javascriptu jsme již psali, v dnešním příkladu však využijeme možností CSS a technologie SMIL a obejdeme se tak bez klientského skriptu – daní za jednoduchost ovšem bude funkční, ale ne úplně validní kód. Vzhledem k tomu, že počítám s použitím spíše v administračních nástrojích a pro intranet si myslím dá tento prohřešek zkousnout.

Jak vyplývá z použitelných vlastností CSS, můžeme pro blikání textu využít vlastnost text-decoration:blink. Jak záhy zjistíme, Internet Explorer tuto vlastnost kompletně ignoruje – zde se však nabízí využít tzv. behaviors v kombinaci se SMIL. Na tomto místě je dobré zmínit, že implementace blikání textu je v každém prohlížeči trochu odlišná, každý si bliká po svém. Má teď na mysli načasování střídání viditelné a neviditelné fáze. Zatímco prohlížeče na bázi Mozilly jen jaksi stydlivě na velmi krátký okamžik zneviditelňují daný text, Opera bliká pomaleji ale o to důkladněji – poměr obou fází je jedna ku jedné. Z toho jsem usoudil, že dobrým výsledkem v Internet Exploreru, kde si blikání musíme zajistit sami, bude nějaký kompromis mezi chováním obou předchozích zmíněných prohlížečů. Empiricky jsem nakonec stanovil hodnoty pro viditelnost po dobu 0.8 sekundy s tím, že doba pro opětné zahájení dalšího „bliku“ je 0.4 sekundy po zneviditelnění textu. Pokud elementu přiřadíme všechny popsané vlastnosti, tak jeho kód může vypadat nějak takto:

<span id=“ctl00″ dur=“0.8″ timeaction=“visible“ begin=“0; ctl00.end+0.4″ style=“text-decoration:blink;behavior:url(#default#time2);“>Blikající text</span>

Všimněte si, že je přiřazen také atribut id – ten je důležitý pro průběh animace, je zde využita speciální syntaxe atributu begin, kde přiřazujeme opětné zahájení animace s prodlevou 0.4 sekundy dokončení předchozí animace. Prohlédněte si ukázku (zdrojový kód).

Jak vyrobit serverový ovládací prvek jsme si již vyzkoušeli na příkladu Flash Playeru. Pro naši potřebu vytvoříme nový prvek zděděním původního prvku Label (ve skutečnosti je renderován jako element span), kterému v přepsané metodě Render() přidáme potřebné atributy. Nový prvek tak zdědí veškeré vlastnosti původního prvku, programově s ním budeme pracovat jako s původním prvkem Label. Pro kompatibilitu se staršími prohlížeči ještě můžeme obalit základní element span elementem blink. Díky tomuto elementu zajistíme blikání i v některých exotických prohlížečích nebo starších verzích prohlížeče Netscape – už jen samotným přidáním atributů pro animaci v IE vytvoříme nevalidní element, takže přidání nestandardního elementu blink zde bude už jen drobným zlem navíc.

using System;
using System.Web;
using System.Web.UI;
namespace Interval.CZ.Web.UI.WebControls
{
  [System.Web.UI.ToolboxData(„<{0}:Blink RunAt=\“Server\“></{0}:Blink>“)]
  public class Blink : System.Web.UI.WebControls.Label
  {
    protected override void Render (HtmlTextWriter writer)
    {
      base.Style.Add(„text-decoration“,“blink“);
      base.Style.Add(„behavior“,“url(#default#time2)“);
      base.Attributes.Add(„dur“,“0.8″);
      base.Attributes.Add(„begin“,“0; “ + base.ClientID + „.end+0.4“);
      base.Attributes.Add(„timeaction“,“visible“);
      writer.WriteFullBeginTag(„blink“);
      base.Render(writer);
      writer.WriteEndTag(„blink“);
    }
  }
}

V přepsané (override) metodě Render() přidáme položky kolekce stylu pomocí base.Style.Add(), potřebné atributy begin, dur, timeaction. Dále necháme vykreslit počáteční tag elementu blink, následně zavoláme zavoláme výkonnou část původní metody Render() a na závěr vypíšeme ukončovací tag elementu blink.

Zde chci jen upozornit na hodnotu atributu begin, kde prostřednictvím ClientID získáme id, s kterým je element renderován do stránky. Zde je problém v ASP.NET verze nižší než 2.0 – pokud prvku nepřiřadíme ve stránce jeho id, pak je výsledný span renderován bez id. Pokud je náš prvek vnořen v nějakém jiném prvku, například v User Controlu nebo v šabloně Datagridu, kde jsou automaticky generované identifikátory, začíná klientské id podtržítkem. V obou mezních případech nám text nebude v Internet Exploreru blikat – s podtržítkem na začátku id si bohužel neporadí. Řešení jsou zde dvě – pečlivě přiřadit id všem prvkům tak, aby se id vyrenderovalo a nezačínalo podtržítkem, anebo klienstké id upravit přepsáním metody AddAttributesToRender(). Druhý způsob bych spíše nedoporučil s ohledem na to, že v ASP.NET od verze 2.0 se již uvedený problém nevyskytuje. Kdo by jej však přesto chtěl využít, nalezne jej zakomentovaný ve zdroji ukázky ke stažení.

Třídu nakonec zkompilujeme a uložíme do složky Bin v kořeni virtuální aplikace na serveru.

Ukázka použití nového prvku ve stránce:

<%@ Page Language=“C#“ EnableSessionState=“False“ EnableViewState=“True“ Debug=“False“ %>
<%@ Register TagPrefix=“Sc“ Namespace=“Interval.CZ.Web.UI.WebControls“ Assembly=“Interval.CZ.Web.UI.WebControls.Blink“ %>
<!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“ xml:lang=“cs“ lang=“cs“ dir=“ltr“>
  <head>
    <meta http-equiv=“Content-type“ content=“text/html; charset=utf-8″ />
    <title>Blink Control</title>
  </head>
  <body>
    <div>
      <Sc:Blink Text=“Font-Bold=&quot;False&quot;“ Font-Bold=“False“ RunAt=“Server“ />
      <br />
      <Sc:Blink Text=“Font-Bold=&quot;True&quot;“ Font-Bold=“True“ RunAt=“Server“ />
      <br />
      <Sc:Blink Text=“Style=&quot;font-weight:bold;&quot;“ Style=“font-weight:bold;“ RunAt=“Server“ />
      <br />
      <Sc:Blink Text=“Font-Italic=&quot;True&quot;“ Font-Italic=“True“ RunAt=“Server“ />
    </div>
  </body>
</html>

V direktivách stránky vidíme zaregistrování ovládacího prvku, kde jsme nadefinovali předponu tagu „Sc“ – ta je potom skutečně použita i v tagu našeho nového prvku. Prvek Blink je použit 4x pro ukázku možností formátování textu shodně, jako při použití prvku Label. Třetí ukázka slouží pro porovnání výsledků v prohlížeči Opera. ASP.NET verze nižší než 2.0 totiž prohlížeč Opera příliš nezná, a tak namísto nastavení stylu obalí text značkou b – to ovšem zapříčiní, že takový text v Opeře nebude blikat. Kdo tedy používá starší verzi ASP.NET a chce si být jist dobrou funkcí i v alternativních prohlížečích, ať raději použije nastavení stylem namísto vestavěných vlastností původního prvku Label. V ASP.NET od verze 2.0 tento problém není, zde budou korektně blikat i v Opeře všechny 4 příklady.

Prvek by jistě šlo opracovat důkladněji, aby byl i validní – vzhledem k jeho použití pro různá výstražná hlášení však předpokládám jeho využití v různých administračních rozhraních, intranetech, nebo aplikacích, které nejsou určena pro alternativní zařízení. Proto jsem se validitou kódu, vyznačováním prostoru názvů pro SMIL animace a přiřazení hodnot atributů klientským skriptem zvlášť nezabýval. V každém případě poslouží jako ukázka snadné tvorby serverového ovládacího prvku z libovolného kódu, který chci ve stránkách opakovaně používat a programově měnit jeho vlastnosti.