java - 一步一步的 gflot 教程？

Question

我觉得在这里问这个问题有点傻，但我似乎找不到像样的 Gflot教程。是的，有很多 examples , 你甚至可以下载 whole code并尝试一下，但是如果您只是想在 GWT 项目中创建一个 uiBinder 并将其添加到主面板……这真的很难。我正在尝试向测试 GWT 项目中的主 html 文件添加一个简单的折线图。

这是我的 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;
}

现在，我不知道如何继续将小部件添加到我的主面板...这是我的 EntryPoint 类，我要在其中添加我之前创建的已经存在的小部件:

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()方法，将其放入您的 EntryPoint 并执行 RootPanel.get().add(createPlot());

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