|
1 /**************************************************************************** |
|
2 ** |
|
3 ** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). |
|
4 ** All rights reserved. |
|
5 ** Contact: Nokia Corporation (qt-info@nokia.com) |
|
6 ** |
|
7 ** This file is part of the documentation of the Qt Toolkit. |
|
8 ** |
|
9 ** $QT_BEGIN_LICENSE:LGPL$ |
|
10 ** No Commercial Usage |
|
11 ** This file contains pre-release code and may not be distributed. |
|
12 ** You may use this file in accordance with the terms and conditions |
|
13 ** contained in the Technology Preview License Agreement accompanying |
|
14 ** this package. |
|
15 ** |
|
16 ** GNU Lesser General Public License Usage |
|
17 ** Alternatively, this file may be used under the terms of the GNU Lesser |
|
18 ** General Public License version 2.1 as published by the Free Software |
|
19 ** Foundation and appearing in the file LICENSE.LGPL included in the |
|
20 ** packaging of this file. Please review the following information to |
|
21 ** ensure the GNU Lesser General Public License version 2.1 requirements |
|
22 ** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. |
|
23 ** |
|
24 ** In addition, as a special exception, Nokia gives you certain additional |
|
25 ** rights. These rights are described in the Nokia Qt LGPL Exception |
|
26 ** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. |
|
27 ** |
|
28 ** If you have questions regarding the use of this file, please contact |
|
29 ** Nokia at qt-info@nokia.com. |
|
30 ** |
|
31 ** |
|
32 ** |
|
33 ** |
|
34 ** |
|
35 ** |
|
36 ** |
|
37 ** |
|
38 ** $QT_END_LICENSE$ |
|
39 ** |
|
40 ****************************************************************************/ |
|
41 |
|
42 /*! |
|
43 \example widgets/charactermap |
|
44 \title Character Map Example |
|
45 |
|
46 The Character Map example shows how to create a custom widget that can |
|
47 both display its own content and respond to user input. |
|
48 |
|
49 The example displays an array of characters which the user can click on |
|
50 to enter text in a line edit. The contents of the line edit can then be |
|
51 copied into the clipboard, and pasted into other applications. The |
|
52 purpose behind this sort of tool is to allow users to enter characters |
|
53 that may be unavailable or difficult to locate on their keyboards. |
|
54 |
|
55 \image charactermap-example.png Screenshot of the Character Map example |
|
56 |
|
57 The example consists of the following classes: |
|
58 |
|
59 \list |
|
60 \i \c CharacterWidget displays the available characters in the current |
|
61 font and style. |
|
62 \i \c MainWindow provides a standard main window that contains font and |
|
63 style information, a view onto the characters, a line edit, and a push |
|
64 button for submitting text to the clipboard. |
|
65 \endlist |
|
66 |
|
67 \section1 CharacterWidget Class Definition |
|
68 |
|
69 The \c CharacterWidget class is used to display an array of characters in |
|
70 a user-specified font and style. For flexibility, we subclass QWidget and |
|
71 reimplement only the functions that we need to provide basic rendering |
|
72 and interaction features. |
|
73 |
|
74 The class definition looks like this: |
|
75 |
|
76 \snippet examples/widgets/charactermap/characterwidget.h 0 |
|
77 |
|
78 The widget does not contain any other widgets, so it must provide its own |
|
79 size hint to allow its contents to be displayed correctly. |
|
80 We reimplement \l{QWidget::paintEvent()} to draw custom content. We also |
|
81 reimplement \l{QWidget::mousePressEvent()} to allow the user to interact |
|
82 with the widget. |
|
83 |
|
84 The updateFont() and updateStyle() slots are used to update the font and |
|
85 style of the characters in the widget whenever the user changes the |
|
86 settings in the application. |
|
87 The class defines the characterSelected() signal so that other parts |
|
88 of the application are informed whenever the user selects a character in |
|
89 the widget. |
|
90 As a courtesy, the widget provides a tooltip that shows the current |
|
91 character value. We reimplement the \l{QWidget::mouseMoveEvent()} event |
|
92 handler and define showToolTip() to enable this feature. |
|
93 |
|
94 The \c columns, \c displayFont and \c currentKey private data members |
|
95 are used to record the number of columns to be shown, the current font, |
|
96 and the currently highlighted character in the widget. |
|
97 |
|
98 \section1 CharacterWidget Class Implementation |
|
99 |
|
100 Since the widget is to be used as a simple canvas, the constructor just |
|
101 calls the base class constructor and defines some default values for |
|
102 private data members. |
|
103 |
|
104 \snippet examples/widgets/charactermap/characterwidget.cpp 0 |
|
105 |
|
106 We initialize \c currentKey with a value of -1 to indicate |
|
107 that no character is initially selected. We enable mouse tracking to |
|
108 allow us to follow the movement of the cursor across the widget. |
|
109 |
|
110 The class provides two functions to allow the font and style to be set up. |
|
111 Each of these modify the widget's display font and call update(): |
|
112 |
|
113 \snippet examples/widgets/charactermap/characterwidget.cpp 1 |
|
114 \codeline |
|
115 \snippet examples/widgets/charactermap/characterwidget.cpp 2 |
|
116 |
|
117 We use a fixed size font for the display. Similarly, a fixed size hint is |
|
118 provided by the sizeHint() function: |
|
119 |
|
120 \snippet examples/widgets/charactermap/characterwidget.cpp 3 |
|
121 |
|
122 Three standard event functions are implemented so that the widget |
|
123 can respond to clicks, provide tooltips, and render the available |
|
124 characters. The paintEvent() shows how the contents of the widget are |
|
125 arranged and displayed: |
|
126 |
|
127 \snippet examples/widgets/charactermap/characterwidget.cpp 6 |
|
128 |
|
129 A QPainter is created for the widget and, in all cases, we ensure that the |
|
130 widget's background is painted. The painter's font is set to the |
|
131 user-specified display font. |
|
132 |
|
133 The area of the widget that needs to be redrawn is used to determine which |
|
134 characters need to be displayed: |
|
135 |
|
136 \snippet examples/widgets/charactermap/characterwidget.cpp 7 |
|
137 |
|
138 Using integer division, we obtain the row and column numbers of each |
|
139 characters that should be displayed, and we draw a square on the widget |
|
140 for each character displayed. |
|
141 |
|
142 \snippet examples/widgets/charactermap/characterwidget.cpp 8 |
|
143 \snippet examples/widgets/charactermap/characterwidget.cpp 9 |
|
144 |
|
145 The symbols for each character in the array are drawn within each square, |
|
146 with the symbol for the most recently selected character displayed in red: |
|
147 |
|
148 \snippet examples/widgets/charactermap/characterwidget.cpp 10 |
|
149 |
|
150 We do not need to take into account the difference between the area |
|
151 displayed in the viewport and the area we are drawing on because |
|
152 everything outside the visible area will be clipped. |
|
153 |
|
154 The mousePressEvent() defines how the widget responds to mouse clicks. |
|
155 |
|
156 \snippet examples/widgets/charactermap/characterwidget.cpp 5 |
|
157 |
|
158 We are only interested when the user clicks with the left mouse button |
|
159 over the widget. When this happens, we calculate which character was |
|
160 selected and emit the characterSelected() signal. |
|
161 The character's number is found by dividing the x and y-coordinates of |
|
162 the click by the size of each character's grid square. Since the number |
|
163 of columns in the widget is defined by the \c columns variable, we |
|
164 simply multiply the row index by that value and add the column number |
|
165 to obtain the character number. |
|
166 |
|
167 If any other mouse button is pressed, the event is passed on to the |
|
168 QWidget base class. This ensures that the event can be handled properly |
|
169 by any other interested widgets. |
|
170 |
|
171 The mouseMoveEvent() maps the mouse cursor's position in global |
|
172 coordinates to widget coordinates, and determines the character that |
|
173 was clicked by performing the calculation |
|
174 |
|
175 \snippet examples/widgets/charactermap/characterwidget.cpp 4 |
|
176 |
|
177 The tooltip is given a position defined in global coordinates. |
|
178 |
|
179 \section1 MainWindow Class Definition |
|
180 |
|
181 The \c MainWindow class provides a minimal user interface for the example, |
|
182 with only a constructor, slots that respond to signals emitted by standard |
|
183 widgets, and some convenience functions that are used to set up the user |
|
184 interface. |
|
185 |
|
186 The class definition looks like this: |
|
187 |
|
188 \snippet examples/widgets/charactermap/mainwindow.h 0 |
|
189 |
|
190 The main window contains various widgets that are used to control how |
|
191 the characters will be displayed, and defines the findFonts() function |
|
192 for clarity and convenience. The findStyles() slot is used by the widgets |
|
193 to determine the styles that are available, insertCharacter() inserts |
|
194 a user-selected character into the window's line edit, and |
|
195 updateClipboard() synchronizes the clipboard with the contents of the |
|
196 line edit. |
|
197 |
|
198 \section1 MainWindow Class Implementation |
|
199 |
|
200 In the constructor, we set up the window's central widget and fill it with |
|
201 some standard widgets (two comboboxes, a line edit, and a push button). |
|
202 We also construct a CharacterWidget custom widget, and add a QScrollArea |
|
203 so that we can view its contents: |
|
204 |
|
205 \snippet examples/widgets/charactermap/mainwindow.cpp 0 |
|
206 |
|
207 QScrollArea provides a viewport onto the \c CharacterWidget when we set |
|
208 its widget and handles much of the work needed to provide a scrolling |
|
209 viewport. |
|
210 |
|
211 The font combo box is automatically popuplated with a list of available |
|
212 fonts. We list the available styles for the current font in the style |
|
213 combobox using the following function: |
|
214 |
|
215 \snippet examples/widgets/charactermap/mainwindow.cpp 1 |
|
216 |
|
217 The line edit and push button are used to supply text to the clipboard: |
|
218 |
|
219 \snippet examples/widgets/charactermap/mainwindow.cpp 2 |
|
220 |
|
221 We also obtain a clipboard object so that we can send text entered by the |
|
222 user to other applications. |
|
223 |
|
224 Most of the signals emitted in the example come from standard widgets. |
|
225 We connect these signals to slots in this class, and to the slots provided |
|
226 by other widgets. |
|
227 |
|
228 \snippet examples/widgets/charactermap/mainwindow.cpp 4 |
|
229 |
|
230 The font combobox's |
|
231 \l{QFontComboBox::currentFontChanged()}{currentFontChanged()} signal is |
|
232 connected to the findStyles() function so that the list of available styles |
|
233 can be shown for each font that is used. Since both the font and the style |
|
234 can be changed by the user, the font combobox's currentFontChanged() signal |
|
235 and the style combobox's |
|
236 \l{QComboBox::currentIndexChanged()}{currentIndexChanged()} are connected |
|
237 directly to the character widget. |
|
238 |
|
239 The final two connections allow characters to be selected in the character |
|
240 widget, and text to be inserted into the clipboard: |
|
241 |
|
242 \snippet examples/widgets/charactermap/mainwindow.cpp 5 |
|
243 |
|
244 The character widget emits the characterSelected() custom signal when |
|
245 the user clicks on a character, and this is handled by the insertCharacter() |
|
246 function in this class. The clipboard is changed when the push button emits |
|
247 the clicked() signal, and we handle this with the updateClipboard() function. |
|
248 |
|
249 The remaining code in the constructor sets up the layout of the central widget, |
|
250 and provides a window title: |
|
251 |
|
252 \snippet examples/widgets/charactermap/mainwindow.cpp 6 |
|
253 |
|
254 The font combobox is automatically populated with a list of available font |
|
255 families. The styles that can be used with each font are found by the |
|
256 findStyles() function. This function is called whenever the user selects a |
|
257 different font in the font combobox. |
|
258 |
|
259 \snippet examples/widgets/charactermap/mainwindow.cpp 7 |
|
260 |
|
261 We begin by recording the currently selected style, and we clear the |
|
262 style combobox so that we can insert the styles associated with the |
|
263 current font family. |
|
264 |
|
265 \snippet examples/widgets/charactermap/mainwindow.cpp 8 |
|
266 |
|
267 We use the font database to collect the styles that are available for the |
|
268 current font, and insert them into the style combobox. The current item is |
|
269 reset if the original style is not available for this font. |
|
270 |
|
271 The last two functions are slots that respond to signals from the character |
|
272 widget and the main window's push button. The insertCharacter() function is |
|
273 used to insert characters from the character widget when the user clicks a |
|
274 character: |
|
275 |
|
276 \snippet examples/widgets/charactermap/mainwindow.cpp 9 |
|
277 |
|
278 The character is inserted into the line edit at the current cursor position. |
|
279 |
|
280 The main window's "To clipboard" push button is connected to the |
|
281 updateClipboard() function so that, when it is clicked, the clipboard is |
|
282 updated to contain the contents of the line edit: |
|
283 |
|
284 \snippet examples/widgets/charactermap/mainwindow.cpp 10 |
|
285 |
|
286 We copy all the text from the line edit to the clipboard, but we do not clear |
|
287 the line edit. |
|
288 */ |