Поделиться через

Веб-элемент управления Toolbar

В этой статье приводятся общие сведения об элементе управления Toolbar, являющемся одним из веб-элементов управления Windows Internet Explorer. Этот компонент упрощает создание элементов панелей инструментов, поведение и возможности которых аналогичны панелям инструментов, используемым в приложениях Windows. Этот элемент управления реализует ряд полезных возможностей и использует расширения функциональности динамического HTML (DHTML) в браузерах более поздних версий. Для веб-элементов управления таким браузером является Microsoft Internet Explorer 5.5 или более поздней версии.

Данный документ содержит следующие разделы.

  • Введение 
  • Объекты Toolbar 
    • Элементы управления ASP.NET 
    • Клиентское расширение функциональности 
  • Элементы Toolbar 
  • Использование элемента управления Toolbar при разработке
  • Форматирование и настройка 
    • CSS 
  • Динамическое создание элементов управления Toolbar 
  • Примеры использования Toolbar 
  • Связанные разделы

Введение

Данный обзор содержит практические примеры, демонстрирующие создание и использование элементов управления Toolbar. Toolbar является одним из четырех веб-элементов управления. Поэтому при разработке веб-страниц с использованием любого из этих элементов управления действуют одинаковые требования. Общие сведения о веб-элементах управления, включая инструкции по загрузке и установке, см. в разделах Веб-элементы управления Internet Explorer и Разработка веб-форм с использованием веб-элементов управления.

Веб-элементы управления представляют собой элементы управления ASP.NET, включающие ряд расширений функциональности DHTML, которые повышают удобство работы пользователей в браузерах более поздних версий. Для каждого веб-элемента управления расширение функциональности DHTML предоставляет объектную модель на стороне клиента, достаточно точно соответствующую объектной модели на стороне сервера, реализуемой элементом управления ASP.NET. Архитектуры компонентов в Internet Explorer 5.5 и ASP.NET имеют явные различия, поэтому клиентская и серверная объектные модели немного различаются.

Возможность использования как клиентских, так и серверных компонентов означает, что при разработке веб-страниц использовать элемент управления Toolbar можно двумя способами. В ASP.NET возможно написание веб-форм, предоставляющих содержимое в соответствии с возможностями браузера. При этом в браузерах более поздних версий используются расширения функциональности. На таких страницах могут использоваться сценарии на стороне сервера, написанные на одном из языков CLR. Для Internet Explorer 5.5 и более поздних версий возможно написание веб-страниц, использующих расширения функциональности DHTML со сценариями на стороне клиента.

Объекты Toolbar

В этом разделе кратко описаны основные сходства и различия между клиентской и серверной реализациями элемента управления Toolbar.

При декларативном создании элементы и атрибуты, поддерживаемые клиентскими и серверными компонентами, очень похожи. Поэтому примеры декларативного создания, приведенные в данной статье, работают как на страницах на основе веб-форм, использующих элементы управления Toolbar, так и на HTML-страницах, использующих расширение функциональности Toolbar. Элемент управления Toolbar может создаваться декларативно или программно с помощью сценария на стороне клиента или сервера.

Однако вследствие различий в языках программирования, поддерживаемых в ASP.NET и Internet Explorer, для объектов, предоставляемых клиентскими и серверными компонентами, приводятся отдельные наборы документации.

Элементы управления ASP.NET

Наиболее полнофункциональная модель программирования для элемента управления Toolbar предоставляется элементами управления ASP.NET. Использовать элементы управления ASP.NET рекомендуется в ситуациях, когда веб-страницы должны отображаться в различных браузерах. Причина этого заключается в том, что веб-элементы управления определяют тип браузера и для более ранних версий браузеров предоставляют содержимое в формате HTML 3.2. Для веб-элементов управления таким браузером является Internet Explorer 5.01 или более ранней версии, а также любой браузер, отличный от Internet Explorer.

Дополнительные сведения см. в статье Справка по серверным элементам управления ASP .NET.

Клиентское расширение функциональности

Если необходимо оптимизировать производительность клиента в Internet Explorer 5.5 или более поздней версии, можно воспользоваться расширением функциональности Toolbar. Расширение функциональности загружается автоматически в браузеры более поздних версий из веб-форм, использующих веб-элементы управления. При написании клиентских HTML-страниц расширение функциональности Toolbar может использоваться независимо от ASP.NET.

