Застосування Web Parts або ультраперсоналізація вашого сайту (Частина I). Основи роботи з Web Parts (исходники, документація), Документація, Програмування, статті

Введення


Дана стаття описує основи роботи технології Web Parts, яка стала доступна, починаючи з ASP.NET версії 2.0. Прочитавши цю статтю, ви отримаєте уявлення, як правильно створювати Web Parts, і надавати користувачеві інструменти для налаштування зовнішнього вигляду вашого сайту.


Так як робота з Web Parts досить велика тема, було вирішено розбити її на кілька частин. Ця частина є вступної і описує основи роботи з Web Parts.


Про Web Parts


Web Parts (веб частини) – це набір елементів управління, призначений для створення веб-сайтів. Web Parts надають користувачам чудову можливість – змінювати свій вміст, поведінку і відображення не посередньо в браузері без участі розробника.


Використання Web Parts дозволяє користувачеві виконувати наступні дії:


§ Налаштовувати вміст сторінок: додавання нових Web Parts на сторінку, видалення, приховування та мінімізація;


§ Налаштовувати розташування Web Parts: переміщення Web Parts з однієї зони в іншу, зміна зовнішнього вигляду;


§ Налаштовувати зв'язку між собою. Наприклад, налаштувати ПОБУДОВУ діаграми на основі даних певної Web Parts.


§ Редагувати внутрішні властивості Web Parts. Наприклад, встановити кількість рядків виводяться на одній сторінці Grid View і при кожному вході, відпаде потреба в повторенні цієї операції.


Основні види Web Parts компонентів


Для роботи з Web Parts застосовуються спеціалізовані елементи управління. Основні з них представлені в таблиці 1









































Назва


Опис


WebPartManager


Компонент керуючий працюй всіх Web Parts елементів управління. Даний компонент необхідно розташовувати на сторінці, де використовуються Web Parts і він повинен бути єдиний на даній сторінці.


WebPartZone


Зона, всередині якої знаходиться об'єкти Web Part, на сторінці, даних зон може бути одна і більше.


CatalogZone


Зона, яка містить CatalogPart. Використовується для створення каталогу Web Parts, з якого користувач може додавати Web Parts на сторінку.


DeclarativeCatalogPart


Містить елементи, які користувач може додати на сторінку. Інші елементи, визначені в даному елементі, не видно на сторінку за замовчуванням.


PageCatalogPart


Містить елементи, які були розташовані на сторінці, але користувач їх з якоїсь причини приховав.


EditorZone


Зона, яка містить елементи EditorPart. Ця зона та її елементи дозволяють користувачам редагувати і персоналізувати елементи керування на сторінці.


AppearanceEditorPart


Елемент дозволяє редагувати властивості WebPart: текст заголовка, висоти, ширини, і т.д.


BehaviorEditorPart


Елемент дозволяє редагувати властивості WebParts відповідають за можливість закриття, светованія або переміщення даного елемента. Даний елемент редагує властивості, які будуть видні всім користувачам.


LayoutEditorPart


Елемент дозволяє редагувати властивості WebParts, які відповідають за те, в якій зоні знаходиться WebPart і як WebPart відображається (згорнуто або розгорнуто).


PropertyGridEditorPart


Елемент дозволяє редагувати властивості WebParts, раніше помічені як WebBrowsable.


ConnectionsZone


Містить WebPartConnection елементи, які відповідають за зв'язок між кількома WebParts.


Створення користувача елементу управління


Створення веб-сайту


Першим кроком при створенні Web Parts, буде створення веб-сайту. Для цього відкриємо Visual Studio 2005 і в меню File-> New виберемо пункт Web Site. У вікні виберемо шаблон ASP.NET Web Site (рис. 1), введемо шлях, де буде знаходитися веб-сайт (на малюнку вказано шлях c: WebPart_ I) і натиснемо OK.



Рисунок 1


Тепер, що б почати роботу c Web Parts, необхідно створити користувальницькі елементи керування, які буду містити необхідний набір звичайних елементів управління. Це необхідно, тому що елемент Web Part, який знаходиться всередині WebPartZone (див. таблицю 1), може містити лише один елемент керування. Тобто, якщо додати в WebPartZone кілька елементів управління (наприклад: кнопку і текстове поле), то для кожного з них буде створено свій елемент Web Part.


Додамо до проекту WebUserControl і назвемо його ucNews.ascx (рис. 2).



Рисунок 2


Вихідний код елемента керування

 <% @ Control Language = "C #" AutoEventWireup = "true" CodeFile = "ucNews.ascx.cs" Inherits = "ucNews"%>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" ShowHeader="False">
    <Columns>
<asp:HyperLinkField DataNavigateUrlFields="Url" DataTextField="Name" />
    </Columns>
