Today I made the last completion to my CSSLoader class, the class enables you to load CSS files into your flex application during runtime, a functionality Actionscript3.0 lacks. It’s actually as easy as this:[as]var loader:CSSLoader = new CSSLoader();
loader.load(”mycssfile.css”, “nameToBeGiven”, displayObj1, displayObj2);[/as]
..where the amount of DisplayObjects (to which the style will be applied automatically after loading has finished) is infinite. The style will also automatically be applied to the given DisplayObjects’ their children (if any).
Obviously, the class comes with many more features (methods and events), which are all to be found in the docs.
Go check out the demo, and browse through the source and documentation.
Please leave a comment and tell me what you think..
Oh, and big thanks go out to Maikel for helping my out time after time again..
No thanx!! Keep up the good work!
[...] trotste ben ik op de CSSLoader class die ik woensdag gepubliceerd heb. Maikel vertelde me, toen hij zag dat ik javadoc comments in mijn [...]
Does this class load non-css attributes that flex understands, such as selectedUpSkin, etc…?
[quote comment="139"]Does this class load non-css attributes that flex understands, such as selectedUpSkin, etc…?[/quote]Long answer: Yes it does, basically my class reads key/value pairs from the css-file and applies them through setStyle, so if setStyle() accepts selectedUpSkin (which I’m pretty sure it does) then you can put it in your css-file..
Short answer: Yes.
Nice class. I did have problems when setting URLs for properties like backgroundImage. I changed
protected function parseProperty (property:String):XML {
var pair:Array = property.split(’:');
….
to this:
protected function parseProperty (property:String):XML {
var idx:int = property.indexOf(’:');
var pair:Array = new Array();
pair.push(property.slice(0, idx));
pair.push(property.slice(idx + 1));
Thanks again for putting the class out there.
Thanks alot Scott, it’s currently 6.45 in the morning over here, so I’ll have a look at it when I actually wake up
Scott, among some other tweaks I made the modification you suggested, the new version of CSSLoader is now available for download.
[...] “The other day someone hit me up about a bug in my CSSLoader class, I fixed it along with some other minor faults and updated the online demo. Demo Source Documentation Noteworthy is that CSSLoader now also loads images for properties like backgroundImage.” [...] [...]
Ruben, Thanks for this. Exactly what I’ve been looking for. Do you have a license for this? Or do you consider this public domain?
Thanks Dan. I’m fine with whatever you’re using it for, as long as you’re not modifying the code without my approval (that includes keeping the headers in tact)..
[...] we developers are never good at listening. Here is how one fellow developer revolved. He wrote the AS3 class to load pure CSS and apply to the display objects & its children. I [...]
Hey,
This is awesome. Something I have been thinking to do so. Here is some link love back to you: http://www.myot.ca/blog/2007/06/20/nice-writeups-flex-modules-compile-and-runtime-css-loading-pure-css-at-runtime/
[quote]Here is how one fellow developer rebelled. He wrote the AS3 class to load pure CSS[/quote]
Hahaha, yeah man, viva la revolucion! Thanks for kudos Myo
[...] http://www.rubenswieringa.com/blog/cssloader [...]
….wow
Haha, well ehh, thanks..
Hi,
Nice code ,But this is not working for Application tag of flex. [for ex . How to set the backgroung color ..?]
Very nice work Ruben. I added a few lines to my copy of your work to address the mx:Application issue.
// after the 2 lines here in CSSLoader.as
protected function applyStyleToOne (css:String, displayObj:*):void {
var n:String = displayObj.className;
// i added this line (you need to import mx.core.Application obviously
if (n == Application.application.className) n = “Application”;
thanks again
Thanks Matthew! Awesome!
Ruben this class was a lifesaver - after trying for a second to get make something similar I remembered reading that you had something up like this - with the application fix someone mentioned in your comments it worked like a charm.
Cheers
Eric
Thanks Eric! See you around..
thanks for your share!
can post a direct .zip source address? the source tree you provided seems too large, and can not download in a long time.
Hey lwz7512, what’s wrong with clicking the “download source”-link on the source-page? It’s only a few kilobytes.
Hi,
Thanks for your nice work.
A question that I have on the class. How does it deal with skins in the CSS file?
Shon
Hi! Does this work with states? For some reason it will not set styles to new items based in a state. Something I’m missing?
@Shon: Thanks. Any values stated in css-files will be applied as string-values, so I’m pretty sure skins won’t work, sorry..
@Brad: Yes, I’ve heard more people mention this one. I haven’t made an attempt yet to figure out why this doesn’t work.
In the meanwhile you might want to try to use the enterState-Event of the State-class to trigger the CSSLoader class to apply styles to a State its children when it gets selected..
Excellent job!
I’m making a few tweaks to it so that it will automatically change actual CSS terms (ex: font-weight, background-color, etc) into their AS3 counterparts. Then I can tie into CSSEdit to see my tweaks live.
Works great so far with HTML apps, not so much with AIR unless I save the CSS file each time.
I’m making a blog post about it, if you’re interested.
[...] CSSLoader [...]
This is great!
Any chance of an open source license?
Thanks
Ian
[...] CSS Loader - http://www.rubenswieringa.com/blog/cssloader [...]
[...] http://www.rubenswieringa.com/blog/cssloader [...]
[...] CSS Loader - http://www.rubenswieringa.com/blog/cssloader [...]
@Jon: cool! I’m very much interested, let me know when you do make a blogpost
@Ian: if you’re talking about the source itself, you can download it here:
rubenswieringa.com/[...]/CSSLoader/source
This is awesome. Same question about appending an os license to it. I would like to use it in a project but without a license, i just cant.
Nice work
oh greate
but cssloader is not applied for customComponents in flex
Hi and good work. I am curious if you have ever had a problem with using your resource to style the title in a panel. I am struggling to apply any sort of styling to a Panel Title at all, bearing in mind all my attempts at traditional methods DO work?
If you have it working and example would be nice
Cheers,
Simon
[...] 3?CSSLoader ????Flex??????????CSS http://www.rubenswieringa.com/blog/cssloader [...]
Hi , iam using the cssloader.as and cssparser.as classes in my applivation to load style sheets dynamically, in my style sheets iam using programatic skinning for some components i.e., iam refering to that classes in as style sheets iam unable to load that skinning through programming using your classes iam trying to enhance the feature please shower some light on it
Thanks
AnnaDorai
[...] http://www.rubenswieringa.com/blog/cssloader [...]
hey guys,
great work, but i can’t make it work
i have something like this:
styleLoader.load(’iftf.css’, ‘default’, this);
styleLoader.applyLastLoadedStyle(menu, true);
it’s in the creationComplete
menu is a UIComponent which contains some of the element which i want to style
like
and in the css
.buttonBar
{
horizontalAlign: left;
verticalAlign: top;
backgroundColor: #ffffff;
backgroundAlpha: 0.5;
}
what’s wrong?
thanks in advance, Viktor
Hi,
Where can I download the .as files. The source link opening just the mxml.
Thanks
I am trying to find the cssloader.as and cssparser.as and i can’t seem to find it.. Need help
sounds amazing css at runtime without compilation , hmm let me check .
I found this article somewhat similar .It describes how to change dynamic stylesheet on runtime . It does not use swf or css at all http://askmeflash.com/article_m.php?p=article&id=6
[...] 3?CSSLoader ????Flex??????????CSS http://www.rubenswieringa.com/blog/cssloader [...]
[...] CSS Loader – http://www.rubenswieringa.com/blog/cssloader [...]
[...] http://www.rubenswieringa.com/blog/cssloader [...]