一步一步gflot教程？

Question

我觉得有点愚蠢的问这个问题在这里，但我似乎无法找到一份体面Gflot教程。是的，有吨examples，你甚至可以下载whole code和尝试，但如果你只是想在GWT项目创建UiBinder的，并把它添加到主面板...它变得真的很难。我试图在测试GWT项目中为我的主html文件添加一个简单的LineChart。

这里是我的LineExample UiBinder的，从例子中直接复制：

public class LineExample extends DefaultActivity{ 

private static Binder binder = GWT.create(Binder.class); 

interface Binder extends UiBinder<Widget, LineExample>{} 

interface Style extends CssResource{ 
    String button(); 
    String darkTheme(); 
    String whiteTheme(); 
    String legendLabel(); 
} 

/** 
* Plot 
*/ 
@UiField(provided = true) 
SimplePlot plot; 

/** 
* Button switch to dark 
*/ 
@UiField 
Button switchDark; 

/** 
* Button switch to white 
*/ 
@UiField 
Button switchWhite; 

/** 
* Access to UiBinder style 
*/ 
@UiField 
Style style; 


public LineExample(Resources resources){ 
    super(resources); 
} 

/** 
* Create plot 
*/ 
public Widget createPlot(){ 
    PlotModel model = new PlotModel(); 
    PlotOptions plotOptions = PlotOptions.create(); 
    plotOptions.setLegendOptions(LegendOptions.create().setBackgroundOpacity(0) 
     .setPosition(LegendPosition.NORTH_WEST)); 
    plotOptions.setGridOptions(GridOptions.create().setMargin(5)); 
    plotOptions.addXAxisOptions(AxisOptions.create().setFont(FontOptions.create().setColor("black").setWeight("bold").setStyle("italic"))); 
    plotOptions.addYAxisOptions(AxisOptions.create().setFont(FontOptions.create().setColor("black").setWeight("bold").setStyle("italic"))); 

    // create the plot 
    plot = new SimplePlot(model, plotOptions); 

    // add data 
    generateRandomData(); 

    return binder.createAndBindUi(this); 
} 

/** 
* On click on the generate button, we clear the current data and generate new ones 
* 
* @param e click event 
*/ 
@UiHandler("generate") 
void onClickGenerate(ClickEvent e){ 
    plot.getModel().removeAllSeries(); 
    generateRandomData(); 
    plot.redraw(); 
} 

/** 
* Generate random data 
*/ 
private void generateRandomData(){ 
    int nbSeries = Random.nextInt(5) + 1; 
    for (int i = 0; i < nbSeries; i++){ 
     plot.getModel().addSeries(Series.of("Random Series " + i)); 
    } 
    for (int i = 1; i < 13; i++){ 
     for (SeriesHandler series : plot.getModel().getHandlers()){ 
      series.add(DataPoint.of(i, Random.nextInt(30))); 
     } 
    } 
} 

/** 
* Switch to dark theme 
* 
* @param e click event 
*/ 
@UiHandler("switchDark") 
void onClickSwitchToDark(ClickEvent e){ 
    switchDark.setVisible(false); 
    switchWhite.setVisible(true); 

    plot.removeStyleName(style.whiteTheme()); 
    plot.addStyleName(style.darkTheme()); 
    plot.getOptions().getXAxisOptions().getFont().setColor("white"); 
    plot.getOptions().getXAxisOptions().setTickColor("rgba(255, 255, 255, 0.6)"); 
    plot.getOptions().getYAxisOptions().getFont().setColor("white"); 
    plot.getOptions().getYAxisOptions().setTickColor("rgba(255, 255, 255, 0.6)"); 
    plot.getOptions().getGridOptions().setBorderColor("white"); 
    plot.redraw(); 
} 

/** 
* Switch to white theme 
* 
* @param e click event 
*/ 
@UiHandler("switchWhite") 
void onClickSwitchToWhite(ClickEvent e){ 
    switchDark.setVisible(true); 
    switchWhite.setVisible(false); 

    plot.removeStyleName(style.darkTheme()); 
    plot.addStyleName(style.whiteTheme()); 
    plot.getOptions().getXAxisOptions().getFont().setColor("black"); 
    plot.getOptions().getXAxisOptions().clearTickColor(); 
    plot.getOptions().getYAxisOptions().getFont().setColor("black"); 
    plot.getOptions().getYAxisOptions().clearTickColor(); 
    plot.getOptions().getGridOptions().clearBorderColor(); 
    plot.redraw(); 
} 

}

这里是把对应的LineExample.ui.xml：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"  xmlns:g="urn:import:com.google.gwt.user.client.ui" 
xmlns:p="urn:import:com.googlecode.gflot.client"> 

<ui:style type='gflot.sample.client.LineExample.Style'> 
.button { 
    margin-top: 10px; 
    margin-left: 10px; 
} 

.darkTheme { 
    background-color: black; 
} 

@external legendLabel; 
.darkTheme .legendLabel { 
    color: white; 
} 

.whiteTheme .legendLabel { 
    color: black; 
} 

生成 切换到黑暗 切换到白色

