Is there a special qooxdoo class to load CSS files dynamically like qx.util.DynamicScriptLoader does for JavaScript files?
For example, depends on user choice what geo maps he wants to use an application loads specific JavaScript and CSS files. I can get .js file via qx.util.DynamicScriptLoader class but for css I use externalResources section in Manifest.json file which always loads a style file (am I right?).
A dynamic possibility to include css files, e.g. in the constructor of a class, is using qx.bom.Stylesheet.includeFile like this:
qx.bom.Stylesheet.includeFile("https://myserver.com/my.css");
This way I've successfully built completely dynamic wrappers for packages/frameworks where all external resources are loaded only on wrapper class instantiation in conjunction with qx.util.DynamicScriptLoader.
If the css files are within your projects resources, you have to call qx.util.ResourceManager.getInstance().toUri() on the resource name and feed it then into qx.bom.Stylesheet.includeFile.
Lets say you have a css file in your project in resource/myframework/my.css you have to first create an #asset hint like this in your wrapper class:
/*
* #asset(myframework/my.css)
*/
and afterwards, e.g. in the constructor you call:
qx.bom.Stylesheet.includeFile(qx.util.ResourceManager.getInstance().toUri(
"resource/myframework/my.css"
));
In order to avoid multiple loading of the css file, I've added a static class member CSS_INCLUDED to the wrapper class, initialized to false and then set to true after calling qx.bom.Stylesheet.includeFile which results in the this code:
if(my.wrapper.CSS_INCLUDED === false) {
qx.bom.Stylesheet.includeFile(qx.util.ResourceManager.getInstance().toUri(
"resource/myframework/my.css"
));
my.wrapper.CSS_INCLUDED = true;
}
This way subsequent instantiations do not load the css file again.
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 have developing custom button control. Code is very simple. I just create MyButton class extend Button class. And I adding css that in same file. like this
public class PrimaryButton extends Button {
public PrimaryButton(){
getStyleClass().add("primary-button");
getStylesheets().add("primarybutton.css");
}
}
My project structure is this.
I made this project file to jar. And I import this jar to scene builder. But css dose not apply. like this. What is wrong?
I think the problem is with in your CSS file path, and when i changed it,into
getStylesheets().add("sample/primarybutton.css");
it worked fine, and this also worked fine
getStylesheets().add("/sample/primarybutton.css");
NOTE: my app architecture is completely identical to yours
here's the complete sample
public class MyButton extends Button {
public MyButton(){
getStylesheets().add("sample/primarybutton.css");
//you can also use this
//getStylesheets().add("/sample/primarybutton.css");
getStyleClass().add("primary-button");
} }
Note : the "primary-button" is a css class in your "primarybutton.css" file
hope this is useful, and solve your problem
The string you pass to the list of stylesheets is treated as a URL. The documentation states:
The URL is a hierarchical URI of the form [scheme:][//authority][path].
If the URL does not have a [scheme:] component, the URL is considered
to be the [path] component only. Any leading '/' character of the
[path] is ignored and the [path] is treated as a path relative to the
root of the application's classpath.
Since both the class and the stylesheet are in the sample package, the URL of the stylesheet relative to the classpath is sample/primarybutton.css, so you could use
getStylesheets().add("sample/primarybutton.css");
If you want to make use of the fact the the stylesheet is in the same package as the class, and make the code more portable (i.e. not hard-code the package name), you can create a complete URL from the current class, and then convert it to a string:
getStylesheets().add(getClass().getResource("primarybutton.css").toExternalForm());
This works because getClass().getResource(...) creates a URL where the resource name, if it doesn't begin with a leading /, is interpreted as being relative to the current class.
I generally prefer the latter approach, though others may not agree.
I am trying to build a web app (in Scala.js and ScalaReact) which is going to be added as a self-contained widget inside a larger web app, over which I have no control (cannot write things into the tag).
My app is going to contain a few pages with different CSS styles but also a collection of generic styles, which need to be loaded together with the widget.
My only option is to add inline tags dynamically but I can't find a way to read the contents of a CSS file and dump it in the tag at compilation time.
I've tried using ScalaCSS which can do the trick but its DSL is incomplete and doesn't meet my requirements even closely.
How can I trick Scala.js into generating tags with contents taken from local CSS files?
It is probably easiest to use the help of sbt to generate an object containing the CSS file as a string literal:
sourceGenerators in Compile <+= Def.task {
val sourceFile = ??? // path to your file
val targetFile = (sourceManaged in Compile).value / "CssHolder.scala"
val css = IO.read(sourceFile).replaceAllLiterally("$", "$$")
val scalaCode =
s"""object CssHolder { final val css = raw\"\"\"$css\"\"\" } """
IO.write(targetFile, scalaCode)
Seq(targetFile)
}
Now in you code, you can simply refer to CssHolder.css and put it inside a <style> tag. Note that most IDEs will complain about this, since they do not know about source generators.
I have a css.erb file which contains the styling of one of my pages. I have a helper which preformats a URL of a given image based on the location of that image.
When I call the helper function from the view, the output is expected (a string containing the URL for of the image). However, calling it in the css.erb file gives me an undefined method error even though I copy and paste the same function into my css file.
It's as if the helper is not included in the css file and is ignored.
Helpers are not available by default to templated .css files. They are intended to help in view construction only. However, you can try the workaround mentioned here using an initializer:
Rails.application.assets.context_class.instance_eval do
include YourHelperModule
end
Alternatively, if you only need this for one or a few files, you can use the solution mentioned here, by adding this code to the top of the .css.erb file:
<% environment.context_class.instance_eval { include YourHelperModule } %>
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