Need guidance for developing zimlets

[jiggy]

Hi Eric.Thanks for a elaborate reply.

But still i am not clear about somethings in you reply as mentioned below

If you are just filling out a form and not interacting with the rest of zimbra, you may want to just use zimbra as a wrapper. Create your webform using .jsp, serve it up, create a canvas window and pull it in. Then when you submit the form have it talk to the server that will host the application.

Queries :

1) not interacting with the rest of zimbra --- what kind of interaction you are talking about??

2) Create your webform using .jsp, serve it up, create a canvas window and pull it in. --- I know how to build forms in jsp,but pulling it in canvas ... i am not getting that.

Does it mean that if we call the jsp form using the below snippet of code,the form will get displayed in the canvas window i have specified as below...

<contentObject>
	<canvas type="window" width="300" height="600"/>
	<onClick>
		<actionUrl target="http://www.myserver.org/tasks/view/" >
	                <param name="id">${src.$1}</param>
		</actionUrl>
	</onClick>
</contentObject>

If you can provide a sample snippet for the same then it would be very helpful.

For your hurdle ,if you are not talking about the canvas element of the zimlet definition file ,and need to do tab ordering then here is what i have tried out and it is running fine.

function Com_Abc_Xyz() {
	Com_Abc_Xyz._instance = this;
}

Com_Abc_Xyz.getInstance = function () {
	return Com_Abc_Xyz._instance;
}
Com_Abc_Xyz.prototype = new ZmZimletBase;
Com_Abc_Xyz.prototype.constructor = Com_Abc_Xyz;

Com_Abc_Xyz.prototype.singleClicked =
function () {
	this.showTabForm();
}

Com_Abc_Xyz.prototype.showTabForm = 
function () {
	var view = new DwtComposite(this._appCtxt.getShell());	
	//
	this.tabView = new DwtTabView(view);
	//This will call your actual form building javascript
	this.myForm = new FormDisplay(this.tabView,this._appCtxt,this);
	view.setSize("550px", "400px");
	this.tabView.setSize("550px", "400px");	
	this.myForm.setSize("550px", "400px");	
	
	this.tabkeys = [];
	//This will push your tab options in the tab view.I have just added one if you want you can add it in the similar way as done below.
	this.tabkeys.push(this.tabView.addTab("Form", this.myForm));
	var canvas = new DisplayForm(this._appCtxt.getShell(),"Form Title",view);
	canvas.popup();
	
}

function DisplayForm(parent,title, view) {
	if (arguments.length == 0) return;
	DwtDialog.call(this, parent, null, title, [DwtDialog.CANCEL_BUTTON ], null);
	if (!view) {
		this.setContent(this._contentHtml());
	} else {
		this.setView(view);
	}

	this._appCtxt = this.shell.getData(ZmAppCtxt.LABEL);
	this._msgDialog = this._appCtxt.getMsgDialog();
		
};

DisplayForm.prototype = new ZmDialog;
DisplayForm.prototype.constructor = DisplayForm

;

Awaiting a reply soon.

Thanks.

[Ericx]

This may help.
When I mean not interacting with Zimbra - where are you going to store the responses. I did not want to mess with the zimbra server so I have another LAMP server where all the form data is being stored. The only thing on the zimbra server is Zimbra with my Zimlet. The zimlet passes everything off to a php file that grabs all the post info and writes it to the database. I did not include the php code here, but is pretty simple

var $email_id = $_Post['email_id']; for each post field
//then makes a mysql connection and writes the data to the database.

So nothing is really happening on the zimbra server, but serving up a form.

