Monday, August 1, 2011

Drag And Drop Support In LWUIT

I recently committed support for a drag and drop API in LWUIT to simplify the task of implementing this functionality. LWUIT always allowed dragging and dropping which was a part of our demo for quite a while now, however we didn't have a convenient generic drag and drop API.

Unlike other platforms who tried to create overly generic catch all API's I tried to make things as simple as possible. We always drag a component and always drop it onto another component, if something else is dragged to some other place it must be wrapped in a component, the logic of actually performing the operation indicated by the drop is the responsibility of the person implementing the drop.

There is a minor sample of this in the LWUITDemo whose drag and drop behavior is now implemented using this API. However, the LWUITDemo relies on builtin drop behavior of container specifically designed for this purpose.

To enable dragging a component it must be flagged as draggable using setDraggable(true), to allow dropping the component onto another component you must first enable the drop target with setDropTarget(true) and override some methods (more on that later).

Notice that is a drop target is a container that has children, dropping a component on the child will automatically find the right drop target. You don't have to make "everything" into a drop target.

You can override these methods in the draggable components:
getDragImage - this generates an image preview of the component that will be dragged. This automatically generates a sensible default so you don't need to override it.
drawDraggedImage - this method will be invoked to draw the dragged image at a given location, it might be useful to override it if you want to display some drag related information such an additional icon based on location etc. (e.g. a move/copy icon).

In the drop target you can override the following methods:
draggingOver - returns true is a drop operation at this point is permitted. Otherwise releasing the component will have no effect.
dragEnter/Exit - useful to track and cleanup state related to draging over a specific component.
drop - the logic for dropping/moving the component must be implemented here!


Notice that Container.java has a simple sample drop implementation you can use to get started.

12 comments:

  1. Hi

    I would like to build an touch application that will enable me to draw something on the screen using my finger. Is this possible with use of LWUIT?

    Thanks,
    Jacek

    ReplyDelete
  2. Derive component and override pointerDragged/paint appropriately

    ReplyDelete
  3. I dpn't understand where is the pallete provided with this release. I have attached all the jar file in project properties. But couldn't find the Lwuit Pallete.

    Rajan

    ReplyDelete
  4. I don't understand what you are looking for? Are you looking for the GUI builder palette?
    What do you mean by attaching JAR's?

    ReplyDelete
  5. Yes obiviously i am looking GUI Builder Pallete

    ReplyDelete
  6. The reason I asked is since the resource editor requires no jar attachments to anything in order to use its palette.
    Did you follow the guide at the top of this site for running the latest version or did you use the version from 1.5?
    Keep in mind LWUIT 1.4 doesn't have that feature.

    ReplyDelete
  7. Hi Sir. . . .

    i am the very newest in JAVA ME and LWUIT can i create Android applications using JAVA ME and LWUIT
    please tell me......

    Thanks,
    Prakasam

    ReplyDelete
  8. Yes. Thorsten has a guide on the matter and some people wrote in the forum and stack overflow detailing how to use the Android port of LWUIT.
    We will produce something more organized and unified soon.

    ReplyDelete
  9. Hi sir, I want to create only a row of component list that can be in drag, but what is happens now is the entire row of component list will be drag, the question is ,how to make only one row of these components can be drag? is there any solution for this? thanks for helping

    ReplyDelete
  10. I'm sure there is a solution, I just don't understand the problem description.

    ReplyDelete
  11. Hi,

    I want to create a list in a layout which onDrag it will only DRAG the focused row, not the entire list, is there any solution for this? thanks for helping


    Raja

    ReplyDelete
  12. You will need to create a Container with a box layout Y and drag the element within. The list is a singular managed item, you can "fake" the drag behavior but its allot of work.

    ReplyDelete