</asp:GridView>
using System;
using System.Collections.Generic;
using System.Web.UI;
public partial class ucNews : UserControl
{
    #region Events
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            List<Urls> array = new List<Urls>();
array.Add (new Urls ("GotDotNet.RU", "http://www.gotdotnet.ru"));
array.Add (new Urls ("ASP.NET Maina", "http://www.aspnetmaina.com"));
array.Add (new Urls ("MSDN", "http://msdn.microsoft.com/"));
            GridView1.DataSource = array;
            GridView1.DataBind();
        }
    }
    #endregion
    #region Proxy class
    internal class Urls
    {
        #region Private
        private string name;
        private string url;
        #endregion
        #region Constructor
        public Urls(string name, string url)
        {
            Url = url;
            Name = name;
        }
        #endregion
        #region Property
        public string Url
        {
            get { return url; }
            set { url = value; }
        }
        public string Name
        {
            get { return name; }
            set { name = value; }
        }
        #endregion
    }
    #endregion
}

Створення бази даних


ASP.NET надає ще одну чудову можливість – зберігання індивідуальних налаштувань кожного користувача. Установки зберігаються в базі даних і можуть відновлюватися їх при повторних входах користувача. Дана база даних має певну структуру, зрозумілу ASP.NET. Розробники. NET Framework 2.0 подбали про це і створили утиліту під назвою aspnet_regsql.exe. Дана утиліта знаходиться в папці drive :WINDOWSMicrosoft.NETFramework versionNumbe.


Після запуску утиліти ASP.NET SQL Server Setup Wizard, у вікні натискаємо кнопку «Next>». На наступному кроці майстра, вибираємо пункт Configure SQL Server for application service (рис. 3) для того щоб налаштувати базу даних SQL Server для зберігання інформації про персоналізації інтерфейсу.


Рисунок 3


На наступному кроці майстер надає нам можливість вибрати сервер і базу даних, де буде зберігатися інформації (рис. 4). Якщо залишити місце імені бази даних <default>, то буде створена база даних з назвою aspnetdb.


Рисунок 4


Далі майстер просить підтвердити створення бази даних (рис. 5)



Рисунок 5


Натискаємо «Next>» і майстер відобразить результати створення бази даних (рис. 6).



Малюнок 6


Натискаємо «Finish». На цьому, створення бази даних, для зберігання інформації про персоналізацію завершено.


Структура створеної бази даних


Створена за допомогою утиліти aspnet_regsql.exe база даних має наступну структуру, показану на малюнку 7.



Малюнок 7


У створеній базі даних всього 11 таблиць, з них створюваному веб-сайту знадобляться лише 6:


























Назва таблиці


Опис


aspnet_Applications


Таблиця для зберігання інформації про веб-додатках, які використовують цю базу даних


aspnet_Paths


Таблиця, що містить інформацію про шляхи до сторінок які використовують Web Parts компоненти


aspnet_PersonalizationAllUsers


Таблиця для зберігання налаштувань Web Parts загальних для всіх користувачів


aspnet_PersonalizationPerUser


Таблиця для зберігання індивідуальних налаштувань Web Parts користувачів


aspnet_SchemaVersions


Таблиця з настройками бази даних


aspnet_Users


Таблиця містить загальну інформацію про користувачів веб-сайту


Решта таблиці призначені для зберігання даних, які використовуються в таких функціях як:


·        Membership


·        Role management


·        Profile


·        Web events


Налаштування web.config веб-сайту


Для того щоб веб-сайт розумів, де знаходиться сховище налаштувань користувача (раніше створене нами), необхідно вказати на нього в конфігураційному файлі web.config.


Якщо у створеному проекту ще немає файлу web.config, то необхідно його створити використовуючи меню File-> New-> File (рис. 8).



Малюнок 8


Після створення файлу web.config в нього необхідно внести такі зміни:


У розділі <configuration> створити розділ містить рядок підключення до бази даних налаштувань користувача:

   <connectionStrings>
<add name="WebPartDB" providerName="System.Data.SqlClient" connectionString="Data Source=CRASHNICK2005;Initial Catalog=aspnetdb;Integrated Security=True"/>
  </connectionStrings>

Після створення рядка підключення необхідно створити провайдера даних для Web Parts. Для цього в розділі <system.web> файлу web.config, необхідно створити розділ <webParts>, в якому будуть міститися налаштування провайдера даних для Web Parts. Зверніть увагу на параметр connectionStringName. Він, як раз, і вказує на нашу базу даних налаштувань користувача.

     <webParts>
      <personalization>
        <providers >
<add name="WebPartProvider" connectionStringName="WebPartDB" type="System.Web.UI.WebControls.WebParts.SqlPersonalizationProvider, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"/>
        </providers>
      </personalization>
    </webParts>

Загальний вигляд файлу web.config:

 <?xml version=”1.0″?>
<configuration>
  <connectionStrings>