的资源文件中使用：

public interface Resources extends ClientBundle { 
@Source("gflot.css") 
Style style(); 

public interface Style extends CssResource{ 
    String headerContainer(); 
    String headerTitle(); 
    String headerDescription(); 
    String headerHomePageLink(); 
    String menuScrollContainer(); 
    String menuContainer(); 
    String menuCategory(); 
    String menuLink(); 
    String menuLinkSelected(); 
    String sourceContainer(); 
    String sourceLink(); 
    String sourceLinkSelected(); 
    String mainScrollContainer(); 
    String mainContainer(); 
} 

}

而且css文件，gflot.css：

@def headerBgColor #0D0D0D; 
@def mainBgColor #FFF7FF; 
body { 
    font-family: 'Ubuntu', sans-serif; 
    font-size: 13px; 
    background-color: mainBgColor; 
    color: #0D0D0D; 
} 

@external gwt-Button; 
.gwt-Button { 
/*   background-color: #D14836; */ 
/*   background-image: -webkit-linear-gradient(top, #DD4B39, #D14836); */ 
/*   background-image: -moz-linear-gradient(top, #DD4B39, #D14836); */ 
/*   background-image: -ms-linear-gradient(top, #DD4B39, #D14836); */ 
/*   background-image: -o-linear-gradient(top, #DD4B39, #D14836); */ 
/*   background-image: linear-gradient(top, #DD4B39, #D14836); */ 
/*   border: 1px solid transparent; */ 
/*   height: 27px; */ 
/*   line-height: 27px; */ 
/*   padding: 0px 8px; */ 
/*   outline: 0; */ 
/*   font-weight: bold; */ 
/*   -webkit-border-radius: 5px; */ 
/*   -moz-border-radius: 5px; */ 
/*   border-radius: 5px; */ 
/*   cursor: pointer; */ 
} 

.headerContainer { 
    margin: 8px; 
    padding: 10px; 
    background-color: headerBgColor; 
    color: white; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 5px 5px 5px #888; 
    -webkit-box-shadow: 5px 5px 5px #888; 
    box-shadow: 5px 5px 5px #888; 
} 

.headerContainer a { 
    color: white; 
} 

.headerTitle { 
    font-size: 20px; 
    font-weight: bold; 
} 

.headerDescription { 
    font-style: italic; 
    margin-left: 10px; 
} 

.headerHomePageLink { 
    float: right; 
    margin-top: 3px; 
} 

.menuScrollContainer { 

} 

.menuContainer { 

} 

.menuCategory { 
    margin: 5px; 
    font-size: 16px; 
} 

.menuLink { 
    margin: 0px 10px; 
} 

.menuLink a { 
    display: block; 
    padding: 5px 8px; 
    color: black; 
    outline: 0px; 
} 

.menuLinkSelected a { 
    background-color: #8C2E0B; 
    color: white; 
    -moz-box-shadow: 5px 5px 5px #888; 
    -webkit-box-shadow: 5px 5px 5px #888; 
    box-shadow: 5px 5px 5px #888; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
} 

.menuLink a:hover { 
    background-color: #8C501C; 
    color: white; 
    -moz-box-shadow: 5px 5px 5px #888; 
    -webkit-box-shadow: 5px 5px 5px #888; 
    box-shadow: 5px 5px 5px #888; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
} 

.sourceContainer { 
    padding: 10px; 
} 

.sourceLink { 
    font-weight: bold; 
    padding: 3px; 
    color: black; 
} 

.sourceLink:hover { 
    cursor: pointer; 
    text-decoration: underline; 
} 

.sourceLinkSelected { 
    color: grey; 
} 

.sourceLinkSelected:hover { 
    cursor: auto; 
    text-decoration: none; 
} 

.mainScrollContainer { 
    margin: 5px; 
} 

.mainContainer { 
    margin: 5px; 
} 

现在，什么我不知道如何着手进行将小部件添加到我的主面板...这里是我的入口点类，在那里我加入一个已经存在的小部件之前，我创建：我已经签

public class Gflot_example implements EntryPoint { 
public void onModuleLoad() { 
    RootPanel.get().add(new Login()); 
    //RootPanel.get().add(???); >> new LineExample() does not look like the way to proceed here 
}  

的EntryPoint的例子，但它调用MainWidow类，做很多的东西，我真的不知道什么是对那里发生的......任何人都还没有从官方的例子一个工作的例子吗？

谢谢！ 亚历

Answer 1

的实施例中的重要部分是在每一个所述createPlot()方法。其余的东西用于处理历史和源代码查看。

添加SimplePlot您RootPanel，只要做到以下几点：

• 创建PlotModel您的信息添加到它
• 创建一个PlotOptions和定义选项，你想
• 创建SimplePlot随您创建的型号和选件
• 将SimplePlot添加到您的RootPanel

基本上，只要复制createPlot()方法，把你的入口点内做RootPanel.get().add(createPlot());

如果你还没有这么做过，您还需要包括gflot模块。将<inherits name='com.googlecode.gflot.GFlot'/>添加到您的模块描述符XML文件。