summaryrefslogtreecommitdiff
path: root/demos/quickstart/protected/pages/ActiveControls/Home.page
blob: 4eddd2f29485c7edc6b6737dbf5d52ddf289272b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
<com:TContent ID="body" >
<!-- $Id$ -->
<h1 id="128031">Active Controls (AJAX enabled Controls)</h1>
<p id="640423" class="block-content">See the <a href="?page=ActiveControls.Introduction">Introduction</a>
for a quick overview of the concept behind active controls (AJAX enabled controls).
Most active controls have a property of
<a href="?page=ActiveControls.BaseActiveControl">ActiveControl</a> and
a sub-property <a href="?page=ActiveControls.CallbackClientSide">ClientSide</a>
that provides many properties to customize the controls. The
<a href="?page=TCallbackClientScript">CallbackClient</a> property of the
<tt>TPage</tt> class provides many methods to update and alter the client-side content
during a callback request. Active controls is reliant on a collection
of <a href="?page=ActiveControl.ClientSideJavascript">javascript classes</a>.
</p>

<p id="640424" class="block-content">For a quick demo of active controls, try the <a href="?page=ActiveControls.ActiveButton">
TActiveButton</a> control. See also the later part of the <a href="?page=Tutorial.CurrencyConverter">Currency Converter</a> tutorial for a more in depth example.
</p>

<h2 id="128032">Standard Active Controls</h2>
<ul id="u1" class="block-content">
  <li>
  <a href="?page=ActiveControls.ActiveButton">TActiveButton</a>
  represents a click button on a Web page. It can be used to trigger a callback request.
  </li>

  <li>
  <a href="?page=ActiveControls.ActiveCheckBox">TActiveCheckBox</a>
  represents a checkbox on a Web page. It can be used to collect two-state user input
  and can trigger a callback request.
  </li>

  <li>
  <a href="?page=ActiveControls.ActiveCustomValidator">TActiveCustomValidator</a>
  validates a particular control using a callback request.
  </li>

  <li>
  <a href="?page=ActiveControls.ActiveDatePicker">TActiveDatePicker</a>
  adds a date picker that permits the suer to choose a date.
  </li>

  <li>
  <a href="?page=ActiveControls.ActiveFileUpload">TActiveFileUpload</a>
  displays a file upload field on a page and uses an iframe to permit handling of the
  file upload in a callback.
  </li>

  <li>
  <a href="?page=ActiveControls.ActiveHiddenField">TActiveHiddenField</a>
  displays a hidden input field that can be changed upon callback.
  </li>

  <li>
  <a href="?page=ActiveControls.ActiveHyperLink">TActiveHyperLink</a>
  represents a hyperlink on a Web page.
  </li>

  <li>
  <a href="?page=ActiveControls.ActiveImage">TActiveImage</a>
  represents an image on a Web page.
  </li>

  <li>
  <a href="?page=ActiveControls.ActiveImageButton">TActiveImageButton</a>
  represents a click button that has an image as the background.
  It is can be used to trigger a callback request.
  </li>

  <li>
  <a href="?page=ActiveControls.ActiveLabel">TActiveLabel</a>
  represents a label on a Web page.
  The label can be customized via various CSS attributes.
  </li>

  <li>
  <a href="?page=ActiveControls.ActiveLinkButton">TActiveLinkButton</a>
  represents a hyperlink that can perform a callback request.
  </li>

  <li>
  <a href="?page=ActiveControls.ActiveMultiView">TActiveMultiView</a>
  represents a container for a group of TView controls, each of which is container for other controls.
  At any time, at most one TView is visible. It's the active counterpart of TMultiView.
  </li>

  <li>
  <a href="?page=ActiveControls.ActivePanel">TActivePanel</a>
  represents a container for other controls on a Web page. In HTML,
  it is displayed as a &lt;div&gt; element. The panel's contents
  can be replaced during a callback request.
  </li>

  <li>
  <a href="?page=ActiveControls.ActivePager">TActivePager</a>
  generates UI that allows users to interactively specify which page of
  data to be displayed in a data-bound control.
  </li>

  <li>
  <a href="?page=ActiveControls.ActiveRadioButton">TActiveRadioButton</a>
  represents a radiobutton on a Web page.
  It is mainly used in a group from which users make a choice. It can
  be used to perform a callback request.
  </li>

  <li>
  <a href="">TActiveRatingList</a>
  is an EXPERIMENTAL class that displays clickable images that represent a TRadioButtonList.
  </li>

  <li>
  <a href="?page=ActiveControls.ActiveTextBox">TActiveTextBox</a>
  represents a text input field on a Web page.
  It can collect single-line, multi-line or password text input from users.
  It can be used to perform a callback request.
  </li>

