Flash Player Control v ASP.NET

23. června 2003

•

V tomto článku vytvoříme užitečný serverový ovládací prvek pro snadné použití flashe ve stránce. Na rozdíl od článků o tvorbě serverových ovládacích prvků si také ukážeme, jak prvek zkompilovat i bez použití Visual Studia.

Jako základ budoucího serverového ovládacího prvku nám tedy poslouží výchozí „kostra“, jak je popsána v článku o jeho tvorbě. Do této kostry „vpašujeme“ kód, který má prvek renderovat – získáme jej z článku oautodetekci flash pluginu JavaScriptem. Úkolem našeho prvku tedy nebude nic jiného, než podle zadaných parametrů do stránky vyrenderovat potřebný kód JavaScriptu, teprve tento JavaScript pak provede u klienta požadované akce. V principu nebude serverový prvek nijak zvlášť inteligentní, prostě jen podle nastavených parametrů „vysype“ do stránky kód detekčního skriptu. Získáme ovšem možnost snadno ovládat použití flashe v libovolné ASP.NET stránce.

Při tomto způsobu, který předpokládá práci bez Visual Studia, si nejprve připravíme části kódu, které má prvek generovat. Využijeme třídu HtmlTextWriter – v našem jednoduchém prvku nám postačí znalost několika členů (WriteBeginTag(); WriteAttribute(); Write(); WriteLn(); WriteFullBeginTag(); WriteEndTag(); Write(HtmlTextWriter.TagRightChar);). Jednoduše poskládáme části ovládacího prvku tak, aby to, co z něj dorazí do prohlížeče, bylo syntakticky vpořádku a také úhledně odsazeno. Zda tomu tak je, poznáme prostým porovnáním zdrojového kódu testovací stránky, ve které prvek ověřujeme, s kódem původního skriptu.

Nyní, když nám prvek generuje obsah skriptu, si promyslíme, které vlastnosti (proměnné) prvku zveřejníme – prakticky co bude u prvku jeho uživatel moci nastavit. Následně si promyslíme, jakého typu bude ta která vlastnost našeho prvku. Někdy se hodí i „přerazit“ (override) zděděnou vlastnost, tehdy je potřeba ovšem dodržet stejný typ. V našem případě jsem se rozhodl většinu vlastností definovat jako string (prvek je funkčně opravdu jednoduchý a ti, kteří používají flash, nastavení pro plugin dobře znají), jen pro proměnnou požadované verze pluginu jsem zvolil typ int a hodnoty width a height budou typu Unit. Dvě poslední jmenované totiž nahrazují zděděnou vlastnost z Webcontrol, a tak je třeba typ dodržet. Následně si nadeklarujeme vnitřní (private) proměnné a k nim odpovídající veřejné (public) proměnné. V okamžiku, kdy máme proměnné nadefinované, nahradíme části parametrů generovaného kódu vlastními proměnnými. Například writer.WriteAttribute(„wmode“,“transparent“); nahradíme za writer.WriteAttribute(„wmode“,wmode);.

V tuto chvíli by se dalo říci, že prvek již dovede generovat na základě zadaných vlastností kompletní kód. Pokud ale některé vlastnosti v aplikaci nebudou nastaveny, náš prvek vygeneruje atributy s prázdnými hodnotami, nedefinované adresy k obrázku a podobně. Proto prvek ještě opatříme rozhodováním, které atributy, případně i které elementy generovat. Pokud například není zadána adresa pro alternativní obrázek, vůbec element obrázku nebudeme generovat. U proměnných typu string nám stačí otestovat, zda je hodnota null – pokud ano, vlastnost nebyla uživatelem definována a odpovídající atribut nebudeme vůbec generovat. Některé vlastnosti musejí být zadány vždy (bez nich, nebo pokud by byly nulové, nemá prvek smysl), například width a height, u nichž navíc použijeme konverzi z typu Unit na string.

Jelikož máme ve výsledném vygenerovaném kódu zanořeny vlastně dva elementy (object a embed), je zde atribut id pro vnořený embed vytvářen tak, že se k hodnotě ID přidá ještě řetězec „_2“, aby byl i vnořený embed případně dostupný pro ovládání klientským skriptem.

Tuto poněkud úmornou práci jsem odvedl za vás, takže si můžete prohlédnout výsledek. Jak vidíte, je to docela nepřehledná džungle – hlavní podíl na tom nese fakt, že negenerujeme samotné elementy, ale řádky JavaScriptu, které teprve u klienta zajišťují vygenerování patřičného HTML kódu.

Zdrojový kód našeho prvku uložíme do souboru s příponou cs, já jsem zvolil název ControlMacromediaFlashPlaer. I bez Visual Studia snadno zkompilujeme prvek pomocí kompilátoru CSC.EXE. Pro tyto operace jsem si napsal dávkový soubor Make.bat:

@Echo Off
Csc.exe /t:library /out:%1.dll %1.cs
Pause

Do příkazového řádku tedy zadáme povel Make ControlMacromediaFlashPlayer a po úspěšné kompilaci nám v témže adresáři vznikne soubor ControlMacromediaFlashPlayer.dll. Tento soubor nakopírujeme do adresáře Bin naší virtuální aplikace na serveru a nový prvek je připraven k použití. Ukažme si tedy stránku, která bude fungovat jako jednoduchý přehrávač určený pro vkládání do jakékoli stránky. Aplikace využívající tento ovládací prvek jednoduše převezme z QueryStringu zadané parametry a na základě nich vyrenderuje kompletní HTML stránku s vloženým přehrávačem.

<%@Page Language=“C#“ EnableViewState=“False“ EnableSessionState=“False“ Trace=“False“ Debug=“False“ %>
<%@OutputCache Duration=“360″ VaryByParam=“*“ %>
<%@Register TagPrefix=“mycode“ Namespace=“Macromedia.Flash“ Assembly=“ControlMacromediaFlashPlayer“ %>
<script runat=“server“>
void Page_Load (Object sender, EventArgs e)
{
  string width = Request.QueryString[„Width“];
  string height = Request.QueryString[„Height“];
  string requiredversion = Request.QueryString[„RequiredVersion“];
  string alternateimageurl = Request.QueryString[„AlternateImageUrl“];
  string alternateimagetext = Request.QueryString[„AlternateImageText“];
  string alternatelinkurl = Request.QueryString[„AlternateLinkUrl“];
  string alternatelinktarget = Request.QueryString[“ AlternateLinkTarget“];
  string alternatelinkonclick = Request.QueryString[„AlternateLinkOnclick“];
  string bgcolor = Request.QueryString[„BgColor“];
  string mediaurl = Request.QueryString[„MediaUrl“];
  string menu = Request.QueryString[„Menu“];
  string quality = Request.QueryString[„Quality“];
  string salign = Request.QueryString[„SAlign“];
  string scale = Request.QueryString[„Scale“];
  string wmode = Request.QueryString[„WMode“];
  if (width != null)
    if (width.Length != 0)
      FlashControl.Width = Convert.ToInt32(width);
  if (height != null)
    if (height.Length != 0)
      FlashControl.Height = Convert.ToInt32(height);
  if (requiredversion != null)
    if (requiredversion.Length != 0)
      FlashControl.RequiredVersion = Convert.ToInt32(requiredversion);
  if (alternateimageurl != null)
    if (alternateimageurl.Length != 0)
      FlashControl.AlternateImageUrl = alternateimageurl;
  if (alternateimagetext != null)
    if (alternateimagetext.Length != 0)
      FlashControl.AlternateImageText = alternateimagetext;
  if (alternatelinkurl != null)
    if (alternatelinkurl.Length != 0)
      FlashControl.AlternateLinkUrl = alternatelinkurl;
  if (alternatelinktarget != null)
    if (alternatelinktarget.Length != 0)
      FlashControl.AlternateLinkTarget = alternatelinktarget;
  if (alternatelinkonclick != null)
    if (alternatelinkonclick.Length != 0)
      FlashControl.AlternateLinkOnclick = alternatelinkonclick;
  if (bgcolor != null)
    if (bgcolor.Length != 0)
      FlashControl.BgColor = bgcolor;
  if (mediaurl != null)
    if (mediaurl.Length != 0)
    {
      FlashControl.MediaUrl = mediaurl;
      FlashControl.Visible = true;
    }
  if (menu != null)
    if (menu.Length != 0)
      FlashControl.Menu = menu;
  if (quality != null)
    if (quality.Length != 0)
      FlashControl.Quality = quality;
  if (salign != null)
    if (salign.Length != 0)
      FlashControl.SAlign = salign;
  if (scale != null)
    if (scale.Length != 0)
      FlashControl.Scale = scale;
  if (wmode != null)
    if (wmode.Length != 0)
      FlashControl.WMode = wmode;
}
</script><?xml version=“1.0″ encoding=“utf-8″ ?>
<!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-CZ“ lang=“cs-CZ“ dir=“ltr“>
<head>
<meta http-equiv=“Content-type“ content=“text/html; charset=utf-8″ />
<meta http-equiv=“Content-script-type“ content=“text/javascript“ />
<meta http-equiv=“Imagetoolbar“ content=“no“ />
<meta http-equiv=“MSThemeCompatible“ content=“no“ />
<meta name=“MSSmartTagsPreventParsing“ content=“true“ />
<head>
<title>Flash Player</title>
</head>
<body style=“background-color:#FFFFFF;margin:0px;padding:0px;overflow:auto;height:100%“>
<mycode:Player Id=“FlashControl“ Visible=“false“ RunAt=“server“ />
</body>
</html>