Панели инструментов, используемые во многих приложениях Windows, имеют широкий набор функциональных возможностей: их можно перетаскивать и располагать в любом месте экрана, и во многих случаях они автоматически закрепляются по краям окна приложения. Если панель инструментов перетаскивается на вертикальную границу, она автоматически меняет ориентацию. Расширение функциональности Toolbar поддерживает все эти возможности и позволяет определять объекты, которые могут закрепляться рядом с элементом управления Toolbar.

Элементы Toolbar

Для реализации элемента управления Toolbar можно использовать один или несколько из следующих элементов, которые поддерживаются как клиентскими, так и серверными компонентами Toolbar.

Клиентское расширение функциональности ASP.NET Описание
Toolbar Toolbar Контейнер для всех других элементов Toolbar.
ToolbarButton ToolbarButton Определяет кнопку на панели инструментов Toolbar.
ToolbarCheckButton ToolbarCheckButton Определяет элемент ToolbarCheckButton на панели инструментов Toolbar.
ToolbarCheckGroup ToolbarCheckGroup Определяет группу элементов Toolbar.
ToolbarDropDownList ToolbarDropDownList Определяет элемент раскрывающегося списка.
ToolbarLabel ToolbarLabel Определяет статичную метку на панели инструментов Toolbar.
ToolbarSeparator ToolbarSeparator Определяет элемент-разделитель на панели инструментов Toolbar.
ToolbarTextBox ToolbarTextBox Определяет текстовое поле на панели инструментов Toolbar.

Использование элемента управления Toolbar при разработке

Элемент управления Toolbar служит контейнером для коллекции элементов управления, определяющих пользовательский интерфейс. Декларативное создание элемента управления Toolbar является достаточно простым и требует базовых знаний об элементах, используемых для построения пользовательского интерфейса Toolbar.

Как видно из предыдущей таблицы, элемент управления Toolbar поддерживает следующие типы элементов управления: кнопки, флажки, раскрывающиеся списки, разделители и текстовые поля. Элемент ToolbarCheckGroup служит контейнером для элементов ToolbarCheckButton.

Форматирование и настройка

Даже если элемент управления Toolbar создается при помощи простейшего декларативного синтаксиса, для его отображения будут использоваться стили по умолчанию, обеспечивающие наглядное представление различных состояний элементов. Кроме того, можно настраивать внешний вид элемента управления Toolbar различными способами. Элементы управления Toolbar имеют три основных состояния.

  • По умолчанию

    Состояние по умолчанию используется, если элемент управления не выделен и на него не наведен указатель мыши. Коллекция стилей CSS для данного состояния определяется с помощью свойства DefaultStyle.

  • Выделение

    Если элемент управления выделен, применяется свойство SelectedStyle.

  • Наведение указателя

    При наведении указателя мыши на элемент управления применяется свойство HoverStyle.

В следующем разделе рассматриваются способы настройки внешнего вида элементов управления Toolbar в соответствии с их состоянием с помощью CSS.

CSS

Свойства форматирования CSS обеспечивают удобный способ для определения стиля, применяемого к элементу управления TabStrip. Для настройки внешнего вида необходимо просто определить свойства для элементов Toolbar. При этом для обновления отрисовки страниц не требуется написание сценариев. В следующих примерах демонстрируется использование атрибутов для настройки внешнего вида элемента управления Toolbar.

<ie:Toolbar id="myToolbar" runat="server"

    BorderWidth="5"

    BorderColor="Gray"

    Font-Name="Tahoma"

    Font-Size="8pt"

    BackColor="#CCCCCC"

    Width="75%"

    DefaultStyle="color:black;border:solid 3px #CCCCCC;background:#CCCCCC"

    HoverStyle="border:solid 3px #FFFFFF;background:#DDDDDD"

    SelectedStyle="border:solid 3px #FFFFFF;background:#EEEEEE"

