Prototype HTML5 DnD in an HTML/WebEngine module

1. User Story

1. 1. Dropzones

When I drag files from my desktop into Nuxeo browser windows several zones of the page get highlighted to indicate where I can dop the files.
These different zones will allow me to import files into Nuxeo in different ways :

• Drop in the Clipboard :
  => create Documents in my personnal workspaces and attache them to the Clipboard or the working list

• Drop in the Document Summary view on attachements
  => attach the files to the current Document (replace or append)

• Drop in the Content View :
  => create Documents in the current container

1. 1. Import actions

In some cases, I can not drop all the files as a single action :

• because the files are at several places on my local file-system

• because I don't know how to use a mouse and multi-selection

So, I don't want to finish the import operation as soon as the drop is terminated.
=> I can drop several set of files and when I am finished I have to click on "continue" to go ahead with the rest of the process.

For some of the DropZones, there may be several possible import actions :

• Create via FileManager

• Create only File Documents

• Unzip and import the contained tree ? (this could be handled via FileManager)

• Customized import process (import Digital Assets, import Invoices, import mails)

1. 1. Import Forms

In order to make the import as powerfull as possible, I want to be able to qualify the import set.
So, I have a form that allows me to do the qualification according to the import action I use :

• Enter the name of the container that will be created to store my files

• Choose the Document Type that will be used to import my files

• Set some meta-data that must be applied to all resulting documents

1. 1. Import process

All this means that for me, as a user :

1 - I drop 1 or several sets of files in teh drop zone of my choice
(I click on continue)

2 - I select the import action to execute
(I click on import)

3 - I enter some qualification information and the form
(I click on finish)

4 - my page is refreshed

To make the global process quicker :

Step 2 is skipped when only one action available

Step 3 is skipped when no user input is required

Ideally, I also want a fast mode (when I maintain Alt key when droping) :
-> Direct import : only one drop + use the default action that require no user input

1. Design notes

1. 1. UI

A big part of the UI logic will be managed via Javascript.
We should package everything as a JQuery plugin so that usage is easy.

The integration inpact on the HTML pages should be simple.
The HTML will only have to contains some marker to be able to select all the blocks that should become DropZones.
As a start, a simple CSS class can be used :

jQuery(".dropzone").nxDropZone(

{ url : "/nuxeo/site/automation/batch/", uploadRateRefreshTime : 500, numConcurrentUploads : 2 }

);

The prototype does all UI from inside JQuery because it was easier for the tests.
But we need to use a real web templating system :

• because it's easier to maintain

• because we need labels to be translated

For technical elements (like progress bars, list of files ...), we can keep pure JS, but for the structures and labels we need to switch to a template system.

The natural choice would be a WebEngine module.
On the other hand, JSF would have some advantages, like the Layout/Widget system integration that could be useful for the forms.
Off course the JSF choice has some drawbacks :

• rendering is significantly slower

• rendering goes throught XML filter and HTML code is automatically inserted (head, scripts from the render kits ...)

1. 1. Import operation

Uploaded files are stored temporarly on the server side and associated with a batchId.
Storage is handled via temporary files.
=> BlobBatchManager service

To run the actual import process we use an Operation Chain that will be responsible for generating Documents from files and user parameters.

• • TO BE CONTINUED **