<add name="WebPartDB" providerName="System.Data.SqlClient" connectionString="Data Source=CRASHNICK2005;Initial Catalog=aspnetdb;Integrated Security=True"/>
  </connectionStrings>
  <system.web>
        <compilation debug=”true” />
        <authentication mode=”Windows” />
    <webParts>
      <personalization>
        <providers >
<add name="WebPartProvider" connectionStringName="WebPartDB" type="System.Web.UI.WebControls.WebParts.SqlPersonalizationProvider, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"/>
        </providers>
      </personalization>
    </webParts>
  </system.web>
</configuration>

Все необхідне для створення WebParts у нас є. Приступимо до створення самих Web Parts.


Створення Web Parts


Додамо на сторінку default.aspx (яка створилася в нашому проекті за замовчуванням) елемент керування WebPartManager і у властивості Personalization-ProviderName вкажемо ім'я певного у файлі web.config провайдера даних "WebPartProvider".


Створимо на сторінці таблицю і кілька елементів WebPartZone (рис. 9).



Малюнок 9


Після створення зон, в них можна помістити елементи управління. Помістимо в WebPartZone1 створений раніше користувача елемент управління ucNews і, наприклад, елемент управління FileUpload, а в webPartZone2 елемент керування Calendar.


Запустимо проект на виконання. Після запуску в браузері повинні міститися 3 елементи управління (рис. 10).



Рисунок 10


Зверніть увагу, що у кожного елемента управління на веб-сторінці з'явився заголовок і меню (трикутник у правому верхньому куті). Все це склалося автоматично без написання, якого або коду. Автоматично доданий меню дозволить згорнути, розгорнути або приховати Web Part. І коли користувач зайде на веб-сторінку в наступний раз, всі налаштування Web Parts збережуться.


Вихідний код сторінки:

 <% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Default.aspx.cs" Inherits = "_Default"%>
<% @ Register Src = "ucNews.ascx" TagName = "ucNews" TagPrefix = "uc1"%>
<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
    <title>Untitled Page</title>
</head>
<body>
    <form id=”form1″ runat=”server”>
        <div>
<asp:WebPartManager ID="WebPartManager1" runat="server">
<Personalization ProviderName="WebPartProvider" />
            </asp:WebPartManager>
            <table>
                <tr>
                    <td>
<asp:WebPartZone ID="WebPartZone1" runat="server">
                            <ZoneTemplate>
<uc1:ucNews ID="UcNews1" runat="server" Title="Новості" />
<asp:FileUpload ID="FileUpload1" runat="server" Title="Загрузка" />
                            </ZoneTemplate>
                        </asp:WebPartZone>
                    </td>
                    <td>
<asp:WebPartZone ID="WebPartZone2" runat="server">
                            <ZoneTemplate>
<asp:Calendar ID="Calendar1" runat="server" Title="Календарь"> </ asp: Calendar>
                            </ZoneTemplate>
                        </asp:WebPartZone>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

Зверніть увагу на властивість Title, яке з'явилося у всіх елементів управління. Дана властивість успадковано від WebPart і відповідає за текст, який відображатиметься в заголовку елемента WebPart зліва від меню.


Створення каталогу Web Parts.


Після того як ми розташували наші елементи управління всередині зони, вони можуть бути згорнуті, розгорнуті або заховані. Тепер нам необхідно дати користувачам можливість не тільки приховувати елементи управління, але так само переміщати їх з однієї зони в іншу, і вибирати, необхідні користувачу Web Parts з каталогу.


Для цього додамо на форму елемент керування CatalogZone і помістимо в нього елемент управління PageCatalogPart.


Що б дозволити користувачеві входити в режим роботи з каталогом Web Parts додамо на форму DropDownList (саме на форму, а не в WebPartZone), назвемо його ddlWebPartState і встановимо властивість AutoPostBack в true.


Вихідний код сторінки:

 <% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Default.aspx.cs" Inherits = "_Default"%>
<% @ Register Src = "ucNews.ascx" TagName = "ucNews" TagPrefix = "uc1"%>
<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title> Робота з Web Parts </ title>
</head>
<body>
    <form id=”form1″ runat=”server”>
        <div>
<asp:WebPartManager ID="WebPartManager1" runat="server">
<Personalization ProviderName="WebPartProvider" />
            </asp:WebPartManager>
<asp:DropDownList ID="ddlWebPartState" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlWebPartState_SelectedIndexChanged">
            </asp:DropDownList>
            <table>
                <tr>
                    <td>
<asp:WebPartZone ID="WebPartZone1" runat="server">
                            <ZoneTemplate>
<uc1:ucNews ID="UcNews1" runat="server" Title="Новості" />
<asp:FileUpload ID="FileUpload1" runat="server" Title="Загрузка" />
                            </ZoneTemplate>
                        </asp:WebPartZone>
                    </td>
                    <td>
