After Alexander Limi showed me some demo's of the drag and drop upload functionality added in the new beta versions of Firefox 3.6 I just had to try to add it to the Deco UI. The demo's used a fixed area where images can be dropped. In Deco you want to specify exactly where you want the images to be and not an area. To determine where to drop images Deco uses the mousemove event, but this event is not available when the window doesn't have focus (like with dragging images into a browser) so some code needed to be rewritten to use the dragover event.

Another issue was the fact the demo's use the sendAsBinary method of the XMLHttpRequest object. This method only sends the binary data itself and adding other fields like filename is not possible. I fixed this issue by creating a form request in javascript so I can add multiple fields like filename etc. All the sourcecode can be found in the Plone SVN.

This demo shows a Finder window on the left with some pictures taken at the Plone Conference 2009 and the Deco UI on the right with some example text. First a single image is dragged into the browser. The image is put on the dropped location and a black mask and loading icon is added to the image. The image is now being uploaded to the server and once ready the server returns the url and some more properties in a json structure. The correct source url is then applied to the image object.

Multiple files is also supported. Each image will be uploaded to Plone and becomes a sepparate tile. After the images are uploaded the images can be rearanged using the standard drag and drop functionality of Deco.

Sorrento

At the European Plone Symposium in Sorrento (Italy) we organized a Birds of a Feather session about how to improve collections, contentlistings and search. Among the participants were Geir Baekholt, Carsten Senger and our complete team. Laurens organized the BOF session using his Plone UI research document as input.

PLIP's

The outcome of the BOF sessions lead to five PLIP's:

• PLIP 9295 Improved UI for collections
• PLIP 9283 A more lightweight backend for collections
• PLIP 9352 Combination of search results PLIPs (merge of 9271 and 9282)
• PLIP 9327 Unified interface for lists of content
• PLIP 9321 Reimplement the search form with an eye on usability

Carsten took up PLIP 9321 which left us four plips to complete.

Sprint

Since the four PLIPs had a lot of overlap we decided to team up with Jarn and complete them all at once. On thursday morning we had a brainstorm session to determine what we already had and which direction to go. Geir already had a working package for plone.app.contentlisting for PLIP 9327 and we had done some work on the search results PLIP. After the brainstorm session we came up with a design using three packages:

• plone.app.contentlisting to create the unified interface of the content listings
• plone.app.search to contain all the search related functionality
• plone.app.collection to contain the Collection content type

Backend

Ralph, Roel and Geir worked on the backend. They used the :records mechanism of Zope to parse the query string. One query line consists of an index (query.i:records), an operator (query.o:records) and a value (query.v:records or query.v:records:list if it was a multiple input field). This query string was converted to a catalog query to get the actual search results.

Roel, Ralph and Geir working on the backend

User interface

Laurens, Denys and I worked on the user interface. We used the design from the PLIP and created a static HTML prototype to see if the design we came up with actually worked. Once we agreed this was the right way to go, we continued to build the query builder using the code from the backend team.

Laurens, Denys and me working on the UI

Collection type

Once we got the query parser and the query builder done, it was time to glue everything together and store the query on the collection type. We worked throughout the weekend to get everything done just before the plip deadline. Ralph and Roel created the Collection type and Laurens and I finished the query builder and put the query builder into the criterion edit form of the new Collection type.

Finishing the collection type while enjoying the nice view.

Final result

Below is a screenshot of the javascript version of the query builder. The first column shows all the available indexes, the second the operator and the third the value. To keep every rule one line we used pulldown menu's for multi selects. The fourth column has a remove criteria button and finally the fifth column shows the remaining matching items after this rule was applied. This provides instant feedback of the number of results per rule, so when there are no results you can see right away wich rule caused this. Below the criteria you can select the sorting order and below that you can see a live search of the matching elements of your query.

Non javascript fallback

The interface also has a non-javascript fallback which looks almost the same. See image below:

Non-javascript fallback interface

Folder summary

After saving the query you can select view methods for the collection. These methods use the plone.app.contentlisting package build by Geir.

Summary view of the collection

Thanks go out to Jarn for providing the sprint location and we hope the framework team is as excited about the end-result as we are!

This new version contains a lot of fixes, some of the highlights are:

• Upgrade steps and uninstall profile added.
• Definition lists added.
• Upgrade to TinyMCE 3.5.2.
• Improved handling of inserting images (all credits to the balloon sprint team!).

A full list of all the changes can be found in the changelog

Plone 4

This version also adds support for the upcoming Plone 4. This PLIP which proposes TinyMCE to become the default WYSIWYG editor has been approved by the framework team and is ready for review.

I18n

All the control panel messages are also translatable in this version, so anybody who is interested in creating translations please feel free to add them in svn. English and Dutch are already available at this moment.

On Wednesday I gave a talk about the progress we have made so far, showing a prototype of the layout and content editing part. Integration with the Plone UI, Dexterity Content Types and the new rendering process called Blocks was covered as well. A video of the presentation can be found  on Plone.tv and the slides can be found on Slideshare.

On Friday and Saturday Deco was one of the sprint topics. New features were implemented and bugs have been fixed. A complete list of all the work which has been done can be found on Open Plans. If you would like to test Deco you can find the installation instruction the Plone SVN. Feedback about usability and  implementation is very much appreciated. Help implementing Deco is also greatly appreciated, just sent me an e-mail if you want to help out.

For a website we were building we were looking for solution to insert an address within the content of a page. This address needed to be selected from a database so when the address itself changed, it was automatically updated within the content of the webpage. This functionality is often called a placeholder. To be able to build this functionality we had to make a plugin for the wysiwyg editor.

After having a closer look at Kupu we came to the conclusion it is possible to create a plugin for Kupu but, it is really hard to separate your plugin code from the Kupu codebase. The last thing we want is to edit the source of another product since this will most likely create issues when upgrading to a newer version of Kupu. We also had a look at the FCKEditor plugin for Plone but this editor also isn't very plugin friendly.

When examining the TinyMCE codebase we noticed TinyMCE is by itself already fully based on modules. This made it really easy to create a separate TinyMCE plugin in another Plone product. The only problem at the time was that, as stated above, the development of TinyMCE was put on halt. That is why we decided to upgrade the product ourself to the newest version of TinyMCE and Plone. After that we also added a control panel to make it easier to configure the editor.

At the moment we are working on the placeholder product for TinyMCE which should be done this summer.