ной профессиональной компоновкой для установки цветов и стилей рамки и меню Web-частей:

<asp:WebPartZone BorderColor= #CCCCCC Font-Names= Verdana ID= EventZone Padding= 6 runat= server > <PartChromeStyle BackColor= #F7F6F3 BorderColor= #E2DED6

Font-Names= Verdana ForeColor= White /> <MenuLabelHoverStyle ForeColor= #E2DED6 /> <EmptyZoneTextStyle Font-Size= 0.8em /> <MenuLabelStyle ForeColor= White />

<MenuVerbHoverStyle BackColor= #F7F6F3 BorderColor= #CCCCCC

BorderStyle= Solid BorderWidth= Ipx ForeColor= #333333 /> <HeaderStyle Font-Size= 0.7em ForeColor= #CCCCCC

HorizontalAlign= Center /> <MenuVerbStyle BorderColor= #5D7B9D BorderStyle= Solid

BorderWidth= lpx ForeColor= White /> <PartStyle Font-Size= 0.8em ForeColor= #333333 /> <TitleBarVerbStyle Font-Size= 0.бет Font-Underline= False

ForeColor= White /> <MenuPopupStyle BackColor= #5D7B9D BorderColor= #CCCCCC

BorderWidth= lpx Font-Names= Verdana Font-Size= 0.6em /> <PartTitleStyle BackColor= #5D7B9D Font-Bold= True

Font-Size= 0.8em ForeColor= White /> <ZoneTemplate>

<ucliListEvents ID= ListEventsl runat= server /> </ZoneTemplate> </asp:WebPartZone>

В следующем практическом занятии мы создадим Web-страницу WebPartDemo. aspx, выполняя действия, необходимые для использования каркаса Web-частей. Мы добавим два пользовательских элемента управления в две разные зоны.

Практическое занятие СоЗДЭНИе Web-прилОЖениЯ

С помощью Web-частей

1. Откройте ранее созданное Web-приложение EventRegistrationWeb.

2. Добавьте новую страницу под именем WebPartsDemo. aspx.

3. Добавьте элемент управления WebPartManager на эту страницу (его можно найти на вкладке WebParts (Web-части) панели инструментов).

4. Добавьте таблицу с двумя столбцами и двумя строками, чтобы организовать компоновку Web-частей.

5. Внутри каждого столбца во второй строке добавьте элемент управления WebPartZone. Позже эти элементы управления будут добавлены в первую строку. Присвойте идентификатору (ID) зоны WebPartZone значение ZoneLeft, а идентификатору второй зоны - значение ZoneRight.

6. С помощью смарт-тега первого элемента управления WebPartZone в окне Design View выберите формат Professional Auto Format (Профессиональный автоматический формат). Чтобы легче было различать элементы управления WebPartZone, для второго элемента выберите вариант Colorful Auto Format (Полноцветный автоматический формат).

10. Запустите Web-страницу. Ha рис. 20.9 показаны пользовательские элементы управления. Обратите внимание на рамку вокруг элементов управления с заголовком Untitled (Без заголовка) и небольшой треугольник, направленный вниз (кнопка Verb) в правой части рамки. Эта рамка известна как хром (chrome). Щелкните на кнопке Verb, чтобы посмотреть элементы меню Minimize (Свернуть) и Close (Закрыть). Попытайтесь свернуть элемент управления и восстановить его снова, но не нажимайте кнопку Close (Закрыть), поскольку без сконфигурированного каталога невозможно повторно открывать уже закрытые элементы управления.

11. Теперь давайте поработаем над возможностью закрытия элементов управления. Откройте Web-страницу еще раз в окне проектирования и выберите пункт меню Web Part (Web-часть). Откройте свойство CloseVerb в окне Property Editor (Редактор свойств). Присвойте параметру Enabled этого свойства значение false. Этим вы заблокируете доступ к выбору элемента меню Close. Чтобы удалить элемент меню, присвойте параметру Visible такое же значение false.

12. Откройте еще раз Web-страницу в окне Web-браузера. Обратите внимание на то, что теперь вы не можете выбрать элемент меню Close.

7. Присвойте свойству HeaderText первого элемента управления WebPartZone значение Events, а такому же свойству второй зоны - значение Weather.

8. Добавьте пользовательский элемент управления ListEvents . ascx, созданный ранее, в левый элемент управления WebPartZone.

9. Создайте новый пользовательский элемент управления Weather. ascx, чтобы показать информацию о погоде на основе выбранного страны. На данный момент пользовательскому элементу управления необходима лишь одна метка по имени LabelWeather. Вы можете использовать случайный алгоритм, как показано ниже, если необходимо отобразить такие состояния погоды, как Sun (солнечно), Cloudy (облачно) или Rain (дождь). Добавьте этот пользовательский элемент управления в правый элемент управления WebPartZone.

public partial class Weather : System.Web.UI.UserControl {

protected void Page Load(object sender, EventArgs e) {

Random r = new Random () ; int n = r.Next (1, 3); switch (n) {

case 1:

LabelWeather.Text = Sun ;

break; case 2:

LabelWeather.Text = Rain ; break; case 3:

LabelWeather.Text = Cloudy ; break;

Ш Untffled Pkoe WtfMlowi li*mtt Explortf

Sun МОП rue Mfed Thu bri Sat

M Л 1 2 3 4 5

Z 8 9 IS n 12

и 15 1 Ifi IZ IS 12

2Q Zi 22 23 21 25 2fi

22 2a 22 32 11 1 2

3 15 6 2 8 9

% Local lniran I Protected Modt: On

Puc. 20.9. Пользовашельскш элементы управления

Зона Editor

Зона Editor используется для изменения внешнего вида, поведения и компоновки Web-частей. Для каждой из этих задач используются разные части редактора. Части редактора являются активными, когда элемент управления Web Parts установлен в режим Edit (Редактирование).

Часть редактора Layout (Компоновка), показаннг1я на рис. 20.10, позволяет задавать состояние хрома, зону, в которой будет размещена Web-часть, и порядок Web-части внутри этой зоны. Хром может иметь состояния Normal (Обычный) и Minimized (Свернут). В состоянии Mimimized Web-часть отображается только в виде маленького значка, чтобы не занимать пространство внутри Web-страницы. Пользователь может восстановить Web-часть до нормального вида, просто щелкнув на значке. В комбинированном окне Zone (Зона) перечислены имена зон, в которых могут находиться элементы управления Web-частей.

Lav out Chrome Slate Nofnal

Zone-Events

Zone Index 0

Puc. 20.10. Часть редактора La you t

Часть редактора Appearance (Внешний вид) позволяет задавать заголовок, тип хрома и его размер. На рис. 20.11 показаны все возможные параметры настройки части редактора Appearance. Заголовок нужен для того, чтобы присвоить Web-части новый заголовок. Тип хрома определяет видимость заголовка и рамку (границы). Также можно задать высоту и ширину элемента управления.