1 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
2 <html lang="en" xml:lang="en"> |
|
3 <head> |
|
4 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> |
|
5 <meta name="copyright" content="(C) Copyright 2005" /> |
|
6 <meta name="DC.rights.owner" content="(C) Copyright 2005" /> |
|
7 <meta content="concept" name="DC.Type" /> |
|
8 <meta name="DC.Title" content="WRTKit ContentPanel Class" /> |
|
9 <meta scheme="URI" name="DC.Relation" content="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html" /> |
|
10 <meta content="XHTML" name="DC.Format" /> |
|
11 <meta content="GUID-BFF5AC77-A652-480A-BE3E-E3CA6283A45B" name="DC.Identifier" /> |
|
12 <meta content="en" name="DC.Language" /> |
|
13 <link href="commonltr.css" type="text/css" rel="stylesheet" /> |
|
14 <title> |
|
15 WRTKit ContentPanel Class</title> |
|
16 </head> |
|
17 <body id="GUID-BFF5AC77-A652-480A-BE3E-E3CA6283A45B"><a name="GUID-BFF5AC77-A652-480A-BE3E-E3CA6283A45B"><!-- --></a> |
|
18 |
|
19 |
|
20 |
|
21 <h1 class="topictitle1"> |
|
22 WRTKit ContentPanel Class</h1> |
|
23 |
|
24 <div> |
|
25 |
|
26 <div class="section"><h2 class="sectiontitle"> |
|
27 Description</h2> |
|
28 |
|
29 |
|
30 <p> |
|
31 |
|
32 The ContentPanel class implements a control that is used to display arbitrary |
|
33 XHTML content. The content panel can either be foldable (allows users to |
|
34 toggle it open and close) or static. Like all controls the content panel has |
|
35 an optional caption. But unlike for other controls, this caption area is an |
|
36 interactive area that can be used to expand and collapse a foldable content |
|
37 panel. Thus, foldable content panel should always have captions. |
|
38 </p> |
|
39 |
|
40 <div class="fignone" id="GUID-BFF5AC77-A652-480A-BE3E-E3CA6283A45B__GUID-FF98E500-EF53-4A7D-BBDB-71DB0378C4D4"><a name="GUID-BFF5AC77-A652-480A-BE3E-E3CA6283A45B__GUID-FF98E500-EF53-4A7D-BBDB-71DB0378C4D4"><!-- --></a><span class="figcap">Figure 1. |
|
41 Foldable content panel</span> |
|
42 |
|
43 |
|
44 <br /><img src="RSS_Reader_Main_Screenshot_2.png" /><br /> |
|
45 </div> |
|
46 |
|
47 </div> |
|
48 |
|
49 <div class="section"><h2 class="sectiontitle"> |
|
50 Inherits from</h2> |
|
51 |
|
52 |
|
53 <p> |
|
54 |
|
55 <a href="WRTKit_Control_Class-GUID-6ddb8154-3fed-40fc-b282-85e6d3ad494f.html"> |
|
56 Control</a> |
|
57 </p> |
|
58 |
|
59 </div> |
|
60 |
|
61 <div class="section"><h2 class="sectiontitle"> |
|
62 Events</h2> |
|
63 |
|
64 |
|
65 <br /><ul> |
|
66 |
|
67 <li> |
|
68 |
|
69 <p> |
|
70 ExpandedStateChanged</p> |
|
71 |
|
72 |
|
73 |
|
74 <p> |
|
75 |
|
76 This event is fired when the expanded state of the content area has changed. |
|
77 </p> |
|
78 |
|
79 |
|
80 </li> |
|
81 |
|
82 </ul> |
|
83 |
|
84 </div> |
|
85 |
|
86 </div> |
|
87 |
|
88 <div> |
|
89 <div class="familylinks"> |
|
90 <div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">WRTKit API Reference</a></div> |
|
91 </div> |
|
92 </div> |
|
93 <div class="nested1" id="GUID-72B0BFAD-F25B-474E-804E-FF9B381E3319"><a name="GUID-72B0BFAD-F25B-474E-804E-FF9B381E3319"><!-- --></a> |
|
94 |
|
95 <h2 class="topictitle2"> |
|
96 Constructor</h2> |
|
97 |
|
98 <div> |
|
99 |
|
100 <div class="section"><h3 class="sectiontitle"> |
|
101 Syntax</h3> |
|
102 |
|
103 |
|
104 <pre> |
|
105 [ContentPanel] new ContentPanel(String id, String caption, String content, Boolean foldable, Boolean expanded)</pre> |
|
106 |
|
107 </div> |
|
108 |
|
109 <div class="section"><h3 class="sectiontitle"> |
|
110 Description</h3> |
|
111 |
|
112 |
|
113 <p> |
|
114 |
|
115 Creates a new instance of the ContentPanel class. |
|
116 </p> |
|
117 |
|
118 </div> |
|
119 |
|
120 <div class="section"><h3 class="sectiontitle"> |
|
121 Arguments</h3> |
|
122 |
|
123 |
|
124 <br /><ul> |
|
125 |
|
126 <li> |
|
127 |
|
128 <p> |
|
129 id</p> |
|
130 |
|
131 |
|
132 |
|
133 <p> |
|
134 |
|
135 Unique identifier for the control. Can be retrieved using the id property defined |
|
136 in the UIElement class that this control inherits from. Useful for example to |
|
137 identify the source of an event in event callback functions or to apply a CSS |
|
138 rule to only this particular control. The identifier can be null, in which case |
|
139 no id will be set for the control. |
|
140 </p> |
|
141 |
|
142 |
|
143 </li> |
|
144 |
|
145 <li> |
|
146 |
|
147 <p> |
|
148 caption</p> |
|
149 |
|
150 |
|
151 |
|
152 <p> |
|
153 |
|
154 The caption text for the control. A null caption can be used to hide the |
|
155 caption area. This is not recommended if the content panel is folding since |
|
156 users cannot expand or collapse a foldable content panel without the caption |
|
157 area being present. |
|
158 </p> |
|
159 |
|
160 |
|
161 </li> |
|
162 |
|
163 <li> |
|
164 |
|
165 <p> |
|
166 content</p> |
|
167 |
|
168 |
|
169 |
|
170 <p> |
|
171 |
|
172 The content for the panel. If the argument is omitted or null then the content |
|
173 area will be empty. |
|
174 </p> |
|
175 |
|
176 |
|
177 </li> |
|
178 |
|
179 <li> |
|
180 |
|
181 <p> |
|
182 foldable</p> |
|
183 |
|
184 |
|
185 |
|
186 <p> |
|
187 |
|
188 Specifies the foldability of the content panel. Specify true to make the content |
|
189 panel foldable and false to make it static. If the argument is omitted or null |
|
190 then the content panel will default to being static. |
|
191 </p> |
|
192 |
|
193 |
|
194 </li> |
|
195 |
|
196 <li> |
|
197 |
|
198 <p> |
|
199 expanded</p> |
|
200 |
|
201 |
|
202 |
|
203 <p> |
|
204 |
|
205 Specifies the expanded state of a foldable content panel. Specify true to make |
|
206 the content panel expanded and false to make it collapse. If the argument is |
|
207 omitted or null then the content panel will default to being expanded. |
|
208 </p> |
|
209 |
|
210 |
|
211 </li> |
|
212 |
|
213 </ul> |
|
214 |
|
215 </div> |
|
216 |
|
217 <div class="section"><h3 class="sectiontitle"> |
|
218 Return value</h3> |
|
219 |
|
220 |
|
221 <p> |
|
222 |
|
223 A new instance of the ContentPanel class. |
|
224 </p> |
|
225 |
|
226 </div> |
|
227 |
|
228 <div class="section"><h3 class="sectiontitle"> |
|
229 Example code</h3> |
|
230 |
|
231 |
|
232 <p> |
|
233 |
|
234 Creating a foldable content panel with content: |
|
235 </p> |
|
236 |
|
237 <pre> |
|
238 |
|
239 var panel1 = new ContentPanel("panel1", "Example Panel", "This is some content"); |
|
240 </pre> |
|
241 |
|
242 <p> |
|
243 |
|
244 Creating a static content panel with content: |
|
245 </p> |
|
246 |
|
247 <pre> |
|
248 |
|
249 var panel2 = new ContentPanel("panel2", "Example Panel", "This is some content", false); |
|
250 </pre> |
|
251 |
|
252 <p> |
|
253 |
|
254 Creating a foldable content panel and given it content in a separate step: |
|
255 </p> |
|
256 |
|
257 <pre> |
|
258 |
|
259 var panel3 = new ContentPanel("panel3", "Example Panel"); |
|
260 panel3.setContent("This is some content"); |
|
261 </pre> |
|
262 |
|
263 </div> |
|
264 |
|
265 </div> |
|
266 |
|
267 </div> |
|
268 |
|
269 <div class="nested1" id="GUID-6FD118DA-F9AE-4319-8BA1-573BD47DF3F0"><a name="GUID-6FD118DA-F9AE-4319-8BA1-573BD47DF3F0"><!-- --></a> |
|
270 |
|
271 <h2 class="topictitle2"> |
|
272 getContent()</h2> |
|
273 |
|
274 <div> |
|
275 |
|
276 <div class="section"><h3 class="sectiontitle"> |
|
277 Syntax</h3> |
|
278 |
|
279 |
|
280 <pre> |
|
281 [String] ContentPanel.getContent(void)</pre> |
|
282 |
|
283 </div> |
|
284 |
|
285 <div class="section"><h3 class="sectiontitle"> |
|
286 Description</h3> |
|
287 |
|
288 |
|
289 <p> |
|
290 |
|
291 Retrieves the current content (an XHTML fragment) of the content panel. |
|
292 </p> |
|
293 |
|
294 </div> |
|
295 |
|
296 <div class="section"><h3 class="sectiontitle"> |
|
297 Arguments</h3> |
|
298 |
|
299 |
|
300 <p> |
|
301 |
|
302 This method does not take any arguments. |
|
303 </p> |
|
304 |
|
305 </div> |
|
306 |
|
307 <div class="section"><h3 class="sectiontitle"> |
|
308 Return value</h3> |
|
309 |
|
310 |
|
311 <p> |
|
312 |
|
313 The current content of the content area. |
|
314 </p> |
|
315 |
|
316 </div> |
|
317 |
|
318 </div> |
|
319 |
|
320 </div> |
|
321 |
|
322 <div class="nested1" id="GUID-C0403CCD-76A8-433A-86BB-7497FE84D64D"><a name="GUID-C0403CCD-76A8-433A-86BB-7497FE84D64D"><!-- --></a> |
|
323 |
|
324 <h2 class="topictitle2"> |
|
325 setContent()</h2> |
|
326 |
|
327 <div> |
|
328 |
|
329 <div class="section"><h3 class="sectiontitle"> |
|
330 Syntax</h3> |
|
331 |
|
332 |
|
333 <pre> |
|
334 [void] ContentPanel.setContent(String content)</pre> |
|
335 |
|
336 </div> |
|
337 |
|
338 <div class="section"><h3 class="sectiontitle"> |
|
339 Description</h3> |
|
340 |
|
341 |
|
342 <p> |
|
343 |
|
344 Sets the content for the content panel as a fragment of XHTML. If null is |
|
345 specified as the content then the content area will be empty. |
|
346 </p> |
|
347 |
|
348 </div> |
|
349 |
|
350 <div class="section"><h3 class="sectiontitle"> |
|
351 Arguments</h3> |
|
352 |
|
353 |
|
354 <br /><ul> |
|
355 |
|
356 <li> |
|
357 |
|
358 <p> |
|
359 content</p> |
|
360 |
|
361 |
|
362 |
|
363 <p> |
|
364 |
|
365 A fragment of XHTML to set as content for the content area of the content panel. |
|
366 A null value can be used to make the content area empty. |
|
367 </p> |
|
368 |
|
369 |
|
370 </li> |
|
371 |
|
372 </ul> |
|
373 |
|
374 </div> |
|
375 |
|
376 <div class="section"><h3 class="sectiontitle"> |
|
377 Return value</h3> |
|
378 |
|
379 |
|
380 <p> |
|
381 |
|
382 This method does not return a value. |
|
383 </p> |
|
384 |
|
385 </div> |
|
386 |
|
387 </div> |
|
388 |
|
389 </div> |
|
390 |
|
391 <div class="nested1" id="GUID-A58B8200-29B7-4816-899B-455C7DE362E1"><a name="GUID-A58B8200-29B7-4816-899B-455C7DE362E1"><!-- --></a> |
|
392 |
|
393 <h2 class="topictitle2"> |
|
394 isExpanded()</h2> |
|
395 |
|
396 <div> |
|
397 |
|
398 <div class="section"><h3 class="sectiontitle"> |
|
399 Syntax</h3> |
|
400 |
|
401 |
|
402 <pre> |
|
403 [Boolean] ContentPanel.isExpanded(void)</pre> |
|
404 |
|
405 </div> |
|
406 |
|
407 <div class="section"><h3 class="sectiontitle"> |
|
408 Description</h3> |
|
409 |
|
410 |
|
411 <p> |
|
412 |
|
413 Retrieves the expanded state of the content area. |
|
414 </p> |
|
415 |
|
416 </div> |
|
417 |
|
418 <div class="section"><h3 class="sectiontitle"> |
|
419 Arguments</h3> |
|
420 |
|
421 |
|
422 <p> |
|
423 |
|
424 This method does not take any arguments. |
|
425 </p> |
|
426 |
|
427 </div> |
|
428 |
|
429 <div class="section"><h3 class="sectiontitle"> |
|
430 Return value</h3> |
|
431 |
|
432 |
|
433 <p> |
|
434 |
|
435 The current expanded state of the content area; true if expanded, false if collapsed. |
|
436 </p> |
|
437 |
|
438 </div> |
|
439 |
|
440 </div> |
|
441 |
|
442 </div> |
|
443 |
|
444 <div class="nested1" id="GUID-B2F7C054-CB36-43B6-9A47-91A4F708EE41"><a name="GUID-B2F7C054-CB36-43B6-9A47-91A4F708EE41"><!-- --></a> |
|
445 |
|
446 <h2 class="topictitle2"> |
|
447 setExpanded()</h2> |
|
448 |
|
449 <div> |
|
450 |
|
451 <div class="section"><h3 class="sectiontitle"> |
|
452 Syntax</h3> |
|
453 |
|
454 |
|
455 <pre> |
|
456 [void] ContentPanel.setExpanded(Boolean state)</pre> |
|
457 |
|
458 </div> |
|
459 |
|
460 <div class="section"><h3 class="sectiontitle"> |
|
461 Description</h3> |
|
462 |
|
463 |
|
464 <p> |
|
465 |
|
466 Sets the expanded state of the content area for a foldable content panel. |
|
467 </p> |
|
468 |
|
469 </div> |
|
470 |
|
471 <div class="section"><h3 class="sectiontitle"> |
|
472 Arguments</h3> |
|
473 |
|
474 |
|
475 <br /><ul> |
|
476 |
|
477 <li> |
|
478 |
|
479 <p> |
|
480 state</p> |
|
481 |
|
482 |
|
483 |
|
484 <p> |
|
485 |
|
486 The new expanded state for the content area; true to expand, false to collapse. |
|
487 </p> |
|
488 |
|
489 |
|
490 </li> |
|
491 |
|
492 </ul> |
|
493 |
|
494 </div> |
|
495 |
|
496 <div class="section"><h3 class="sectiontitle"> |
|
497 Return value</h3> |
|
498 |
|
499 |
|
500 <p> |
|
501 |
|
502 This method does not return a value. |
|
503 </p> |
|
504 |
|
505 </div> |
|
506 |
|
507 </div> |
|
508 |
|
509 </div> |
|
510 |
|
511 <div class="nested1" id="GUID-5DB63CF3-3A09-4A4C-ABC6-2BC4EE5EF677"><a name="GUID-5DB63CF3-3A09-4A4C-ABC6-2BC4EE5EF677"><!-- --></a> |
|
512 |
|
513 <h2 class="topictitle2"> |
|
514 contentElement</h2> |
|
515 |
|
516 <div> |
|
517 |
|
518 <div class="section"><h3 class="sectiontitle"> |
|
519 Syntax</h3> |
|
520 |
|
521 |
|
522 <pre> |
|
523 [HTMLElement] ContentPanel.contentElement</pre> |
|
524 |
|
525 </div> |
|
526 |
|
527 <div class="section"><h3 class="sectiontitle"> |
|
528 Description</h3> |
|
529 |
|
530 |
|
531 <p> |
|
532 |
|
533 The contentElement property allows direct access to the content of a content |
|
534 panel. Typically content is set to a content panel using the setContent() method, |
|
535 passing it an XHTML fragment as a string but if DOM methods are preferred then the |
|
536 contentElement can be used as a root HTML element to attach content to, e.g. |
|
537 using the DOM appendChild() method. |
|
538 </p> |
|
539 |
|
540 </div> |
|
541 |
|
542 </div> |
|
543 |
|
544 </div> |
|
545 |
|
546 |
|
547 </body> |
|
548 </html> |
|