CSSLoader

Stamped: February 21st, 2007 | Toggle Similar
Tagged: , , ,



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:

Actionscript:
  1. var loader:CSSLoader = new CSSLoader();
  2. loader.load("mycssfile.css", "nameToBeGiven", displayObj1, displayObj2);

..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..

29 Responses

Note that comments are displayed in reverse chronological order with topmost comments being freshest. Subscribe | Comment
  • Ian McDonald says so:
    July 24th, 2008 | Quote

    This is great!

    Any chance of an open source license?

    Thanks
    Ian

  • Jon says so:
    May 30th, 2008 | Quote

    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.

  • Ruben says so:
    April 19th, 2008 | Quote

    @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..

  • Brad says so:
    April 18th, 2008 | Quote

    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 says so:
    April 16th, 2008 | Quote

    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

  • Ruben says so:
    April 12th, 2008 | Quote

    Hey lwz7512, what’s wrong with clicking the “download source”-link on the source-page? It’s only a few kilobytes.

  • lwz7512 says so:
    April 12th, 2008 | Quote

    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.

  • Ruben says so:
    March 24th, 2008 | Quote

    Thanks Eric! See you around..

  • Eric Cancil says so:
    March 24th, 2008 | Quote

    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

  • Ruben says so:
    March 22nd, 2008 | Quote

    Thanks Matthew! Awesome! :)

  • Matthew OMeara says so:
    March 22nd, 2008 | Quote

    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

  • Peter says so:
    March 5th, 2008 | Quote

    Hi,
    Nice code ,But this is not working for Application tag of flex. [for ex . How to set the backgroung color ..?]

  • Ruben says so:
    January 22nd, 2008 | Quote

    Haha, well ehh, thanks.. :)

  • hector says so:
    January 22nd, 2008 | Quote

    ….wow

  • Ruben says so:
    June 20th, 2007 | Quote

    Here is how one fellow developer rebelled. He wrote the AS3 class to load pure CSS

    Hahaha, yeah man, viva la revolucion! Thanks for kudos Myo :)

  • Myo says so:
    June 20th, 2007 | Quote

    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/

  • Ruben says so:
    June 11th, 2007 | Quote

    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)..

  • Dan Martin says so:
    June 11th, 2007 | Quote

    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?

  • Ruben says so:
    May 23rd, 2007 | Quote

    Scott, among some other tweaks I made the modification you suggested, the new version of CSSLoader is now available for download.

  • Ruben says so:
    May 11th, 2007 | Quote

    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 says so:
    May 10th, 2007 | Quote

    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.

  • Ruben says so:
    April 28th, 2007 | Quote

    Does this class load non-css attributes that flex understands, such as selectedUpSkin, etc…?

    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.

  • Eric says so:
    April 26th, 2007 | Quote

    Does this class load non-css attributes that flex understands, such as selectedUpSkin, etc…?

  • Maikel says so:
    February 21st, 2007 | Quote

    No thanx!! Keep up the good work!

Trackbacks:

Leave a Reply