<asp:WebPartZone ID="WebPartZone2" runat="server">
                            <ZoneTemplate>
<asp:Calendar ID="Calendar1" runat="server" Title="Календарь"> </ asp: Calendar>
                            </ZoneTemplate>
                        </asp:WebPartZone>
                    </td>
                </tr>
            </table>
        </div>
<asp:CatalogZone ID="CatalogZone1" runat="server">
            <ZoneTemplate>
<asp:PageCatalogPart ID="PageCatalogPart1" runat="server" />
            </ZoneTemplate>
        </asp:CatalogZone>
    </form>
</body>
</html>

Після цього додамо наступний код у файл Default.aspx.cs

 using System;
using System.Web.UI;
using System.Web.UI.WebControls.WebParts;
public partial class _Default : Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
/ / Цикл який дозволяє визначити доступні режими відображення Web Parts
foreach (WebPartDisplayMode displayMode in WebPartManager1.SupportedDisplayModes)
              ddlWebPartState.Items.Add(displayMode.Name);
        }
    }
protected void ddlWebPartState_SelectedIndexChanged (object sender, EventArgs e)
    {
        WebPartDisplayMode displayMode;
/ / Визначаємо вибраний режим відображення
displayMode = WebPartManager1.SupportedDisplayModes [ddlWebPartState.SelectedValue];
/ / Встановлюємо режим відображення
        WebPartManager1.DisplayMode = displayMode;
    }
}

Запустимо проект на виконання. Після завантаження сторінки в браузері, виберемо в спадному списку пункт Catalog і на екрані відобразитися каталог Web Parts, за допомогою якого користувач може приховувати / показувати і переміщатися Web Parts між зонами (рис. 11).



Рисунок 11


Так само в спадному списку з'явився, є пункт Design, вибравши цей пункт, користувач зможе переміщати Web Parts між зонами за допомогою миші.


Створення можливості зміни зовнішнього вигляду Web Parts.


Що б користувач мав можливість не тільки приховувати і переміщати Web Parts між зонами, а так само мав можливість налаштовувати їх зовнішній вигляд, необхідно на сторінку додати елемент керування EditorZone і помістити в нього елементи управління AppearanceEditorPart і LayoutEditorPart.


Запустимо проект на виконання.


Тепер в спадному списку з'явилося нове значення Edit. Воно дозволяє виконувати настройку зовнішнього вигляду Web Parts.


Якщо вибрати цей пункт, а також, в меню Web Part (права верхня частина заголовка), вибрати Edit (рис. 12), то на екрані буде відображатися можливість редагування властивостей вибраного Web Part (рис. 13).



Рисунок 12



Рисунок 13


Основні властивості об'єктів Web Parts


У всіх елементів, з якими доводиться зустрічатися, працюючи з Web Parts досить велика кількість різноманітних властивостей і що б їх усіх описати необхідно, написати книгу. Ось основні з них, які, на мою думку, є найбільш важливими.


Основні властивості та методи класу WebPartManager:





























Назва


Опис


DisplayMode


Отримує і встановлює поточне подання Web Parts на екрані користувача.


SupportedDisplayModes


Колекція доступних уявлень Web Parts


WebParts


Колекція всіх Web Parts на сторінці


Zones


Колекція всіх WebPartZone на сторінці


AddWebPart


Метод додавання Web Parts на сторінку


CloseWebPart


Приховування Web Parts з екрану користувача


DeleteWebPart


Повне видалення Web Parts зі сторінки


Основні властивості та методи класу GenericWebPart (до цього класу наводяться всі елементи управління розташовані всередині WebPartZone):

















Назва


Опис


AllowClose


Властивість, що відповідає за можливість закрити Web Part.


AllowEdit


Властивість, що відповідає за можливість редагувати властивості Web Part.


AllowMinimize


Властивість, що відповідає за можливість згорнути Web Part.


Висновок


Web Parts дуже потужна технологія, яка дозволяє користувачеві вашого сайту максимально ефективно використовувати ресурси які ви йому надаєте. При цьому розробник, додаючи таку функціональність веб-сайту, робить це декларативно. Йому не доводиться писати дуже багато коду, тому що за нього все це робить. NET Framework 2.0.


У цій статті я показав основи роботи з Web Parts. Показав, як просто і швидко можна створити настроюваний користувальницький інтерфейс. У наступній частині дива я хочу розповісти, як надати користувачеві багатший функціонал налаштування інтерфейсу веб-сайту з використанням Web Parts. Ми додамо можливість користувачеві редагувати різні внутрішні властивості Web Parts (наприклад, кількість рядків виведених в GridView). Так само я розповім, як можна налаштувати автоматичне взаємодія між Web Parts.


Посилання


§ 

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Метки: , , , , , ,
Рубрики: Документація

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*