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
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>Wt: Wt::WSuggestionPopup Class Reference</title>
<link href="doxygen.css" rel="stylesheet" type="text/css">
</head><body>
<!-- Generated by Doxygen 1.5.6 -->
<div class="navigation" id="top">
<div class="tabs">
<ul>
<li><a href="index.html"><span>Main Page</span></a></li>
<li><a href="pages.html"><span>Related Pages</span></a></li>
<li><a href="modules.html"><span>Modules</span></a></li>
<li><a href="namespaces.html"><span>Namespaces</span></a></li>
<li class="current"><a href="annotated.html"><span>Classes</span></a></li>
</ul>
</div>
<div class="tabs">
<ul>
<li><a href="annotated.html"><span>Class List</span></a></li>
<li><a href="hierarchy.html"><span>Class Hierarchy</span></a></li>
<li><a href="functions.html"><span>Class Members</span></a></li>
</ul>
</div>
<div class="navpath"><a class="el" href="namespaceWt.html">Wt</a>::<a class="el" href="classWt_1_1WSuggestionPopup.html">WSuggestionPopup</a>
</div>
</div>
<div class="contents">
<h1>Wt::WSuggestionPopup Class Reference<br>
<small>
[<a class="el" href="group__modelview.html">Model/view system</a>]</small>
</h1><!-- doxytag: class="Wt::WSuggestionPopup" --><!-- doxytag: inherits="Wt::WCompositeWidget" -->A widget which popups to assist in editing a textarea or lineedit.
<a href="#_details">More...</a>
<p>
<code>#include <Wt/WSuggestionPopup></code>
<p>
<div class="dynheader">
Inheritance diagram for Wt::WSuggestionPopup:</div>
<div class="dynsection">
<p><center><img src="classWt_1_1WSuggestionPopup__inherit__graph.png" border="0" usemap="#Wt_1_1WSuggestionPopup__inherit__map" alt="Inheritance graph"></center>
<map name="Wt_1_1WSuggestionPopup__inherit__map">
<area shape="rect" href="classWt_1_1WCompositeWidget.html" title="A widget that hides the implementation of composite widgets." alt="" coords="5,155,165,181"><area shape="rect" href="classWt_1_1WWidget.html" title="The abstract base class for a user-interface component." alt="" coords="37,80,133,107"><area shape="rect" href="classWt_1_1WObject.html" title="A base class for objects that participate in the signal/slot system." alt="" coords="37,5,133,32"></map>
<center><font size="2">[<a href="graph_legend.html">legend</a>]</font></center></div>
<p>
<a href="classWt_1_1WSuggestionPopup-members.html">List of all members.</a><table border="0" cellpadding="0" cellspacing="0">
<tr><td></td></tr>
<tr><td colspan="2"><br><h2>Public Member Functions</h2></td></tr>
<tr><td class="memItemLeft" nowrap align="right" valign="top"><a class="anchor" name="2ddf4c97fa85c77de4c76cbca24951bb"></a><!-- doxytag: member="Wt::WSuggestionPopup::WSuggestionPopup" ref="2ddf4c97fa85c77de4c76cbca24951bb" args="(const std::string &matcherJS, const std::string &replacerJS, WContainerWidget *parent=0)" -->
</td><td class="memItemRight" valign="bottom"><a class="el" href="classWt_1_1WSuggestionPopup.html#2ddf4c97fa85c77de4c76cbca24951bb">WSuggestionPopup</a> (const std::string &matcherJS, const std::string &replacerJS, <a class="el" href="classWt_1_1WContainerWidget.html">WContainerWidget</a> *parent=0)</td></tr>
<tr><td class="mdescLeft"> </td><td class="mdescRight">Creates a suggestion popup with given matcherJS and replacerJS. <br></td></tr>
<tr><td class="memItemLeft" nowrap align="right" valign="top">void </td><td class="memItemRight" valign="bottom"><a class="el" href="classWt_1_1WSuggestionPopup.html#94b623fc6500be6ae5d9cdf00247edc0">forEdit</a> (<a class="el" href="classWt_1_1WFormWidget.html">WFormWidget</a> *edit)</td></tr>
<tr><td class="mdescLeft"> </td><td class="mdescRight">Lets this suggestion popup assist in editing the given edit field. <a href="#94b623fc6500be6ae5d9cdf00247edc0"></a><br></td></tr>
<tr><td class="memItemLeft" nowrap align="right" valign="top"><a class="anchor" name="0beae292354fa79c2bbe68e9b11c8f01"></a><!-- doxytag: member="Wt::WSuggestionPopup::clearSuggestions" ref="0beae292354fa79c2bbe68e9b11c8f01" args="()" -->
void </td><td class="memItemRight" valign="bottom"><a class="el" href="classWt_1_1WSuggestionPopup.html#0beae292354fa79c2bbe68e9b11c8f01">clearSuggestions</a> ()</td></tr>
<tr><td class="mdescLeft"> </td><td class="mdescRight">Clears the list of suggestions. <br></td></tr>
<tr><td class="memItemLeft" nowrap align="right" valign="top"><a class="anchor" name="ff509867327911ed93445c56231680fb"></a><!-- doxytag: member="Wt::WSuggestionPopup::addSuggestion" ref="ff509867327911ed93445c56231680fb" args="(const WString &suggestionText, const WString &suggestionValue)" -->
void </td><td class="memItemRight" valign="bottom"><a class="el" href="classWt_1_1WSuggestionPopup.html#ff509867327911ed93445c56231680fb">addSuggestion</a> (const <a class="el" href="classWt_1_1WString.html">WString</a> &suggestionText, const <a class="el" href="classWt_1_1WString.html">WString</a> &suggestionValue)</td></tr>
<tr><td class="mdescLeft"> </td><td class="mdescRight">Adds a new suggestion. <br></td></tr>
<tr><td class="memItemLeft" nowrap align="right" valign="top">void </td><td class="memItemRight" valign="bottom"><a class="el" href="classWt_1_1WSuggestionPopup.html#4b4e3dcc77433195c5439ab86ac5d95c">setModel</a> (<a class="el" href="classWt_1_1WAbstractItemModel.html">WAbstractItemModel</a> *model)</td></tr>
<tr><td class="mdescLeft"> </td><td class="mdescRight">Sets the model to be used for the suggestions. <a href="#4b4e3dcc77433195c5439ab86ac5d95c"></a><br></td></tr>
<tr><td class="memItemLeft" nowrap align="right" valign="top">void </td><td class="memItemRight" valign="bottom"><a class="el" href="classWt_1_1WSuggestionPopup.html#6616d230bad6511bc40d3bf2c1e4ec84">setModelColumn</a> (int index)</td></tr>
<tr><td class="mdescLeft"> </td><td class="mdescRight">Sets the column in the model to be used for the items. <a href="#6616d230bad6511bc40d3bf2c1e4ec84"></a><br></td></tr>
<tr><td class="memItemLeft" nowrap align="right" valign="top"><a class="el" href="classWt_1_1WAbstractItemModel.html">WAbstractItemModel</a> * </td><td class="memItemRight" valign="bottom"><a class="el" href="classWt_1_1WSuggestionPopup.html#7fa2fe71e41607f45feffa8f14697db4">model</a> () const </td></tr>
<tr><td class="mdescLeft"> </td><td class="mdescRight">Returns the data model. <a href="#7fa2fe71e41607f45feffa8f14697db4"></a><br></td></tr>
<tr><td colspan="2"><br><h2>Static Public Member Functions</h2></td></tr>
<tr><td class="memItemLeft" nowrap align="right" valign="top"><a class="anchor" name="415162037c68f38e4141264022b02489"></a><!-- doxytag: member="Wt::WSuggestionPopup::generateMatcherJS" ref="415162037c68f38e4141264022b02489" args="(const Options &options)" -->
static std::string </td><td class="memItemRight" valign="bottom"><a class="el" href="classWt_1_1WSuggestionPopup.html#415162037c68f38e4141264022b02489">generateMatcherJS</a> (const <a class="el" href="structWt_1_1WSuggestionPopup_1_1Options.html">Options</a> &options)</td></tr>
<tr><td class="mdescLeft"> </td><td class="mdescRight">Creates a matcher JavaScript function based on some generic options. <br></td></tr>
<tr><td class="memItemLeft" nowrap align="right" valign="top"><a class="anchor" name="58e9fd0c214cdc80170c42933af206aa"></a><!-- doxytag: member="Wt::WSuggestionPopup::generateReplacerJS" ref="58e9fd0c214cdc80170c42933af206aa" args="(const Options &options)" -->
static std::string </td><td class="memItemRight" valign="bottom"><a class="el" href="classWt_1_1WSuggestionPopup.html#58e9fd0c214cdc80170c42933af206aa">generateReplacerJS</a> (const <a class="el" href="structWt_1_1WSuggestionPopup_1_1Options.html">Options</a> &options)</td></tr>
<tr><td class="mdescLeft"> </td><td class="mdescRight">Creates a replacer JavaScript function based on some generic options. <br></td></tr>
<tr><td colspan="2"><br><h2>Classes</h2></td></tr>
<tr><td class="memItemLeft" nowrap align="right" valign="top">struct </td><td class="memItemRight" valign="bottom"><a class="el" href="structWt_1_1WSuggestionPopup_1_1Options.html">Options</a></td></tr>
<tr><td class="mdescLeft"> </td><td class="mdescRight">A configuration object to generate a matcher and replacer JavaScript function. <a href="structWt_1_1WSuggestionPopup_1_1Options.html#_details">More...</a><br></td></tr>
</table>
<hr><a name="_details"></a><h2>Detailed Description</h2>
A widget which popups to assist in editing a textarea or lineedit.
<p>
This widget may be associated with one or more <a class="el" href="classWt_1_1WFormWidget.html">WFormWidgets</a> (typically a <a class="el" href="classWt_1_1WLineEdit.html" title="A widget that provides a single line edit.">WLineEdit</a> or a <a class="el" href="classWt_1_1WTextArea.html" title="A widget that provides a multi-line edit.">WTextArea</a>).<p>
When the user starts editing one of the associated widgets, this popup will show just below it, offering a list of suggestions that match in some way with the current edit. The mechanism for filtering the total list of suggestions must be specified through a separate JavaScript function. This function may also highlight part(s) of the suggestions to provide feed-back on how they match.<p>
WSuggestionPopup is an MVC view class, using a simple <a class="el" href="classWt_1_1WStringListModel.html" title="An model that manages a list of strings.">WStringListModel</a> by default. You can set a custom model using <a class="el" href="classWt_1_1WSuggestionPopup.html#4b4e3dcc77433195c5439ab86ac5d95c" title="Sets the model to be used for the suggestions.">setModel()</a>. The member methods <a class="el" href="classWt_1_1WSuggestionPopup.html#0beae292354fa79c2bbe68e9b11c8f01" title="Clears the list of suggestions.">clearSuggestions()</a> and <a class="el" href="classWt_1_1WSuggestionPopup.html#ff509867327911ed93445c56231680fb" title="Adds a new suggestion.">addSuggestion()</a> manipulate the model.<p>
The class is initialized with two JavaScript functions, one for filtering the suggestions, and one for editing the value of the textarea when a suggestion is selected. Two static methods, <a class="el" href="classWt_1_1WSuggestionPopup.html#415162037c68f38e4141264022b02489" title="Creates a matcher JavaScript function based on some generic options.">generateMatcherJS()</a> and <a class="el" href="classWt_1_1WSuggestionPopup.html#58e9fd0c214cdc80170c42933af206aa" title="Creates a replacer JavaScript function based on some generic options.">generateReplacerJS()</a> may be used to generate these functions based on a set of options (in the <a class="el" href="structWt_1_1WSuggestionPopup_1_1Options.html" title="A configuration object to generate a matcher and replacer JavaScript function.">Options</a> struct). If the flexibility provided in this way is not sufficient, and writing JavaScript does not give you an instant heart-attack, you may provide your own implementations.<p>
The matcherJS function block must have the following JavaScript signature:<p>
<div class="fragment"><pre class="fragment"> function (editElement) {
<span class="comment">// fetch the location of cursor and current text in the editElement.</span>
<span class="comment">// return a function that matches a given suggestion with the current value of the editElement.</span>
<span class="keywordflow">return</span> function(suggestion) {
<span class="comment">// 1) remove markup from the suggestion</span>
<span class="comment">// 2) check suggestion if it matches</span>
<span class="comment">// 3) add markup to suggestion</span>
<span class="keywordflow">return</span> { match : ..., <span class="comment">// does the suggestion match ? (boolean)</span>
suggestion : ... <span class="comment">// modified suggestion markup</span>
};
}
}
</pre></div><p>
The replacerJS function block that edits the value has the following JavaScript signature.<p>
<div class="fragment"><pre class="fragment"> function (editElement, suggestionText, suggestionValue) {
<span class="comment">// editElement is the form element which must be edited.</span>
<span class="comment">// suggestionText is the displayed text for the matched suggestion.</span>
<span class="comment">// suggestionValue is the stored value for the matched suggestion.</span>
<span class="comment">// computed modifiedEditValue and modifiedPos ...</span>
editElement.value = modifiedEditValue;
editElement.selectionStart = edit.selectionEnd = modifiedPos;
}
</pre></div><p>
To style the suggestions, you should style the <span> element inside this widget, and the <span>."sel" element to style the current selection.<p>
Usage example:<p>
<div class="fragment"><pre class="fragment"> <span class="comment">// options for email address suggestions</span>
<a class="code" href="structWt_1_1WSuggestionPopup_1_1Options.html" title="A configuration object to generate a matcher and replacer JavaScript function.">Wt::WSuggestionPopup::Options</a> contactOptions
= { <span class="stringliteral">"<b>"</span>, <span class="comment">// highlightBeginTag</span>
<span class="stringliteral">"</b>"</span>, <span class="comment">// highlightEndTag</span>
<span class="charliteral">','</span>, <span class="comment">// listSeparator (for multiple addresses)</span>
<span class="stringliteral">" \\n"</span>, <span class="comment">// whitespace</span>
<span class="stringliteral">"-., \"@\\n;"</span>, <span class="comment">// wordSeparators (within an address)</span>
<span class="stringliteral">", "</span> <span class="comment">// appendReplacedText (prepare next email address)</span>
};
<a class="code" href="classWt_1_1WSuggestionPopup.html" title="A widget which popups to assist in editing a textarea or lineedit.">Wt::WSuggestionPopup</a> *popup
= <span class="keyword">new</span> <a class="code" href="classWt_1_1WSuggestionPopup.html" title="A widget which popups to assist in editing a textarea or lineedit.">Wt::WSuggestionPopup</a>(<a class="code" href="classWt_1_1WSuggestionPopup.html#415162037c68f38e4141264022b02489" title="Creates a matcher JavaScript function based on some generic options.">Wt::WSuggestionPopup::generateMatcherJS</a>(contactOptions),
<a class="code" href="classWt_1_1WSuggestionPopup.html#58e9fd0c214cdc80170c42933af206aa" title="Creates a replacer JavaScript function based on some generic options.">Wt::WSuggestionPopup::generateReplacerJS</a>(contactOptions),
<span class="keyword">this</span>);
<a class="code" href="classWt_1_1WTextArea.html" title="A widget that provides a multi-line edit.">Wt::WTextArea</a> *textEdit = <span class="keyword">new</span> <a class="code" href="classWt_1_1WTextArea.html" title="A widget that provides a multi-line edit.">Wt::WTextArea</a>(<span class="keyword">this</span>);
popup-><a class="code" href="classWt_1_1WSuggestionPopup.html#94b623fc6500be6ae5d9cdf00247edc0" title="Lets this suggestion popup assist in editing the given edit field.">forEdit</a>(textEdit);
<span class="comment">// load popup data</span>
<span class="keywordflow">for</span> (<span class="keywordtype">unsigned</span> i = 0; i < contacts.size(); ++i)
popup-><a class="code" href="classWt_1_1WSuggestionPopup.html#ff509867327911ed93445c56231680fb" title="Adds a new suggestion.">addSuggestion</a>(contacts[i].formatted(), contacts[i].formatted());
</pre></div><p>
A screenshot of this example: <table border="0" align="center" cellspacing="3" cellpadding="3">
<tr>
<td><div align="center">
<img src="WSuggestionPopup-default-1.png" alt="WSuggestionPopup-default-1.png">
<p><strong>An example WSuggestionPopup (default)</strong></p></div>
</td><td><div align="center">
<img src="WSuggestionPopup-polished-1.png" alt="WSuggestionPopup-polished-1.png">
<p><strong>An example WSuggestionPopup (polished)</strong></p></div>
</td></tr>
</table>
<p>
<h3>CSS</h3>
<p>
The suggestion popup is styled by the current CSS theme. The look can be overridden using the <code>Wt-suggest</code> CSS class and the following selectors:<p>
<div class="fragment"><pre class="fragment">
.Wt-suggest span : A suggestion element
.Wt-suggest .sel : A selected suggestion element
</pre></div><p>
<dl class="note" compact><dt><b>Note:</b></dt><dd>This widget requires JavaScript support. </dd></dl>
<hr><h2>Member Function Documentation</h2>
<a class="anchor" name="94b623fc6500be6ae5d9cdf00247edc0"></a><!-- doxytag: member="Wt::WSuggestionPopup::forEdit" ref="94b623fc6500be6ae5d9cdf00247edc0" args="(WFormWidget *edit)" -->
<div class="memitem">
<div class="memproto">
<table class="memname">
<tr>
<td class="memname">void Wt::WSuggestionPopup::forEdit </td>
<td>(</td>
<td class="paramtype"><a class="el" href="classWt_1_1WFormWidget.html">WFormWidget</a> * </td>
<td class="paramname"> <em>edit</em> </td>
<td> ) </td>
<td></td>
</tr>
</table>
</div>
<div class="memdoc">
<p>
Lets this suggestion popup assist in editing the given edit field.
<p>
A single suggestion popup may assist in several edits by repeated calls of this method.
</div>
</div><p>
<a class="anchor" name="4b4e3dcc77433195c5439ab86ac5d95c"></a><!-- doxytag: member="Wt::WSuggestionPopup::setModel" ref="4b4e3dcc77433195c5439ab86ac5d95c" args="(WAbstractItemModel *model)" -->
<div class="memitem">
<div class="memproto">
<table class="memname">
<tr>
<td class="memname">void Wt::WSuggestionPopup::setModel </td>
<td>(</td>
<td class="paramtype"><a class="el" href="classWt_1_1WAbstractItemModel.html">WAbstractItemModel</a> * </td>
<td class="paramname"> <em>model</em> </td>
<td> ) </td>
<td></td>
</tr>
</table>
</div>
<div class="memdoc">
<p>
Sets the model to be used for the suggestions.
<p>
The <code>model</code> may not be <code>0</code>, and ownership of the model is not transferred.<p>
The default value is a <a class="el" href="classWt_1_1WStringListModel.html" title="An model that manages a list of strings.">WStringListModel</a> that is owned by the suggestion popup.<p>
The <a class="el" href="group__modelview.html#gg0ae864e12320f9f89172735e075ed0685ed17aded8a0e3b712698cf85a218f1f" title="Role for textual representation.">Wt::DisplayRole</a> is used for the suggestion text. The <a class="el" href="group__modelview.html#gg0ae864e12320f9f89172735e075ed0689b7eae9fc07ea4fd8afe7bc97954162c" title="First role reserved for user purposes.">Wt::UserRole</a> is used for the suggestion value, unless empty, in which case the suggestion text is used as value.<p>
Note that since the default WStringListModel does not support UserRole data, you will want to change it to a more general model (e.g. <a class="el" href="classWt_1_1WStandardItemModel.html" title="A standard data model, which stores its data in memory.">WStandardItemModel</a>) if you want suggestion values that are different from display values.<p>
<dl class="see" compact><dt><b>See also:</b></dt><dd><a class="el" href="classWt_1_1WSuggestionPopup.html#6616d230bad6511bc40d3bf2c1e4ec84" title="Sets the column in the model to be used for the items.">setModelColumn(int)</a> </dd></dl>
</div>
</div><p>
<a class="anchor" name="6616d230bad6511bc40d3bf2c1e4ec84"></a><!-- doxytag: member="Wt::WSuggestionPopup::setModelColumn" ref="6616d230bad6511bc40d3bf2c1e4ec84" args="(int index)" -->
<div class="memitem">
<div class="memproto">
<table class="memname">
<tr>
<td class="memname">void Wt::WSuggestionPopup::setModelColumn </td>
<td>(</td>
<td class="paramtype">int </td>
<td class="paramname"> <em>index</em> </td>
<td> ) </td>
<td></td>
</tr>
</table>
</div>
<div class="memdoc">
<p>
Sets the column in the model to be used for the items.
<p>
The column <code>index</code> in the model will be used to retrieve data.<p>
The default value is 0.<p>
<dl class="see" compact><dt><b>See also:</b></dt><dd><a class="el" href="classWt_1_1WSuggestionPopup.html#4b4e3dcc77433195c5439ab86ac5d95c" title="Sets the model to be used for the suggestions.">setModel()</a> </dd></dl>
</div>
</div><p>
<a class="anchor" name="7fa2fe71e41607f45feffa8f14697db4"></a><!-- doxytag: member="Wt::WSuggestionPopup::model" ref="7fa2fe71e41607f45feffa8f14697db4" args="() const " -->
<div class="memitem">
<div class="memproto">
<table class="memname">
<tr>
<td class="memname"><a class="el" href="classWt_1_1WAbstractItemModel.html">WAbstractItemModel</a>* Wt::WSuggestionPopup::model </td>
<td>(</td>
<td class="paramname"> </td>
<td> ) </td>
<td> const<code> [inline]</code></td>
</tr>
</table>
</div>
<div class="memdoc">
<p>
Returns the data model.
<p>
<dl class="see" compact><dt><b>See also:</b></dt><dd><a class="el" href="classWt_1_1WSuggestionPopup.html#4b4e3dcc77433195c5439ab86ac5d95c" title="Sets the model to be used for the suggestions.">setModel()</a> </dd></dl>
</div>
</div><p>
</div>
<hr size="1"><address style="align: right;"><small>
Generated on Fri Mar 26 17:12:07 2010 for <a href="http://www.webtoolkit.eu/wt/">Wt</a> by <a href="http://www.doxygen.org/index.html"><img src="doxygen.png" alt="doxygen" align="middle" border="0"></a> 1.5.6</small></address>
</body>
</html>
|