</ul>

<h2 id="128033">Active List Controls</h2>
<ul id="u2" class="block-content">
  <li>
  <a href="?page=ActiveControls.ActiveCheckBoxList">TActiveCheckBoxList</a>
  displays a list of checkboxes on a Web page and each checkbox
  can trigger a callback request.
  </li>

  <li>
  <a href="?page=ActiveControls.ActiveDropDownList">TActiveDropDownList</a>
  displays a dropdown list box that allows users to select a
  single option from a few prespecified ones. It can be used
  to perform a callback request.
  </li>

  <li>
  <a href="?page=ActiveControls.ActiveListBox">TActiveListBox</a>
  displays a list box that allows single or multiple selection. It can be used
  to perform a callback request.
  </li>

  <li>
  <a href="?page=ActiveControls.ActiveRadioButtonList">TActiveRadioButtonList</a>
  is similar to TActiveCheckBoxList in every aspect except that each
  TActiveRadioButtonList displays a group of radiobuttons. Each radio button
  can perform a callback request.
  </li>
</ul>

<h2 id="134001">Active Data Controls</h2>
<ul id="u2" class="block-content">
  <li>
  <a href="?page=ActiveControls.ActiveDataList">TActiveDataList</a>
  is used to display or modify a list of data items. It is the
  active counterpart to the original TDataList control.
  </li>

  <li>
  <a href="?page=ActiveControls.ActiveDataGrid">TActiveDataGrid</a>
  displays data in a tabular format with rows and columns. It is the
  active counterpart to the original TDataGrid control.
  </li>

  <li>
  <a href="?page=ActiveControls.ActiveRepeater">TActiveRepeater</a>
  displays its content defined in templates repeatedly based on the given data.
  It is the active counterpart to the original TRepeater control.
  </li>
</ul>

<h2 id="128034">Extended Active Controls</h2>


<ul id="u3" class="block-content">
	<li>
	<a href="?page=ActiveControls.AutoComplete">TAutoComplete</a>
	extends TActiveTextBox to offer text completion suggestions.
	</li>

	<li>
	<a href="?page=ActiveControls.Callback">TCallback</a>
	a generic control that can perform callback requests.
	</li>

	<li>
	<a href="?page=ActiveControls.EventTriggeredCallback">TEventTriggeredCallback</a>
	triggers a callback request based on HTML DOM events.
	</li>

	<li>
	<a href="?page=ActiveControls.InPlaceTextBox">TInPlaceTextBox</a>
	represents a label that can be edited by clicked.
	</li>

	<li>
	<a href="?page=ActiveControls.TimeTriggeredCallback">TTimeTriggeredCallback</a>
	triggers a callback request based on time elapsed.
	</li>

	<li>
	<a href="?page=ActiveControls.ValueTriggeredCallback">TValueTriggeredCallback</a>
	monitors (using a timer) an attribute of an HTML element and triggers a callback request
	when the attribute value changes.
	</li>
	
	<li>
	<a href="?page=ActiveControls.DragDrop">TDropContainer &amp; TDraggable</a> represents drag and drop containers. 
	The former will make its child controls "draggable" while the latter will raise a callback when a draggable
	control is dropped on it.
	</li>

</ul>

