I feel a bit dumb asking this question here, but I can't seem to find a decent Gflot tutorial. Yes, there are tons of examples, and you can even download the whole code and try it out, but if you just want to create a uiBinder in a GWT project and add it to the main panel...it becomes really hard. I'm trying to add a simple LineChart to my main html file in a test GWT project.
Here is my LineExample uiBinder, directly copied from the examples:
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();
}
}
Here is the correspoding 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;
}
Generate
Switch to dark
Switch to white
The Resources file used:
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();
}
}
And the css file, 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;
}
Now, what I don't know how to proceed is adding the widget to my main panel...here is my EntryPoint class, where I'm adding an already existing widget I created before:
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
}
I've checked the EntryPoint in the examples, but it calls a MainWidow class that does lots of stuff I really don't know what is going on there...anyone has a working example NOT from the official examples?
Thanks!
Alex
The important part of the examples is the createPlot() method in each one. Rest of the stuff is used to handle history and source code viewing.
To add a SimplePlot to your RootPanel, just do the following :
Create a PlotModel and add your data to it
Create a PlotOptions and define the options you want
Create a SimplePlot with the model and options you created
Add the SimplePlot to your RootPanel
Basically, just copy the createPlot() method, put it inside your EntryPoint and do RootPanel.get().add(createPlot());
If you haven't done it yet, you also need to include the gflot module. Add <inherits name='com.googlecode.gflot.GFlot'/> to your module descriptor XML file.
Related
Let's consider I have a HTML markup:
<div class="pull-right">
<div class="btn-group">
<a href="#" class="btn btn-default">
<i class="ico ico-prev"></i>
</a>
<div class="dropdown2 inline">
<a href="#" class="btn btn-default btn-shorter">
<strong>1-8</strong>
</a>
<ul class="dropdown-menu spec_width">
<li><a data-ico="1" href="#">10-30</a></li>
<li>30-40</li>
<li>40-50</li>
<li>50-60</li>
</ul>
</div>
<a href="#" class="btn btn-default">
<i class="ico ico-next"></i>
</a>
</div>
<span class="page-title">from<strong>45</strong></span>
.dropdown-menu {
padding: 0;
margin: 0;
left: -1px;
top: 37px;
font-size: 13px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(100, 100, 100, 0.5);
-moz-box-shadow: 0px 0px 25px 0px rgba(100, 100, 100, 0.5);
box-shadow: 0px 0px 25px 0px rgba(100, 100, 100, 0.5);
border: 1px solid #d1d4d3;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: #f9f9f9;
}
.dropdown-menu li > a {
color: #4d5357;
padding: 8px 20px;
}
.spec_width {
width: 72px;
min-width: 72px;
left: 50% !important;
margin-left: -36px;
max-height: 150px;
min-height: 30px;
float: left;
overflow: hidden;
display: block !important;
visibility: hidden;
}
.spec_width li {
line-height: 29px;
width: 100%;
text-align: center;
padding: 4px 0;
}
.spec_width li:hover {
background: #e1e1e1;
}
.spec_width li a {
padding: 0px 0;
background: none !important;
width: 100%;
text-align: center;
}
I use that markup in ModalWindow, and it works pretty good, but when I apply CSS class to <ul> tag I don't see it in the browser, but when I inspect element, it generates in HTML code. I think that it must be because I use it in ModalWindow, and something(script, style) is conflicted. Any ideas?
In order to use Wicket to create HTML emails, we need to fake the request/response cycle. I wrote this convenient method that renders a bookmarkable page (pageclass + pageparameters) to a string:
http://www.danwalmsley.com/render_a_wicket_page_to_a_string_for_html_email
protected String renderPage(Class extends Page> pageClass,
PageParameters pageParameters) {
//get the servlet context WebApplication application =
(WebApplication) WebApplication.get();
ServletContext context = application.getServletContext();
//fake a request/response cycle MockHttpSession servletSession =
new MockHttpSession(context); servletSession.setTemporary(true);
MockHttpServletRequest servletRequest = new MockHttpServletRequest(
application, servletSession, context); MockHttpServletResponse servletResponse = new MockHttpServletResponse(
servletRequest);
//initialize request and response servletRequest.initialize();
servletResponse.initialize();
WebRequest webRequest = new WebRequest(servletRequest);
BufferedWebResponse webResponse = new
BufferedWebResponse(servletResponse); webResponse.setAjax(true);
WebRequestCycle requestCycle = new WebRequestCycle(
application, webRequest, webResponse);
requestCycle.setRequestTarget(new
BookmarkablePageRequestTarget(pageClass, pageParameters));
try { requestCycle.request();
log.warn("Response after request: "+webResponse.toString());
if (requestCycle.wasHandled() == false) {
requestCycle.setRequestTarget(new WebErrorCodeResponseTarget(
HttpServletResponse.SC_NOT_FOUND)); } requestCycle.detach();
} finally { requestCycle.getResponse().close(); } return
webResponse.toString();
}
The problem was solved after I append target.appendJavaScript("launchJS();"); where I had AjaxRequestTarget in my pages.
I have created a search panel for my application using UI binder but the desired behavior is different.
Ui.xml
<g:HTMLPanel>
<c:SimpleContainer>
<c:InfoContainerHeader text="{labels.searchFilter}" />
<g:FlowPanel ui:field="searchPanel" styleName="{res.style.searchPanel}">
<g:FlowPanel ui:field="searchLabelPanel" styleName="{res.style.searchLabelPanel}">
<g:InlineLabel ui:field="searchLabel" styleName="{res.style.searchLabel}" text="{labels.searchFor}"/>
<g:InlineLabel ui:field="searchRedStarLabel" styleName="{res.style.searchRedStarLabel}">*</g:InlineLabel>
</g:FlowPanel>
<chzn:ChosenListBox ui:field="searchListBox" styleName="{res.style.searchListBox}" width="35%"/>
</g:FlowPanel>
<g:SimplePanel addStyleNames="{rscb.style.textAlignCenter}">
<g:Button ui:field="searchButton" text="{clabels.search}"/>
</g:SimplePanel>
</c:SimpleContainer>
</g:HTMLPanel>
my css
.search-panel {
border-radius: 2px 2px 2px 2px;
border: 1px solid #F2AF00;
color: #000F16;
margin: 2% 0;
}
.search-label-panel {
margin: 0 15px 0 0;
width: 40%;
text-align: right;
float: left;
font-weight: bold;
}
.search-red-star-label {
color: #790000;
margin-left: 4px;
display: inline;
}
.search-label {
display: inline;
}
.search-list-box {
width: 35%;
margin-bottom: 4px;
font-size: 13px;
display: inline-block;
position: relative;
}
my ui binder
public class SearchFilterViewImpl implements SearchFilterView
{
HTMLPanel rootElement;
SearchFilterViewPresenter presenter;
#Override
public void setPresenter(SearchFilterViewPresenter presenter)
{
this.presenter = presenter;
}
#Override
public void refresh()
{
}
#Override
public Widget asWidget()
{
return rootElement;
}
interface FilterViewImplUiBinder extends UiBinder<HTMLPanel, SearchFilterViewImpl>
{
}
private static FilterViewImplUiBinder ourUiBinder = GWT.create(FilterViewImplUiBinder.class);
public SearchFilterViewImpl()
{
rootElement = ourUiBinder.createAndBindUi(this);
}
#UiField
ChosenListBox searchListBox;
#UiField
FlowPanel searchPanel;
#UiField
FlowPanel searchLabelPanel;
#UiField
Label searchLabel;
#UiField
Label searchRedStarLabel;
#Override
public void setSearchListElements(List<AdminSearchType> searchElements)
{
for (AdminSearchType searchElement : searchElements)
{
searchListBox.addItem(searchElement.getSearchType(), searchElement.name());
}
searchListBox.setPlaceholderTextSingle("What would you like to search for?");
}
#Override
public void setStyles(SearchListBoxCss cssStyle)
{
searchPanel.setStylePrimaryName(cssStyle.searchPanel());
searchLabel.setStylePrimaryName(cssStyle.searchLabelPanel());
searchLabel.setStylePrimaryName(cssStyle.searchLabel());
searchRedStarLabel.setStylePrimaryName(cssStyle.searchRedStarLabel());
searchListBox.setStylePrimaryName(cssStyle.searchListBox());
}
}
but looks like none of my css changes are being picked by GWT.
I am expecting
what is appearing
For every CssResource you use, you need to call ensureInjected(). This call inserts a reference to the CSS into your DOM ("into the HTML page").
I assume, that your SearchListBoxCss extends CssResource, so just call cssStyle.ensureInjected(). Actually, it only needs to be done once, so you can even make the call static (but it doesn't really matter if you call it repeatedly).
(Note: When the styles are embedded directly in the ui.xml file, then GWT calls ensureInjected() automatically for you.)
I am using MultiUploader and sometimes "uploader" button is cropped. It happens only if at the time of page loading uploader button is invisible. When I further make it visible, button becomes visible, but cropped. If page is loading with param=true everything is okay.
//mvp4g is used
public void onEventBusEventName(boolean param) {
...
view.uploader.setVisible(param);
...
this.view.logoUploader.setI18Constants(UiConstants.INSTANCE);
this.view.logoUploader.setStyleName("logo-uploader");
view.logoUploader.addOnFinishUploadHandler(new IUploader.OnFinishUploaderHandler() {
#Override
public void onFinish(IUploader uploader) {
if (uploader.getStatus() == IUploadStatus.Status.SUCCESS) {
String fileId = uploader.getFileInput().getName();
updateLogo(fileId);
} else {
Window.alert(uploader.getStatus().toString());
}
}
});
...
eventBus.setCenterContent(view); //setting root widget to specified view currently showing
}
How it looks:
http://imgur.com/i0rxerJ.jpg
ClassView:
#UiField
MultiUploader logoUploader;
ClassViewUi:
<gwtupload:MultiUploader type="BUTTON" ui:field="logoUploader" title="Upload new logo"
avoidRepeatFiles="true" maximumFiles="1"
validExtensions="jpg,png,jpeg,bmp"/>
Css:
.logo-uploader {
margin-bottom: 10px;
float: left;
}
.logo-uploader .gwt-Button {
display: inline-block;
width: 171px;
height: 26px;
background: url(../i/sprite.png) -1px -335px no-repeat;
text-align: center;
text-decoration: none;
line-height: 1;
border: none;
color: #195c84;
cursor: pointer;
}
.logo-uploader .gwt-Button:hover {
background: url(../i/sprite.png) -1px -362px no-repeat;
}
I have an
IFrameElement fie;
for which I need to apply the css style:
p{
font-family: arial,sans-serif;
color: #666666;
font-size: 9px;
text-align: left;
line-height: 1px;
font-weight: bolder;
}
But I just find a way to GET the style and not SET it
Style s = fie.getContentDocument().getBody().getStyle();
How can I apply the css for this IFrameElement?
Try this:
fie.getContentDocument().getBody().setId("myframe");
and in the css file:
p, .myframe p {
font-family: arial,sans-serif;
color: #666666;
font-size: 9px;
text-align: left;
line-height: 1px;
font-weight: bolder;
}
I've created an AbstractCell<String> to create the header that says "welcome to your mobile..." and I would like to add two buttons in this AbstractCell: the first to return to the previous page, and the second to return to the welcome page.
I've used to create the header element a class that extends AbstractCell<String> using this code:
public class HeaderCell extends AbstractCell<String> {
interface Templates extends SafeHtmlTemplates {
String style = "HeaderPanel";
#SafeHtmlTemplates.Template("<div class=\""+style+"\">{0}</div>")
SafeHtml cell(SafeHtml value);
}
private Templates templates = GWT.create(Templates.class);
interface templateWithButton extends SafeHtmlTemplates {
}
#Override
public void render(com.google.gwt.cell.client.Cell.Context context,
String value, SafeHtmlBuilder sb) {
SafeHtml safeValue = SafeHtmlUtils.fromString(value);
SafeHtml rendered = templates.cell(safeValue);
sb.append(rendered);
}
}
Is there any way to add these two buttons?
Please notice the header cell wich is colored in black.
PS: To set the header element looking like the image below, I use this CSS:
.HeaderPanel {
-moz-box-shadow: inset -1px -1px 15px 1px #ffffff;
-webkit-box-shadow: inset -1px -1px 15px 1px #ffffff;
box-shadow: inset -1px -1px 15px 1px #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #242524
), color-stop(1, #242524) );
background: -moz-linear-gradient(center top, #242524 5%, #242524 100%);
background-color: #242524;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
border: 1px solid #dcdcdc;
color: #ffffff;
font-family: arial;
font-size: 17px;
font-weight: bold;
padding: 8px 36px;
text-decoration: none;
text-shadow: 1px 1px 29px #ffffff;
text-align: center;
}
I'm not really sure if this is the best implementation, but it works for me.
-- First, add this to your constructor:
public HeaderCell() {
super("click", "keydown");
}
-- Then, override the onBrowserEvent:
#Override
public void onBrowserEvent(Context context, Element parent, String value, NativeEvent event, ValueUpdater<String> valueUpdater) {
// Let AbstractCell handle the keydown event.
super.onBrowserEvent(context, parent, value, event, valueUpdater);
// Handle the click event.
if ("click".equals(event.getType())) {
EventTarget eventTarget = event.getEventTarget();
// in here we check whether the cell that was being clicked is an image, not the entire cell
if(eventTarget.toString().contains("img src") && !eventTarget.toString().contains("<div class")){
// do something if it's indeed the image that was clicked
}
}
}
Cheers, Lin
What about using CompositeCell with ActionCells for your buttons?
http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/cell/client/CompositeCell.html
new CompositeCell<C>(Arrays.<HasCell<C, ?>>asList(
new IdentityColumn<C>(new ActionCell<C>("<", new Delegate<C>() { ... })),
new Column<C, String>(new HeaderCell()) { ... },
new IdentityColumn<C>(new ActionCell<C>(">", new Delegate<C>() { ... }))
));
// create the button element
Element button = DOM.createButton();
// here you can alter the html based on your needs
button.setInnerHTML(<"button type="button">Click Me! <"/button>");
// add it to the safehtmlbuilder
sb.appendHtmlConstant(button.getInnerHTML());