> 

    <ie:ToolbarButton Text="NormalButton" ImageUrl="images/tool-calendar.gif" />

    <ie:ToolbarSeparator />

    <ie:ToolbarButton Text="<i>Rich</i><b>Content</b>" />

    <ie:ToolbarSeparator />

    <ie:ToolbarCheckButton Text="CheckButton" />

    <ie:ToolbarSeparator />

    <ie:ToolbarCheckGroup>

        <ie:ToolbarCheckButton Text="GroupA-1" />

        <ie:ToolbarCheckButton Text="GroupA-2" />

        <ie:ToolbarCheckButton Text="GroupA-3" />

    </ie:ToolbarCheckGroup>

</ie:Toolbar>

В следующем примере показано, как определить элемент управления Toolbar с вертикальной ориентацией.

<h2>Vertical Toolbar</h2>

<br>

<ie:Toolbar id="tb3" runat="server"

    AutoPostBack="true"

    BackColor="#CCCCCC"

    Width="70"

    Orientation="Vertical"

    DefaultStyle="background:#CCCCCC;border:solid 1px #cccccc;font-size:8pt;"

    HoverStyle="background:#DDDDDD;border:solid 1px #cccccc;"

    SelectedStyle="background:#EEEEEE;border:solid 1px #cccccc;"

> 

    <ie:ToolbarCheckButton Text="<b>Bold</b>" />

    <ie:ToolbarCheckButton Text="<i>Italic</i>" />

    <ie:ToolbarCheckButton Text="<u>Underline</u>" />

</ie:Toolbar>

Как видно из предыдущего примера, одновременно можно определить несколько стилей. Кроме того, имеется возможность динамического изменения стилей, как показано в следующем примере.

<script language="C#" runat="server">

void Page_Load(Object sender, EventArgs e)

{

     myToolbar.BackColor=Color.Blue;

     myToolbar.BorderColor=Color.Black;

     myToolbar.DefaultStyle.Add("background","white");

}

</script>

<body>

    <form id="debug" runat="server" autopostback="true">

        <ie:toolbar id="myToolbar" runat="server" autopostback="false" >

            <ie:toolbarseparator />

            <ie:toolbarTextbox text="Text" id="Text2" />

            <ie:toolbardropdownlist>

                <asp:listitem>Text 1 </asp:listitem>

                <asp:listitem>Text 2 </asp:listitem>

                <asp:listitem>Text 3 </asp:listitem>

            </ie:toolbardropdownlist>

            <ie:toolbarcheckgroup>

                <ie:toolbarcheckbutton text="Button 1" />

                <ie:toolbarcheckbutton text="Button 2" />

            </ie:toolbarcheckgroup>

            </ie:toolbar>

     </form>

</body>

В элементы управления Toolbar можно также добавить графические элементы путем задания свойства ImageUrl. Ниже приведен пример элемента управления Toolbar, в котором для настройки пользовательского интерфейса используется свойство ImageUrl, а также форматирование HTML в свойстве Text.

<ie:Toolbar id="tb2" runat="server">

    <ie:ToolbarButton Text="NormalButton" ImageUrl="images/tool-calendar.gif" />

    <ie:ToolbarSeparator />

    <ie:ToolbarButton Text="<i>Rich</i><b>Content</b>" />

</ie:Toolbar>

Динамическое создание элементов управления Toolbar

В следующем образце кода демонстрируется динамическое создание элемента управления Toolbar с помощью обработчика событий Page_Load в ASP.NET.

<%@ Import Namespace="System.Web.UI.WebControls" %>

<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>

<%@ Register TagPrefix="ie"

Namespace="Microsoft.Web.UI.WebControls"

Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

<script language="C#" runat="server">

void Page_Load()

{

       if (!Page.IsPostBack)

       {

              ToolbarButton tb = new ToolbarButton();

              tb.Text="Button1";

              myToolbar.Items.Add(tb);

              ToolbarCheckGroup ckg = new ToolbarCheckGroup();

              myToolbar.Items.Add(ckg);

              ToolbarCheckButton ckb= new ToolbarCheckButton();

              ckb.Text="TbCheckButton1";

              myToolbar.Items.Add(ckb);

              ckb= new ToolbarCheckButton();

              ckg.Items.Add(ckb);

              ckb.Text="CheckGroup1";

              ckb= new ToolbarCheckButton();

              ckg.Items.Add(ckb);

              ckb.Text="CheckGroup2";

              ckg = new ToolbarCheckGroup();

              myToolbar.Items.Add(ckg);

              ckb= new ToolbarCheckButton();

              ckg.Items.Add(ckb);

              ckb.Text="CheckGroup1";

              ckb= new ToolbarCheckButton();

              ckg.Items.Add(ckb);

              ckb.Text="CheckGroup2";

       }

}

