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?
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
On Fri, Aug 10, 2012 at 6:03 PM, Santosh <santosh.ku...@darkhorseboa.com>wrote:
> 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?
> --
> 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-web-toolkit@googlegroups.com.
> To unsubscribe from this group, send email to
> google-web-toolkit+unsubscribe@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/google-web-toolkit?hl=en.
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.
> 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
> On Fri, Aug 10, 2012 at 6:03 PM, Santosh <santosh.ku...@darkhorseboa.com>wrote:
> > 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?
> > --
> > 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-web-toolkit@googlegroups.com.
> > To unsubscribe from this group, send email to
> > google-web-toolkit+unsubscribe@googlegroups.com.
> > For more options, visit this group at
> >http://groups.google.com/group/google-web-toolkit?hl=en.