V této ukázce použití skriptu jsou převzaty hodnoty z QueryStringu, následuje test každé z nich, zda vůbec byla zadána, a pokud ano, nastavíme vlastnost našeho ovládacího prvku. Je zde také vidět zaregistrování ovládacího prvku a nastavení cachování. Všimněte si použité konverze u proměnné, udávající požadovanou verzi pluginu. Za zmínku stojí také nastavení vlastnosti Visible jen v případě, kdy je zadána cesta k souboru *.swf – jak vidíte, výchozí hodnota ve stránce je false a je přepsána ve skriptu právě jen tehdy, pokud má MediaUrl nějakou hodnotu. Není-li cesta nastavena, ovládací prvek se nebude vůbec renderovat.

Příklad nastavení parametrů v QueryStringu:

FlashPlayer.aspx?Width=648&Height=37&RequiredVersion= 5&MediaUrl=homeBar.swf&AlternateImageUrl=logo.gif

FlashPlayer můžete použít i jako stránku zobrazenou v ramcích (nebo iframe), a tak jej využít třeba i ve starší ASP stránce. Ještě zbývá shrnout, jaké vlastnosti vůbec našemu prvku můžeme nastavovat:

Width – šířka
Height – výška
RequiredVersion – požadovaná verze pluginu, jinak je zobrazen obrázek (je-li zadána AlternateImageUrl)
AlternateImageUrl – adresa alternativního obrázku
AlternateImageText – popisek alternativního obrázku
AlternateLinkUrl – URL odkazu alternativního obrázku
AlternateLinkTarget – cíl odkazu alternativního obrázku
AlternateLinkOnclick – obsluha onclick alternativního obrázku
BgColor – barva pozadí pro flash plugin
MediaUrl – adresa souboru flashe (*.swf)
Menu – povolit kontextové menu (false/true)
Quality – kvalita při přehrávání (low,medium,high)
SAlign
Scale
WMode – volba průhlednosti (transparent)
FlashParam – předávané parametry

Na závěr se sluší dodat, že prvek je sice funkční, ale nijak neusnadňuje použití ve vizuálních nástrojích (Visual Studio, WebMatrix). Jak prvek doplnit o údaje pro vizuální rozhraní, aby uživatel mohl jeho vlastnosti pohodlně „naklikat“, to si ukážeme v dalším článku.

Veškeré zde popisované soubory si můžete stáhnout.