PDA

View Full Version : Issue with mouse event for chart in chrome



babyblue
24 Aug 2009, 1:32 PM
LayoutContainer seem to behave very differently than ContentPanel. In order to be able to hide the header after render and make the container transparent, I made something like ContentPanel using composite of LayoutContainer. But I'm still having some issues, namely if Chart is nested inside two LayoutContainer, then mouse over and mouse click does not work in FireFox or Chrome. If Chart is only inside one LayoutContainer, then only mouse click not work in Chrome. Kind of strange, here is my sample code with 3 different containers for chart:


package com.example.client;

import com.extjs.gxt.charts.client.Chart;
import com.extjs.gxt.charts.client.event.ChartEvent;
import com.extjs.gxt.charts.client.event.ChartListener;
import com.extjs.gxt.charts.client.model.ChartModel;
import com.extjs.gxt.charts.client.model.charts.PieChart;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.fx.Draggable;
import com.extjs.gxt.ui.client.fx.Resizable;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.util.Padding;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.Layout;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.button.ToggleButton;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.HBoxLayout;
import com.extjs.gxt.ui.client.widget.layout.HBoxLayoutData;
import com.extjs.gxt.ui.client.widget.layout.BoxLayout.BoxLayoutPack;
import com.extjs.gxt.ui.client.widget.layout.HBoxLayout.HBoxLayoutAlign;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

public class TestWidgets implements EntryPoint {
FreeLayoutPanel lp;
ContentPanel cp;
LayoutContainer lc;
LayoutContainer container;

public void onModuleLoad() {
Window.enableScrolling(false); // force hide scroll bar
RootPanel.get("toolbar").add(createToolbar());
RootPanel.get("main").add(createPanel());
}

private LayoutContainer createToolbar() {
ToolBar toolbar = new ToolBar();
ToggleButton toggle = new ToggleButton("Toggle");
toggle.addSelectionListener(new SelectionListener<ButtonEvent>(){
@Override
public void componentSelected(ButtonEvent ce){
actionPerformed();
}
});
toolbar.add(toggle);
LayoutContainer parent = new LayoutContainer();
parent.add(toolbar);
return parent;
}

private LayoutContainer createPanel() {
HBoxLayout layout = new HBoxLayout();
layout.setPadding(new Padding(5));
layout.setHBoxLayoutAlign(HBoxLayoutAlign.MIDDLE);
layout.setPack(BoxLayoutPack.CENTER);

HBoxLayoutData layoutData = new HBoxLayoutData(new Margins(5, 5, 5, 5));


container = new LayoutContainer();
lp = createPieChartLayoutPanel();
cp = createPieChartContentPanel();
lc = createPieChartLayoutContainer();

container.setStyleAttribute("background", "#eeeeee");
container.setLayout(layout);
container.setHeight(400); // must do, or nothing will show
container.add(lp, layoutData);
container.add(cp, layoutData);
container.add(lc, layoutData);
return container;
}

private void actionPerformed() {
lp.setHeaderVisible(!lp.isHeaderVisible());
lp.layout();
}

private static final String OFCSWF_PATH = "gxt/chart/open-flash-chart.swf";

public static FreeLayoutPanel createPieChartLayoutPanel() {
FreeLayoutPanel cp = FreeLayoutPanel.createPieChart("Pie chart");
return cp;
}

public static ContentPanel createPieChartContentPanel() {
ContentPanel cp = new ContentPanel();
cp.setStyleName("null");
cp.setStylePrimaryName("null");
cp.setHeading("Pie chart");
cp.setFrame(true);
cp.setSize(300, 300);
cp.setLayout(new FitLayout());

final Chart chart = new Chart(OFCSWF_PATH);
chart.setBorders(true);
chart.setChartModel(FreeLayoutPanel.getPieChartData());

cp.add(chart);
return cp;
}

public static LayoutContainer createPieChartLayoutContainer() {
LayoutContainer cp = new LayoutContainer();
cp.setStyleAttribute("background", "transparent");
cp.setSize(300, 300);
cp.setLayout(new FitLayout());

final Chart chart = new Chart(OFCSWF_PATH);
chart.setBorders(true);
chart.setChartModel(FreeLayoutPanel.getPieChartData());

cp.add(chart);
return cp;
}
}



package com.example.client;

import com.example.client.FreeLayoutData.PinPoint;
import com.extjs.gxt.charts.client.Chart;
import com.extjs.gxt.charts.client.event.ChartEvent;
import com.extjs.gxt.charts.client.event.ChartListener;
import com.extjs.gxt.charts.client.model.ChartModel;
import com.extjs.gxt.charts.client.model.ToolTip;
import com.extjs.gxt.charts.client.model.ToolTip.MouseStyle;
import com.extjs.gxt.charts.client.model.charts.PieChart;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.DragEvent;
import com.extjs.gxt.ui.client.event.DragListener;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.ResizeEvent;
import com.extjs.gxt.ui.client.event.ResizeListener;
import com.extjs.gxt.ui.client.event.WidgetListener;
import com.extjs.gxt.ui.client.fx.Draggable;
import com.extjs.gxt.ui.client.fx.Resizable;
import com.extjs.gxt.ui.client.widget.BoxComponent;
import com.extjs.gxt.ui.client.widget.Component;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.Layout;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.Widget;

public class FreeLayoutPanel extends LayoutContainer{
ContentPanel titleArea;
BorderLayout borderLayout;
boolean headerVisible;
Draggable d;
Resizable r;
FreeLayoutData layoutData;
BoxComponent component;
Widget widget;

FreeLayoutPanel(){
////////////////////////////////////////////////////////////////////////
// init components

super();
borderLayout = new BorderLayout();
super.setLayout(borderLayout);

titleArea = new ContentPanel();
titleArea.setHeading("Title");
titleArea.collapse();
BorderLayoutData north = new BorderLayoutData(LayoutRegion.NORTH, 0);
north.setCollapsible(false);
north.setFloatable(false);
north.setHideCollapseTool(true);
north.setHidden(false);
super.add(titleArea, north);

addWidgetListener(new WidgetListener() {
public void widgetAttached(ComponentEvent ce) {
setHeaderVisible(true);
}
});

////////////////////////////////////////////////////////////////////////
// init layout data

d = new Draggable(this);
d.setConstrainClient(false);
d.addDragListener(new DragListener() {
@Override
public void dragStart(DragEvent de) {
System.out.print("start ");
}
@Override
public void dragMove(DragEvent de) {
System.out.print("move ");
}
@Override
public void dragEnd(DragEvent de) {
System.out.println("end");
}
@Override
public void dragCancel(DragEvent de) {
System.out.println("cancel");
}
});

r = new Resizable(this);
r.addResizeListener(new ResizeListener() {
public void resizeStart(ResizeEvent re) {
System.out.print("rstart ");
}

public void resizeEnd(ResizeEvent re) {
System.out.println("rend");
}
});

layoutData = new FreeLayoutData();
layoutData.pin = PinPoint.AUTO;
layoutData.isRelativeSized = true;
layoutData.repositionable = true;
layoutData.resizable = true;
}

public void setHeading(String text) {
titleArea.setHeading(text);
}

public void setHeaderVisible(boolean visible) {
headerVisible = visible;
if(visible) {
if(component != null) {
component.setBorders(true);
}
borderLayout.show(LayoutRegion.NORTH);
setStyleAttribute("background", "#ffffff");
}else {
if(component != null) {
component.setBorders(false);
}
borderLayout.hide(LayoutRegion.NORTH);
setStyleAttribute("background", "transparent");
}
}

public boolean isHeaderVisible() {
return headerVisible;
}

@Override
public boolean add(Widget w) {
if(widget != null) {
super.remove(widget);
}
if(w instanceof BoxComponent) {
component = (BoxComponent)w;
}
widget = w;
return super.add(w, new BorderLayoutData(LayoutRegion.CENTER));
}

@Override
public void setLayout(Layout layout) {
}

@Override
public String toString() {
return "FreeLayoutPanel:"+titleArea.getHeading();
}

@Override
protected void onAttach() {
super.onAttach();
Widget p = getParent();
if(p instanceof Component)
d.setContainer((Component)p);
else
d.setContainer(null);
}

@Override
protected void onDetach() {
super.onDetach();
d.setContainer(null);
}

public void setDraggable(boolean enable) {
d.setEnabled(enable);
layoutData.repositionable = enable;
}

public void setResizable(boolean enable) {
r.setEnabled(enable);
layoutData.resizable = enable;
}

public FreeLayoutData getLayoutdata() {
return layoutData;
}

////////////////////////////////////////////////////////////////////////////////

private static final String OFCSWF_PATH = "gxt/chart/open-flash-chart.swf";

public static FreeLayoutPanel createPieChart(String title) {
FreeLayoutPanel cp = new FreeLayoutPanel();
cp.setHeading(title);

final Chart chart = new Chart(OFCSWF_PATH);
chart.setSize("100%", "100%");
chart.setBorders(false);
chart.setChartModel(getPieChartData());

cp.add(chart);
cp.setSize(300, 300);
return cp;
}

public static ChartModel getPieChartData() {
ChartModel cm = new ChartModel();
cm.setBackgroundColour("-1"); // transparent background
cm.setTooltipStyle(new ToolTip(MouseStyle.CLOSEST));

PieChart pie = new PieChart();
pie.setAlpha(0.8f);
pie.setGradientFill(false);
pie.setNoLabels(true); // no label pointing to the slices
pie.setAnimate(true); // no bouncing slices
pie.setAlphaHighlight(true); // highlight instead of bounce
pie.setTooltip("#label#: #val# (#percent#)");
pie.setColours("#ff0000", "#00aa00", "#0000ff", "#ff9900", "#ff00ff");

pie.addSlices(new PieChart.Slice(Math.random()*100, "AU","Australia"));
pie.addSlices(new PieChart.Slice(Math.random()*100, "US", "USA"));
pie.addSlices(new PieChart.Slice(Math.random()*100, "JP", "Japan"));
pie.addSlices(new PieChart.Slice(Math.random()*100, "DE", "Germany"));
pie.addSlices(new PieChart.Slice(Math.random()*100, "UK", "United Kingdom"));
pie.addChartListener(new ChartListener() {
public void chartClick(ChartEvent ce) {
Info.display("Chart Clicked", "You selected {0}.", "" + ce.getValue());
}
});
cm.addChartConfig(pie);
return cm;
}
}