org.symbian.tools.wrttools.doc.WRTKit/html/WRTKit_ContentPanel_Class-GUID-bff5ac77-a652-480a-be3e-e3ca6283a45b.html
author newuser
Mon, 19 Apr 2010 15:00:57 -0700
changeset 306 42f09aa2b24a
parent 230 7848c135d915
permissions -rw-r--r--
Fixed plist parsing problem.

<?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>