I am using a TabBar and I want to style the component in different ways. So one time this style, another time that style. I thought this will work but it didn't:
TabBar t = new TabBar();
t.addTab( "1" );
t.addTab( "2" );
t.addStyleName( MyResources.INSTANCE.css().slickTab() );
And:
public interface MyResources extends ClientBundle
{
public static final MyResources INSTANCE = GWT.create(MyResources.class);
#Source("style.css") MyCssResource css();
}
public interface MyCssResource extends CssResource
{
String slickTab();
}
In the CSS
.slickTab .gwt-TabBar .gwt-TabBarItem {
background-color: #ff0000;
font-weight: normal;
}
But the appearance don't change. What I am doing wrong?
You might be able to force this in CSS.
.slickTab .gwt-TabBar .gwt-TabBarItem {
background-color: #ff0000 !important;
font-weight: normal !important;
}
Also, since you're adding a style which is subject to the parent style. If this is the case, you might need to set 'setStylePrimaryName' instead of adding it and toggle between style changes with handlers.
Change your CSS. .slickTab .gwt-TabBar .gwt-TabBarItem will match a TabBarItem inside a TabBar inside a slickTab. However, since the TabBar is the slickTab, and is not inside it, you need to do something like this (note .gwt-TabBar.slickTab):
.gwt-TabBar.slickTab .gwt-TabBarItem {
background-color: #ff0000;
font-weight: normal;
}
The interface MyCssResource need to be inside MyResources.
Here's an exemple :
public interface Resources extends ClientBundle
{
public static final Resources INSTANCE =
GWT.create( Resources.class );
/***********************************************
* Home
***********************************************/
#Source( "./css/home.css" )
public HomeCss getHomeCss();
public interface HomeCss extends CssResource
{
String loginBtn();
}
/***********************************************
* Another Page
***********************************************/
#Source( "./css/AnotherPage.css" )
public AnotherPage getAnotherPageCss();
public interface AnotherPage extends CssResource
{
String title();
}
}
This is the way I use all kind of Resource and it work really well.
Whenever you need to use it many time in the same method or function, you can do this :
HomeCss homeStyle = Resource.INSTANCE.getHomeCss();
yourPanel.setStyleName( homeStyle.yourPanel() );
Don't hesitate to ask if there's anything you didn't understand.
.slickTab .gwt-TabBar .gwt-TabBarItem is going to match something with class gwt-TabBarItem inside something with class gwt-TabBar inside something with class slickTab. I think you just want .slickTab .gwt-TabBarItem for the CSS selector.
I highly recommend using FireBug to inspect the HTML structure generated by GWT and how your CSS selectors are applied to it.
The line:
t.addStyleName( MyResources.INSTANCE.css().slickTab() );
Modifies the class element attribute. And INSTANCE.css().slickTab() does not do what you think. These methods without annotations bring back to java the #def's in the css. To make what you want add to MyCssResource:
#ClassName("slickTab")
String slickTab();
So, when GWT garbles the css upside down that method will return the corect class, ej "awEs". These GWT guys are obsessive about squeezing stuff :)
And remember, firebug & chrome-inspector are your friends.
Related
I'm trying to figure out how to override the dataGridHeader style defined in DataGrid.css! GWT core. The GWT style name is obfuscated with adler32 so I can't simply use .dataGridHeader in my css. In my case I wish a simple change of white-space:normal.
I've seen may articles here about injecting css but they all appear to be class level rather than a sub style used within a component like DataGrid.
How do I override a header style used within a component like DataGrid?
Just like with any ClientBundle and CssResource: create an interface that extends Datagrid.Resources and overrides the dataGridStyle method with a #Source annotation pointing to your own CSS file (or possibly to both the original file and your own file, so they'll be combined together).
Doing it that way will override the style for all DataGrids in your app though (it actually depends on which CssResource instance gets ensureInjected() first: the one from the original DataGrid.Resources or the one from your sub-interface): because you use the same return type (DataGrid.Style), the obfuscated class names will be the same.
If you want to change the style on a case-by-case basis then, in addition, declare an interface that extends DataGrid.Style and use that as the return type to your dataGridStyle override: because the obfuscated class name is based on both the interface fully-qualified name and the method name, your DataGrid.Style sub-interface will generate different obfuscated class names than the original DataGrid.Style interface.
Then of course, GWT.create() your DataGrid.Resources sub-interface and pass it as an argument to the DataGrid constructor.
See also http://code.google.com/p/google-web-toolkit/issues/detail?id=6144
Thanks Thomas.
Just to make it easier for the readers...
Create a new Interface
public interface GwtCssDataGridResources extends DataGrid.Resources {
#Source({Style.DEFAULT_CSS, "gwtDataGrid.css"})
Style dataGrid();
}
Use a static reference
public static final GwtCssDataGridResources gwtCssDataGridResources = GWT.create(GwtCssDataGridResources.class);
static {
gwtCssDataGridResources.dataGrid().ensureInjected();
}
Finally create a new CSS file gwtDataGrid.css. Note that if you need to override a style, you have to use !important on each definition.
.dataGridHeader {
color: #FF0000 !important;
}
.dataGridFirstColumnHeader {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
}
.dataGridLastColumnHeader {
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
}
That's it
I cannot change attributes of HTMLFlow, i would like to use my defined css for the HTMLFlow and then setAttribute for FontSize in the constructor but nothing changes.
First I extend HMTLFlow like this.
class MyHTMLFlow extends HTMLFlow{
public MyHTMLFLow(width, fontSize){
setStyle("myHtmlFlow");
//here i tried all posibilites but nothing works
setAttribute("fontSize",fontSize);
getElement().getStyle().setProperty("fontSize",fontSize);
//the width works ok
setWidth(width);
}
.myHtmlFlow{
width:250;
font-size:12px;
}
Please help me to make HTMLFlow size defined.
Use setStyleName, I used this and it works:
HTMLFlow newsFlow = new HTMLFlow();
newsFlow .setPadding(7);
newsFlow .setStyleName("plSectionText");
with my css:
.plSectionText {
font-size: 1.3em;
}
Has anyone had any success applying your own CSS style to GWT's NotificationMole.
If I add my own stylename then that style only applies to the outer DIV which is NOT removed when the mole is hidden, and I can't fing a way to apply style to the inner divs...
A dirty solution :
package com.google.gwt.user.client.ui; // important for package visibility access
import com.google.gwt.dom.client.DivElement;
import com.google.gwt.dom.client.SpanElement;
public class NotificationMoleHelper {
protected NotificationMole notificationMole;
public NotificationMoleHelper(NotificationMole notificationMole) {
super();
this.notificationMole = notificationMole;
}
public SpanElement getNotificationText() {
return notificationMole.notificationText;
}
public DivElement getHeightMeasure() {
return notificationMole.heightMeasure;
}
public DivElement getBorderElement() {
return notificationMole.borderElement;
}
/**
* Change heightMeasure's background color
*
* #param backgroundColor
*/
public void setBackgroundColor(String backgroundColor) {
getBorderElement().getStyle().setBackgroundColor(backgroundColor);
}
}
Example :
final NotificationMoleHelper notificationMoleHelper = new NotificationMoleHelper(notificationMole);
notificationMoleHelper.setBackgroundColor("#FF1111");
Well your NotificationMole has an associated ui.xml file, so any custom styles you want to apply should be applied there.
This might be easy: define your own style first, after init of the NotificationMole, just replace its built-in class with your defined ones, that's what i did in my project. Using DOM to replace classes or using gwtquery, both are OK.
A further alternative which might be more palatable for some people:
Set the id of the mole mole.getElement().setId("mole"); or mole.ensureDebugId("mole")
Then in your ui binder file add style:
width: 200px !important;
height: 60px !important;
}```
I tried without the !importants but gwt was including default widths and height so it wasn't listening to my styling. You won't need the !important if you add styles that gwt doesn't add by default.
I'm trying mightily to style my GWT 2.4 DataGrid, and hit roadblocks at every turn. I've added the following row styling to my DataGrid:
dataTable.setRowStyles(new RowStyles<IntegrityItem>() {
#Override
public String getStyleNames(IntegrityItem row, int rowIndex) {
if (row.getSomeValue() >= 100) {
return MyResources.INSTANCE.mystyles().alertRow();
} else {
return "";
}
}
});
The style alertRow is simply this:
.alertEntry {
font-weight: bold;
color: #00ff00;
background-color: #ff0000;
}
More information: I've made a local copy of DataGrid.css and removed ALL "background" elements from all the styles, and I've used this to construct a ClientBundle:
public interface MyDataGridResources extends DataGrid.Resources {
public static final FmeaDataGridResources INSTANCE = GWT.create(MyDataGridResources.class);
#Override
#Source({"../resources/styling/mydatagridstyles.css"})
Style dataGridStyle();
}
I've used this (MyDataGridResources.INSTANCE) in my DataGrid constructor.
When I try it out, the rows that meet the criteria contained green (#00ff00) text, but the background colour remains white or grey depending on whether it is an even row or an odd row. How is it that background-color is ignored the way it is? Where is it getting those colors in the first place?! I've removed background color information from the css file completely.
You can create a custom CSS file and provide this to the DataGrid through defining a new style resource. This is done by creating a type that extends DataGrid.Resources, which knows about your CSS file. You then pass this to the constructor of the datagrid.
To provide a fairly complete example, first create a new type for the DataGrid style. (Defining a new type like this just uniquely identifies your style within GWT).
public interface MyStyle extends DataGrid.Style {
}
Then, define an interface which overrides the dataGridStyle() method stub in DataGrid.Resources. The dataGridStyle method should return the previously defined MyStyle.
Note the two elements given to the #Source annotation - you can just override any of the class names in the default CSS (DataGrid.css) in the second file you provide ("DataGridOverride.css" here).
public interface DataGridResource extends DataGrid.Resources {
#Source({ DataGrid.Style.DEFAULT_CSS, "DataGridOverride.css" })
MyStyle dataGridStyle();
};
To construct your newly-styled datagrid all you need to do is:
DataGridResource resource = GWT.create(DataGridResource.class);
dataGrid = new DataGrid<T>(pageSize, resource)
One subtlety is as you're increasing the precedence of the overridden styles, you may need to override any other styles that require higher precedence, for example the row hover rules need to come after the row styling rules.
See http://code.google.com/p/google-web-toolkit/issues/detail?id=6144#c3 (which is not a bug!)
In short extend the DataGrid.Style (the goal is only to have a new type, you don't have to add anything to it) and have your dataGridStyle overridden method return your own subtype rather than DataGrid.Style (and it'll work because of return-type covariance)
I was trying to use a tiled image in an image resource, and i was refering to the GWT tutorial for it...
one section says you need to use sprites:
http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#ImageResource
repeatStyle is an enumerated value
that is used in combination with
the#sprite directive to indicate that
the image is intended to be tiled
so, now i need to add a sprite directive .. Where ?
researching about sprites, i came here:
http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Image_Sprites
The example dictates the creation of two files :
MyCssResource
MyResources
where would I write this :
#sprite .mySpriteClass {gwt-image:
"imageAccessor"; other: property;}
?
some more quotes for reference:
#sprite is sensitive to the FooBundle
in which the CSSResource is declared;
a sibling ImageResource method named
in the #sprite declaration will be
used to compose the background sprite.
From what you've written I'm going to presume that MyResources is an interface that extends ClientBundle and MyCssResources is an interface that extends CssResource:
interface MyResources extends ClientBundle {
#Source("myImage.png")
#ImageOptions(repeatStyle = RepeatStyle.BOTH)
ImageResource myImage();
#Source("myCss.css")
MyCssResource myCss();
}
interface MyCssResource extends CssResource {
String myBackground();
}
So now there are two ways to use the ImageResource obtained from MyResources. The first is to attach it to a CSS rule using the #sprite directive. myCss.css:
#sprite .myBackground {
gwt-image: "myImage";
/* Additional CSS rules may be added. */
}
Then, anything with the myBackground class will have myImage as its background. So, using UiBinder, for example:
<ui:UiBinder> <!-- Preamble omitted for this example. -->
<ui:with field="myResources" type="com.mycompany.MyResources"/>
<g:FlowPanel styleName="{myResources.myCss.myBackground}"/>
</ui:UiBinder>
One can also instantiate Image objects directly using the defined ImageResource. UiBinder:
<ui:UiBinder> <!-- Preamble omitted for this example. -->
<ui:with field="myResources" type="com.mycompany.MyResources"/>
<g:Image resource="{myResources.myImage}"/>
</ui:UiBinder>
Without UiBinder:
MyResources myResources = GWT.create(MyResources.class);
Image myImage = new Image(myResources.myImage());
Just let me add this:
#sprite .myBackground {
gwt-image: "myImage";
/* Additional CSS rules may be added. */
}
becomes
.myBackground {
backgroud-image: url(-url of the image-)
width: *width of the image*
height: *height of the image*
}
Remember to override them in case u need it: for example setting height and width to auto:
#sprite .myBackground {
gwt-image: "myImage";
height: auto;
width: auto;
}
HTH, I struggled a lot to find that out ;)
I would like to add also
Remember to call ensureInjected() on MyCssResource.java or else
<g:FlowPanel styleName="{myResources.myCss.myBackground}"/>
wont work..
If you are using gss, #sprite is not working in this case. You should use gwt-sprite like:
.myBackground {
gwt-sprite: "myImage";
}