Develop Reference

GWT scrollbars not appearing

I am using Java GWT to create a UiBinder control. I am having a problem getting the scrollbars to show up. The UI has a master HorizontalPanel containing a left and right flow panels. Each are a assigned three graph widgets of 300x750 pixels for a total of six. There should be horizontal and vertical scrollbars, but they don't appear. If I remove the ScrollPanel, I can get the horizontal scrollbars to appear. I've tried using a FlowPanel instead of a HorizontalPanel, but the left and right flow panel children line up vertically underneath each other. Any help to get this working would be appreciated. I've included the ui.xml and java code below.
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:cw="urn:import:com.caseware.commons.client.ui.widgets"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style type="com.caseware.analytics.client.ResultsWidgets.PreviewMultiGraphContainer.CssStyles">
.wrapper {
height: 100%;
width: 100%;
}
.message {
text-align: center;
font-size: 2rem;
width: 100%;
}
.tablesContainer {
overflow: auto !important;
width: 100%;
height: 100%;
padding: 10px;
}
.tablesContainerHalf {
overflow: auto !important;
width: 100%;
height: 50%;
padding: 10px;
}
.table {
}
.table > * {
display: inline-block;
}
.table + .table {
padding-left: 10px;
}
.table2 {
float: left;
}
.centerItem {
justify-content: center;
}
.drillDownArea {
width: 100%;
height: 50%;
}
.simplePanel {
overflow: auto !important;
}
</ui:style>
<ui:with field="ac" type="com.caseware.analytics.client.i18n.AnalyticsConstants" />
<ui:with field='global' type='com.caseware.commons.client.bundles.StylesBundle' />
<g:HTMLPanel styleName="{style.wrapper}">
<g:ScrollPanel addStyleNames="{style.simplePanel}">
<g:HorizontalPanel ui:field="table" addStyleNames="{global.globalStyles.flexInline} {style.tablesContainer} {style.table}">
<g:FlowPanel ui:field="leftTable" addStyleNames="{style.table} {style.table2}" visible="false"></g:FlowPanel>
<g:FlowPanel ui:field="rightTable" addStyleNames="{style.table} {style.table2}" visible="false"></g:FlowPanel>
</g:HorizontalPanel>
</g:ScrollPanel>
</g:HTMLPanel>
</ui:UiBinder>
java file
package com.caseware.analytics.client.ResultsWidgets;
import java.util.List;
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Widget;
public class PreviewMultiGraphContainer extends Composite {
private static PreviewMultiGraphContainerUiBinder uiBinder = GWT.create(PreviewMultiGraphContainerUiBinder.class);
interface PreviewMultiGraphContainerUiBinder extends UiBinder<Widget, PreviewMultiGraphContainer> {
}
interface CssStyles extends CssResource {
String centerItem();
String tablesContainer();
String tablesContainerHalf();
}
#UiField CssStyles style;
#UiField HorizontalPanel table;
#UiField FlowPanel leftTable;
#UiField FlowPanel rightTable;
public PreviewMultiGraphContainer() {
initWidget(uiBinder.createAndBindUi(this));
HighChartsInjector.injectHighChart();
table.setStyleName(style.tablesContainer());
}
public void clear() {
leftTable.clear();
leftTable.setVisible(false);
rightTable.clear();
rightTable.setVisible(false);
}
public void addGraphs(final List<Widget> wc) {
for (final Widget w : wc) {
_getTableToAppendTo().add(w);
}
leftTable.setVisible(leftTable.getWidgetCount() != 0);
rightTable.setVisible(rightTable.getWidgetCount() != 0);
table.addStyleName(style.centerItem());
if (rightTable.isVisible()) {
table.removeStyleName(style.centerItem());
}
}
private FlowPanel _getTableToAppendTo() {
if (leftTable.getWidgetCount() > rightTable.getWidgetCount()) {
return rightTable;
}
return leftTable;
}
}

You cannot use HorizontalPanel - or any LayoutPanel - as a child of ScrollPanel, because these panels take their size from a parent. This means that your HorizontalPanel will always be the same height as your ScrollPanel - thus, no scroll bars will appear.
You need to use FlowPanel or similar panel that takes height from their content.
If you want two panels to be displayed side by side, you need to use standard CSS approaches: either use "float" property, or use flex-box CSS on the parent. Flex-box is supported by all modern browsers.
Also, unless you need specific functionality from ScrollPanel, you can simply remove it, and add "overflow: auto" property to your .wrapper style.

CSS is not resolved in UI binder

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.)

step by step gflot tutorial?

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.

Change Background-color of menue with jquery

I am trying to build a photo gallery with Zenphoto. They use php and one can add a custom menue like this:
<div id="navmenu">
<?php printCustomMenu('main_menue'); ?>
</div>
I changed the appearance of the whole thing in the sylesheet, which looks like this:
#navmenu {
width: 1000px;
height: 42px;
margin: 0px auto 30px auto;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: left;
font-size: 21px;
background-color: #000000
}
#navmenu li {
display: inline;
}
#navmenu a {
color: #eee;
display: inline;
line-height: 2em;
padding: 0.375em 0.5em;
text-decoration: none;
}
#navmenu a:hover {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 21px;
color: #000000;
background-color: #ffff33;
padding: 0.375em 0.5em;
}
Now I want to change the background-color of the individual menu items, so that every menu item has its own color. Random or not I don't care. I created a js file that is wired correctly.
I have tried several bits of code I found, but nothing works. Now I tried to do this to see if I can change the color at all:
$(document).ready(function() {
$("navmenu").hover(function(){
$(this).css('background-color', '#eeeeee')
});
});
Does not work. I am new to all this programming and I would greatly appreciate any help. It would be super nice if you could answer for dummies, so that I can understand.

Use:
$("#navmenu").hover(function(){
You missed the ID # selector.

You need to properly address the div using # for an ID or a . for a class:
$(document).ready(function() {
$("#navmenu").hover(function(){
$(this).css('background-color', '#eeeeee')
});
});
A tip for beginners: if you're not getting the result you expect, you can verify that the function is being called by throwing in a console log message anywhere like this:
$(document).ready(function() {
console.log("document ready!");
$("#navmenu").hover(function(){
console.log("hover activated");
$(this).css('background-color', '#eeeeee')
});
});

You could give something like this a try as it will pick a random color on hover and switch back to the #EEE background on the hover out event:
jQuery:
$(function () {
$("#navmenu a").hover(function () {
var newColor = Math.floor(Math.random() * 16777215).toString(16);
$(this).css('background-color', '#' + newColor);
}, function () {
$(this).css('background-color', '#EEE')
});
});​
Working Example: http://jsfiddle.net/Qc4R7/

Add navigation buttons to an AbstractCell

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());