14. Tworzenie własnych kontrolek przez użytkowników. Cześć 2.

14. Tworzenie własnych kontrolek przez użytkowników. Cześć 2.

 Piotr Gaszewski
Piotr Gaszewski
00:00
13.05.2006
37332 wyświetlenia

W poprzednim rozdziale zaprezentowałem, w jaki sposób stworzyć kontrolkę, którą będziemy mogli wykorzystywać przy tworzeniu stron wchodzących w skład naszej aplikacji. Kontrolki tworzone w ten sposób mają jednak kilka zasadniczych wad. Najważniejszą z nich jest bardzo ograniczone możliwości używania takiej kontrolki poza projektem, do którego ona należy (choć oczywiście - nie jest to niemożliwe), a także niemożność umieszczenia takiej kontrolki w pasku narzędzi Visual Studio. W rozdziale tym, postaram się zaprezentować kilka bardziej zaawansowanych technik tworzenia własnych kontrolek. Tym razem, będą one zapamiętywane w postaci plików *.dll, co w łatwy sposób umożliwi wykorzystywanie je w wielu różnych, tworzonych przez nas aplikacjach.

Proces tworzenia własnej kontrolki, rozpoczniemy od utworzenia nowego projektu. W oknie Visual Studio wybierzmy opcję: File -> New -> Project, następnie z pośród dostępnych szablonów zaznaczmy „Web Control Library”. Po otwarciu projektu, będziemy mogli zauważyć, że w „Solution Explorerze” dostępny jest jeden plik, o nazwie: WebCustomControl1.cs i następującej zawartości:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace WebControlLibrary1
{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:WebCustomControl1 runat=server></{0}:WebCustomControl1>")]
    public class WebCustomControl1 : WebControl
    {
        private string text;
       
        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        public string Text
        {
            get
            {
                return text;
            }
            set
            {
                text = value;
            }
        }
 
        protected override void Render(HtmlTextWriter output)
        {
            output.Write(Text);
        }
    }

Kod, który widzimy powyżej stanowi swoisty szablon dla generowanej kontrolki. Jedyna publiczna właściwość udostępniana w tym momencie przez ten obiekt, nosi nazwę „Text”. Stworzona klasa nosi nazwę WebBustomControl1 i dziedziczy po klasie WebControl. Nad definicją klasy możemy dostrzec następującą linię:

            [DefaultProperty("Text")]
            [ToolboxData("<{0}:WebCustomControl1 runat=server></{0}:WebCustomControl1>")]

Jest to atrybut, określający ustawienia dla kontrolki w trybie projektowania. Powyższa linia mówi o tym, które z atrybutów będą widoczne w oknie „Properties” w trakcie tworzenia aplikacji, wykorzystującej kontrolkę. Podobne znaczenie mają atrybuty umieszczone przy poszczególnych właściwościach klasy.

W celu użycia stworzonej przez nas kontrolki musimy utworzyć nowy projekt. W „Solution Explorerze” klikamy prawym przyciskiem myszy na nazwie naszego Projektu i wybieramy opcje: Add -> New Web Site. W nowo dodanym projekcie musimy z kolei dodać referencje, do wspomnianej kontrolki. Klikamy prawym przyciskiem myszy na nazwę projektu i wybieramy opcję: „Add Reference”. W oknie, które się pojawi przechodzimy na zakładkę o nazwie „Projects” i wybieramy nazwę projektu, zawierającego stworzoną poprzednio kontrolkę.

W „Solution Explorerze” możemy teraz zobaczyć, że w ramach naszej aplikacji został utworzony nowy katalog o nazwie „Bin”, zawierający pliki: WebControlLibrary1.dll i WebControlLibrary1.pdb

@STRONA@

Spróbujmy wykorzystać teraz stworzoną przez nas kontrolkę. W ramach naszego projektu (WebSite) otwieramy dowolną formatkę, w trybie „Source”. Następnie w górnej części kodu, zaraz po dyrektywie <%@Page ... %> , dodajemy następującą linię:

<%@ Register TagPrefix = "Custom" Namespace = "WebControlLibrary1" Assembly = "WebControlLibrary1" %>

Wykorzystane atrybuty oznaczają kolejno:
TagPrefix – grupa do której kontrolka należy;
NameSpace – przestrzeń nazw i nazwa projektu, zawierającego kontrolkę, którą chcemy użyć;
Assembly – nazwa pliku *.dll, zawierającego kontrolkę, znajdującego się w katalogu BIN.

Teraz, musimy jeszcze dodać instancję naszej kontrolki na formatce. Cały kod strony zawierającej kontrokę, wyglądać będzie wówczas następująco:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
 
<%@ Register TagPrefix = "Custom" Namespace = "WebControlLibrary1" Assembly = "WebControlLibrary1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div><Custom:WebCustomControl1 ID="CustomTest" runat = "server"></div>
    </form>
</body>
</html>

ID to oczywiście identyfikator, poprzez który będziemy mogli odwoływać się do obiektu kontrolki w kodzie strony. Natomiast atrybut „runat” informuje o tym, że kod obsługujący kontrolkę, wykonywany jest po stronie serwera.

Przejdźmy teraz do edycji strony w trybie Design. Jeżeli wszystko poszło w porządku powinniśmy ujrzeć na ekranie następujący widok.

Kliknijmy teraz lewym przyciskiem myszy, na znajdującą się na formatce kontrolkę. W znajdującym się zazwyczaj w prawym, dolnym rogu ekranu oknie „Properties”, powinny pojawić się właściwości zaznaczonej kontrolki. Widzimy, że jedną z właściwości obiektu, którą możemy edytować jest Text. Uzupełniając tą właściwość i uruchamiając stronę, podany napis powinien wyświetlić się w oknie przeglądarki.

Umieśćmy teraz na naszej formatce przycisk (Button). Po zrobieniu tego kliknijmy na niego dwukrotnie i uzupełnijmy metodę obsługi zdarzenia naciśnięcia przycisku w następujący sposób.

this.CustomTest.Text = „Nacisnąłeś przycisk!”;

Podany kod, zmienia oczywiście tekst, wyświetlany przez naszą kontrolkę na formatce. W podobny sposób, z poziomu kodu języków C# lub Visual Basic możemy edytować pozostałe publiczne właściwości naszej kontrolki.

Na zakończenie tego rozdziału chciałbym pokazać, w jaki sposób możemy umieścić stworzoną przez nas kontrolkę w pasku narzędzi. Klikamy na wspomnianym pasku i wybieramy opcję „Choose Items”. Następnie, w oknie, które się pojawi, w zakładce o nazwie „.NET Framework Components” klikamy przycisk „Browse” i podajemy ścieżkę dostępu do pliku *.dll, zawierającego naszą kontrolkę. Po kliknięciu „OK.” w pasku zadań powinien pojawić się stworzony przez nas obiekt. Od tej pory możemy umieszczać go na formatkach ASP.NET przeciągając go po prostu myszką.


Spodobał Ci się ten artykuł? Podziel się z innymi!

Źródło:

Polecamy również w kategorii Kurs ASP.NET 2