Опубликован: 07.05.2010 | Доступ: свободный | Студентов: 1678 / 62 | Оценка: 4.56 / 4.06 | Длительность: 34:11:00
Лекция 15:

Серверные элементы управления

< Лекция 14 || Лекция 15: 123 || Лекция 16 >

Расширение стандартного HotSpot

Стандартные HotSpot могут генерировать только три разновидности фигур: circle, rectangle и polygon. Это связано с ограничением стандартного HTML-дескриптора <area>, у которого атрибут shape может принимать только одно из трех значений "circle", "rect", "poly". Однако на этой основе можно создать более сложные и разнообразные фигуры, расширяя соответствующим образом класс стандартного HotSpot.

Рассмотрим пример, в котором создадим расширение, способное генерировать активный участок, совпадающий с равнобедренным треугольником. Модель треугольника описывается центральной точкой, шириной и высотой.

  • Создайте новую страницу с разделенным кодом и именем ImageMapExt.aspx
  • Заполните кодовую часть следующим содержимым
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
    
public partial class ImageMapExt : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        lbl = new Label();
        form1.Controls.Add(lbl);
        lbl.Text = String.Empty;// Очистили для тренировки
    
        // Подключаем и настраиваем карту изображений
        ImageMap imageMap = new ImageMap();
        imageMap.EnableViewState = false;   // Отключили сохранение 
        // состояния вида
        imageMap.ImageUrl = "~/Images/TriangleHotSpot.png";
        imageMap.HotSpotMode = HotSpotMode.PostBack;
        // Регистрируем обработчик события щелчка
        imageMap.Click += new ImageMapEventHandler(imageMap_Click1);
        form1.Controls.Add(imageMap);
    
        // Создаем горячую зону в форме треугольника
        TriangleHotSpot triangle = new TriangleHotSpot();
        imageMap.HotSpots.Add(triangle);
        triangle.Width = 200;
        triangle.Height = 300;
        triangle.X = 100;
        triangle.Y = 150;
        triangle.PostBackValue = "треугольник";
    }
    
    Label lbl;
    
    void imageMap_Click1(object sender, ImageMapEventArgs e)
    {
        lbl.Text = String.Format("Вы щелкнули на фигуре \"{0}\"<br>",
            e.PostBackValue);
    }
}
    
// Для сохранения значений свойств используем словарь состояния вида	
public class TriangleHotSpot : System.Web.UI.WebControls.HotSpot
{
    public TriangleHotSpot()
    {
        Width = Height = X = Y = 0;
        this.AlternateText = "Равнобедренный треугольник";
    }
    
    // Свойства
    public int Width
    {
        get { return (int)ViewState["Width"]; }
        set { ViewState["Width"] = value; }
    }
    
    public int Height
    {
        get { return (int)ViewState["Height"]; }
        set { ViewState["Height"] = value; }
    }
    
    // Координаты центральной точки треугольника
    public int X
    {
        get { return (int)ViewState["X"]; }
        set { ViewState["X"] = value; }
    }
    
    public int Y
    {
        get { return (int)ViewState["Y"]; }
        set { ViewState["Y"] = value; }
    }
    
    // Значение атрибута shape дескриптора <area>
    protected override string MarkupName
    {
        get { return "poly"; }
    }
    
    // Значение атрибута coords дескриптора <area>
    public override string GetCoordinates()
    {
        // Координаты верхнего угла
        int topX = X;
        int topY = Y - Height / 2;
    
        // Координаты левого угла
        int leftX = X - Width / 2;
        int leftY = Y + Height / 2;
    
        // Координаты правого угла
        int rightX = X + Width / 2;
        int rightY = Y + Height / 2;
    
        String str = String.Format("{0},{1}", topX, topY);
        str += "," + String.Format("{0},{1}", leftX, leftY);
        str += "," + String.Format("{0},{1}", rightX, rightY);
    
        return str;
    }
}

Рендеринг страницы будет следующим



< Лекция 14 || Лекция 15: 123 || Лекция 16 >