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

36 Responses

Note that comments are displayed in reverse chronological order with topmost comments being freshest. Subscribe | Comment
  • Simon says so:
    October 22nd, 2008 | Quote

    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

  • muni says so:
    October 9th, 2008 | Quote

    oh greate
    but cssloader is not applied for customComponents in flex

  • Simon says so:
    September 2nd, 2008 | Quote

    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

  • Ruben says so:
    August 3rd, 2008 | Quote

    @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

  • 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