ICQ Pager jako User Control v ASP.NET

6. ledna 2004

•

O vlastním ICQ Pageru jsme již psali, v tomto článku vytvoříme user control, který v ASP.NET stránce zajistí stejnou funkci. Vytvoření takového uživatelského prvku je velmi snadné, přesto nakonec dostaneme prvek, který lze bez úprav ihned použít v libovolné stránce, proto zde mohou zejména začátečníci získat inspiraci k přepsání užitečných částí stránky nebo formuláře do uživatelského prvku.

O tom, jak ICQ pager ve webové stránce funguje, jsme již psali. Zde si jen shrňme, že základem je formulář (klasický, nezpracovávaný na serveru), jehož obsah odesíláme do skriptu na serveru ICQ. Aby zůstala naše aplikace k dispozici i po odeslání formuláře na cizí server, odesíláme formulář do nového okna. Pro pohodlí uživatele otevřeme nové okno definovaných rozměrů pomocí JavaScriptu – tak bude mít jen nezbytně nutné rozměry a nebude zbytečně strašit na obrazovce. Dalšími doplňky jsou potom funkce podobné těm ve formuláři klasického ICQ – pole informující o UIN, přezdívce a emailové adrese příjemce (ukazují, komu zprávu posílám), ukazatele počtu napsaných a zbývajících odkazů, tlačítka pro přidání uživatele do kontakt listu, zobrazení informací o uživateli na webu a odkaz na takzvané Centrum zasílání zpráv. Vyzkoušejte si ukázku (zdroj ke stažení) – do URL je nutno doplnit vaše korektní číslo ICQ.

Pro jednoduchost jsem původně zmiňovaný formulář přepracoval na User Control, ten pak můžeme snadno použít v libovolné aplikaci. Daní za jednoduchost přípravy je zde fakt, že náš uživatelský prvek v podobě *.ascx souboru musíme ke každé aplikaci nakopírovat. Správnější by určitě bylo vytvořit takzvaný serverový ovládací prvek, který je přímo určen pro opakované použití ve více aplikacích.

Připravujeme-li vlastní ovládací prvek, je důležité si uvědomit, které vlastnosti prvku chceme zveřejnit, čili umožnit jejich nastavení. Určitě by se jich ve zde popisovaném prvku dalo zveřejnit mnohem více, pro názornost jsem popsal jen ty nejzásadnější, bez kterých by byla práce s prvkem obtížná. Chybějící vlastnosti si jistě zájemce zvládne dopsat sám (mám na mysli např. styl textových polí pro editaci textu, ale také pro ukazatele počtu znaků nebo mailové adresy, styl odesílacích tlačítek). Protože se nepředpokládá vícenásobné použití ve stránce a „nechtěl jsem se s tím párat“, použil jsem pro definici hodnot některých prvků raději Literal, než převod celého prvku na HTML control přidáním atributu runat=“server“, a to zejména z toho důvodu, že pro odesílání zprávy potřebujeme přesně pojmenovaná pole formuláře, což bychom nemuseli být schopni zajistit, pokud by prvek běžel na serveru (jeho klientské ID a name by bylo .net Frameworkem modifikováno).

