Типи користувальницьких елементів управління

ASP.NET пропонує новий підхід з використанням користувальницьких
серверних елементів керування (Custom Control). Компонент, що реалізує
серверний елемент керування запускається на Web сервері, і, загалом
випадку, не пред'являє будь-яких вимог до клієнта (HTML
оглядачеві). Власні серверні елементи управління можуть
формувати уявлення від HTML, до використання складних клієнтських
скриптів і XML. Існує кілька варіантів створення власних
серверних елементів керування для побудови користувацького
інтерфейсу, що відрізняються за своїми можливостями. Програміст, початківець
розробку на ASP.NET, часто не може у правильному виборі типу
компоненти, яка оптимально підходить для його завдання і губиться в
термінології. У першій частині статті я не буду детально зупинятися
на деталях використання (докладний огляд по серверних елементів
представлений Надією Шатохін:

Розробка серверних елементів керування ASP.NET), а розгляну
категорії власних серверних елементів управління саме з точки
зору області їх застосування. У другій частині статті ми розглянемо
прийом, який дозволяє полегшити створення так званих Composite
Control.

 

Примітка Що б
остаточно не заплутати читача, далі в статті навмисне будуть
використовуватися англійські назви категорій серверних елементів
управління,

 

Крім цих категорій застосовуються терміни для позначення
підкатегорій елементів управління, пов'язаних з використанням деяких
можливостей інфрастуктури сторінок ASP.NET. Маються на увазі Templated
Control і Templated Data-Bound Control. Templated Control дозволяють
створювати елемент керування таким чином, що б розробник,
використовує його на ASPX сторінці міг налаштовувати його подання
через використання шаблонів (Подібно DataRepeater. DataGrid і т.п.).
Templated Data-Bound Control крім цього дозволяє пов'язувати такі
шаблони для подання UI з колекціями даних.

Реалізація Composite Control

Зробивши невеликий огляд типів Controls, давайте звернемося до Composite
Controls. Вони займають проміжне положення між User Controls,
коли подання формується з уявлень нижележащих елементів,
і Rendering Controls, коли Ви повністю формуєте представлення Вашого
елемента.

Розглянемо на прикладі. Наш Composite Control буде складатися з
Textbox, двох Label, і Button і реалізовувати інтерфейс для пошуку
Ім'я та Прізвища співробітника за його унікальним номером. При натисканні на
кнопку наш Control буде здійснювати пошук інформації про співробітника по
його номеру, встановлювати властивості Text двох Label в значення Імені і
Прізвища, генерувати власну подію. Додатково він буде
реалізовувати властивості двох TextBox як свої властивості. При розробці
Composite Control потрібно враховувати наступне:

Приклад реалізації Composite Control:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;

namespace CustomControls 
{
public class Composite : Control, INamingContainer 
{
	private Label lblFirstName;
	private Label lblLastName;
	private TextBox txtID;
            
	public string LastName
	{
		get
		{
/ / Необхідно переконатися, що підлеглі контроли існують. В іншому 
/ / Випадку вони будуть створені
EnsureChildControls();
			return lblLastName.Text;
		}
	}
	public string FirstName
	{
		get
		{
			EnsureChildControls();
			return lblFirstName.Text;
		}
	}
            
/ / Подія, що генерується Composite Control при натисканні на підлеглу кнопку
	public event FindEventHandler Find;
	            
	protected virtual void OnFind(FindEventArgs fe)
	{
		if (Find != null)
		{
			Find(this,fe);
		}
	}
/ / Перевизначати методи CreateChildControls () для формування колекції 
/ / Підлеглих елементів управління, які беруть участь у формуванні HTML 
/ / Подання. При цьому не потрібно реалізовувати метод Render (), оскільки
/ / Підлеглі елементи повністю керують висновком
	            