<h2 id="128035">Active Control Abilities</h2>
<p id="640426" class="block-content">The following table shows the Active Controls that can trigger a
callback event and whether the control will raise a PostBack event
if Javascript was disabled on the client's browser.</p>
<!-- tabular: align=|l|l|l|, width=(0.35 0.25 0.25) -->
<table class="tabular">
	<tr>
		<th>Control Name</th>
		<th>Triggers Callback</th>
		<th>Falls back to PostBack</th>
  </tr>
  <tr><td>
  		<a href="?page=ActiveControls.ActiveButton">TActiveButton</a>
  	</td>
  	<td>Yes</td>
  	<td>Yes</td>
  </tr>

  <tr><td>
  	<a href="?page=ActiveControls.ActiveCheckBox">TActiveCheckBox</a>
  	</td>
  	<td>Yes</td>
  	<td>Yes</td>
  </tr>

  <tr><td>
  	<a href="?page=ActiveControls.ActiveCustomValidator">TActiveCustomValidator</a>
  	</td>
  	<td>Yes</td>
  	<td>Yes</td>
  </tr>

  <tr><td>
  	<a href="?page=ActiveControls.ActiveHyperLink">TActiveHyperLink</a>
  	</td>
  	<td>No</td><td>Yes</td>
  </tr>

  <tr><td>
  	<a href="?page=ActiveControls.ActiveImage">TActiveImage</a>
  </td>
  <td>No</td><td>Yes</td>
  </tr>

  <tr><td>
  	<a href="?page=ActiveControls.ActiveImageButton">TActiveImageButton</a>
	</td>
	<td>Yes</td><td>Yes</td>
  </tr>

  <tr><td>
  <a href="?page=ActiveControls.ActiveLabel">TActiveLabel</a>
	</td>
	<td>No</td><td>Yes</td>
  </tr>

  <tr><td>
  <a href="?page=ActiveControls.ActiveLinkButton">TActiveLinkButton</a>
	</td>
	<td>Yes</td><td>No</td>
  </tr>

  <tr><td>
  <a href="?page=ActiveControls.ActivePanel">TActivePanel</a>
  </td>
  <td>No</td><td>Yes</td>
  </tr>

  <tr><td>
  <a href="?page=ActiveControls.ActiveRadioButton">TActiveRadioButton</a>
  </td>
  <td>Yes</td><td>Yes</td>
  </tr>

  <tr><td>
  <a href="?page=ActiveControls.ActiveTextBox">TActiveTextBox</a>
	</td>
	<td>Yes</td><td>Yes</td>
  </tr>

  <tr><td>
  <a href="?page=ActiveControls.CallbackOptions">TCallbackOptions</a>
	</td>
	<td>No</td><td>N/A</td>
  </tr>


  <tr><td>
  <a href="?page=ActiveControls.ActiveCheckBoxList">TActiveCheckBoxList</a>
  </td>
  <td>Yes</td><td>Yes</td>
  </tr>

  <tr><td>
  <a href="?page=ActiveControls.ActiveDropDownList">TActiveDropDownList</a>
  </td>
  <td>Yes</td><td>Yes</td>
  </tr>

  <tr><td>
  <a href="?page=ActiveControls.ActiveListBox">TActiveListBox</a>
  </td>
  <td>Yes</td><td>Yes</td>
  </tr>

  <tr><td>
  <a href="?page=ActiveControls.ActiveRadioButtonList">TActiveRadioButtonList</a>
  </td>
  <td>Yes</td><td>Yes</td>
  </tr>

  <tr><td>
	<a href="?page=ActiveControls.AutoComplete">TAutoComplete</a>
  </td>
  <td>Yes</td>
  <td>No</td>
  </tr>

  <tr><td>
	<a href="?page=ActiveControls.Callback">TCallback</a>
  </td>
  <td>Yes</td><td>No</td>
  </tr>

  <tr><td>
	<a href="?page=ActiveControls.EventTriggeredCallback">TEventTriggeredCallback</a>
  </td>
  <td>Yes</td><td>No</td>
  </tr>

 <tr><td>
	<a href="?page=ActiveControls.InPlaceTextBox">TInPlaceTextBox</a>
  </td>
  <td>Yes</td><td>No</td>
  </tr>

 <tr><td>
	<a href="?page=ActiveControls.TimeTriggeredCallback">TTimeTriggeredCallback</a>
	</td>
	<td>Yes</td><td>No</td>
  </tr>

  <tr><td>
	<a href="?page=ActiveControls.ValueTriggeredCallback">TValueTriggeredCallback</a>
	</td>
	<td>Yes</td><td>No</td>
  </tr>
  
  <tr><td>
  	<a href="?page=ActiveControls.DragDrop">TDropContainer</a>
  	</td>
  	<td>Yes</td><td>No</td>
  </tr>

  <tr><td>
  	<a href="?page=ActiveControls.DragDrop">TDraggable</a>
  	</td>
  	<td>No</td><td>No</td>
  </tr>

  
