2
|
1 |
/*
|
|
2 |
* Copyright (c) 2006 Nokia Corporation and/or its subsidiary(-ies).
|
|
3 |
* All rights reserved.
|
|
4 |
* This component and the accompanying materials are made available
|
|
5 |
* under the terms of the License "Eclipse Public License v1.0"
|
|
6 |
* which accompanies this distribution, and is available
|
|
7 |
* at the URL "http://www.eclipse.org/legal/epl-v10.html".
|
|
8 |
*
|
|
9 |
* Initial Contributors:
|
|
10 |
* Nokia Corporation - initial contribution.
|
|
11 |
*
|
|
12 |
* Contributors:
|
|
13 |
*
|
|
14 |
* Description:
|
|
15 |
*
|
|
16 |
*/
|
|
17 |
|
|
18 |
|
|
19 |
|
|
20 |
// Note that the rendering is not quite accurate with long text, since
|
|
21 |
// text flows around the icon.
|
|
22 |
|
|
23 |
/**
|
|
24 |
* Get the rectangle in which to draw the icon
|
|
25 |
*/
|
|
26 |
function getIconRect(properties, laf) {
|
|
27 |
var iconSize = laf.getDimension("note.icon.size");
|
|
28 |
var padding = laf.getInteger("note.padding", 2);
|
|
29 |
var iconRect = new Rectangle(properties.size.width - iconSize.x - padding*2,
|
|
30 |
0, iconSize.x, iconSize.y);
|
|
31 |
return iconRect;
|
|
32 |
}
|
|
33 |
|
|
34 |
/**
|
|
35 |
* Calculate the bounding rectangle,
|
|
36 |
* adjusting the height to contain all the text.
|
|
37 |
* @param flags the Font flags
|
|
38 |
*/
|
|
39 |
function calculateBounds(properties, laf, flags, iconRect) {
|
|
40 |
|
|
41 |
var rect = new Rectangle(0, 0, 0, 0);
|
|
42 |
var portrait = laf.getBoolean("is.portrait", true);
|
|
43 |
var d = laf.getDimension("screen.size");
|
|
44 |
var content = laf.getRectangle("ViewCQikContainer.bounds");
|
|
45 |
|
|
46 |
var padding = laf.getInteger("note.padding", 2);
|
|
47 |
if (portrait) {
|
|
48 |
rect.x = padding;
|
|
49 |
rect.width = d.x - padding*2;
|
|
50 |
}
|
|
51 |
else {
|
|
52 |
rect.x = d.x / 5;
|
|
53 |
rect.width = d.x - rect.x;
|
|
54 |
}
|
|
55 |
|
|
56 |
var font = laf.getFont("NormalFont");
|
|
57 |
|
|
58 |
// at least three lines are visible
|
|
59 |
var iconRect = getIconRect(properties, laf);
|
|
60 |
|
|
61 |
var info = getTextInfo(properties, laf, font, flags, iconRect);
|
|
62 |
var extent = info[0];
|
|
63 |
var text = info[1];
|
|
64 |
var maxWidth = info[2];
|
|
65 |
var lineGap = info[3];
|
|
66 |
|
|
67 |
var height = extent.y + 7*2 + lineGap
|
|
68 |
|
|
69 |
if (portrait)
|
|
70 |
rect.y = content.y + content.height - height - padding;
|
|
71 |
else
|
|
72 |
rect.y = (d.y - height) / 2;
|
|
73 |
|
|
74 |
rect.height = height;
|
|
75 |
|
|
76 |
// adjust for insets
|
|
77 |
var inset = laf.getDimension("note.inset");
|
|
78 |
rect.x += inset.x;
|
|
79 |
rect.width -= (2 * inset.x);
|
|
80 |
rect.height -= (2 * inset.y);
|
|
81 |
|
|
82 |
// add pixels for shadow
|
|
83 |
rect.width += 3;
|
|
84 |
rect.height += 3;
|
|
85 |
|
|
86 |
return rect;
|
|
87 |
}
|
|
88 |
|
|
89 |
function getTextInfo(properties, laf, font, flags, iconRect) {
|
|
90 |
var padding = laf.getInteger("note.padding", 8);
|
|
91 |
|
|
92 |
var maxWidth = iconRect.x - padding*(3+2);
|
|
93 |
|
|
94 |
var lineGap = laf.getInteger("note.text.lineGap", 0);
|
|
95 |
var minExtent = font.formattedStringExtent("Hello",
|
|
96 |
new Point(maxWidth, 0), flags, lineGap);
|
|
97 |
minExtent.y *= 3;
|
|
98 |
var text = chooseScalableText(properties.text, font, maxWidth);
|
|
99 |
var extent = calculateWrappedTextSize(text, maxWidth, font, flags, lineGap, 5);
|
|
100 |
|
|
101 |
if (extent.y < minExtent.y)
|
|
102 |
extent.y = minExtent.y;
|
|
103 |
|
|
104 |
return [extent, text, maxWidth, lineGap];
|
|
105 |
}
|
|
106 |
|
|
107 |
function isNote(instance) {
|
|
108 |
return (instance.isInstanceOf("com.nokia.sdt.series60.StandardNote") ||
|
|
109 |
instance.isInstanceOf("com.nokia.sdt.series60.GlobalNote"));
|
|
110 |
}
|
|
111 |
|
|
112 |
function isConfirmationQuery(instance) {
|
|
113 |
return instance.isInstanceOf("com.nokia.sdt.series60.ConfirmationQuery");
|
|
114 |
}
|
|
115 |
|
|
116 |
function isProgress(instance) {
|
|
117 |
// add progress dialog here when we add that component
|
|
118 |
return instance.isInstanceOf("com.nokia.sdt.series60.WaitDialog");
|
|
119 |
}
|
|
120 |
|
|
121 |
function isDataQuery(instance) {
|
|
122 |
return instance.isInstanceOf("com.nokia.sdt.series60.SingleLineDataQuery") ||
|
|
123 |
instance.isInstanceOf("com.nokia.sdt.series60.MultiLineDataQuery");
|
|
124 |
}
|
|
125 |
|
|
126 |
function getIcon(instance, laf) {
|
|
127 |
var properties = instance.properties;
|
|
128 |
if (isNote(instance)) {
|
|
129 |
if (properties.type != null) {
|
|
130 |
var fileBase = "note." + properties.type.toString() + ".icon";
|
|
131 |
return laf.getImage(fileBase);
|
|
132 |
}
|
|
133 |
}
|
|
134 |
else if (isConfirmationQuery(instance)) {
|
|
135 |
return laf.getImage("note.query.icon");
|
|
136 |
} else if (isProgress(instance)) {
|
|
137 |
return laf.getImage("note.progress.icon");
|
|
138 |
}
|
|
139 |
|
|
140 |
return null;
|
|
141 |
}
|
|
142 |
|
|
143 |
function drawPopupDialog(instance, laf, graphics, flags, bounds) {
|
|
144 |
var properties = instance.properties;
|
|
145 |
var font = laf.getFont("message.font");
|
|
146 |
graphics.setFont(font);
|
|
147 |
|
|
148 |
var padding = laf.getInteger("note.padding", 8);
|
|
149 |
|
|
150 |
// get bounding rects
|
|
151 |
var iconRect = getIconRect(properties, laf);
|
|
152 |
var info = getTextInfo(properties, laf, font, flags, iconRect);
|
|
153 |
var extent = info[0];
|
|
154 |
var text = info[1];
|
|
155 |
var maxWidth = info[2];
|
|
156 |
var lineGap = info[3];
|
|
157 |
|
|
158 |
var x = bounds.x;
|
|
159 |
var y = bounds.y;
|
|
160 |
var width = bounds.width - 3;
|
|
161 |
var height = bounds.height - 3;
|
|
162 |
|
|
163 |
// fill
|
|
164 |
graphics.setBackground(getBackgroundColor(instance, laf))
|
|
165 |
graphics.fillRectangle(new Rectangle(x, y, width, height))
|
|
166 |
|
|
167 |
// edge
|
|
168 |
graphics.setForeground(Colors.getColor(0, 0, 0))
|
|
169 |
graphics.drawRectangle(new Rectangle(x, y, width, height))
|
|
170 |
|
|
171 |
// shadows
|
|
172 |
graphics.setForeground(laf.getColor("control.shadow.inner"))
|
|
173 |
graphics.drawLine(x + 1, y + height + 1, x + width + 1, y + height + 1)
|
|
174 |
graphics.drawLine(x + width + 1, y + 1, x + width + 1, y + height + 1)
|
|
175 |
|
|
176 |
graphics.setForeground(laf.getColor("control.shadow.outer"))
|
|
177 |
graphics.drawLine(x + 2, y + height + 2, x + width + 2, y + height + 2)
|
|
178 |
graphics.drawLine(x + width + 2, y + 2, x + width + 2, y + height + 2)
|
|
179 |
|
|
180 |
graphics.setForeground(laf.getColor("EEikColorDialogText"));
|
|
181 |
|
|
182 |
// draw text
|
|
183 |
var textRect = new Rectangle(padding*4 + bounds.x, padding*3 + bounds.y,
|
|
184 |
iconRect.width + iconRect.x - padding*4, bounds.height - padding*3);
|
|
185 |
|
|
186 |
// get widths of each text line, where the first two are on
|
|
187 |
// the same line as the icon
|
|
188 |
var widths = [
|
|
189 |
extent.x, // first two lines ...
|
|
190 |
extent.x, // ... go to the edge of the icon
|
|
191 |
textRect.width ]; // and the remaining lines fill the dialog
|
|
192 |
|
|
193 |
println("textRect="+textRect);
|
|
194 |
graphics.drawFormattedString(text,
|
|
195 |
textRect,
|
|
196 |
flags | Font.OVERFLOW_ELLIPSIS,
|
|
197 |
lineGap,
|
|
198 |
widths);
|
|
199 |
|
|
200 |
// draw icon
|
|
201 |
var image = getIcon(instance, laf);
|
|
202 |
if (image != null) {
|
|
203 |
var imageData = image.getImageData();
|
|
204 |
graphics.drawImage(image, 0, 0, imageData.width, imageData.height,
|
|
205 |
iconRect.x, bounds.y + iconRect.y, iconRect.width, iconRect.height);
|
|
206 |
}
|
|
207 |
|
|
208 |
// progress bar
|
|
209 |
if (isProgress(instance)) {
|
|
210 |
drawProgressBar(instance, graphics, laf, bounds);
|
|
211 |
}
|
|
212 |
}
|
|
213 |
|
|
214 |
function drawProgressBar(instance, graphics, laf, bounds) {
|
|
215 |
var isPortrait = laf.getBoolean("is.portrait", true);
|
|
216 |
var padding = laf.getInteger("note.padding", 8);
|
|
217 |
var progressX = padding*4+bounds.x;
|
|
218 |
var progressHeight = laf.getInteger("progress.bar.height", 10);
|
|
219 |
var progressWidth = bounds.width - (padding*8);
|
|
220 |
var progressY = bounds.y + bounds.height - laf.getInteger("note.progress.offsetFromBottom", 0);
|
|
221 |
var image = laf.getImage("note.progress.bar");
|
|
222 |
var imageData = image.getImageData();
|
|
223 |
graphics.drawImage(image, 0, 0, imageData.width, imageData.height,
|
|
224 |
progressX, progressY, progressWidth, progressHeight);
|
|
225 |
|
|
226 |
}
|
|
227 |
|
|
228 |
function getChildAttribute(instance, childIndex, attributeName) {
|
|
229 |
var children = instance.children;
|
|
230 |
if (children.length > childIndex) {
|
|
231 |
var child = instance.children[childIndex];
|
|
232 |
return child.attributes[attributeName];
|
|
233 |
}
|
|
234 |
|
|
235 |
return null;
|
|
236 |
}
|
|
237 |
|
|
238 |
/**
|
|
239 |
* Combine two bounds into one, vertically stacking them, getting
|
|
240 |
* the maximum combined horizontal extent, and adding vertical
|
|
241 |
* padding in between.
|
|
242 |
* @param rect1 one rectangle
|
|
243 |
* @param rect2 another rectangle
|
|
244 |
* @return a rectangle at y=0.
|
|
245 |
*/
|
|
246 |
function getStackedBounds(rect1, rect2) {
|
|
247 |
var height = rect1.height + this.padding + rect2.height;
|
|
248 |
var maxX = Math.max(rect1.x + rect1.width, rect2.x + rect2.width);
|
|
249 |
var minX = Math.min(rect1.x, rect2.x);
|
|
250 |
return new Rectangle(minX, 0, maxX - minX, height);
|
|
251 |
}
|
|
252 |
|
|
253 |
//////////////////////////////////////////////////////////////
|
|
254 |
// Popup Visual Helper
|
|
255 |
//////////////////////////////////////////////////////////////
|
|
256 |
|
|
257 |
include("../renderLibrary.js")
|
|
258 |
|
|
259 |
/**
|
|
260 |
*
|
|
261 |
* Required prototype implementations
|
|
262 |
* IVisualAppearance
|
|
263 |
* ILayout
|
|
264 |
* IDirectLabelEdit
|
|
265 |
*
|
|
266 |
* Required additional prototype functions:
|
|
267 |
* getIconRect();
|
|
268 |
*
|
|
269 |
*/
|
|
270 |
function setupPopupVisualHelper(prototype) {
|
|
271 |
|
|
272 |
/**
|
|
273 |
* Calculate the text bounds for a dialog, allowing for an icon,
|
|
274 |
* wrapping, and a range of allowed lines. This assumes the
|
|
275 |
* width of the dialog to start with.
|
|
276 |
* @return bounds of text in dialog
|
|
277 |
*/
|
|
278 |
prototype.calculateTextBounds = function(properties, laf, text, font, flags, minLines, maxLines) {
|
|
279 |
var rect = new Rectangle(0, 0, 0, 0);
|
|
280 |
|
|
281 |
var portrait = laf.getBoolean("is.portrait", true);
|
|
282 |
var d = laf.getDimension("screen.size");
|
|
283 |
var content = laf.getRectangle("content.pane.bounds");
|
|
284 |
|
|
285 |
var padding = laf.getInteger("note.padding", 2);
|
|
286 |
if (portrait) {
|
|
287 |
rect.x = padding;
|
|
288 |
rect.width = d.x - padding*2;
|
|
289 |
}
|
|
290 |
else {
|
|
291 |
rect.x = d.x / 5;
|
|
292 |
rect.width = d.x - rect.x;
|
|
293 |
}
|
|
294 |
|
|
295 |
var iconRect = this.getIconRect();
|
|
296 |
var maxWidth = rect.width - iconRect.x - padding*(3+2);
|
|
297 |
|
|
298 |
var lineGap = laf.getInteger("note.text.lineGap", 0);
|
|
299 |
|
|
300 |
var minExtent = font.formattedStringExtent("Hello", new Point(maxWidth, 0), flags, lineGap);
|
|
301 |
minExtent.y *= minLines;
|
|
302 |
|
|
303 |
var text = chooseScalableText(properties.text, font, maxWidth);
|
|
304 |
var extent;
|
|
305 |
|
|
306 |
if ((flags & Font.WRAPPING_ENABLED) != 0)
|
|
307 |
extent = calculateWrappedTextSize(text, maxWidth, font, flags, lineGap, maxLines);
|
|
308 |
else
|
|
309 |
extent = font.formattedStringExtent(text,
|
|
310 |
new Point(maxWidth, 0), flags, lineGap);
|
|
311 |
|
|
312 |
//println("extent="+extent);
|
|
313 |
if (extent.y < minExtent.y)
|
|
314 |
extent.y = minExtent.y;
|
|
315 |
|
|
316 |
return new Rectangle(rect.x, rect.y, extent.x, extent.y);
|
|
317 |
}
|
|
318 |
|
|
319 |
/**
|
|
320 |
* Calculate the bounding rectangle for the dialog so it contains the
|
|
321 |
* text, icon, and editor.
|
|
322 |
* @param textExtent size of text
|
|
323 |
* @param editRect rect for editor content at bottom (only size used)
|
|
324 |
* @return Rectangle (0, 0, width, height)
|
|
325 |
*/
|
|
326 |
prototype.calculateDialogBounds = function(properties, laf, textExtent, editRect) {
|
|
327 |
var rect = new Rectangle(0, 0, 0, 0);
|
|
328 |
|
|
329 |
var portrait = laf.getBoolean("is.portrait", true);
|
|
330 |
var d = laf.getDimension("screen.size");
|
|
331 |
var content = laf.getRectangle("content.pane.bounds");
|
|
332 |
|
|
333 |
var padding = laf.getInteger("note.padding", 2);
|
|
334 |
if (portrait) {
|
|
335 |
rect.x = padding;
|
|
336 |
rect.width = d.x - padding*2;
|
|
337 |
}
|
|
338 |
else {
|
|
339 |
rect.x = d.x / 5;
|
|
340 |
rect.width = d.x - rect.x;
|
|
341 |
}
|
|
342 |
|
|
343 |
var lineGap = laf.getInteger("note.text.lineGap", 0);
|
|
344 |
var height = textExtent.y + 7*2 + lineGap
|
|
345 |
|
|
346 |
if (editRect)
|
|
347 |
height += editRect.height + lineGap*2;
|
|
348 |
|
|
349 |
rect.height = height;
|
|
350 |
|
|
351 |
// adjust for insets
|
|
352 |
var inset = laf.getDimension("note.inset");
|
|
353 |
rect.x += inset.x;
|
|
354 |
rect.width -= (2 * inset.x);
|
|
355 |
rect.height -= (2 * inset.y);
|
|
356 |
|
|
357 |
return rect;
|
|
358 |
}
|
|
359 |
|
|
360 |
|
|
361 |
// Draw a simple dialog with using the 'text' property and the label font
|
|
362 |
prototype.drawPopupDialog = function(instance, laf, graphics, font, flags, textRect, bounds) {
|
|
363 |
var properties = instance.properties;
|
|
364 |
|
|
365 |
this.drawPopupDialogBorder(instance, laf, graphics, bounds);
|
|
366 |
|
|
367 |
var text = chooseScalableText(properties.text, font, textRect.width);
|
|
368 |
|
|
369 |
var offset = new Point(bounds.x, bounds.y);
|
|
370 |
this.drawPopupDialogPromptAndIcon(instance, laf, graphics, text, font, flags, offset, textRect);
|
|
371 |
}
|
|
372 |
|
|
373 |
/**
|
|
374 |
* Draw dialog prompt and icon.
|
|
375 |
* @param flags text flags
|
|
376 |
* @param offset Point offset at which to bias the iconRect and textRect
|
|
377 |
*/
|
|
378 |
prototype.drawPopupDialogPromptAndIcon = function(instance, laf, graphics, text, font, flags, offset, textRect) {
|
|
379 |
var properties = instance.properties;
|
|
380 |
graphics.setFont(font);
|
|
381 |
|
|
382 |
var padding = laf.getInteger("note.padding", 8);
|
|
383 |
|
|
384 |
graphics.setForeground(laf.getColor("EEikColorDialogText"));
|
|
385 |
|
|
386 |
// draw text
|
|
387 |
textRect.x = properties.location.x + offset.x;
|
|
388 |
textRect.y = properties.location.y + offset.y;
|
|
389 |
|
|
390 |
//println("drawPopupDialogPromptAndIcon textRect = " + textRect);
|
|
391 |
graphics.drawFormattedString(text,
|
|
392 |
textRect,
|
|
393 |
flags | Font.OVERFLOW_ELLIPSIS,
|
|
394 |
laf.getInteger("note.text.lineGap", 0));
|
|
395 |
|
|
396 |
// draw icon
|
|
397 |
var iconRect = this.getIconRect();
|
|
398 |
var image = getIcon(instance, laf);
|
|
399 |
if (image != null) {
|
|
400 |
var imageData = image.getImageData();
|
|
401 |
graphics.drawImage(image, 0, 0, imageData.width, imageData.height,
|
|
402 |
iconRect.x, offset.y + iconRect.y, iconRect.width, iconRect.height);
|
|
403 |
}
|
|
404 |
}
|
|
405 |
|
|
406 |
/**
|
|
407 |
* Draw dialog border, with shadows. The bounds should enclose only
|
|
408 |
* the contents of the dialog (shadows drawn outside).
|
|
409 |
*/
|
|
410 |
prototype.drawPopupDialogBorder = function(instance, laf, graphics, bounds) {
|
|
411 |
var padding = laf.getInteger("note.padding", 8);
|
|
412 |
|
|
413 |
// get bounding rects
|
|
414 |
|
|
415 |
var x = bounds.x;
|
|
416 |
var y = bounds.y;
|
|
417 |
var width = bounds.width;
|
|
418 |
var height = bounds.height;
|
|
419 |
|
|
420 |
// fill
|
|
421 |
graphics.setBackground(getBackgroundColor(instance, laf))
|
|
422 |
graphics.fillRectangle(new Rectangle(x, y, width, height))
|
|
423 |
|
|
424 |
// edge
|
|
425 |
graphics.setForeground(Colors.getColor(0, 0, 0))
|
|
426 |
graphics.drawRectangle(new Rectangle(x, y, width, height))
|
|
427 |
|
|
428 |
// shadows
|
|
429 |
graphics.setForeground(laf.getColor("control.shadow.inner"))
|
|
430 |
graphics.drawLine(x + 1, y + height + 1, x + width + 1, y + height + 1)
|
|
431 |
graphics.drawLine(x + width + 1, y + 1, x + width + 1, y + height + 1)
|
|
432 |
|
|
433 |
graphics.setForeground(laf.getColor("control.shadow.outer"))
|
|
434 |
graphics.drawLine(x + 2, y + height + 2, x + width + 2, y + height + 2)
|
|
435 |
graphics.drawLine(x + width + 2, y + 2, x + width + 2, y + height + 2)
|
|
436 |
}
|
|
437 |
|
|
438 |
} // setupPopupVisualHelper
|
|
439 |
|