我覺得有點愚蠢的問這個問題在這裏,但我似乎無法找到一份體面Gflot教程。是的,有噸examples,你甚至可以下載whole code和嘗試,但如果你只是想在GWT項目創建UiBinder的,並把它添加到主面板...它變得真的很難。我試圖在測試GWT項目中爲我的主html文件添加一個簡單的LineChart。一步一步gflot教程?
這裏是我的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類,做很多的東西,我真的不知道什麼是對那裏發生的......任何人都還沒有從官方的例子一個工作的例子嗎?
謝謝! 亞歷
Hello Nicolas,你是Gflot的主要開發者吧?讓我首先感謝你的工作,GWT中有Flots是非常棒的!我會嘗試你的建議,並讓你知道發生了什麼!問候,亞歷克斯 – AlejandroVK
這是正確的:)不要猶豫提問,我從來沒有花時間寫一個適當的文件! –
對不起,我以前無法回答...這個作品!我總是希望圖表必須在uiBinder中使用,但我現在看到這不是必要的......我會在博客中寫一個簡單的教程,介紹如何做一些示例......再次感謝Nicolas! – AlejandroVK