	protected override void CreateChildControls() 
	{
	                  
Controls.Add (new LiteralControl ("<h3> введіть номер:"));
		                  
		txtID = new TextBox();
		txtID.Text = "0";
		Controls.Add(txtID);
		                  
		Controls.Add(new LiteralControl("</h3>"));
		                  
		Button button1 = new Button();
button1.Text = "Знайти";
		Controls.Add(new LiteralControl("<br>"));
		Controls.Add(button1);
		button1.Click += new EventHandler(this.ButtonClicked);
		                  
Controls.Add (new LiteralControl ("<br> <br>"));
		lblFirstName = new Label();
		lblFirstName.Height = 50;
		lblFirstName.Width = 500;
		Controls.Add(lblFirstName);

		Controls.Add(new LiteralControl("<br>"));
		lblLastName = new Label();
		lblLastName.Height = 50;
		lblLastName.Width = 500;
		Controls.Add(lblLastName);
	                  
	}            
	private void ButtonClicked(Object sender, EventArgs e)
	{
		bool found = false;
		int id;
		try
		{
			id = Int32.Parse(txtID.Text);
		}
		catch(Exception ex)
		{
			id = -1;
		}
		if( id == 1 )
		{
			found = true;
			lblFirstName.Text = "Dmitry";
			lblLastName.Text  = "Starostin"; 
		}
		else
		{
			lblFirstName.Text = "";
			lblLastName.Text  = ""; 
		}
/ / Генеруємо подія для обробки в Web формі
		OnFind(new FindEventArgs(found));
	}
}
public class FindEventArgs : EventArgs
{
	private bool _found = false;
	public FindEventArgs (bool found)
	{
			_found = found;
	}
	public bool Found
	{
		get
		{
			return _found;
		}
	}
}
/ / Делегат, використовуваний для оголошення події 
public delegate void FindEventHandler (object sender, FindEventArgs fe);
}

Так буде виглядати ASPX сторінка для форми, яка містить наш Composite
Control. Для наочності, код включений в ASPX сторінку і підхід code
behind не використовується.

 

<% @ Page language = "c #" AutoEventWireup = "false"%>
<% @ Register TagPrefix = "cc1" Namespace = "CustomControls" Assembly = "WebControlLibrary1"%>
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.0 Transitional / / EN">
<HTML>
  <HEAD>
	<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language="C#" runat="server">

      private void ShowInfo (Object sender,FindEventArgs e)
      {
      	if (e.Found==true)
		{
Label1.Text = Composite1.FirstName + "" + Composite1.LastName;
		}
		else
		{
Label1.Text = "співробітник не знайдено: (";
		}
	}           
      </script>
   </HEAD>
   <body>
<form id="Form1" method="post" runat="server">
	<P>
<asp:Label id="Label1" runat="server" Width="246px" Height="13px"> </ asp: Label>
      </P>
	<P>
<cc1:Composite id="Composite1" OnFind="ShowInfo" runat="server"> </ cc1: Composite> </ P>
	</P>
	</form>
	</body>
</HTML>

Таким чином, Composite Control надає практично ті ж
можливості щодо побудови користувальницького інтерфейсу, що й Web User
Control. Ми отримуємо відкомпільований елемент, який, після установки
в GAC, можемо використовувати в будь-яких ASP.NET додатках на сервері. При
цьому ми скористалися можливостями підлеглих елементів управління
для формування візуального інтерфейсу. Що нам не вистачає, так це
можливості використовувати візуальний дизайнер Web Forms в Visual
Studio.NET для роботи з Composite Control, подібно до того, як ми працюємо
з Web User Control.

Використання дизайнера форм для створення Composite Control

Уважний читач вкаже на те, що на початку статті
підкреслювалася можливість використання візуального дизайнера ТІЛЬКИ
для Web User Control. Реалізація методу CreateChildControls () для
Composite Control, в якому динамічно створюються ВСІ підлеглі
елементи і задаються їх властивості, стає трудомісткою зі збільшенням
складності інтерфейсу. Давайте спробуємо знайти шляхи обходу цього
недоліку. Як ми знаємо, ASP.NET при обробці запитів забезпечує
компіляцію на льоту ASPX сторінок і Code Behind коду. Легко припустити,
що подання, що задається розміткою HTML в ASPX сторінці, буде
сформовано через послідовність створення контролів ASP.NET і
викликів відповідних методів на них. Давайте спробуємо
скористатися результатами роботи інфраструктури ASP.NET.

Видно, що й надалі ми зможемо міняти візуальне подання до
дизайнера форм і використовуючи показаний прийом для модифікації коду
реалізації класу Composite Control. І немає необхідності писати
реалізацію CreateChildControls вручну! Ми поєднали зручність створення
User Web Controls з більшою гнучкістю Composite Control.
 

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


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

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

Ваш отзыв

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

*

*