Feature idea from adobe Flex: skinState

Questions
#1

Hi,
In adobe flex: an interesting feature you could use for haxeui was the skinStates
https://www.artima.com/articles/flex_4_states.html
http://saturnboy.com/2009/09/flex4-component-states-skin-states/

you were able to define states for a xml skin description (mxml). and setting different values of attributes for each state
width=“50” for default state and width.state2=“100” for value in state2 etc. and when setting current state of component to state2 the attributes get automatically the corresponding value.
it gets the xml a bit more durty but it is usefull for rapid devlopment
especially with a designer tool for previewing the states results.
Thanks

#2

Isnt this something that could be achieved with css?

http://haxeui.org/builder/?qejtsb

Ive used psuedo classes there, but you could just use addClass for “normal” css rules, ie, .button.state1:hover { ... }

#3

for the skin properties yes. after rethinking, it is certainly more clean to keep it in css instead of inline in xml
but it works only for css attributes
would there be a solution to have state workflow on layouts too? not sure it is possible with adobe flex skinState either by the way

#4

Hmm, yeah, ill have to have a think about that one, there are some additional (non css) properties in the haxeui css engine, so you could affect some things, but as you say, its working on a haxeui style, so that is a limitation there.

Out of interest, do you have example (regardless how useless) of something you hand in mind that shows what type of layout stuff you would like to effect based on a state? Just curious really to see if haxeui could already do it.

Cheers,
Ian

#5

i dont have very specific one, but as quick thinking, i would say a " quick login panel" for example.
it would be a component that can be in “notLoggedYet” state with login form displaid login password inputs and signin button
or it can be in “loggedIn” state with a disconnect button
everything else in the component could be same

mainly it is easy conditionnal display of components according to state
but adding or removing elements in ui impose sometime to change the layout too so
of course you can do it by code, but need an easy, no boilerplate code way of handling it
maybe well thinked macros could do the trick

1 Like
#6

oh of course another usecase is the responsive designs, like for css media queries
in landscape your layout is horizontal
and in portrait your layout is vertical

1 Like