<%@ Control Language=“C#“ %>
<%@ Import Namespace=“System.Drawing“ %>
<script language=“C#“ runat=“server“>
public String ICQ
{
set
{
    ltrIcq.Text = value;
    lblIcq.Text = „ “ + value + „ “;
    imgIcq.ImageUrl = „http://wwp.icq.com/whitepages/online/1,,,00.gif?icq=“ + value + „&img=5“;
    imgIcq.Visible = true;
    hprMsgCenter.NavigateUrl = „http://wwp.icq.com/wwp/1,,cluin,00.html?Uin=“ + value;
    hprMsgCenter.Visible = true;
    hprUserInfo.NavigateUrl = „http://web.icq.com/whitepages/about_me?Uin=“ + value;
    hprUserInfo.Visible = true;
    btnAddIcq.Attributes.Add(„onclick“, „location.href=’http://web.icq.com/whitepages/add_me/1,,,00.icq?uin=“ + value + „&action=add'“);
    btnAddIcq.Visible = true;
    btnSend.Visible = true;
}
}
public String Nick
{
set { lblNick.Text = „ “ + value + „ “; }
}
public String Email
{
set { lblEmail.Text = „ “ + value + „ “; }
}
public String Text
{
set { ltrText.Text = value; }
}
public Unit Width
{
set { pnlIcq.Width = value; }
get { return pnlIcq.Width; }
}
public Unit Height
{
set { ltrHeight.Text = value.ToString(); }
get { return Unit.Parse(ltrHeight.Text); }
}
public System.Web.UI.WebControls.BorderStyle BorderStyle
{
set { pnlIcq.BorderStyle = value; }
get { return pnlIcq.BorderStyle; }
}
public Unit BorderWidth
{
set { pnlIcq.BorderWidth = value; }
get { return pnlIcq.BorderWidth; }
}
public Color BackColor
{
set { pnlIcq.BackColor = value; }
get { return pnlIcq.BackColor; }
}
public Color ForeColor
{
set { pnlIcq.ForeColor = value; }
get { return pnlIcq.ForeColor; }
}
</script>
<script type=“text/javascript“>
<!– <![CDATA[
function counter(box)
{
    msgLength = box.value.length;
    if (msgLength > 449)
    {
      box.value = box.value.substring(0,449);
      msgLength = box.value.length;
    }
    else
      charl = 450 – msgLength;
    document.forms.icqform.charin.value = msgLength;
    document.forms.icqform.charle.value = charl;
}
//]]> –>
</script>
<asp:Panel id=“pnlIcq“ RunAt=“server“ Width=“475px“ Height=“190px“ Style=“padding:4px;font-family:Tahoma,Arial;font-size:11px;“ BorderStyle=“Outset“ BorderWidth=“2px“ ForeColor=“MenuText“ BackColor=“Menu“>
<form name=“icqform“ action=“http://wwp.icq.com/whitepages/page_me/1,,,00.html“ method=“POST“ style=“margin:0px;“ target=“_pager“ onsubmit=“window.open(“, ‚_pager‘, ‚width=630, height=340, channelmode=no, directories=no, fullscreen=no, location=no, menubar=no, resizable=yes, scrollbars=yes, status=no, titlebar=no, toolbar=no‘);“>
    <fieldset style=“padding:2px;“>
      <legend>Zpráva pro<br /></legend>
        <div style=“float:right;margin:1px;“>
          <asp:HyperLink Id=“hprMsgCenter“ Visible=“false“ ToolTip=“Centrum zasílání zpráv“ ImageUrl=“ICQPager/ICQPagerMsgCenter.gif“ Width=“18px“ Height=“16px“ BorderWidth=“2px“ BorderStyle=“Outset“ Target=“_pager“ RunAt=“server“ />
          <asp:HyperLink Id=“hprUserInfo“ Visible=“false“ ToolTip=“Detaily uživatele“ ImageUrl=“ICQPager/ICQPagerUserInfo.gif“ Width=“18px“ Height=“16px“ BorderWidth=“2px“ BorderStyle=“Outset“ Target=“_pager“ RunAt=“server“ />
        </div>
        <span style=“white-space:nowrap;“>
           ICQ#: <asp:Image Id=“imgIcq“ Visible=“false“ alt=“Stav uživatele“ Style=“width:18px;height:18px;border:0px;“ RunAt=“server“ />
          <asp:Label Id=“lblIcq“ BorderStyle=“Inset“ BorderWidth=“2px“ Text=“ nezadáno “ RunAt=“server“ />
            Nick: <asp:Label Id=“lblNick“ BorderStyle=“Inset“ BorderWidth=“2px“ Text=“ nezadáno “ RunAt=“server“ />
            Email: <asp:Label Id=“lblEmail“ BorderStyle=“Inset“ BorderWidth=“2px“ Text=“ nezadáno “ RunAt=“server“ />
        </span>
      </fieldset>
      <fieldset style=“padding:2px;“>
        <legend>Od<br /></legend>
          <input type=“hidden“ name=“to“ value=“<asp:Literal Id=’ltrIcq‘ RunAt=’server‘ />“ />
          <input type=“hidden“ name=“from“ value=“DJmix“ />
          Předmět: <input type=“text“ size=“30″ maxlength=“40″ name=“subject“ />
          <br />
          Tvůj email: <input type=“text“ size=“25″ maxlength=“40″ name=“fromemail“ />
            Znaků: <input type=“text“ size=“3″ id=“charin“ value=“?“ readonly=“readonly“ style=“width:30px;background:menu;“ />
            Zbývá: <input type=“text“ size=“3″ id=“charle“ value=“?“ readonly=“readonly“ style=“width:30px;background:menu;“ />
      </fieldset>
      <textarea name=“body“ rows=“10″ cols=“55″ style=“width:100%;height:<asp:Literal Id=’ltrHeight‘ Text=’140px‘ RunAt=’server‘ />;overflow:auto;“ onchange=“counter(this);“ onkeyup=“counter(this);“ onmousemove=“counter(this);“ wrap=“virtual“><asp:Literal Id=“ltrText“ RunAt=“server“ /></textarea>
      <img src=“ICQPager/ICQPagerAnimate.gif“ style=“width:32px;32px;border:2px inset;margin:4px;float:right;“ />
      <input id=“btnSend“ Visible=“false“ type=“submit“ value=“Odeslat“ style=“margin:4px;float:right;“ runat=“server“ />
      <input type=“reset“ value=“Vymazat“ style=“margin:4px;float:right;“ />
      <input id=“btnAddIcq“ type=“button“ Visible=“false“ value=“Přidat kontakt“ runat=“server“ style=“margin:3px;“ />
   </form>
</asp:Panel>

V kódu vidíme deklaraci uživatelského ovládacího prvku a zavedení prostoru názvu System.Drawing, který potřebujeme pro práci se systémovými barvami a případně písmem. Dále následuje zveřejnění vlastností prvku. Za povšimnutí stojí vlastnost ICQ, která je jen pro nastavení (teoreticky by bylo možné vlastnost i číst například z Labelu, kterým je číslo ICQ zobrazováno). Při nastavení hodnoty ICQ totiž dojde ke zviditelnění odesílacího tlačítka a „květinky“, která udává stav uživatele. Bez nastavení ICQ se formulář zobrazí, ale odesílací tlačítko a některé další prvky zůstanou skryty.

Zvláštním způsobem je řešeno nastavení výšky uživatelského prvku, zatímco šířka udává šířku celého DIVu, který tvoří naši aplikaci, výška je dána výškou textového pole pro psaní zprávy. Nastavení rozměrů aplikace je funkční a pohodlné, ovšem zadaný rozměr neodpovídá skutečné výšce, pedant by zde proto měl ještě doplnit matematický výraz, aby nastavení výšky v patřičných jednotkách odpovídalo skutečnosti. Bez tohoto výrazu je třeba se smířit s tím, že skutečná výška prvku ve stránce bude dána zadanou výškou + výškou části nad polem pro zadávání textu zprávy.

JavaScript pro výpočet napsaných znaků vychází z původní aplikace. Některé prvky formuláře jsou nahrazeny webovými ovládacími prvky, aby se snadněji ovládaly jejich vlastnosti. Položky formuláře, které musejí mít vždy zachované name, jsou řešeny jako HTML ovládací prvky. Za zmínku ještě stojí otevření čistého okna daných rozměrů na onsubmit formuláře, do něhož je pak směrován odeslaný formulář, a tak okno odesílané zprávy má jen takové rozměry, jaké je nezbytně potřeba.

Následuje jednoduchá ukázka použití ve stránce, hodnoty prvku se nastaví na data převzatá z QueryStringu. Stejně tak bychom ovšem mohli vlastnosti prvku nastavovat například z tabulky databáze, ve které máme seznam členů našeho klubu, diskuse či jiné skupiny.

<%@ Page Language=“C#“ EnableSessionState=“False“ EnableViewState=“False“ Debug=“False“ %>
<%@Register TagPrefix=“myasp“ TagName=“IcqPager“ Src=“ICQPager.ascx“ %>
<script language=“C#“ runat=“server“>
void Page_Load(object sender, System.EventArgs e)
{
IcqPager1.Nick = Request.QueryString[„Nick“];
IcqPager1.ICQ = Request.QueryString[„ICQ“];
IcqPager1.Email = Request.QueryString[„Email“];
}
</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″ />
    <title>ICQ Pager</title>
</head>
<body>
    <myasp:IcqPager Id=“IcqPager1″ RunAt=“server“ />
</body>
</html>

Článkem jsem chtěl nejen vytvořit rychle použitelný užitečný prvek, ale hlavně ukázat, jak vcelku jednoduše kód, který jsme dosud byli zvyklí používat v jiných aplikacích metodou copy-paste, zabalit do opakovaně použitelné podoby.