| Украина, Киев |
Инспектор
Вы можете этот курс.
Опубликован: 13.07.2010 | Уровень: специалист | Доступ: платный
Самостоятельная работа 34:
Многокадровые элементы управления
Аннотация: Элемент управления MultiView. Управление работой вкладок. Добавление к MultiView функций навигации. Элемент управления Wizard. Программирование событий элемента управления Wizard. Стили элемента Wizard. Шаблоны элемента Wizard.
Ключевые слова: MultiView, Wizard, множества, интерфейс, запрос, оболочка, WebControl, Web, представление, значение, JPG, PNG, тильда, Calendar, AutoPostBack, откат, элемент списка, ImageButton, system, элементы управления, очередь, файл, пользователь, Visual Studio 2005, установка значений, время выполнения, cancellation, step, alternate, finish, класс, место, верхний колонтитул, внешняя каскадная таблица стилей, css, переменная, область видимости, средства автоматизации, TreeView, Menu, меню, дескриптор, список, Object Browser, templates, PHP, индикатор, reset, соответствие шаблону, 'outset'
Файлы к лабораторной работе Вы можете скачать 
здесь.
Два высокоразвитых элемента управления MultiView и Wizard позволяют организовать для пользователя имитацию сложного многостраничного просмотра. Они содержат встроенные средства локальной навигации, обеспечивающие смену кадров с разным пользовательским интерфейсом, но единым оформлением.
Упражнение 1. Элемент управления MultiView
Элемент управления MultiView позволяет разработчику организовать страницу в виде множества вкладок. Каждая вкладка может содержать свой пользовательский интерфейс и обеспечивать свою форму представления информации пользователю. На этапе проектирования все вкладки раскрыты и представляют собой набор вариантов, заготавливаемых для отображения клиенту. Но генерировать HTML-отклик клиенту на его текущий запрос может только какая-то одна вкладка, посылая свой вариант заранее заготовленного материала.
-
Создайте
новый пустой проект с именем MultiView,
выполнив команду меню File/New/WebSite и
определив параметры мастера так
-
Командой Add New Item добавьте к проекту
страницу типа Web Form
с отделенным кодом и именем MultiViewControl.aspx
-
Поместите
на страницу в режиме редактора Design из
вкладки Standard компонент-контейнер MultiView
-
Поместите
на страницу в режиме редактора Design внутрь
созданного объекта MultiView1 из
той же вкладки Standard три экземпляра компонента View (компонент View называют представлением данных)
В результате оболочка сгенерирует следующий код разметки
<%@ Page AutoEventWireup="true"
CodeFile="MultiViewControl.aspx.cs"
Inherits="MultiViewControl" Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="View1" runat="server">
</asp:View>
<asp:View ID="View2" runat="server">
</asp:View>
<asp:View ID="View3" runat="server">
</asp:View>
</asp:MultiView>
</div>
</form>
</body>
</html>
Листинг
34.1.
Дескрипторный код файла MultiViewControl.aspx
-
Запустите
приложение и вы получите чистый экран броузера, поскольку
созданные вкладки - представления еще не были заполнены интерфейсными
элементами, поэтому они ничего и не
генерируют для клиента
Замечание. Представления View можно добавлять и программно по мере необходимости (как и любой другой элемент управления). Для этого нужно создать экземпляр (например, View1 ) нового представления и добавить ссылку на него в коллекцию Views экземпляра (например, MultiView1 ) элемента MultiView с помощью MultiView1.Views.Add(View1) или MultiView1.Views.AddAt(index, View1). Свойство Views определено в классе System.Web.UI.WebControls.ViewCollection, который и имеет указанные методы Add() и AddAt(). Но мы будем для простоты использовать декларативный способ этапа проектирования.
Web-форма в оболочке после наших действий будет иметь вид
Какое представление будет генерировать элемент MultiView, зависит от значения свойства MultiView.ActiveViewIndex, доступного декларативно и программно. Если значение этого свойства равно " -1 ", то при исполнении страницы ни одна из вкладок не будет генерировать HTML-отклик. Если свойство установлено в ноль, то будет работать первая вкладка, и т.д.
Продолжим выполнение упражнения и наполним представления View1, View2, View3 вариантами содержимого.
-
Командой Add Existing Item добавьте в корневую папку сайта
какой-нибудь рисунок Web-формата (*. gif,
*. jpg, *. png ),
который занимает не очень много места. Один из вариантов
рисунка - файл MyPhoto.jpg в
прилагаемой папке Source
-
Поместите
в представление View1 из вкладки Standard компонент Image (контейнер
для рисунка) и через панель Properties декларативно настройте
его так:
-
Поместите
в представление View2 какой-нибудь текст
-
Поместите
в представление View3 элемент Calendar из
вкладки Standard и настройте его
внешний вид
-
Выделите
объект MultiView1 и установите его свойство ActiveViewIndex в
значение ноль, чтобы при начальной загрузке
страницы было открыто первое представление
После выполненных действий разметка страницы будет описываться следующим кодом
<%@ Page AutoEventWireup="true"
CodeFile="MultiViewControl.aspx.cs"
Inherits="MultiViewControl" Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Элемент управления множеством представлений</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<h1>Мое фото</h1>
<asp:Image ID="Image1" runat="server" ImageUrl="~/MyPhoto.jpg" />
</asp:View>
<asp:View ID="View2" runat="server">
<h1>Мои стихи</h1>
<p>
У Лукоморья дуб зеленый<br />
Златая цепь на дубе том<br />
И днем и ночью кот ученый<br />
Все ходит по цепи кругом
</p>
</asp:View>
<asp:View ID="View3" runat="server">
<h1>Мой календарь</h1>
<asp:Calendar ID="Calendar1" runat="server" BackColor="#C0FFFF"
BorderColor="Red" BorderStyle="Ridge">
</asp:Calendar>
</asp:View>
</asp:MultiView>
</div>
</form>
</body>
</html>
Листинг
34.2.
Код разметки страницы MultiViewControl.aspx
Если сейчас запустить страницу MultiViewControl.aspx на выполнение, то мы увидим только первую раскрытую вкладку с фотографией, а для активизации других вкладок у нас нет пока механизма.
