Getting Zimlet JS To Respond To menuItem Click

[Chewie71]

I've been experimenting with Zimlets and am struggling with some concepts here. I've borrowed from the Zimbra Email zimlet as well as some examples I've found on the Internet. I know it's not going to work the way it is now, but maybe someone can enlighten me and help push me in the right direction.

Let me post what I've got so far and then ask my questions.

<zimlet name="edu_wiu_directory" version="1.0" description="WIU Directory">

<include>edu_wiu_directory.js</include>
<handlerObject>Edu_Wiu_Directory</handlerObject>

<zimletPanelItem label="WIU Directory"> 
  <toolTipText>
  Perform Directory Actions on WIU's LDAP Directory
  </toolTipText>


  <contextMenu>
		<menuItem label="My Info" id="MYINFO"/>
		<menuItem label="User Search" id="USERSEARCH"/>
		<menuItem label="Faculty: Email Classes" id="FACULTYEMAIL"/>
	</contextMenu>
</zimletPanelItem>

</zimlet>

function Edu_Wiu_Directory() {
}

Edu_Wiu_Directory.prototype = new ZmZimletBase();
Edu_Wiu_Directory.prototype.constructor = Edu_Wiu_Directory;

Edu_Wiu_Directory.prototype.doubleClicked = function() {
    this.singleClicked();
};

Edu_Wiu_Directory.prototype.singleClicked = function() {
	var view = new DwtComposite(this.getShell());
	view.setSize("500px","500px");
	var el = view.getHtmlElement();
	var myBox = document.createElement("div");
	el.appendChild(myBox);
	
	var html=new Array();
	var i=0;
	html[i++] = "First line of HTML <br/>";
	html[i++] = "Second line of HTML";
	html[i++] = "WHAT MENU ITEM DID I CLICK GOES HERE....";
	
	//package up html and display it
	myBox.innerHtml = html.join('');
	this._dialog = this._createDialog({title:"My Dialog Title", view:view});
	this._dialog.setButtonListener(DwtDialog.OK_BUTTON, new AjxListener(this, this.myHandler));
	this._dialog.setButtonTitle(DwtDialog.OK_BUTTON, "Go go gadget Zimlet!");
	this._dialog.popup();
};

Edu_Wiu_Directory.prototype.myHandler = function(ev) {
	//do more stuff with web services, api calls, etc
	this._dialog.popdown();
}

Com_Zimbra_Email.prototype.menuItemSelected =
function(itemId, item, ev) {
	switch (itemId) {
	    case "MYINFO":			this._SOMETHINGHERE();		break;
	    case "USERSEARCH":		this._SOMETHINGHERE();		break;
	    case "FACULTYEMAIL":	this._SOMETHINGHERE(ev);	break;
	}
};

So the Zimlet icon "WIU Directory" appears, and when I right click it I get the three menu options, but clicking on one of the options does not produce any results. Right now all I would like it to do is return a window with the HTML stuff from the "singleClicked" JS function....and have the third line tell me which option I clicked.

Single or double left clicking the Zimlet produces no action, only right clicking produces the menu. I'm pretty sure the "DoubleClicked" and "singleClicked" JS functions are not being called or are being overridden.

Can anyone tell me how to make what I want to happen...happen?


NEXT QUESTION:

Eventually I will want to send a call off to my JSP file that does the LDAP query....and return the results back to the JS for presentation to the user. Anyone know how to send a request off to JSP with parameters...from JS?

Thanks,
Matt

[tdesorbaix]

Here is your zimlet js file debugged :

function Edu_Wiu_Directory() {
}

Edu_Wiu_Directory.prototype = new ZmZimletBase();
Edu_Wiu_Directory.prototype.constructor = Edu_Wiu_Directory;

Edu_Wiu_Directory.prototype.doubleClicked = function() {
    this.singleClicked();
};

Edu_Wiu_Directory.prototype.singleClicked = function() {
	var view = new DwtComposite(this.getShell());
	view.setSize("500px","500px");
	var el = view.getHtmlElement();
	var myBox = document.createElement("div");
	el.appendChild(myBox);
	
	var html=new Array();
	var i=0;
	html[i++] = "First line of HTML <br/>";
	html[i++] = "Second line of HTML";
	html[i++] = "WHAT MENU ITEM DID I CLICK GOES HERE....";
	
	//package up html and display it
	//CORRECTION
	myBox.innerHTML = html.join('');
	this._dialog = this._createDialog({title:"My Dialog Title", view:view});
	this._dialog.setButtonListener(DwtDialog.OK_BUTTON, new AjxListener(this, this.myHandler));
	//CORRECTION
	this._dialog.getButton(DwtDialog.OK_BUTTON).setText("Go go gadget Zimlet!");
	this._dialog.popup();
};

