RooJSolutions http://roojs.com/index.php/View.html en http://roojs.com/Roojscom/templates/images/roojs_square_logo_150.png RSS: RooJSolutions - /index.php 150 150 JSON based calendar provider for thunderbird and lightning 2008-10-01 20:15:00 http://roojs.com/index.php/View/174/JSON_based_calendar_provider_for_thunderbird_and_lightning.html <a href="http://roojs.com/index.php/View.html">Article originally from rooJSolutions blog</a><br/> For this weeks hack, I've been looking at <a href="http://www.mozilla.org/projects/calendar/lightning/">Lightning,</a> the calendaring extension to thunderbird. <br /><br />What brought this on was we where discussing a bug tracker for the Anti-spam / Mail management software, and none of the software that i've seen for this either is elegantly written, easy to set up or simple to use. <br /><br />To me the 'ideal' way to handle this, having played around with Lightning, is to have a calender provider (that's shared) and have all the key people able to drag a 'requirement email' into the TODO task list, or similar. Where people can submit bug's by signing up to a calendar/todo list and just add it as a task.<br /><br />Obviously not suited to all types of projects..., but I think you get the jist that using lightning to edit these bugs would be pretty compelling due to it's integration with your primary mailer.<br /><br /><h3>State of the current providers.</h3>So to see if this could work, I had a look at the current list of network providers available. ICAL, CalDav, Sun's Protocol, and there's a google provider.<br /><br />On the face of things it looks like that's quite a choice, but if you look closely at all of these, one thing stands out like a sore thumb. The backend server to deal with all these protocols is an absolute nightmare to create, or modify to suit other types of applications (think of a shipping managment application that we could integrate order delivery information with the calendar, so you could add notes about the delivery etc. via the calendar item.).<br /><br />Part of the core problem with the existing protocols can be summed up with one dirty word &quot;XML&quot;! - CalDav and google being the worst of this. If you look at the problem today and tried to solve it, the first thing that would come to mind would be JSON/REST. It's the perfect set of protocols to ensure that backend server would be trivial to write, and the front end would not be such a mess. (especially as Lightning's written mostly in Javascript anyway).<br /><br /><h3>Hacking a provider</h3>There are really only two examples I could find of calendar providers for lightning. Google is one, and there is also an extension called hcalendar - that pulls calendar's in from web pages (as far as I could see). The second of these two proved to be the goldmine for creating a JSON calendar provider extension.<br /><br />hcalendar provides most of the code needed to implement any kind of provider, it only implements the getItems() method. However it has stub's for all the others. <br /><br />You can browse through the code here, <a href="http://www.akbkhome.com/svn/JsonCalProvider/js/calJSONCalendar.js">calJSONCalendar.js</a>, I did run into a few issues with Async requests though, as It looks like you need to implement a request object (as per caldav and google calendar), otherwise you run into problems with transactions on updating. So as a simple workaround, the extension uses sync requests for updates and adding.<br /><br /><h3>How it works</h3><br /><h4>getItems() - get a list of calender or todo items.</h4>is a <span style="font-weight: bold;">GET</span> request, with params<br />- aCount = max number of resulsts<br />- aRangeStart = date start ISO format<br />- aRangeEnd = date end ISO format<br />- caltype = calendar data type (C = calendar, T= todo)<br />- filter (not yet)<br />eg.<br />http://your_calendar?caltype=C&amp;aCount=0&amp;aRangeStart=2008-01-01....<br /><br />this returns a json array something like this.<br /><pre>[<br /> {<br /> id: 1, // your data base id (ignored)<br /> uid: &quot;XXXXXXXXXXXXXXXXX&quot;,<br /> dtstart: &quot;2008-10-10 12:12:12&quot;,<br /> dtend: &quot;2008-10-10 12:12:12&quot;,<br /> caltype : 'C',<br /> ical : &quot; &lt;&lt;&lt; Calender data in ical format &gt;&gt;&quot; <br /> <br /> // all the other data is optional (if you do not have a ical record, it can build <br /> // most of the event data from properties<br /><br /> privacy: &quot;default&quot;;<br /> created: &quot;2008.....&quot;,<br /> last_modified: &quot;2008.....&quot;<br /> }, <br /> ......<br />]<br /></pre><h4>modifyItem() / addItem()<br /></h4>is a <span style="font-weight: bold;">POST</span> request, with the params pretty much the same as the json data above (with the ical record in the ical POST entry) - the resulting entry is returned by the call in the same format as above. At present ical is the main thing that is posted, however I think it needs to send quite a bit of the generic information.<br /> <br /><h4>deleteItem()</h4>is a <span style="font-weight: bold;">POST</span> request, with the property _delete_={uid}, <br /> (currently we ignore the response) - it should probably be <br />{ success: true|false, msgid : 1, msg: &quot;A string error&quot; }<br /><br />the body of this message contains a example server implementation for the extension. - you can download the extension here: <a href="http://devel.akbkhome.com/jsoncalendar-0.2.xpi">jsoncalendar-0.2.xpi</a>, (REQUIRES LIGHTNING 0.9!!) or have a look at my svn repo <a href="http://www.akbkhome.com/svn/JsonCalProvider/">JsonCalendarProvider</a> for how to develop test it.<br /><br />Read on for the SERVER BACKEND CODE...<br /> local caching and JSON bugs. 2006-12-22 13:00:00 http://roojs.com/index.php/View/127/local_caching_and_JSON_bugs.html <a href="http://roojs.com/index.php/View.html">Article originally from rooJSolutions blog</a><br/> One of the projects I'm working on is using XUL to render data, we started testing a few weeks ago, and discovered that the load times/ response where quite bad. It was pulling too much data from the server, and the application would either hang (if we didn't use asyncrounous xmlhttprequest calls), or we would have to show a slidy to indicate that data was being loaded. Neither where ideal.<br /><br />In discussing the application with the client, they also requested that the application remember some of the states (eg. the data filters). Normally you might consider cookies or having a preferences database, but I remember seeing something about firefox2 having localized session storage.<br /><br />You can read the <a href="http://www.whatwg.org/specs/web-apps/current-work/#storage">session storage specification here</a>, It allows you to store strings totalling upto about 5Mb on the client side. However, the reality is that you really need to be able to store javascript objects or similar in it. So since we where using JSON to transfer data, I thought 'how about serializing the data back into JSON, and storing it in the session.'<br /><br />I started off by using the <a href="http://www.json.org/json.js">JSON js</a> code, <span style="font-weight: bold;">however this code is unusable for 1 major reason</span> - it adds a method to array's/objects, resulting in the fact that foreach() always returns an additional member. (breaking almost all the existing javascript code!) - I also ran into problems with recursion in firefox (but I think thats due to me forgetting to add the String.prototype method.)<br /><br />So in the extended entry is a quick kludge (without full unicode support) for converting items into JSON in javascript, so that something like this works:<br /><br /><pre>sessionStorage.setItem(&quot;mycache_somedata&quot;, JSON_toString(mydata));</pre><p>... and onloading..</p><pre>var mydata = new Array();<br />if (sessionStorage.getItem(&quot;mycache_somedata&quot;)) {<br /> eval(&quot;mydata = &quot; + sessionStorage.getItem(&quot;mycache_somedata&quot;).value);<br />}<br /></pre> SVG/XUL Outlook style Calendar 2006-02-04 09:23:56 http://roojs.com/index.php/View/112/SVGXUL_Outlook_style_Calendar.html <a href="http://roojs.com/index.php/View.html">Article originally from rooJSolutions blog</a><br/> A few weeks ago, a friend sent me a link to <a href="http://www.zimbra.com/">zimbra</a> , While I quite liked the look of their <a href="http://www.zimbra.com/products/ss_calendar.html">calendar</a>, i was not too keen on the java stuff. The <a href="http://php5.akbkhome.com:81/cal/FlexyCal/templates/week.xul">XUL based Calendar</a> I wrote a while back, while getting heavily used, (I basically track all my work in it). had not been developed any further, mainly due to the Proof of concept style hack that the code had ended up as.<br /><br />And as I had recently upgraded most of my browsers to Firefox 1.5, and almost got my name in the mozilla hall of fame for fixing a tiny bug in it;). I was a little intreged by the SVG (and canvas) that comes built into it.<br /><br /><img border="0" align="right" alt="SVG Calendaer" src="http://www.akbkhome.com/FlexyWiki/templates/images/calshot.jpg" />So in a quiet afternoon, I sat down and started hacking away to see how easy it would be to write a calendar application using these new graphic libraries.<br /><br /><span style="font-weight: bold;">You have to click on more, for a detailed breakdown of what is involved in interactive SVG...</span><br /> Why XUL will win.. 2005-08-26 23:33:47 http://roojs.com/index.php/View/102/Why_XUL_will_win.html <a href="http://roojs.com/index.php/View.html">Article originally from rooJSolutions blog</a><br/> Remote XUL Html Editor 2005-08-09 11:17:00 http://roojs.com/index.php/View/99/Remote_XUL_Html_Editor.html <a href="http://roojs.com/index.php/View.html">Article originally from rooJSolutions blog</a><br/> After the <a href="http://www.akbkhome.com/blog.php/View/98/XUL_and_HTML_editors.html">last post</a>, I finally managed to get to the point where the simple XUL HTML remote editor works. <br /><br /><ul><li>Source code is available via Subversion<br /><a href="http://www.akbkhome.com/svn/XUL/HtmlEdit">http://www.akbkhome.com/svn/XUL/HtmlEdit</a></li><li><a href="http://newweb.akbkhome.com/svn.php?path=XUL/HtmlEdit">Browse the source</a></li><li><a href="http://devel.akbkhome.com/HtmlEdit/test.xul">Try it out.</a></li></ul>Usage is pretty simple:<br /><ul><li>Install the files on your server</li><li>Add the css header<br /><pre><span style="color: rgb(0, 74, 67);">&lt;?</span><span style="color: rgb(0, 74, 67);">xml-stylesheet</span><span style="color: rgb(0, 74, 67);"> </span><span style="color: rgb(0, 74, 67);">href</span><span style="color: rgb(128, 128, 48);">=</span><span style="color: rgb(0, 0, 230);">&quot;</span><span style="color: rgb(64, 1, 90);">HtmlEdit.css</span><span style="color: rgb(0, 0, 230);">&quot;</span><span style="color: rgb(0, 74, 67);"> </span><span style="color: rgb(0, 74, 67);">type</span><span style="color: rgb(128, 128, 48);">=</span><span style="color: rgb(0, 0, 230);">&quot;</span><span style="color: rgb(0, 0, 230);">text/css</span><span style="color: rgb(0, 0, 230);">&quot;</span><span style="color: rgb(0, 74, 67);">?&gt;</span></pre><br /></li><li>use the htmledit tag, it uses attributes<br />eg.<br /><br /><pre> <span style="color: rgb(166, 87, 0);">&lt;</span><span style="color: rgb(95, 80, 53);">htmledit</span> <span style="color: rgb(39, 71, 150);">value</span><span style="color: rgb(128, 128, 48);">=</span><span style="color: rgb(0, 0, 230);">&quot;</span><span style="color: rgb(0, 0, 230);">hello world</span><span style="color: rgb(0, 0, 230);">&quot;</span> <span style="color: rgb(166, 87, 0);">/&gt;</span> <span style="font-family: verdana,sans-serif;"></span></pre><br /></li><ul><li>editorheight=&quot;400&quot; (self explanitary)</li><li>editorwidht=&quot;700&quot; (self explanitary)</li><li>imagepopup=&quot;name&quot; where name is the id of a popup <br /></li><li>linkpopup=&quot;name&quot; where name is the id of a popup</li><li>value=&quot;the text to go in the editor&quot;<br /></li></ul><li>For the image popup:</li><ul><li>use imageurl=&quot;xxx&quot; on the menuitem for the real image url to insert in the editor</li></ul><li>For the link popup:</li><ul><li>use url=&quot;xxx&quot; on the menuitem for the url to insert into the editor</li><li>the url &quot;pick:&quot; just uses a javascript prompt to ask you for the url.</li></ul></ul> XUL and HTML editors 2005-08-04 10:11:01 http://roojs.com/index.php/View/98/XUL_and_HTML_editors.html <a href="http://roojs.com/index.php/View.html">Article originally from rooJSolutions blog</a><br/> As part of the shop design, I've specified a HTML editor, similar to fckeditor or htmlarea to edit the product descriptions and information pages. However, this editor has to be embedded into a XUL interface....<br /><br />My main website (not the blog bit), has an &quot;edit this page&quot; link at the bottom, which already uses a HTML editor inside a XUL interface, but the code behind it more a proof of concept, rather than a production toolkit. So for the shop I decided to look at cleaning this up and making it modular..<br /><br />XUL has a great mechanism for adding widgets like this, with a single stylesheet include, and an XML file you can create your own custom widgets.<br /><br />In the XUL interface file (your main page that you want to use the widget on), you add this line<br /><pre><span style="color: rgb(0, 74, 67);">&lt;?</span><span style="color: rgb(0, 74, 67);">xml-stylesheet</span><span style="color: rgb(0, 74, 67);"> </span><span style="color: rgb(0, 74, 67);">href</span><span style="color: rgb(128, 128, 48);">=</span><span style="color: rgb(0, 0, 230);">&quot;</span><span style="color: rgb(64, 1, 90);">HtmlEdit.css</span><span style="color: rgb(0, 0, 230);">&quot;</span><span style="color: rgb(0, 74, 67);"> </span><span style="color: rgb(0, 74, 67);">type</span><span style="color: rgb(128, 128, 48);">=</span><span style="color: rgb(0, 0, 230);">&quot;</span><span style="color: rgb(0, 0, 230);">text/css</span><span style="color: rgb(0, 0, 230);">&quot;</span><span style="color: rgb(0, 74, 67);">?&gt;</span></pre>(where HtmlEdit.css is our css file for our widget.)<br /><br />Then somewhere in the body, you add<br /><pre> <span style="color: rgb(166, 87, 0);">&lt;</span><span style="color: rgb(95, 80, 53);">htmledit</span> <span style="color: rgb(39, 71, 150);">value</span><span style="color: rgb(128, 128, 48);">=</span><span style="color: rgb(0, 0, 230);">&quot;</span><span style="color: rgb(0, 0, 230);">hello world</span><span style="color: rgb(0, 0, 230);">&quot;</span> <span style="color: rgb(166, 87, 0);">/&gt;</span> </pre>(telling it to use your new custom widget.)<br /><br />The CSS file is very simple..<br /><pre>htmledit <br /><span style="color: rgb(128, 0, 128);">{</span><br /> <span style="color: rgb(0, 132, 132);">-moz-binding</span><span style="color: rgb(128, 128, 48);">:</span> <span style="color: rgb(64, 0, 0);">url</span><span style="color: rgb(128, 128, 48);">(</span><span style="color: rgb(0, 0, 230);">&quot;</span><span style="color: rgb(64, 1, 90);">HtmlEdit.xml</span><span style="color: rgb(128, 0, 0); font-weight: bold;">#</span><span style="color: rgb(125, 0, 69);">htmledit</span><span style="color: rgb(0, 0, 230);">&quot;</span><span style="color: rgb(128, 128, 48);">)</span><span style="color: rgb(128, 0, 128);">;</span><br /> <span style="color: rgb(187, 121, 119); font-weight: bold;">max-height</span><span style="color: rgb(128, 128, 48);">:</span> <span style="color: rgb(0, 140, 0);">200</span><span style="color: rgb(0, 102, 0);">px</span><span style="color: rgb(128, 0, 128);">;</span><br /><span style="color: rgb(128, 0, 128);">}</span><br /></pre>basically using the -moz-binding attribute to map the widget to an xml file (the #htmledit, pointing to a specific binding) - as the xml file could contain multiple widget binding (although I wouldnt recommend it)<br /><br />Then your HtmlEdit.xml contains the &lt;bindings&gt; with &lt;content&gt; - the xul elements that make up your widget, and &lt;implementation&gt; with all the properties and methods that your widget has (with javascript for the methods) - if you use mozilla's lxr and search for &quot;&lt;bindings&quot;, it's easy to find examples.<br /><br />Now all that stuff is quite simple ;) - what I had wanted was to turn my html editor into one of these.. Not quite so simple.. mozilla's design kind of make that less than easy..<br /><ul><li>Mozilla has an &lt;editor&gt; tag, this however does not work on remote xul.. - so we have to use html:iframe, and set <br /><pre>{iframeobject}.contentWindow.document.designMode = &quot;on&quot;;</pre></li><li>html:iframe's dont appear to be useable inside of &lt;bindings&gt;</li><li>even if you use the binding to append the html:iframe after it'self using DOM, you can not set the designMode, as the privaliges appear to prevent bindings doing stuff like that to the containing page.</li></ul>In the end I suspect some kind of mix between a &lt;script src=&quot;mylib.js&quot;&gt; and using the bindings to store the editor bar may be the best solution.. - But let's see how far I get ;)<br /><br /><span style="font-weight: bold;">[update] </span>It turns out that it is feasible to put it all into a binding! - after a little hint on irc.mozilla.org#xul, I was able to create a HTMLIframeElement using importNode, and DomParser.<br /><br />