GWT scrollbars not appearing

GWT scrollbars not appearing - java

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.

Related

Is it possible to change the style of CustomComponent caption in Vaadin 8

I am using a CustomComponent inside a VerticalLayout in Vaadin. I want to change the style of caption to bold But it is not working.
My calss as below:
public class MyTab extends CustomComponent implements UpdatableComponent {
public MyTab() {
HorizontalSplitPanel panel = new HorizontalSplitPanel();
panel.setSplitPosition(218, Unit.PIXELS);
panel.setFirstComponent(createFirstPanelComponent());
panel.setSecondComponent(createSecondPanelComponent());
panel.setLocked(true);
panel.addStyleName("has_border");
setCaption("This is my title");
addStyleName("padding-bottom-10px");
addStyleName("bold-caption");
}
setSizeFull();
setCompositionRoot(panel);
}
}
I have tried these definitions for "bold-caption" inside my scss file . None of them has worked:
.bold-caption {
font-weight: bolder !important; }
.bold-caption.v-caption{
font-weight: bolder !important;
}
.bold-caption.v-caption.v-captiontext{
font-weight: bolder !important;
}
.bold-caption { .v-caption{
font-weight: bolder !important;
} }
The main question is also how to style caption of custom component in Vaadin inside different layout?
Any solution?

I figured this out.
I used:
.v-caption.bold-caption {
font-weight: bolder !important;
}
Don't forget to remvoe cache and build the application if you are using Vaadin add-ones.

Changing MenuBar style from Panel through uiBinder - GWT

I have a uiBinder Setup like this:
<ui:style field="localStyle">
.action {
background-color: #529412;
height: 28px;
width: 100%;
}
.action > table {
height: 100%;
width: 100%;
}
.action a {
font-size: 14px;
color: white;
text-decoration: none;
}
</ui:style>
<g:FlowPanel>
<g:SimplePanel ui:field='action' styleName='{localStyle.action}'>
<g:HorizontalPanel>
<g:Cell verticalAlignment="MIDDLE" horizontalAlignment="LEFT">
<g:SimplePanel ui:field='navigations' styleName='{localStyle.navigations}'></g:SimplePanel>
</g:Cell>
<g:Cell verticalAlignment="MIDDLE" horizontalAlignment="RIGHT">
<g:SimplePanel ui:field='actions' styleName='{localStyle.actions}'></g:SimplePanel>
</g:Cell>
</g:HorizontalPanel>
</g:SimplePanel>
<g:SimplePanel ui:field='content'>
</g:SimplePanel>
</g:FlowPanel>
But I set up a MenuBar in that uifield:action through code something like :
private MenuBar createMenuBar(){
MenuBar menuButton = new MenuBar();
MenuBar mb = new MenuBar(true);
mb.addItem(getAboutMenuItem());
mb.addItem(getLogoutMenuItem());
return menuButton;
}
When I want to style the MenuBar's colour,nHow would i go about this ... I've tried like
.actions MenuBar {
background-color: #eee;
}
But it doesn't like that. Any Suggestions ?

You can not access GWT widgets via class name in the CSS.
You have to create a class name in your Ui:Binder css like
.menuBar {/* STYLE */}
Then inject the style into your Java class as described in the official documentation:
http://www.gwtproject.org/doc/latest/DevGuideUiBinder.html#Programmatic_access
Then you can access the style in your Java class and do
mb.addStyleName(css.menuBar);

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

MultiUploader render issue (GWT + mvp4g)

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;
}

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

Develop Reference

Java is a programming language and computing platform first released by Sun Microsystems in 1995.

GWT scrollbars not appearing - java

Related

Is it possible to change the style of CustomComponent caption in Vaadin 8

Changing MenuBar style from Panel through uiBinder - GWT

CSS is not resolved in UI binder

MultiUploader render issue (GWT + mvp4g)

Add navigation buttons to an AbstractCell

Categories

Resources