I have a ClientBundle:
public interface Resources extends ClientBundle {
#Source("styles/styles.css")
Layout styles();
#Source("styles/styles2.css")
Styles styles2();
}
In my UiBinder xml I use this class like this:
<ui:with field='resources' type='com.nordea.omega.gwt.client.ui.AppResources' />
...
<div class="{resources.styles.label}">Text</div>
Standard is that styles.css is used, but is it possible at runtime change to use styles2.css instead?
If you use GWT-style annotations, AFAIK it will not be possible to change that dynamically because the annotations/classes are resolved statically, ie, when GWT compiles (last time I used GWT it was around a year or so).
The best way would be to navigate the DOM and change the linked style.css to another stylesheet.
Check the showcase src for an example of how to do this:
http://code.google.com/p/google-web-toolkit/source/browse/branches/crawlability/samples/showcase/src/com/google/gwt/sample/showcase/client/Showcase.java?r=5652#514
If you use CSS resources it's quite easy to access them programmatically: check this http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Programmatic_access
The key code being:
#UiField AppResources resources;
Related
Using Webpacker I can load css files and they get output in the stylesheet pack files, but sometimes I'd like to access the CSS in these files from within javascript for use say in a WYSIWYG editor's config (specifying some extra styles for the IFRAME). The other option is to be able to access the public path of a css file loaded in like so:
import froala_style from '../../../css/froala.css'
My suspicion is that it's to do with the css loader that comes with Webpacker. Its job is to load the css and compile it out to a seperate file. I think that one can't have two css loaders at the same time? Could the answer be to apply filters to a custom loader so that it takes effect on only the file I'm wanting to load in as text or the path?
One can override the existing loaders for a particular import like so:
import froala_style from '!css-loader!../../../css/froala.css'
Prepending the ! overrides existing loaders allowing us to specify our own. In this example one can call froala_style.toString() to receive the contents of the CSS file.
For reference: https://webpack.js.org/concepts/loaders/#inline
I'm using Angular CLI and it's preconfig'ed webpack bundle. I have a bit of HTML that's inserted into a template via [innerHTML] and want to apply styling to it, but I notice that the final styles.bundle.js doesn't contain the style I write. I assume webpack is smart and strips out the CSS definition since it's not in any template, but being added via JS.
In my template I simply have this:
<div [innerHTML]="message"></div>
Which gets a value in the controller such as:
this.message= '<p class="notice">Your account was successfully activated!</p>';
And while I have .notice defined in my .less file, it doesn't appear in the style bundle. When I had the notice class previously in the template itself, it worked fine.
Is there a way for me to keep this from happening? Should I be coding differently? Or is the problem elsewhere and not what I think it is?
Since the HTML being added by innerHTML is not directly in the scope of Angular, I needed to add /deep/ selector before .notice in my less file, to make sure children can access the CSS value.
I am using a GWT library that defines a CssResource with some class names in the associated css file, e.g. .someWidget {...}
Now in my code I would like to reference this 'external' and possibly obfuscated class name in my own css file. For instance to do:
.someWidget.animated {...}
Is there a way to achieve this?
(I know I could use #external .boxWidget if I would have control over the external library)
Is the external Library using a ClientBundle and CssResource Interfaces? If so you can extend that interface, add own *.css files and the original ones.
#Source({"my.css","base.css"})
public CssResource css();
You also could completly disable css obfuscation. But thats not a good idea.
I'm using GWT in a new project that I'm working on and I'm facing a problem. Some of the CSS rules were defined into the XML file and not into a CSS file.
The problem is that when GWT compiles the code, my name classes defined into my XML file are changed to a new random ID.
Stuffs like GKA-VPPBPE or GKA-VPPBLE
Is there is a way to keep the original name instead of the generated ones?
The generation of obfuscated css classnames is a feature.
GWT has enabled CSS obfuscation activated by default. This will help reduce the download size and also reduce collision of css-classnames.
You can disable this in general:
<set-configuration-property name="CssResource.style" value="pretty"/>
Or for some classes only:
#external .myClassName
Look here for some more information
https://vcfvct.wordpress.com/2013/10/04/disable-obfuscation-in-gwt-css-resources/
We use
[Embed(source="assets/styles/basic/my_skins.swf",symbol="preloader_3")]
private var PreloaderAnim:Class;
for embedding a movieclip from an swf file.
How can I do the same using a CSS file (which is loaded at runtime) and use it in my class?
You can do it in a way like this:
1) In your css file declare a new style. For example:
.myPreloader {
skin: Embed(source="assets/styles/basic/my_skins.swf", symbol="preloader_3");
}
2) Anywhere you can access the class you need:
var PreloaderAnim:Class = StyleManager.getStyleDeclaration(".myPreloader").getStyle("skin");
That's it. You can use PreloaderAnim variable as you want. For example, you can create new movie clip.
You need to remember that runtime flex CSS with embedded assets is also an swf. So if you wan't to load an swf you should probably just go ahead and load it without additional embedding. If you're, however, planning to use the swf symbols as part of the skin you should use something similiar to this:
style.css:
ComboBox.Styled
{
skin: Embed(source='skin/some_file.swf', symbol='ComboBoxSkinInSomeFile');
}
I'm almost sure you can't just use the CSS as a container for symbols, without defining them as a part of some style.
For more info on how to compile css to swf look here: Blog post