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
Related
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.
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 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;
In one project, I have several similar applications, they just differ slightly here and there. Like some of the contained icons/images. To help organizing, I see myself [Embed]ing icons in a style like below, however the use of variables in the [Embed] metatag doesn't work.
The below code is contained in a custom component, so I easily should be able to set different icons per application including the component. How do I get around this problem?
public var iconBase:String = "/icons/red/";
[Embed(iconBase + "play.png")] [Bindable] public var icon_play:Class;
[Embed(iconBase + "stop.png")] [Bindable] public var icon_stop:Class;
This should answer your question: Embedding sources dynamically.
Metadata is pre-processed by the compiler, so you can't have any variables in there.
Hope that helps,
Lance
You have quite a few options:
Write a quick code generator to
build the appropriate source files.
Load the icons at runtime, that
way you could change the paths.
Use symlinks to change where the
icon files are retrieved from.
Make an icon library or module and
either load them at compile time or
at runtime.
I think I would just load the images at runtime and change the base path.
One option is to use the ResourceManager and put embed statements in resources files. Different apps could define different resource bundles.
u could use
btn.setStyle(“icon”,iconSymbol);
it can help
I've embedded a SWF into a class using this syntax above my class definition:
[Embed (source='/../assets/MyMovieClips.swf', symbol='SpecialMovieClip')]
public class SpecialMovieClip extends MovieClip
The MovieClip asset seems linked with my class okay, and instantiates along with it, and is visible, but:
I can't access instances placed on stage within that clip.
The timeline scripting seems non-functional.
Is this the drawback of embedding SWF files at compile-time with the Flex SDK?
So, maybe I should just go back to compiling with the Flash IDE if I want timeline scripting or instances positioned on-stage?
if you embed with the [Embed ] tag all scripts will be stripped from you symbol.
But you can add script to frames with MovieClip.addFrameScript():
public function SpecialMovieClip(){
addFrameScript(4,myfunc)
}
private function myfunc(){
stop()
}
i think you can only access the symbols inside a movieClip with movieClip.GetChildAt()
From the docs: (scroll down to "Embedding SWF Symbols")
If the SWF file contains any ActionScript code, Flex prints a warning during compilation and then strips out the ActionScript from the embed symbol. This means that you can only embed the symbol itself.
Depending on what you want to do, I think you'd be better off embedding the entire SWF, or loading things in at runtime.
Incidentally, regarding not being able to access stuff within the embedded symbol, did you make sure that the target SWF is AS3? If you're embedding (or loading) AS2 content, then interoperability is only allowed through LocalConnection. This is also covered on the doc page I linked.