org.symbian.tools.wrttools.doc.WRTKit/html/WRTKit_ContentPanel_Class-GUID-bff5ac77-a652-480a-be3e-e3ca6283a45b.html
<?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">
<html lang="en" xml:lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="copyright" content="(C) Copyright 2005" />
<meta name="DC.rights.owner" content="(C) Copyright 2005" />
<meta content="concept" name="DC.Type" />
<meta name="DC.Title" content="WRTKit ContentPanel Class" />
<meta scheme="URI" name="DC.Relation" content="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html" />
<meta content="XHTML" name="DC.Format" />
<meta content="GUID-BFF5AC77-A652-480A-BE3E-E3CA6283A45B" name="DC.Identifier" />
<meta content="en" name="DC.Language" />
<link href="commonltr.css" type="text/css" rel="stylesheet" />
<title>
WRTKit ContentPanel Class</title>
</head>
<body id="GUID-BFF5AC77-A652-480A-BE3E-E3CA6283A45B"><a name="GUID-BFF5AC77-A652-480A-BE3E-E3CA6283A45B"><!-- --></a>
<h1 class="topictitle1">
WRTKit ContentPanel Class</h1>
<div>
<div class="section"><h2 class="sectiontitle">
Description</h2>
<p>
The ContentPanel class implements a control that is used to display arbitrary
XHTML content. The content panel can either be foldable (allows users to
toggle it open and close) or static. Like all controls the content panel has
an optional caption. But unlike for other controls, this caption area is an
interactive area that can be used to expand and collapse a foldable content
panel. Thus, foldable content panel should always have captions.
</p>
<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.
Foldable content panel</span>
<br /><img src="RSS_Reader_Main_Screenshot_2.png" /><br />
</div>
</div>
<div class="section"><h2 class="sectiontitle">
Inherits from</h2>
<p>
<a href="WRTKit_Control_Class-GUID-6ddb8154-3fed-40fc-b282-85e6d3ad494f.html">
Control</a>
</p>
</div>
<div class="section"><h2 class="sectiontitle">
Events</h2>
<br /><ul>
<li>
<p>
ExpandedStateChanged</p>
<p>
This event is fired when the expanded state of the content area has changed.
</p>
</li>
</ul>
</div>
</div>
<div>
<div class="familylinks">
<div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_API_Reference-GUID-00e47c27-0a1a-443f-ae85-cf3381635170.html">WRTKit API Reference</a></div>
</div>
</div>
<div class="nested1" id="GUID-72B0BFAD-F25B-474E-804E-FF9B381E3319"><a name="GUID-72B0BFAD-F25B-474E-804E-FF9B381E3319"><!-- --></a>
<h2 class="topictitle2">
Constructor</h2>
<div>
<div class="section"><h3 class="sectiontitle">
Syntax</h3>
<pre>
[ContentPanel] new ContentPanel(String id, String caption, String content, Boolean foldable, Boolean expanded)</pre>
</div>
<div class="section"><h3 class="sectiontitle">
Description</h3>
<p>
Creates a new instance of the ContentPanel class.
</p>
</div>
<div class="section"><h3 class="sectiontitle">
Arguments</h3>
<br /><ul>
<li>
<p>
id</p>
<p>
Unique identifier for the control. Can be retrieved using the id property defined
in the UIElement class that this control inherits from. Useful for example to
identify the source of an event in event callback functions or to apply a CSS
rule to only this particular control. The identifier can be null, in which case
no id will be set for the control.
</p>
</li>
<li>
<p>
caption</p>
<p>
The caption text for the control. A null caption can be used to hide the
caption area. This is not recommended if the content panel is folding since
users cannot expand or collapse a foldable content panel without the caption
area being present.
</p>
</li>
<li>
<p>
content</p>
<p>
The content for the panel. If the argument is omitted or null then the content
area will be empty.
</p>
</li>
<li>
<p>
foldable</p>
<p>
Specifies the foldability of the content panel. Specify true to make the content
panel foldable and false to make it static. If the argument is omitted or null
then the content panel will default to being static.
</p>
</li>
<li>
<p>
expanded</p>
<p>
Specifies the expanded state of a foldable content panel. Specify true to make
the content panel expanded and false to make it collapse. If the argument is
omitted or null then the content panel will default to being expanded.
</p>
</li>
</ul>
</div>
<div class="section"><h3 class="sectiontitle">
Return value</h3>
<p>
A new instance of the ContentPanel class.
</p>
</div>
<div class="section"><h3 class="sectiontitle">
Example code</h3>
<p>
Creating a foldable content panel with content:
</p>
<pre>
var panel1 = new ContentPanel("panel1", "Example Panel", "This is some content");
</pre>
<p>
Creating a static content panel with content:
</p>
<pre>
var panel2 = new ContentPanel("panel2", "Example Panel", "This is some content", false);
</pre>
<p>
Creating a foldable content panel and given it content in a separate step:
</p>
<pre>
var panel3 = new ContentPanel("panel3", "Example Panel");
panel3.setContent("This is some content");
</pre>
</div>
</div>
</div>
<div class="nested1" id="GUID-6FD118DA-F9AE-4319-8BA1-573BD47DF3F0"><a name="GUID-6FD118DA-F9AE-4319-8BA1-573BD47DF3F0"><!-- --></a>
<h2 class="topictitle2">
getContent()</h2>
<div>
<div class="section"><h3 class="sectiontitle">
Syntax</h3>
<pre>
[String] ContentPanel.getContent(void)</pre>
</div>
<div class="section"><h3 class="sectiontitle">
Description</h3>
<p>
Retrieves the current content (an XHTML fragment) of the content panel.
</p>
</div>
<div class="section"><h3 class="sectiontitle">
Arguments</h3>
<p>
This method does not take any arguments.
</p>
</div>
<div class="section"><h3 class="sectiontitle">
Return value</h3>
<p>
The current content of the content area.
</p>
</div>
</div>
</div>
<div class="nested1" id="GUID-C0403CCD-76A8-433A-86BB-7497FE84D64D"><a name="GUID-C0403CCD-76A8-433A-86BB-7497FE84D64D"><!-- --></a>
<h2 class="topictitle2">
setContent()</h2>
<div>
<div class="section"><h3 class="sectiontitle">
Syntax</h3>
<pre>
[void] ContentPanel.setContent(String content)</pre>
</div>
<div class="section"><h3 class="sectiontitle">
Description</h3>
<p>
Sets the content for the content panel as a fragment of XHTML. If null is
specified as the content then the content area will be empty.
</p>
</div>
<div class="section"><h3 class="sectiontitle">
Arguments</h3>
<br /><ul>
<li>
<p>
content</p>
<p>
A fragment of XHTML to set as content for the content area of the content panel.
A null value can be used to make the content area empty.
</p>
</li>
</ul>
</div>
<div class="section"><h3 class="sectiontitle">
Return value</h3>
<p>
This method does not return a value.
</p>
</div>
</div>
</div>
<div class="nested1" id="GUID-A58B8200-29B7-4816-899B-455C7DE362E1"><a name="GUID-A58B8200-29B7-4816-899B-455C7DE362E1"><!-- --></a>
<h2 class="topictitle2">
isExpanded()</h2>
<div>
<div class="section"><h3 class="sectiontitle">
Syntax</h3>
<pre>
[Boolean] ContentPanel.isExpanded(void)</pre>
</div>
<div class="section"><h3 class="sectiontitle">
Description</h3>
<p>
Retrieves the expanded state of the content area.
</p>
</div>
<div class="section"><h3 class="sectiontitle">
Arguments</h3>
<p>
This method does not take any arguments.
</p>
</div>
<div class="section"><h3 class="sectiontitle">
Return value</h3>
<p>
The current expanded state of the content area; true if expanded, false if collapsed.
</p>
</div>
</div>
</div>
<div class="nested1" id="GUID-B2F7C054-CB36-43B6-9A47-91A4F708EE41"><a name="GUID-B2F7C054-CB36-43B6-9A47-91A4F708EE41"><!-- --></a>
<h2 class="topictitle2">
setExpanded()</h2>
<div>
<div class="section"><h3 class="sectiontitle">
Syntax</h3>
<pre>
[void] ContentPanel.setExpanded(Boolean state)</pre>
</div>
<div class="section"><h3 class="sectiontitle">
Description</h3>
<p>
Sets the expanded state of the content area for a foldable content panel.
</p>
</div>
<div class="section"><h3 class="sectiontitle">
Arguments</h3>
<br /><ul>
<li>
<p>
state</p>
<p>
The new expanded state for the content area; true to expand, false to collapse.
</p>
</li>
</ul>
</div>
<div class="section"><h3 class="sectiontitle">
Return value</h3>
<p>
This method does not return a value.
</p>
</div>
</div>
</div>
<div class="nested1" id="GUID-5DB63CF3-3A09-4A4C-ABC6-2BC4EE5EF677"><a name="GUID-5DB63CF3-3A09-4A4C-ABC6-2BC4EE5EF677"><!-- --></a>
<h2 class="topictitle2">
contentElement</h2>
<div>
<div class="section"><h3 class="sectiontitle">
Syntax</h3>
<pre>
[HTMLElement] ContentPanel.contentElement</pre>
</div>
<div class="section"><h3 class="sectiontitle">
Description</h3>
<p>
The contentElement property allows direct access to the content of a content
panel. Typically content is set to a content panel using the setContent() method,
passing it an XHTML fragment as a string but if DOM methods are preferred then the
contentElement can be used as a root HTML element to attach content to, e.g.
using the DOM appendChild() method.
</p>
</div>
</div>
</div>
</body>
</html>