This would be your
com_zimbra_dotproject.xml file in your zimlet. There are no forms in it or anything. (I've cleaned up this file from my working zimlet, there are other things in my original, but this will work for the topic at hand.)

<zimlet name="com_zimbra_dotproject" version="2.5" description="dotProject" xmlns:html="http://www.w3.org/1999/xhtml">
  <include>com_zimbra_dotproject.js</include>
  <includeCSS>dotproject.css</includeCSS>
	<handlerObject>Com_zimbra_Dotproject</handlerObject>
	<zimletPanelItem label="DotProject" icon="DotProjectIcon">
		<toolTipText>Drag an email to add its data to a dotProject project</toolTipText>
		<dragSource type="ZmMailMsg" />
</zimlet>

Notice there no froms or anything in the code above. Just what you need to start a zimlet and only one dragSource and that is a message not a conversation.

But I'm using include to pull in the com_zimbra_dotproject.js into the zimlet.

Over half of the code below is creating variables to stuff the info in. There is a function to work with the email address array.

function Com_Zimbra_Dotproject () {
}

/// Zimlet handler objects must inherit from
/// ZmZimletBase.  The 2 lines below achieve this.
Com_Zimbra_Dotproject.prototype = new ZmZimletBase();
Com_Zimbra_Dotproject.prototype.constructor = Com_Zimbra_Dotproject;

Com_Zimbra_Dotproject.prototype.init = function() {
  
  
  this.HANDLER = this.getConfig("handler");
  //input id's in our form
	this.EMAIL_ID = "email_id";
  this.PROJECT_ID = "email_project_short";
  this.SUBJECT_ID = "email_subject";
  this.EMAILS_ID = "email_zimbra_id";
  this.BODY_ID = "email_body";
	this.DATE_ID = "email_dtime";
	this.FROM_ID = "email_from";
	this.TO_ID = "email_to";
	this.CC_ID = "email_cc";
	this.BCC_ID = "email_bcc";
	this.ATTACHMENTS_ID = "email_has_attachments";
	this.DEBUG_ID = "debug_id"; 
	this.DROPPED_BI  = "email_dropped_by";

/* 
	 Section should match the schema in dotproject email module.
	
*/
	
	//this.email_id // this will be assigned by dotproject at time of post.
	this.email_zimbra_id = ""; 
	this.email_from = "";
	this.email_to ="";
	this.email_cc ="";
	this.email_bcc ="";
	this.email_dtime =""; // this is the time the email was either sent or recieved
	this.email_subject="";
	this.email_has_attachments=""; // this should be the number of attachments
	this.email_attachment="";
	this.email_body =""; 
	this.email_project_short = ""; // user input
	this.email_task_id=""; // user input form field
	this.email_internal_note ="";
	this.email_dropped_by="";
	this.zm_debug = "";
}
Com_Zimbra_Dotproject.formId = "dpForm";

/// Called by the Zimbra framework upon an accepted drag'n'drop
// Currently only ZmMsg is accepted due to the differences in ZmConv and ZmMsg.
// This is due to the drag and drop error that says everything is ZmConv.
// This is a problem in Zimbra 4.5.1 code.
// an if statement will we be need to do both ZmConv and ZmMsg.
// ZmConv has participants, subject, body, date, etc.
// ZmMsg has from, to, cc, date, subject, etc
// ZmConv should pass getHotMsg.id to msg, msg gets the needed data.
Com_Zimbra_Dotproject.prototype.doDrop = function(obj) {
	// set form vars, before showing the user the form.
	
	this.email_zimbra_id = obj.id;
	this.email_from = obj.from[0].address;
	this.email_to = this.getEmails(obj.to);
	this.email_cc = this.getEmails(obj.cc);
	
	//This date conversion could be a seperate class, but time is the enemy
	//Could not get time formatting to work as one string the MM and mm were stepping on each other 
	//I split them up into date and time.
	var formatter_date =new AjxDateFormat("yyyy-MM-dd");
	var formater_time = new AjxDateFormat("HH:mm:SS");
	var pretty_date = formatter_date.format(new Date(obj.date));
	var pretty_time = formater_time.format(new Date(obj.date));
       

        //back to stuffing data int vars for the form
        this.email_dtime = pretty_date + " " + pretty_time;
	this.email_subject = obj.subject;
	this.email_has_attachments = obj.attachment;
	this.email_body = obj.body;
	
  // Create our Canvas in zimbra, pull in the from, and listen for the ok event
  var view = new DwtComposite(this.getShell());
  view.setSize("650px", "475px");
  view.setScrollStyle(Dwt.SCROLL);
  var dialog_args = {
		title : "dotProject email Archive",
		view  : view
	};
	var dlg = this._createDialog(dialog_args);
  var el = view.getHtmlElement();
  this.htmlDiv = document.createElement("div");
  this.htmlDiv.innerHTML = this._createFormHtml();
  el.appendChild(this.htmlDiv);
  this.dpForm = document.getElementById("dp_form");
	
	dlg.popup();
	dlg.setButtonListener(DwtDialog.OK_BUTTON,
      new AjxListener(this, function() {
	     window.open('','about:blank','new_popup','width=600,height=600,resizable=1');
	      this.dpForm.submit();
	     
	      dlg.popdown();
	     
		
		// sometimes the data does not clear after the window is closed 
               //This attempts to clear some of the vars, so the next email will will start fresh
                obj.id = '';
		obj.body='';
		obj.to = '';
		obj.from = '';
		obj.cc = '';
		 dlg.dispose();	
				
      }));
}
/// "Borrowed" from sforce
Com_Zimbra_Dotproject.prototype.getEmails = function(note) {
  var emails = "";
  function addEmails(a) {
      if (a) {
          if (typeof a == "string") {
            if (emails.length > 0)
              emails += ";"
            emails += a;
          } else if (a instanceof Array) {
              for (var i = 0; i < a.length; ++i) {
                addEmails(a[i].address);
              }
          }
      }
  }
  ;
  if(note._addrs && note._addrs.length > 0) {
      for(var i=1; i < note._addrs.length; i++) {
          addEmails(note._addrs[i]._array);
      }
  } else {
			addEmails(note);
  }
	
  return emails;
}

Com_Zimbra_Dotproject.prototype._createFormHtml = function() {
    var html = new Array();
    var i = 0;
		
    // Outside table
		html[i++] = this.email_dropped_by + "<br/>" + this.email_zimbra_id;
    html[i++] = "<form method=\"POST\" id=\"dp_form\" action=\"" + this.HANDLER  + "\" TARGET=\"new_popup\">";
		html[i++] = "<input type=\"hidden\" name=\"email_external_id\" id=\""+ this.EMAIL_ID +"\" value=\"" +  this.email_zimbra_id + "\" />";
    html[i++] = "<input type=\"hidden\" name=\"email_has_attachments\" id=\""+this.ATTACHMENTS_ID +"\" value=\"" +  this.email_has_attachments + "\" />";
		html[i++] = "<table border=0 width=600 cellspacing=10><tr><td>";
		html[i++] = "<tr><td align=\"right\" width=\"120\">Project #: </td><td><input type=\"text\" name=\"email_project_short\" id=\"email_project_short\" /></td></tr>";
		html[i++] = "<tr><td align=\"right\" width=\"120\">Task #: </td><td><input type=\"text\" name=\"email_task_short\" id=\"email_task_short\"  /></td></tr>";
    html[i++] = "<tr><td align=\"right\" width=\"120\">Subject: </td><td><input type=\"text\" name=\"email_subject\"  id=\""+ this.SUBJECT_ID + "\" value=\"" + this.email_subject + "\" size=\"80\"  /></td></tr>";
		html[i++] = "<tr><td align=\"right\" width=\"120\">Date: </td><td><input type=\"text\" name=\"email_dtime\"  id=\"" + this.DATE_ID + "\" value=\"" + this.email_dtime + "\" size=\"40\"  /></td></tr>";
    html[i++] = "<tr><td align=\"right\" width=\"120\">From: </td><td><input type=\"text\" name=\"email_from\"  id=\"" + this.FROM_ID + "\" value=\"" + this.email_from + "\" size=\"85\" /></td></tr>";
    html[i++] =  "<tr><td align=\"right\" width=\"120\">To: </td><td><input type=\"text\" name=\"email_to\"  id=\"" + this.EMAILS_ID + "\" value=\"" + this.email_to + "\" size=\"80\" /></td></tr>";
		html[i++] =  "<tr><td align=\"right\" width=\"120\">CC: </td><td><input type=\"text\" name=\"email_cc\"  id=\"" + this.EMAILS_ID + "\" value=\"" + this.email_cc + "\" size=\"80\" /></td></tr>";
	  html[i++] = "<tr><td colspan=2>Internal Note: <textarea name=\"email_internal_note\"  id=\"email_internal_note\" cols=\"60\" rows=\"2\" >"+ "</textarea></td></tr>";
		html[i++] = "<tr><td align=\"right\" width=\"120\">Body: </td><td></td></tr>";
    html[i++] = "<tr><td colspan=2><textarea name=\"email_body\"  id=\"" + this.BODY_ID + "\" cols=70 rows=10>" + this.email_body + "</textarea></td></tr>";
   
		html[i++] = "</table>";
    html[i++] = "</form>";  
    return html.join("");
};

I tried to clean up my original so there maybe missing endquotes or braces

You can see there is a listener on the drag-n-drop that starts a new canvas and runs the hand typed html from. When user clicks ok then opens a new windows and does post. This is a personal choice and not very elegant but my zimlet is still beta quality work.

I've put my form in java, but I have pulled in a page from another source before inside the canvas. I think the wiki-pedia or yahoo maps zimlet does this.

If you did the web form on another server, use something that does what curl does in php ( I don't know the java equivalent) to pull in the from dish it up in the canvas.... Since not all web pages are formatted correctly, I've seen errors using httprequest to pull in web pages. Curl treats the whole page as a string. This is what I mean by using zimbra as a wrapper or a front end. Almost like a terminal server window that you look through.


Thanks for the tab info, I'll try it tonight.

[jiggy]

Thanks Eric.Thanks a lot for your cooperation.