void checkTest (Object sender, EventArgs e)

{

       ToolbarButton tb = null;

       ToolbarCheckButton tbck = null;

       string exp="";

       if (sender is ToolbarButton) {

              tb=(ToolbarButton)sender;

              exp=tb.Text;

       }

       if (sender is ToolbarCheckButton) {

              tbck=(ToolbarCheckButton)sender;

              exp=tbck.Text + "  " + tbck.Selected;

       }

       string value="true";

       string why="'"+ exp + "'";

       HtmlGenericControl w = new HtmlGenericControl();

       w.InnerHtml="<script> LogTest(document.title,"+ value + "," + why +

       "); </" + "script>";

       myForm.Controls.Add(w);

}

</script>

<body>

       <form id="myForm" runat="server" >

              <ie:toolbar id="myToolbar" runat="server" autopostback="true"

              oncheckchange="checkTest" />

       </form>

</body>

</html>   

Примеры использования Toolbar

В этом разделе приведены дополнительные примеры, демонстрирующие другие полезные приемы, которые могут использоваться при создании элемента управления Toolbar и задания сценариев для него.

В следующем примере создается элемент управления Toolbar, использующий сценарий на стороне сервера для обработки вводимых пользователем данных. Также приводится рабочий образец.

<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>

<%@ Register TagPrefix="mytb"

Namespace="Microsoft.Web.UI.WebControls"

Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

<script language="C#" runat="server">

    public void ShowClick(Object sender, EventArgs e)

    {

        userinput.InnerText = "Clicked on object id='" + sender.ToString() + "'";

    }

</script>

<html>

<body>

<form runat="server">

<mytb:toolbar runat="server" id="cmtb" OnButtonClick="ShowClick"

    AutoPostBack="true">

    <mytb:ToolbarCheckButton id="modechange"

        Tooltip="Change the Toolbar mode"

        ImageUrl="images/tool-dayview.gif"

        Text="Calendar Mode" />

    <mytb:ToolbarSeparator />

    <mytb:ToolbarCheckGroup>

        <mytb:ToolbarCheckButton Text="GroupA-1" />

        <mytb:ToolbarCheckButton Text="GroupA-2" />

    </mytb:ToolbarCheckGroup>

    <mytb:ToolbarSeparator />

    <mytb:ToolbarCheckGroup>

        <mytb:ToolbarCheckButton Text="GroupB-1" Selected="True" />

        <mytb:ToolbarCheckButton Text="GroupB-2" />

        <mytb:ToolbarCheckButton Text="GroupB-3" />

    </mytb:ToolbarCheckGroup>

</mytb:toolbar>

</form>

<p>User Input Information:<br>

<div id="userinput" runat="server"

    style="border:1px solid black;background:beige;width:500px;height:50px">

</div>

</body>

</html>  

В следующем примере показан способ перечисления элементов управления Toolbar.

<script language="C#" runat="server">

void Page_Load() {

myDIV.InnerText=myToolbar.Items.Count.ToString();

     for (int i=0; i<myToolbar.Items.Count; i++)

         {

              myDIV.InnerText+=myToolbar.Items[i].ID + "  ";

          }

}

</script>

<body>

       <form id="myform" runat="server" >

              <ie:toolbar id="myToolbar" runat="server" autopostback="true"  >

                     <ie:toolbarseparator id="separator" />

                     <ie:toolbarbutton id="button1" text="TabIndex3" tabindex="3"  />

                     <ie:toolbarbutton id="button2" Text="TabIndex1" tabindex="1"  />

                     <ie:toolbarbutton id="button3" Text="TabIndex2" tabindex="2"  />

              </ie:toolbar>

              <br>

              <div id="myDIV" runat="server"></div>

       </form>

</body>

Связанные разделы