Edu_Wiu_Directory.prototype.myHandler = function(ev) {
	//do more stuff with web services, api calls, etc
	this._dialog.popdown();
}

//CORRECTION
Edu_Wiu_Directory.prototype.menuItemSelected =	
function(itemId, item, ev) {
	switch (itemId) {
	    case "MYINFO":			this._SOMETHINGHERE();		break;
	    case "USERSEARCH":		this._SOMETHINGHERE();		break;
	    case "FACULTYEMAIL":	this._SOMETHINGHERE(ev);	break;
	}
};

For the call to your jsp file in the javascript file, you should look at AjxRpc or AjxPost

[Chewie71]

OK...I corrected my typos....there's always a bunch of those whenever I write a program...

I have it set so that when a menuItem is selected it should be calling off to the "singleClicked" function and present the window. It does not however do anything.

function Edu_Wiu_Directory() {
}

Edu_Wiu_Directory.prototype = new ZmZimletBase();
Edu_Wiu_Directory.prototype.constructor = Edu_Wiu_Directory;

Edu_Wiu_Directory.prototype.doubleClicked = function() {
    this.singleClicked();
};

Edu_Wiu_Directory.prototype.singleClicked = function() {
	var view = new DwtComposite(this.getShell());
	view.setSize("500px","500px");
	var el = view.getHtmlElement();
	var myBox = document.createElement("div");
	el.appendChild(myBox);
	
	var html=new Array();
	var i=0;
	html[i++] = "First line of HTML <br/>";
	html[i++] = "Second line of HTML";
	html[i++] = "WHAT DID MENU ITEM DID I CLICK GOES HERE....";
	
	//package up html and display it
	myBox.innerHTML = html.join('');
	this._dialog = this._createDialog({title:"My Dialog Title", view:view});
	this._dialog.setButtonListener(DwtDialog.OK_BUTTON, new AjxListener(this, this.myHandler));
	// this._dialog.setButtonTitle(DwtDialog.OK_BUTTON, "Go go gadget Zimlet!");
	this._dialog.getButton(DwtDialog.OK_BUTTON).setText("Go go gadget Zimlet!");
	this._dialog.popup();
};

Edu_Wiu_Directory.prototype.myHandler = function(ev) {
	//do more stuff with web services, api calls, etc
	this._dialog.popdown();
}

Edu_Wiu_Directory.prototype.menuItemSelected =
function(itemId) {
	switch (itemId) {
	    case "MYINFO":			this.singleClicked();		break;
	    case "USERSEARCH":		this.singleClicked();		break;
	    case "FACULTYEMAIL":	this.singleClicked();		break;
	}
};

[Chewie71]

OK....I'm just guessing here, but I think the reason my dialog box isn't appearing is because I didn't tell it to open one in the XML file. So the "this._dialog" stuff in the JS doesn't know what to interact with....I think??? So I modified the menuItem entry to look like this...

<menuItem label="My Info" icon="QuestionMark" id="MYINFO">
                        <canvas type="dialog" width="600" height="400"/>
                        <actionUrl target="/service/zimlet/_dev/edu_wiu_email_starnum/ldap.jsp">
                                <param name="query">MYINFO</param>
                        </actionUrl>
                </menuItem>

I thought that would force the dialog box to open, but it still is not doing it. This exact code used to work when I wasn't using any JS....but now it won't do anything.

Does anyone have any thoughts?

Thanks,
Matt

[Chewie71]

Originally Posted by Chewie71

OK....I'm just guessing here, but I think the reason my dialog box isn't appearing is because I didn't tell it to open one in the XML file. So the "this._dialog" stuff in the JS doesn't know what to interact with....I think??? So I modified the menuItem entry to look like this...

Upon further investigation I believe this assumption to be wrong. I think the "this._dialog.popup();" in the JS should be opening a dialog window when I click the menuItem on the Zimlet. It is not doing it however.

Back to the drawing board...

Matt

[Chewie71]

Found the problem...

It seems there is a maximum number of Zimlets you can have loaded? I created a new COS and disabled every Zimlet on the COS Zimlets tab. Then moved my test account into that COS. Only the half dozen or so Zimlets I have in /opt/zimbra/jetty/webapps/service/zimlet/_dev load in the panel now.

Now the right click <mailItem> actions work and the dialog box appears.

So is there some maximum number of Zimlets that are allowed to be loaded in the panel before stuff starts breaking?


What a pain that was to figure out...