I have a button with an onClick event handler. When the event is
fired, it creates an HTML widget, with its own onClick event handler,
and adds the HTML element to the diagram panel where other widgets and
connectors are drawn and connected. The onClick of the button works
fine and adds the HTML widget to the panel with full dnd functionality
and is connectable with connectors.
The onClick event of the dynamically created HTML widget does not seem
to work though. For now, I just put a Window.alert() to see if its
triggered, but nothing happens. Below is the relevant code. Please
help. Thanks.
canvas = new AbsolutePanel();
diagram = new Diagram(canvas);
...
...
Button button = new Button("Test",
new ClickHandler()
{
public void onClick(ClickEvent event) {
HTML html = new HTML();
html.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent ev) {
Window.alert("me");
}
});
addElement(html);
}
}
);
...
...
private void addElement(Widget element) {
canvas.add(element, 2, 2);
Shape shapeForLabel = new Shape(element);
shapeForLabel.showOnDiagram(diagram);
}
I am not sure this is a something to do with the dnd library because I
created an image with a double click ability and dnd ability. Have you
tried your code without giving it the dnd ability?
Also note that it is only the second onClick that does not work, the
outer one of dynamically adding elements works fine.... strange.
Any other ideas? Thanks for the help, I appreciate it.
--
You received this message because you are subscribed to the Google Groups "gwt-connectors" group.
To post to this group, send email to gwt-con...@googlegroups.com.
To unsubscribe from this group, send email to gwt-connector...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/gwt-connectors?hl=en.
Shape shapeForLabel = new Shape(element);
shapeForLabel.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent e) {
Window.alert("asd");
}
});
shapeForLabel.showOnDiagram(diagram);
On Mar 16, 12:59 pm, SUHASINI PRASAD <sonyp...@gmail.com> wrote:
> hey,
>
> did you try to implement HasClickHandlers on Shape?
>
> > gwt-connector...@googlegroups.com<gwt-connectors%2Bunsu...@googlegroups.com>
new ClickHandler() {
public void onClick(ClickEvent e) {
Window.alert("asd");
}
});
shapeForLabel.showOnDiagram(diagram);
To unsubscribe from this group, send email to gwt-connector...@googlegroups.com.
Thanks for the help.
On Mar 17, 12:30 am, SUHASINI PRASAD <sonyp...@gmail.com> wrote:
> Try this:
>
> public class Shapes extends Shape implements HasClickHandlers{
>
> public Shapes(Widget w) {
> super(w);
> // TODO Auto-generated constructor stub
> }
> public HandlerRegistration addClickHandler(ClickHandler handler) {
> return addDomHandler(handler, ClickEvent.getType());
> }
>
> }
>
> and then use this class in place of Shape i.e
>
> Shapes shapeForLabel = new Shapes(element);
> shapeForLabel.addClickHandler(
>
>
>
> > new ClickHandler() {
> > public void onClick(ClickEvent e) {
> > Window.alert("asd");
> > }
> > });
> > shapeForLabel.showOnDiagram(diagram);
>
> I hope this might help.
>
> > <gwt-connectors%2Bunsu...@googlegroups.com<gwt-connectors%252Buns...@googlegroups.com>
Its not that crucial that i fix it for IE but it would be a benefit.
thanks
On Mar 17, 12:30 am, SUHASINI PRASAD <sonyp...@gmail.com> wrote:
> Try this:
>
> public class Shapes extends Shape implements HasClickHandlers{
>
> public Shapes(Widget w) {
> super(w);
> // TODO Auto-generated constructor stub
> }
> public HandlerRegistration addClickHandler(ClickHandler handler) {
> return addDomHandler(handler, ClickEvent.getType());
> }
>
> }
>
> and then use this class in place of Shape i.e
>
> Shapes shapeForLabel = new Shapes(element);
> shapeForLabel.addClickHandler(
>
>
>
> > new ClickHandler() {
> > public void onClick(ClickEvent e) {
> > Window.alert("asd");
> > }
> > });
> > shapeForLabel.showOnDiagram(diagram);
>
> I hope this might help.
>
> > <gwt-connectors%2Bunsu...@googlegroups.com<gwt-connectors%252Buns...@googlegroups.com>
> > > > > "gwt-connectors" group.> > > > To post to this group, send email togwt-co...@googlegroups.com.
> > > > > To unsubscribe from this group, send email to> > > >gwt-connector...@googlegroups.com<gwt-connectors%2Bunsu...@googlegroups.com>> > <gwt-connectors%2Bunsu...@googlegroups.com<gwt-connectors%252Buns...@googlegroups.com>
>
> > > > > .
> > > > > For more options, visit this group at
> > > > >http://groups.google.com/group/gwt-connectors?hl=en.
>
> > > --
> > > You received this message because you are subscribed to the Google Groups
> > > "gwt-connectors" group.> > To post to this group, send email togwt-co...@googlegroups.com.
thanks.
Since the connector is not drawn on diagram I tried another thing.
I added a composite to the connector, the connector title
which is a Label + leftposition :int + topposition : int
and I placed it next to the startEndPoint and at anytime the connector
is re drawn (that is to say sections) the title is re drawn also.
I tried to put it exactly at the center between start and end points
but because I it is not a straight line it didn't fit :)
Maybe I could place it above the center sections...
now i can easily handle click on the label ;)
I cant give you the Connector and ConnectorTitle if you want.
PS : I blame GWT not to have make widgets have double click handlers
as they did it for the simple click.
To post to this group, send email to gwt-con...@googlegroups.com.
To unsubscribe from this group, send email to gwt-connector...@googlegroups.com.
And for the DoubleClickHandler, I know that but what if your class
must extends another one? You are stuck! :) whereas if they had
planned it at the very beginning I would be easier we would just have
to choose what we would want to do... don't you think?
On 20 mar, 20:42, SUHASINI PRASAD <sonyp...@gmail.com> wrote:
> Do you mean to say you can actually include labels on to the connector
> lines?
>
> You can include double click handler to any widget by creating new class
> that extends the hasdoublecickhandlers.
>
> > > <gwt-connectors%2Bunsu...@googlegroups.com<gwt-connectors%252Buns...@googlegroups.com>
> > <gwt-connectors%252Buns...@googlegroups.com<gwt-connectors%25252Bun...@googlegroups.com>
>
> > > > > > > > > > > .
> > > > > > > > > > > For more options, visit this group at
> > > > > > > > > > >http://groups.google.com/group/gwt-connectors?hl=en.
>
> > > > > > > > > --
> > > > > > > > > You received this message because you are subscribed to the
> > Google Groups
> > > > > > > > > "gwt-connectors" group.> > To post to this group, send email
> > togwt-co...@googlegroups.com.
> > > > > > > > > To unsubscribe from this group, send email to> >
> > gwt-connector...@googlegroups.com<gwt-connectors%2Bunsu...@googlegroups.com>
> > <gwt-connectors%2Bunsu...@googlegroups.com<gwt-connectors%252Buns...@googlegroups.com>
>
> > > > > > > > > .
> > > > > > > > > For more options, visit this group at
> > > > > > > > >http://groups.google.com/group/gwt-connectors?hl=en.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "gwt-connectors" group.
> > To post to this group, send email to gwt-con...@googlegroups.com.
> > To unsubscribe from this group, send email to
To unsubscribe from this group, send email to gwt-connector...@googlegroups.com.
++++++++ CONNECTOR TITLE ++++++++++++++++
package pl.tecna.gwt.connectors.client;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;
public class ConnectorTitle extends Composite {
private Label title; private int leftPosition; private int
topPosition;
public ConnectorTitle(){
title = new Label("titre"); leftPosition = 0; topPosition = 0;
}
public void showOnDiagram(Diagram diagram) {
diagram.boundaryPanel.add(title, this.getLeftPosition(),
this.getTopPosition());
}
protected void update(Diagram diagram) {
diagram.boundaryPanel.remove(title);
diagram.boundaryPanel.add(title, this.getLeftPosition(),
this.getTopPosition());
}
}
++++++++ CONNECTOR ++++++++++++++++
package pl.tecna.gwt.connectors.client;
import java.util.ArrayList;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.Widget;
public class Connector extends Widget {
public ArrayList<Section> sections;
public ArrayList<CornerPoint> cornerPoints;
public ConnectorTitle title;
public boolean isSelected;
public EndPoint startEndPoint;
public EndPoint endEndPoint;
public Diagram diagram;
private SectionDecoration startPointDecoration;
private SectionDecoration endPointDecoration;
/**
* Connector is a rectilinear connection that connects two {@link
EndPoint).
* Connector is made of a couple of {@link Section} and it always
starts and
* ends on {@link EndPoint}.
*
* @param startLeft
* a left position of the point where the Connector starts
* @param startTop
* a top position of the point where the Connector starts
* @param endLeft
* a left position of the point where the Connector ends
* @param endTop
* a top position of the point where the Connector ends
*/
public Connector(int startLeft, int startTop, int endLeft, int
endTop) {
super();
this.startEndPoint = new EndPoint(startLeft, startTop, this);
this.endEndPoint = new EndPoint(endLeft, endTop, this);
this.startEndPoint.connector = this;
this.endEndPoint.connector = this;
this.sections = new ArrayList<Section>();
this.cornerPoints = new ArrayList<CornerPoint>();
this.title = new ConnectorTitle();
}
/**
* Connector is a rectilinear connection that connects two {@link
EndPoint).
* Connector is made of a couple of {@link Section} and it always
starts and
* ends on {@link EndPoint}.
*
* @param startLeft
* a left position of the point where the Connector starts
* @param startTop
* a top position of the point where the Connector starts
* @param endLeft
* a left position of the point where the Connector ends
* @param endTop
* a top position of the point where the Connector ends
* @param cornerPoints
* a list of corner points of the Connector
*/
public Connector(int startLeft, int startTop, int endLeft, int
endTop,
ArrayList<CornerPoint> cornerPoints) {
super();
this.startEndPoint = new EndPoint(startLeft, startTop, this);
this.endEndPoint = new EndPoint(endLeft, endTop, this);
this.startEndPoint.connector = this;
this.endEndPoint.connector = this;
this.sections = new ArrayList<Section>();
this.cornerPoints = cornerPoints;
this.title = new ConnectorTitle();
}
/**
* Connector is a rectilinear connection that connects two {@link
EndPoint).
* Connector is made of a couple of {@link Section} and it always
starts and
* ends on {@link EndPoint}.
*
* @param startLeft
* a left position of the point where the Connector starts
* @param startTop
* a top position of the point where the Connector starts
* @param endLeft
* a left position of the point where the Connector ends
* @param endTop
* a top position of the point where the Connector ends
* @param cornerPoints
* a list of corner points of the Connector
* @param startDecoration
* a way the connector is decorated at its start
* @param endDecoration
* a way the connector is decorated at its end
*/
public Connector(int startLeft, int startTop, int endLeft, int
endTop,
ArrayList<CornerPoint> cornerPoints,
SectionDecoration startDecoration, SectionDecoration endDecoration)
{
super();
this.startEndPoint = new EndPoint(startLeft, startTop, this);
this.endEndPoint = new EndPoint(endLeft, endTop, this);
this.startEndPoint.connector = this;
this.endEndPoint.connector = this;
this.sections = new ArrayList<Section>();
this.cornerPoints = cornerPoints;
// Add decorations
this.startPointDecoration = startDecoration;
this.endPointDecoration = endDecoration;
this.title = new ConnectorTitle();
}
/**
* Connector is a rectilinear connection that connects two {@link
EndPoint).
* Connector is made of a couple of {@link Section} and it always
starts and
* ends on {@link EndPoint}.
*
* @param startLeft
* a left position of the point where the Connector starts
* @param startTop
* a top position of the point where the Connector starts
* @param endLeft
* a left position of the point where the Connector ends
* @param endTop
* a top position of the point where the Connector ends
* @param cornerPoints
* a list of corner points of the Connector
* @param startDecoration
* a way the connector is decorated at its start
* @param endDecoration
* a way the connector is decorated at its end
*/
public Connector(int startLeft, int startTop, int endLeft, int
endTop,
SectionDecoration startDecoration, SectionDecoration endDecoration)
{
super();
this.startEndPoint = new EndPoint(startLeft, startTop, this);
this.endEndPoint = new EndPoint(endLeft, endTop, this);
this.startEndPoint.connector = this;
this.endEndPoint.connector = this;
this.sections = new ArrayList<Section>();
this.cornerPoints = new ArrayList<CornerPoint>();
// Add decorations
this.startPointDecoration = startDecoration;
this.endPointDecoration = endDecoration;
this.title = new ConnectorTitle();
}
/**
* Calculates positions of Connector's sections and shows Connector
on a
* given panel. The Connector is represented by horizontal or
vertical lines
* which are {@link Section}s. The panel argument's type must be
* AbsolutePanel.
* <p>
* This method also add all necessary {@link Point}s: {@link EndPoint}
s at
* the beginning and at the end of the Connector and {@link
CornerPoint}s at
* the Connector's corners.
* <p>
* The way sections are generated: </br> Let "width" � a width of
rectangle
* drown on connectors start point and end point </br> Let "height"
� a
* height of rectangle drown on connectors start point and end point
</br> If
* ("width" < "height") � the connection contains two vertical
sections and
* one horizontal section. </br> If ("height" < "width") � the
connection
* contains two horizontal sections and one vertical section.
*
* @param diagram
* a Diagram the Connector will be added to
* @return the Connector added to specified Diagram and drawn on its
* boundaryPanel
*/
public void showOnDiagram(Diagram diagram) {
// Add Connector to the Diagram
diagram.connectors.add(this);
// Calculate standard corner points positions
if (cornerPoints.isEmpty()) {
calculateStandardPointsPositions();
}
// Recreate Sections between start, end, and corner points
this.recreateSections(cornerPoints);
// recalculate the title position
this.calculateTitlePosition();
// Set start and end Sections decorated
sections.get(0).setStartPointDecoration(this.startPointDecoration);
sections.get(sections.size() - 1).setEndPointDecoration(
this.endPointDecoration);
// Show sections on Diagram
for (int i = 0; i < sections.size(); i++) {
sections.get(i).showOnDiagram(diagram.boundaryPanel);
}
// Show startEndPoint and endEndPoint + title
startEndPoint.showOnDiagram(diagram);
endEndPoint.showOnDiagram(diagram);
title.showOnDiagram(diagram);
// Remember the Diagram
this.diagram = diagram;
// DEBUG
// String str1 = "Connector.showOnDiagram: ";
// str1 = str1 + "(" + startEndPoint.getLeft() + "," +
// startEndPoint.getTop() + ")";
// for (int i = 0; i < cornerPoints.size(); i++) {
// str1 = str1 + "(" + cornerPoints.get(i).getLeft() + "," +
// cornerPoints.get(i).getTop() + ")";
// }
// str1 = str1 + "(" + endEndPoint.getLeft() + "," +
endEndPoint.getTop()
// + ")";
// System.out.println(str1);
// END DEBUG
}
/**
* Removes Connector from Diagram
*
* @param diagram
* a Diagram the Connector will be removed from
* @return the Connector removed from specified Diagram and from its
* boundaryPanel
*/
public void removeFromDiagram(Diagram diagram) {
// Remove Connector from Diagram
diagram.connectors.remove(this);
// Remove Connector from Diagram's boundaryPanel
for (int i = 0; i < sections.size(); i++) {
diagram.boundaryPanel.remove(sections.get(i));
}
sections.removeAll(sections);
// Remove connector's decorations
if (startPointDecoration != null) {
diagram.boundaryPanel.remove(startPointDecoration);
}
if (endPointDecoration != null) {
diagram.boundaryPanel.remove(endPointDecoration);
}
// Remove end points
startEndPoint.clear();
endEndPoint.clear();
}
/**
* Recreates sections based on given CornerPoints list
*
* @param cp
* a list of corner points of the Connector
*/
public void recreateSections(ArrayList<CornerPoint> cp) {
// String str1 = "Connector.recreateSections: ";
// str1 = str1 + "(" + startEndPoint.getLeft() + "," +
// startEndPoint.getTop() + ")";
// for (int i = 0; i < cp.size(); i++) {
// str1 = str1 + "(" + cp.get(i).getLeft() + "," +
cp.get(i).getTop() +
// ")";
// }
// str1 = str1 + "(" + endEndPoint.getLeft() + "," +
endEndPoint.getTop()
// + ")";
// System.out.println(str1);
sections.removeAll(sections);
sections.add(new Section(startEndPoint, cp.get(0), this));
for (int i = 0; i < cp.size() - 1; i++) {
sections.add(new Section(cp.get(i), cp.get(i + 1), this));
}
sections.add(new Section(cp.get(cp.size() - 1), endEndPoint, this));
// System.out.println("Connector.showOnDiagram " +
// "(" + standardSection1.startPoint.getLeft() + "," +
// standardSection1.startPoint.getTop() +
// "," + standardSection1.endPoint.getLeft() + "," +
// standardSection1.endPoint.getTop() + ") " +
// "(" + standardSection2.startPoint.getLeft() + "," +
// standardSection2.startPoint.getTop() +
// "," + standardSection2.endPoint.getLeft() + "," +
// standardSection2.endPoint.getTop() + ") " +
// "(" + standardSection3.startPoint.getLeft() + "," +
// standardSection3.startPoint.getTop() +
// "," + standardSection3.endPoint.getLeft() + "," +
// standardSection3.endPoint.getTop() + ") ");
}
/**
* Calculates values of local variables cornerPoint1Left,
cornerPoint1Top,
* cornerPoint2Left, cornerPoint2Top to draw a standard rectilinear
* tree-sections connector. Points positions depends on connector's
width and
* height. If the width is less than the height the connection
contains two
* vertical sections and one horizontal section. If the width is
greater than
* height the connection contains two horizontal sections and one
vertical
* section.
*
* @return
*
* @return counted position of corner points
*/
private void calculateStandardPointsPositions() {
cornerPoints.removeAll(cornerPoints);
int width = Math.abs(startEndPoint.getLeft() -
endEndPoint.getLeft());
int height = Math.abs(startEndPoint.getTop() -
endEndPoint.getTop());
CornerPoint cp1 = new CornerPoint(0, 0);
CornerPoint cp2 = new CornerPoint(0, 0);
if (width < height) {
// the connection contains two vertical sections and one horizontal
// section
cp1.setLeft(startEndPoint.getLeft());
cp1.setTop(startEndPoint.getTop()
+ ((endEndPoint.getTop() - startEndPoint.getTop()) / 2));
cp2.setLeft(endEndPoint.getLeft());
cp2.setTop(cp1.getTop());
} else {
// the connection contains two horizontal sections and one vertical
// section
cp1.setLeft(startEndPoint.getLeft()
+ ((endEndPoint.getLeft() - startEndPoint.getLeft()) / 2));
cp1.setTop(startEndPoint.getTop());
cp2.setLeft(cp1.getLeft());
cp2.setTop(endEndPoint.getTop());
}
cornerPoints.add(cp1);
cornerPoints.add(cp2);
}
/**
* Calculates the center position of the title based on the position
of the
* startpoint and the endpoint position
*/
private void calculateTitlePosition() {
// Calculate the middle position but with section with a right angle
some
// time it ugly
// Other solution would be to get center section ot 3rd solutions
put the
// title next to the start
// int sl = startEndPoint.getLeft();
// int st = startEndPoint.getTop();
// int el = endEndPoint.getLeft();
// int et = endEndPoint.getTop();
// title.setLeftPosition(sl + (el - sl) / 2);
// title.setTopPosition(st + (et - st) / 2);
title.setLeftPosition(startEndPoint.getLeft() + 10);
title.setTopPosition(startEndPoint.getTop() - 15);
}
public Section findNeighborSection(Section section, Point point) {
Section sec = null;
for (int i = 0; i < sections.size(); i++) {
if ((sections.get(i) != section)
&& ((sections.get(i).startPoint == point) ||
(sections.get(i).endPoint == point))) {
sec = sections.get(i);
}
}
return sec;
}
public Section findSectionWithThisStartPoint(Point point) {
Section sec = null;
for (int i = 0; i < sections.size(); i++) {
if (sections.get(i).startPoint == point) {
sec = sections.get(i);
}
}
return sec;
}
public Section findSectionWithThisEndPoint(Point point) {
Section sec = null;
for (int i = 0; i < sections.size(); i++) {
if (sections.get(i).endPoint == point) {
sec = sections.get(i);
}
}
return sec;
}
public Section prevSectionForPoint(Point point) {
Section sec = null;
for (int i = 0; i < sections.size(); i++) {
if (sections.get(i).endPoint == point) {
sec = sections.get(i);
}
}
return sec;
}
public Section nextSectionForPoint(Point point) {
Section sec = null;
for (int i = 0; i < sections.size(); i++) {
if (sections.get(i).startPoint == point) {
sec = sections.get(i);
}
}
return sec;
}
public void update() {
for (int i = 0; i < sections.size(); i++) {
sections.get(i).update();
}
calculateTitlePosition();
title.update(diagram);
}
public void select() {
for (int i = 0; i < sections.size(); i++) {
sections.get(i).select();
}
this.setSelected(true);
}
public void deselect() {
for (int i = 0; i < sections.size(); i++) {
sections.get(i).deselect();
}
this.setSelected(false);
}
public boolean isOnDiagram(AbsolutePanel panel) {
if (this.diagram == null) {
return false;
}
if (panel == this.diagram.boundaryPanel) {
return true;
} else {
return false;
}
}
public Section getPrevSection(Section currentSection) {
if (this.sections.indexOf(currentSection) > 0) {
return this.sections.get(this.sections.indexOf(currentSection) -
1);
} else {
return null;
}
}
public Section getNextSection(Section currentSection) {
if (this.sections.size() > this.sections.indexOf(currentSection) +
1) {
return this.sections.get(this.sections.indexOf(currentSection) +
1);
} else {
return null;
}
}
public boolean isSelected() {
return isSelected;
}
public void setSelected(boolean isSelected) {
this.isSelected = isSelected;
}
}
++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++
On 21 mar, 06:08, SUHASINI PRASAD <sonyp...@gmail.com> wrote:
> I agree :)
>
> How did you add labels to the connectors?
> Thank you.
>
> > > > > <gwt-connectors%2Bunsu...@googlegroups.com<gwt-connectors%252Buns...@googlegroups.com>
> > <gwt-connectors%252Buns...@googlegroups.com<gwt-connectors%25252Bun...@googlegroups.com>
>
> > > > <gwt-connectors%252Buns...@googlegroups.com<gwt-connectors%25252Bun...@googlegroups.com>
> > <gwt-connectors%25252Bun...@googlegroups.com<gwt-connectors%2525252Bu...@googlegroups.com>
>
> > > > > > > > > > > > > .
> > > > > > > > > > > > > For more options, visit this
>
> ...
>
> plus de détails »
To post to this group, send email to gwt-con...@googlegroups.com.
To unsubscribe from this group, send email to gwt-connector...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/gwt-connectors?hl=en.