</table>

<h2 id="128036">Active Control Basic Infrastructure Classes</h2>
<p id="640427" class="block-content">The following classes provide the basic infrastructure classes required to
realize the active controls. They can be useful to develop new active controls, but Prado users tipically don't need
to use them.</p>
<ul id="u4" class="block-content">
	<li>
	<h3 id="190038">TActiveControlAdapter</h3>
	<com:DocLink ClassPath="System.Web.UI.ActiveControls.TActiveControlAdapter" />
	<p class="block-content">
		<tt>TActiveControlAdapter</tt> customizes the parent TControl class for active control classes.
		It tracks changes in the viewstate values of the control and update
		differences of the client-side HTML element attributes.
	</p>
	</li>

	<li>
	<h3 id="190039">TActiveListControlAdapter</h3>
	<com:DocLink ClassPath="System.Web.UI.ActiveControls.TActiveListControlAdapter" />
	<p class="block-content">
		<tt>TActiveListControlAdapter</tt> allows the adapted list controls to change the selections
		on the client-side during a callback request.
	</p>
	</li>

	<li>
	<h3 id="190040">TActivePageAdapter</h3>
	<com:DocLink ClassPath="System.Web.UI.ActiveControls.TActivePageAdapter" />
	<p class="block-content">
		<tt>TActivePageAdapter</tt> process the page life-cycle for callback requests.
	</p>
	</li>

	<li>
	<h3 id="190041">TBaseActiveControl</h3>
	<com:DocLink ClassPath="System.Web.UI.ActiveControls.TBaseActiveControl" />
	<p class="block-content">
		<tt>TBaseActiveControl</tt> class provided additional basic properties common for every
		active control. An instance of <tt>TBaseActiveControl</tt> or its decendent
		<tt>TBaseActiveCallbackControl</tt> is created by <tt>TActiveControlAdapter::getBaseActiveControl()</tt>
		method.
		The <tt>EnableUpdate</tt> property determines wether the active
		control is allowed to update the contents of the client-side when the callback
		response returns.
	</p>
	</li>

	<li>
	<h3 id="190042">TCallbackResponseAdapter</h3>
	<com:DocLink ClassPath="System.Web.UI.ActiveControls.TCallbackResponseAdapter" />
	<p class="block-content">
		<tt>TCallbackResponseAdapter</tt> alters the <tt>THttpResponse</tt>'s outputs.
		A <tt>TCallbackResponseWriter</tt> is used instead of the <tt>TTextWrite</tt> when
		<tt>createHtmlWriter</tt> is called. Each call to createHtmlWriter will create
		a new <tt>TCallbackResponseWriter</tt>. When <tt>flushContent()</tt> is called each
		instance of <tt>TCallbackResponseWriter</tt>'s content is flushed.
		The callback response data can be set using the <tt>ResponseData</tt> property.
	</p>
	</li>

</ul>

<h2 id="190037">Active Control Infrastructure Advanced Classes</h2>
<p class="block-content">The following classes provide advanced properties and events needed to realize the active controls.
A Prado user can use them to customize active controls behaviour and interact directly with the client side during a callback.
</p>
<ul class="block-content">
	<li>
	<a href="?page=ActiveControls.CallbackClientScript">TCallbackClientScript</a>
	methods to manipulate the client-side HTML elements, also includes methods
	to invoke javascript Effects on HTML elements.
	</li>

	<li>
	<a href="?page=ActiveControls.CallbackClientSide">TCallbackClientSide</a>
	is used to specify client-side callback request options and client-side event handlers.
	</li>

	<li>
	<a href="?page=ActiveControls.CallbackEventParameter">TCallbackEventParameter</a>
	provides the parameter passed during the callback request.
	</li>

	<li>
	<a href="?page=ActiveControls.CallbackOptions">TCallbackOptions</a>
	allows a common set of callback client-side options to be attached to one or more active controls.
	</li>
</ul>

<div class="last-modified">$Id$</div></com:TContent>