Using a KSS plugin for Drag-and-Drop ==================================== :Author: http://jladage.myopenid.com/ This howto extends the example described in `Adding AJAX to Grok with KSS `_ Before you can use the KSS commands provided by the plugin a number of things have to be setup: * Define a dependency on the plugin in `setup.py`, * Rerun `buildout`. Edit the Configuration file --------------------------- Add your plugin to `setup.py`. We add `kss.plugin.yuidnd`: .. code-block:: python ... install_requires=['setuptools', 'grok', 'megrok.kss', 'kss.plugin.yuidnd', # <--- ], ... Now run `buildout` to make it include the extra package:: bin/buildout Drag-and-Drop example --------------------- In the `` section of `index.pt`, add the following list of ` These scripts are the parts of the Yahoo library used by the plugin; without them, KSS will crash. Next, add two lists of items to the bottom of `index.pt`: .. code-block:: html

You can drag and drop items on the client.

Item A
Item B
Item C
Item D

Item 1
Item 2
Item 3
Item 4

In the `first how-to `_ the `app.kss` file was added to the package (in src/ksssample). In there, add the following KSS rules. .. code-block:: css li:yuidnd-dragstart { evt-yuidnd-dragstart-action: delete; } ul:yuidnd-drop { evt-yuidnd-drop-action: order; } The first rule binds a `dragstart` event on all `

`'s. The second rule sets up a `drop` event on a container: All children of this container will be dynamically reordered when dropping an element. After refreshing the page, start dragging elements from the first to the second list or even reorder elements within one list. This is all happening on the client side only at this moment, so it's not that useful. To notify the server when something is successfully dragged, add the following KSS rule. .. code-block:: css li:yuidnd-dragsuccess { action-server: drop url('@@index/@@drop'); drop-container: pass(dropContainerId); drop-index: pass(dropIndex); } The `dragsuccess` event triggers an `action-server` which passes two arguments. * container - The HTML id of the container in which the element is dropped. * index - The place where the element is dropped in the container. In the `app.py`, add a `drop` method to the ``AppKSS`` class defined there in order to process the `dragsuccess` event. The complete class should afterwards look like this (the ``welcome`` method is not necessary for this example): .. code-block:: python from megrok.kss import KSS ... class AppKSS(KSS): grok.view(Index) def welcome(self): core = self.getCommandSet('core') core.replaceHTML('#click-me', '

ME GROK KISSED !

') def drop(self, container, index): """This method gets called from kss and will display a message""" core = self.getCommandSet('core') core.replaceInnerHTML( '#message', '

You dropped something in %s at %s !

' % (container, index)) The final step is to add a placeholder `

` to the bottom of the `index.pt` so the `drop` method can replace it's contents: .. code-block:: html

Now restart Zope, because a new method has been added to the app.py. After refreshing the page, drag-and-drop an element and notice the message that is displayed. Getting rid of ``++resource++`` links using hurry.yui ----------------------------------------------------- Instead of adding all the ``++resource++`` links in your page template manually, you can use ``hurry.yui`` to let that files be included more programmatically. To do this you must perform the following additional steps: 1) Edit ``setup.py`` to require also ``hurry.yui`` and ``hurry.zoperesource``: .. code-block:: python ... install_requires=['setuptools', 'grok', ... 'megrok.kss', 'kss.plugin.yuidnd', 'hurry.zoperesource', # <---- 'hurry.yui', # <---- ], ... .. Rerun ``buildout`` afterwards:: $ ./bin/buildout which will add these new eggs to your runtime environment. ``hurry.zoperesource`` is needed to register the resources (JavaScript files) provided by ``hurry.yui`` automatically with Zope on startup. So, while ``hurry.yui`` brings in all the JavaScript files and their dependencies, ``hurry.zoperesource`` makes them known to the Zope publishing machinery. 2) Edit ``app.py`` and change the ``Index`` view to look like this: .. code-block:: python # app.py from hurry import yui ... class Index(grok.View): def update(self): yui.animation.need() yui.dragdrop.need() .. This will take care, that upon request for the ``Index`` view the appropriate JavaScript files for YUI drag-and-drop functionality are included in the page header. 3) Remove the ``