ZCS 6.0:Zimlet Developers Guide:Examples:Custom Tool Tip: Difference between revisions
(New page: {| cellspacing="0" cellpadding="5" style="border: 1px solid rgb(153, 153, 170); margin: 0pt 0.5em 0.5em 0pt; float: none; background-color: rgb(249, 249, 255);" |[[Image:zdg-6-menu-icon-zi...) |
No edit summary |
||
| Line 23: | Line 23: | ||
[[Image:zcs-6-examples-customtooltip.png]] | [[Image:zcs-6-examples-customtooltip.png]] | ||
== Definition File == | == Definition File == | ||
| Line 37: | Line 36: | ||
</contentObject> | </contentObject> | ||
</zimlet> | </zimlet> | ||
</pre> | |||
== Handler Object == | |||
The following code snippet from the Zimlet Handler Object creates the HTML code for the tool tip and writes the HTML to the canvas. The <code>toolTipPoppedUp()</code> zimlet method is called by the zimlet framework: | |||
<pre> | |||
** | |||
* This method is called when the tool tip is popped-up. | |||
* | |||
* @param {Object} spanElement the element | |||
* @param {String} contentObjText the content object text | |||
* @param {Hash} matchContent the match content (matchContent[0], matchContent.index, matchContent.input) | |||
* @param {Object} canvas the canvas | |||
*/ | |||
com_zimbra_customtooltip_HandlerObject.prototype.toolTipPoppedUp = | |||
function(spanElement, contentObjText, matchContent, canvas) { | |||
// generate the HTML | |||
var html = new Array(); | |||
var i = 0; | |||
html[i++] = "<table cellpadding=2 cellspacing=0 border=0>"; | |||
html[i++] = ["<tr valign='center'>", "<td><b>CUSTOM TOOL TIP</b></td>", "</tr>"].join(""); | |||
html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>contentObjText = </b>", contentObjText, "</div>", "</td></tr>"].join(""); | |||
html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>matchContent[0] = </b>", matchContent[0], "</div>", "</td></tr>"].join(""); | |||
html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>matchContent.index = </b>", matchContent.index, "</div>", "</td></tr>"].join(""); | |||
html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>matchContent.input = </b>", matchContent.input, "</div>", "</td></tr>"].join(""); | |||
html[i++] = ["</table>"].join(""); | |||
// write the HTML to the tool tip canvas | |||
canvas.innerHTML = html.join(""); | |||
}; | |||
</pre> | </pre> | ||
| Line 45: | Line 75: | ||
|[[Media:zcs-6-examples-customtooltip-com_zimbra_customtooltip.zip|com_zimbra_customtooltip.zip]] | |[[Media:zcs-6-examples-customtooltip-com_zimbra_customtooltip.zip|com_zimbra_customtooltip.zip]] | ||
|} | |} | ||
== Useful Links == | == Useful Links == | ||
Revision as of 19:44, 13 January 2010
|
Introduction | 
|
Getting Started | 
|
Dev Environment Setup | 
|
Developing Zimlets | 
|
Advanced Concepts | 
|
API Specifications | 
|
Example Zimlets |
Description
This zimlet will match the words lab, user or remodel and display a tool tip. The tool tip is generated in the Handler Object when the toolTipPoppedUp() method is called.
Screen Shot
Definition File
<zimlet name="com_zimbra_customtooltip" version="0.1" description="Demos a custom tool tip">
<include>com_zimbra_customtooltip.js</include>
<handlerObject>com_zimbra_customtooltip_HandlerObject</handlerObject>
<contentObject>
<matchOn>
<regex attrs="ig">lab|user|remodel</regex> <!-- matches lab or user or remodel -->
</matchOn>
</contentObject>
</zimlet>
Handler Object
The following code snippet from the Zimlet Handler Object creates the HTML code for the tool tip and writes the HTML to the canvas. The toolTipPoppedUp() zimlet method is called by the zimlet framework:
**
* This method is called when the tool tip is popped-up.
*
* @param {Object} spanElement the element
* @param {String} contentObjText the content object text
* @param {Hash} matchContent the match content (matchContent[0], matchContent.index, matchContent.input)
* @param {Object} canvas the canvas
*/
com_zimbra_customtooltip_HandlerObject.prototype.toolTipPoppedUp =
function(spanElement, contentObjText, matchContent, canvas) {
// generate the HTML
var html = new Array();
var i = 0;
html[i++] = "<table cellpadding=2 cellspacing=0 border=0>";
html[i++] = ["<tr valign='center'>", "<td><b>CUSTOM TOOL TIP</b></td>", "</tr>"].join("");
html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>contentObjText = </b>", contentObjText, "</div>", "</td></tr>"].join("");
html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>matchContent[0] = </b>", matchContent[0], "</div>", "</td></tr>"].join("");
html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>matchContent.index = </b>", matchContent.index, "</div>", "</td></tr>"].join("");
html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>matchContent.input = </b>", matchContent.input, "</div>", "</td></tr>"].join("");
html[i++] = ["</table>"].join("");
// write the HTML to the tool tip canvas
canvas.innerHTML = html.join("");
};
Download
| Zimlet Package | com_zimbra_customtooltip.zip |
Useful Links
