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="Showing content in a view" /> |
|
9 <meta scheme="URI" name="DC.Relation" content="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html" /> |
|
10 <meta content="XHTML" name="DC.Format" /> |
|
11 <meta content="GUID-7020D9EA-747D-42F3-B47C-16AD1F45DB82" name="DC.Identifier" /> |
|
12 <meta content="en" name="DC.Language" /> |
|
13 <link href="commonltr.css" type="text/css" rel="stylesheet" /> |
|
14 <title> |
|
15 Showing content in a view</title> |
|
16 </head> |
|
17 <body id="GUID-7020D9EA-747D-42F3-B47C-16AD1F45DB82"><a name="GUID-7020D9EA-747D-42F3-B47C-16AD1F45DB82"><!-- --></a> |
|
18 |
|
19 |
|
20 |
|
21 <h1 class="topictitle1"> |
|
22 Showing content in a view</h1> |
|
23 |
|
24 <div> |
|
25 |
|
26 <p> |
|
27 |
|
28 The WRTKit has two controls for showing content inside a view. The |
|
29 first of the controls is called Label and is useful for simple and |
|
30 short information to be displayed, coupled with the control caption |
|
31 that describes the information. |
|
32 </p> |
|
33 |
|
34 <div class="fignone" id="GUID-7020D9EA-747D-42F3-B47C-16AD1F45DB82__GUID-EB15E9F3-204F-4772-B820-F3375D4C040A"><a name="GUID-7020D9EA-747D-42F3-B47C-16AD1F45DB82__GUID-EB15E9F3-204F-4772-B820-F3375D4C040A"><!-- --></a><span class="figcap">Figure 1. |
|
35 Label control</span> |
|
36 |
|
37 |
|
38 <br /><img src="Label_Control_Screenshot_1.png" /><br /> |
|
39 </div> |
|
40 |
|
41 <p> |
|
42 |
|
43 The second control is called ContentPanel and is more sophisticated |
|
44 than the Label control. ContentPanel controls can be created as |
|
45 foldable, which means that they can expand and collapse their |
|
46 content areas. Users can toggle the expanded and collapsed state by |
|
47 clicking on the caption area of the ContentPanel. |
|
48 </p> |
|
49 |
|
50 <div class="fignone" id="GUID-7020D9EA-747D-42F3-B47C-16AD1F45DB82__GUID-5EC096E5-EADF-4BD6-9D6A-1B331EAA2E66"><a name="GUID-7020D9EA-747D-42F3-B47C-16AD1F45DB82__GUID-5EC096E5-EADF-4BD6-9D6A-1B331EAA2E66"><!-- --></a><span class="figcap">Figure 2. |
|
51 Foldable content panel</span> |
|
52 |
|
53 |
|
54 <br /><img src="RSS_Reader_Main_Screenshot_2.png" /><br /> |
|
55 </div> |
|
56 |
|
57 <p> |
|
58 |
|
59 The code below creates a Label control and a foldable ContentPanel |
|
60 control and adds them to a view. The code assumes that a view has |
|
61 already been created and that a variable called exampleView refers |
|
62 to it. |
|
63 </p> |
|
64 |
|
65 <pre> |
|
66 |
|
67 // create label |
|
68 var nameLabel = new Label("label1", "Name"); |
|
69 exampleView.addControl(nameLabel); |
|
70 |
|
71 // create foldable content panel |
|
72 var infoPanel = new ContentPanel("info1", "Information", null, true); |
|
73 exampleView.addControl(infoPanel); |
|
74 </pre> |
|
75 |
|
76 <p> |
|
77 |
|
78 The first and second arguments are the same in the constructors for |
|
79 both controls. The first is a unique identifier for the control and |
|
80 the second is the control caption. The third argument is also the |
|
81 same but is omitted for the label and null for the content panel |
|
82 since in both cases we don't specify any content at this point. The |
|
83 fourth argument for the content panel is a boolean that specifies |
|
84 whether the control should be foldable or not. |
|
85 </p> |
|
86 |
|
87 <p> |
|
88 |
|
89 The value for a label can be set and retrieved using the getText() and |
|
90 setText() methods. For content panels the content in the content area |
|
91 can be set and retrieved using getContent() and setContent(). The |
|
92 content is defined as an XHTML fragment and can contain arbitrarily |
|
93 complex XHTML, including images or even JavaScript. |
|
94 </p> |
|
95 |
|
96 <pre> |
|
97 |
|
98 // set the text for the label |
|
99 nameLabel.setText("John Smith"); |
|
100 |
|
101 // set content for the content panel |
|
102 infoPanel.setContent("<b>This is bolded!</b><br/>This is plain text on the second line."); |
|
103 </pre> |
|
104 |
|
105 <p> |
|
106 |
|
107 Foldable ContentPanel controls can be programmatically collapsed or |
|
108 expanded using the setExpanded() method. The expanded state can be |
|
109 retrieved using the isExpanded() method. |
|
110 </p> |
|
111 |
|
112 <pre> |
|
113 |
|
114 // retrieve the expanded state |
|
115 var expanded = infoPanel.isExpanded(); |
|
116 |
|
117 // collapse the content panel |
|
118 infoPanel.setExpanded(false); |
|
119 </pre> |
|
120 |
|
121 </div> |
|
122 |
|
123 <div> |
|
124 <div class="familylinks"> |
|
125 <div class="parentlink"><strong>Parent topic:</strong> <a href="WRTKit_Common_WRTKit_tasks-GUID-24870895-4449-4307-9a54-7c90f7b3905e.html">Common WRTKit tasks</a></div> |
|
126 </div> |
|
127 </div> |
|
128 |
|
129 </body> |
|
130 </html> |
|