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);
Related
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.
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 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/