Futurescale, Inc. PureMVC Home

The PureMVC Framework Code at the Speed of Thought


Over 10 years of community discussion and knowledge are maintained here as a read-only archive.

New discussions should be taken up in issues on the appropriate projects at https://github.com/PureMVC

Pages: [1]
Print
Author Topic: Where to put styles of view components  (Read 10078 times)
drummer
Newbie
*
Posts: 4


View Profile Email
« on: September 29, 2008, 08:19:06 »

I'm wondering how to manage styles for view components, e.g. sizing, spacing of sub-items etc.

Of course, there are cases where you'll only need styles within a single class, so you could just put them in constants at the top of the class but in other instances you have to be able to access this kind of information from several view components...

Since the view components are not supposed to know anything about the PureMVC framework, I can't put them in proxies. What's a best practice concerning this topic?

Thanks.
Logged
puremvc
Global Moderator
Hero Member
*****
Posts: 2871



View Profile WWW Email
« Reply #1 on: September 29, 2008, 08:25:50 »

CSS stylesheets are a good place for styles.

-=Cliff>
Logged
drummer
Newbie
*
Posts: 4


View Profile Email
« Reply #2 on: September 29, 2008, 08:54:56 »

thanks for the reply. However, I should've mentioned that I'm not working on a Flex application, but a pure AS3 one. There, the regular handling of styles through css stylesheets doesn't work that way. Any suggestions?
Thanks.
Logged
puremvc
Global Moderator
Hero Member
*****
Posts: 2871



View Profile WWW Email
« Reply #3 on: September 29, 2008, 01:48:41 »

I'm guessing you're using classes from the Flash package, if you're not using Flex or AIR, pure AS3 isn't much use without Flash.

See this post over at draw logic on how to load and parse CSS styles in AS3: http://drawlogic.com/2007/06/01/loading-external-css-stylesheets-in-flash9-as3-cs3/

If not this way, how do you normally handle styles?

-=Cliff>
Logged
Jason MacDonald
Sr. Member
****
Posts: 243


View Profile Email
« Reply #4 on: October 02, 2008, 01:20:09 »

thanks for the reply. However, I should've mentioned that I'm not working on a Flex application, but a pure AS3 one. There, the regular handling of styles through css stylesheets doesn't work that way. Any suggestions?
Thanks.

I was in a similar boat as you, a Flash CS3 project filled with custom components that need styles loaded from an XML file to be applied to each component at runtime.

I end up making a StyleManager Singleton that handle the application of styles to components, similar to how Flex does it. There's no PureMVC involvement. Styles are applied either to all Components instances of that type [Button] or by appyling a StyleName to a component (myButton.styleName = 'SomeStyleName').

The only PureMVC involvement is I have a Proxy that handles the loading and parsing of the XML StyleSheet that sets the values on the StyleManager on start-up.

All my visual components extend a base class that handles the interaction with the StyleManager. It looks to see if there's a styleName set, if there is it queries StyleManager for those Styles and applies them to the component (itself since each component extends the base class). If no styleName is set it looks at the ClassName and queries StyleManager using it instead. If neither is found it uses a base set of styles found in each component as defaults.

Not sure if this would work for you, but so far it's worked out nicely for me.
Logged
puremvc
Global Moderator
Hero Member
*****
Posts: 2871



View Profile WWW Email
« Reply #5 on: October 03, 2008, 09:34:40 »

Sounds pretty cool and useful. Perhaps you'll post it somewhere? I'm sure people will be interested to see it!
-=Cliff>
Logged
Jason MacDonald
Sr. Member
****
Posts: 243


View Profile Email
« Reply #6 on: October 03, 2008, 10:25:33 »

Sounds pretty cool and useful. Perhaps you'll post it somewhere? I'm sure people will be interested to see it!
-=Cliff>

I'll try post something about it when I get a chance to organize it better for public use.

To give you a basic overview though I'm taking the styles loaded from StyleManager and injecting them into fl.core.UIComponent via a BaseComponenet Class which extends UIComponent. All of my components extend BaseComponent allowing me to just create my custom components the same way I would using Flash Component Framework. So I get all the functionality of the base Flash components like Focus management and component redrawing along with the ability to load styles externally or through the code as you normally would using setStyle(name, value).

The StyleManager itself is more or less a copy of Flex's StyleManager (and related classes like CSSStyleDeclaration) but adapted to the way Flash components redraw themselves instead of the way Flex does.

The XML gets parsed into StyleDeclarations Objects (basically simple style value objects of name/value pairs like bgColor:#ff0000), which in turn get loaded into the StyleManager instance [singleton] using the styleName as the key and the StyleDeclaration as the value. Later when I call StyleManager.getStyleDeclaration(styleName || className) during instantiation of a component, in BaseComponent, it returns the full StyleDeclaration Object that I then can apply to the component via setStyle().

BaseComponent simply loops through the StyleDecleration calling the parents [UIComponent ] .setStyle(name, value) method and you end up with all the styles loaded into your component. From there on everything is the same as using/creating a regular Flash Component using the default framework.

Hope that makes sense. It took me a lot of time studying both Flex and Flash component frameworks to understand the differences and try and merge the two together. But the above is the basic work flow of it.
Logged
Pages: [1]
Print