Question

我觉得这里有点愚蠢地问这个问题，但我似乎找不到合适的Gflot教程。是的，有大量的examples，您甚至可以下载whole code并尝试一下，但如果您只是想在GWT项目中创建一个uiBinder并将其添加到主面板中。。变得非常难。我正在尝试在测试GWT项目中将一个简单的LineChart添加到我的主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文件中。

一步一步gflot教程？

1 个答案: