For my GWT application, I want to show the selected row in a FlexTable, and for that purpose I add a style to the specific row:
#UiField FlexTable productTable;
int row;
[...]
/* select row */
productTable.getRowFormatter().addStyleName(row, "row-selected");
In the corresponding ui.xml file, I have the style added as follows:
ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:u="urn:import:myapplication.client.ui">
<ui:style>
tr.row-selected {
background: #92C1F0;
}
</ui:style>
<g:VerticalPanel>
<g:ScrollPanel>
<g:FlexTable ui:field="productTable" width="100%" height="100%">
</g:FlexTable>
</g:ScrollPanel>
</g:VerticalPanel>
</ui:UiBinder>
This does not work, while adding the style in my global .css file does. In FireBug I see that the name tr.row-selected is garbled into something like: tr.GB1HWLGEI
Why does this not work and how should it work instead?
UiBinder uses ClientBundle for ui:style, so the rules and syntax/features of CssResource apply.
This means that your CSS class names will be obfuscated (so that they're unique and won't conflict with a same-named CSS class from another CssResource or external stylesheet).
In your case, you can either define a CssResource interface and declare the ui:style to extend that interface and inject the instance into a #UiField; so you can use the obfuscated style into your addStyleName; as in http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Programmatic_access
Or you can use #external in your ui:style to disable obfuscation for the CSS class; see http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes.
Garbled is really obfuscated which will be faster in the browser and harder for someone to reverse engineer. It also means you don't need to worry about css namespace conflicts.
So, just use the following line in your ModuleName.gwt.xml file during development to disable obfuscation.
<set-configuration-property name="CssResource.style" value="pretty" />
Related
I have a Parent.js component with a child component Child.js inside of it.
Parent.js imports parents.css
Child.js imports child.css
If I define this in child.css:
.example {
font-family: 'Roboto', sans-serif;
}
How come I'm able to use this className in the Parent.js component as well despite not specifying it in the parent.css?
Unless you use unique class names, CSS Modules or some other alternatives available for scoping CSS styles to any component in React, styles specified in any CSS file will be applied globally.
If you want to limit styles to any component, use CSS Modules or make sure every class name is unique in your project.
For details on how to use CSS Modules, see Adding a CSS Modules Stylesheet. You can also look at 9 Ways To Implement CSS in React JS for other available alternatives.
I recommend using unique class names. For example, lets say you have multiple ListView components: MemberUsersListView, AdminUsersListView, TestUsersListView; and each of them needs to be styled differently. I would create the following CSS classes:
.MUListView{
...
}
.AUListView{
...
}
.TUListView{
...
}
I know this seem's annoying, but it's cleaner than applying inline styles and easier to implement on smaller projects.
Just starting using Bulma front end framework, everything is going good until try to use prismjs and start getting conflit with styles because prismjs do not prefix their classes name.
The main problem are with:
.number { ... }
and
.tag {...}
It can be override manually but it is not a good practice. This names are too generic or common to not be prefixed by prismjs.
Is there any way to work around this?
Manually fixed with:
pre code [class~=token]{
font:inherit;
background: inherit;
}
Because "token" class name is from prismjs and appear with other prismjs classes, use this selector to help override the styles needed. Just add this to the custom style and make sure to link after any framework css file linked in the html document.
I am able to use image sprites (#sprite) successfully by explicitly defining a ClientBundle with sibling CssResource and ImageResource accessors. However I'm wondering whether using a sprite means that must have a separate .css file. If I define my styles inline with <ui:style>, how do I get a known name for an image accessor to use with gwt-image:?
Answered my own question:
<ui:style>
#sprite .panel {
gwt-image: "titleBackground";
}
</ui:style>
<ui:image field='titleBackground' src="constants/title-bg.jpg" />
The field names of image resources in the same template serve as the names of image accessor functions in the generated client bundle.
I am using a CssResource contained within a ClientBundle according to this guide:
http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html#cssfiles
I am accessing the styles from my UiBinder xml according to this guide using ui:with:
http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Using_an_external_resource
This works great for accessing my css using class on html elements or styleName on GWT widgets. However, I would like to override the body selector, how can I accomplish that?
This worked great when I previously used tag within my html-file or when I pointed to the css within my GWT module xml. But since this was depracted I switched to only using CssResource. Now my own body selector is not used and the one from GWT Standard Theme is used.
Alright, I found two solutions myself for this:
Add #external to the body CSS selector to suppress selector obfuscation, according to this guide:
http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes
#external body;
body {
my style
}
Add an id to the body, grab the element using GWTs DOM.getElementById and add the style.
Element body = DOM.getElementById("bodyId");
body.addClassName(AppResources.layout().body());
Hope this can help other in the same situation.
I have some html files with their own css. I want to use them in a gwt application so i copied the html and the css files in the application.
The problem is when i open the html it uses the gwt theme style. For example in my css the html 'body' background color is black, but it looks white unless i deactivate the theme.
How could I override the gwt theme style and use my css styles?
This post on the GWT mailing list describes an alternative solution. You have to create a new ClientBundle which references your CSS file:
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
public interface Resources extends ClientBundle {
public static final Resources INSTANCE = GWT.create(Resources.class);
#Source("style.css")
#CssResource.NotStrict
CssResource css();
}
And then inside your onModuleLoad() method you have to inject the CSS file:
public class YourApp implements EntryPoint {
public void onModuleLoad() {
//...
Resources.INSTANCE.css().ensureInjected();
//...
}
In my opinion this is the cleanest and easiest way to override the styles.
Like Sarfaz said - !important should be your last resort as it kind of defeats the whole concept of Cascading Style Sheets.
Anyway, in GWT, in order to easily override the core GWT styles contained in the theme you selected, you should locate your module file (the one that has a file name ending on *.gwt.xml), then locate the line where you declare your theme and put your custom/whatever stylesheet after it, like this:
<inherits name='com.google.gwt.user.theme.standard.Standard' />
<stylesheet src="CustomStylesheet.css" />
Note, however, that for GWT 2.0 CssResource and UiBinder is recommended.
Be sure to read the appropriate section of the docs for more pointers.
You can override the styles of GWT by using the keyword !important in all your css of the html files, for example, if one of your html file contains this css:
background-color:#000000;
Then you should write it like this:
background-color:#000000 !important;
Do the same for all your styles in html files.
Note that using !important is not the best way, if you can find any better alternatives you should go for them first.
In addition to using !important you can also rely on CSS Selector Specificity.
Most (all?) of the GWT styles are stated using just class eg:
.gwt-DisclosurePanel .header {
color: black;
cursor: pointer;
text-decoration: none;
}
To override this you can use !important or you can be more specific in your selectors eg:
table.gwt-DisclosurePanel .header {
text-decoration: underline;
}
How does this work? This works because adding the element name (table) to the class in the selector makes it more specific than just the class alone. This will override other styles even from stylesheets listed lower in the header.
Giving your widgets IDs and using those is even more specific.
I know it's not very elegant but I found it rather effective to replace the standard.css file in the output files generated by GWT with an empty file.
(Maven can take care of that reliably.)
The solution <stylesheet src="CustomStylesheet.css" /> is deprecated and did not work with the new superdevmode.
A solution that worked for me (using GWT 2.7) was to create a new custom theme:
projectPackage/themes/MyCustomTheme/MyCustomTheme.gwt.xml
<module>
<stylesheet src="gwt/MyCustomTheme/MyCss.css"/>
</module>
projectPackage/themes/MyCustomTheme/MyCustomThemeRessources.gwt.xml
</module>
projectPackage/themes/MyCustomTheme/public/gwt/MyCustomTheme/MyCss.css
(Note: removing the gwt/MyCustomTheme/ part of the path worked in devmode but didn't work in deployed version, of cause you can still rename 'MyCustomTheme' to something of your liking)
The css file you want to use
Project.gwt.xml
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.0//EN"
"http://google-web-toolkit.googlecode.com/svn/releases/2.0/distro-source/core/src/gwt-module.dtd">
<module rename-to="Project">
(...)
<!-- Inherit GWT theme. e.g. the Clean theme -->
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- Our custom theme -->
<inherits name='projectPackage.themes.MyCustomTheme.MyCustomTheme'/>
(...)
</module>
Note: You can get a sample custom theme using http://gwt-theme-generator.appspot.com/ and extracting the downloaded .jar file.
That's easy. Just put your CSS link under the GWT's module script:
<script type="text/javascript" src="myapp/myapp.nocache.js"></script>
<link rel="stylesheet" href="myapp.css" type="text/css">