Difference between revisions of "ZCS 6.0:Zimlet Developers Guide:Examples:Custom Tool Tip"

Line 27: Line 27:
  
 
<pre>
 
<pre>
<zimlet name="com_zimbra_customtooltip" version="0.1" description="Demos a custom tool tip">
+
<zimlet name="com_zimbra_example_customtooltip" version="1.0" description="Demos a custom tool tip">
  <include>com_zimbra_customtooltip.js</include>
+
    <include>com_zimbra_example_customtooltip.js</include>
  <handlerObject>com_zimbra_customtooltip_HandlerObject</handlerObject>
+
    <handlerObject>com_zimbra_example_customtooltip_HandlerObject</handlerObject>
  <contentObject>
+
    <contentObject>
    <matchOn>
+
        <matchOn>
      <regex attrs="ig">lab|user|remodel</regex> <!-- matches lab or user or remodel -->
+
        <regex attrs="ig">lab|user|remodel</regex> <!-- matches lab or user or remodel -->
    </matchOn>
+
        </matchOn>
  </contentObject>
+
    </contentObject>
 
</zimlet>
 
</zimlet>
 
</pre>
 
</pre>
Line 43: Line 43:
  
 
<pre>
 
<pre>
**
+
/**
 
  * This method is called when the tool tip is popped-up.
 
  * This method is called when the tool tip is popped-up.
 
  *  
 
  *  
Line 51: Line 51:
 
  * @param {Object} canvas the canvas
 
  * @param {Object} canvas the canvas
 
  */
 
  */
com_zimbra_customtooltip_HandlerObject.prototype.toolTipPoppedUp =
+
com_zimbra_example_customtooltip_HandlerObject.prototype.toolTipPoppedUp =
 
function(spanElement, contentObjText, matchContent, canvas) {
 
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
+
// generate the HTML
  canvas.innerHTML = html.join("");
+
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 73: Line 74:
 
{| cellspacing="0" cellpadding="5" border="1"
 
{| cellspacing="0" cellpadding="5" border="1"
 
|Zimlet Package
 
|Zimlet Package
|[[Media:zcs-6-examples-customtooltip-com_zimbra_customtooltip.zip|com_zimbra_customtooltip.zip]]
+
|[http://files.zimbra.com/docs/zimlet/zcs/6.0/examples/com_zimbra_example_customtooltip/com_zimbra_example_customtooltip.zip com_zimbra_example_customtooltip.zip]
 
|}
 
|}
  

Revision as of 17:43, 10 February 2010

Zdg-6-menu-icon-zimbra.jpg Introduction Zdg-6-menu-icon-green-flag.png Getting Started Zdg-6-menu-icon-terminal.png Dev Environment Setup Zdg-6-menu-icon-gear.png Developing Zimlets Zdg-6-menu-icon-advanced.jpg Advanced Concepts Zdg-6-menu-icon-library.jpg API Specifications Zdg-6-menu-icon-checkbox.jpg 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

Zcs-6-examples-customtooltip.png

Definition File

<zimlet name="com_zimbra_example_customtooltip" version="1.0" description="Demos a custom tool tip">
    <include>com_zimbra_example_customtooltip.js</include>
    <handlerObject>com_zimbra_example_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_example_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_example_customtooltip.zip

Useful Links


Verified Against: Zimbra Collaboration Suite 6.0 Date Created: 01/10/2010
Article ID: https://wiki.zimbra.com/index.php?title=ZCS_6.0:Zimlet_Developers_Guide:Examples:Custom_Tool_Tip Date Modified: 2010-02-10



Try Zimbra

Try Zimbra Collaboration with a 60-day free trial.
Get it now »

Want to get involved?

You can contribute in the Community, Wiki, Code, or development of Zimlets.
Find out more. »

Looking for a Video?

Visit our YouTube channel to get the latest webinars, technology news, product overviews, and so much more.
Go to the YouTube channel »

Jump to: navigation, search