Drag and Drop UI using GWT with Connectors

[Santosh]

We have a requirement to create a diagram which shows a sequence of
process in circular manner with Connectors. UI should be flexible
enough so that user can drag and drop any process between any of the
other two process in the diagram. Automatically connectors should get
re-arranged with new sequence. All examples what I saw using GWT-DND
are drag and drop components, but no examples with Connector arrows
concepts. We have also heard about SVG and YUI. But I am not sure how
far we can use that within GWT. Do we have any suggestion on what to
choose and how we can design this?

[Joseph Lust]

Checkout gwt-dnd and lib-gwt-svg.

Sincerely,

Joseph

[Rob]

Hi,

-> http://code.google.com/p/oryx-editor/

-> http://code.google.com/p/signavio-core-components/

-> http://www.jgraph.com/mxgraph.html

-> http://www.yworks.com/en/products_yfilesajax_about.html

-> http://www.tomsawyer.com/products/home/index.php

Cheers

Rob

Kiahu.com

[ashwin....@gmail.com]

Santosh,

If you have the privilege (depending on your app) to use html5 and css3 as the min browser requirement, then I would suggest draw the process as as div and style them as circle using border-radius CSS style. 

to draw the connectors, use HTML5 canvas. GWT supports canvas on browsers which are html5, chrome, opera, firefox (3.6 and above) and IE (9 and above). This is the technique yahoo also uses with its pipes project 

You can implement drag and drop using techniques provided for any gwt widget. 

I have implemented connectors in my project. All you have to do is place your widgets using absolute positioning on a panel (call it the editor), draw the connector to a canvas between the widgets and add the canvas to the editor. You will have to update the position of the widgets & respective canvas when you drag any of your process widgets.

Regards

Ashwin

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Santosh]

Sorry for the late reply. Thanks for your inputs. Unfortunately, we do
not have the privilege to use HTML5 and CSS3. As we may also have to
support IE8...

@Rob: I have looked into few of those sites. Mostly it is about
integrating drawing tools into our application. I am not sure, how we
can use it in our applilcation.
First, can we integrate them along with GWT. Second, programmatically
draw the diagrams, give a Drag and Drop feature for the diagram,
handle connectors..etc.
It would be really great if we have suggestion with this design.

Now, I have looked into lib-gwt-svg API. But, using which we can draw
diagrams. But still, not enough documentation on how to make use of
api. If anybody has any resources or links which they can share would
be great.


On Aug 11, 11:38 pm, "ashwin.desi...@gmail.com"

<ashwin.desi...@gmail.com> wrote:
> Santosh,
>
> If you have the privilege (depending on your app) to use html5 and css3 as
> the min browser requirement, then I would suggest draw the process as as
> div and style them as circle using border-radius CSS style.
>
> to draw the connectors, use HTML5 canvas. GWT supports canvas on browsers
> which are html5, chrome, opera, firefox (3.6 and above) and IE (9 and
> above). This is the technique yahoo also uses with its pipes project
>
> You can implement drag and drop using techniques provided for any gwt
> widget.
>
> I have implemented connectors in my project. All you have to do is place
> your widgets using absolute positioning on a panel (call it the editor),
> draw the connector to a canvas between the widgets and add the canvas to
> the editor. You will have to update the position of the widgets &
> respective canvas when you drag any of your process widgets.
>
> Regards
> Ashwin
>