You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by PKumar <pr...@gmail.com> on 2015/12/08 11:25:42 UTC
[FlexJS] Panel Header Color
Hi,
How can i change the Panel header color in FlexJS?
-----
Prashant
Sr. Product Specialist, Sungard
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-Panel-Header-Color-tp11592.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: [FlexJS] Panel Header Color
Posted by tbrazil <tb...@axway.com>.
What a fantastic, detailed explanation, Alex. Much thanks.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-Panel-Header-Color-tp11592p11601.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: [FlexJS] Panel Header Color
Posted by PKumar <pr...@gmail.com>.
Right Marcus, as FlexJS is pretty new, so this would be good to develop app
like FlexJS Component explorer. I can share my demos but currently i am
having separate projects for each control , so i need to marge them all into
one like TourDeFlex.
-----
Prashant
Sr. Product Specialist, Sungard
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-Panel-Header-Color-tp11592p11608.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: [FlexJS] Panel Header Color
Posted by Marcus Fritze <ma...@googlemail.com>.
Yeah, a demo app with available FlexJS controls would be really cool.
Something like Tour de Flex Component Explorer. Prashant, will you share
the demo app with us?
I have thought, to make something like a flexJS component explorer, but
I currently don’t have so much the time.
I think something like this would be very useful.
Marcus
> Am 08.12.2015 um 18:15 schrieb PKumar <pr...@gmail.com>:
>
> Thanks for information Alex, I tried all your suggestion, all are working
> fine. I have started using FlexJS and preparing demo apps with available
> FlexJS controls.
>
>
>
> -----
> Prashant
> Sr. Product Specialist, Sungard
> --
> View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-Panel-Header-Color-tp11592p11600.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: [FlexJS] Panel Header Color
Posted by PKumar <pr...@gmail.com>.
Thanks for information Alex, I tried all your suggestion, all are working
fine. I have started using FlexJS and preparing demo apps with available
FlexJS controls.
-----
Prashant
Sr. Product Specialist, Sungard
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-Panel-Header-Color-tp11592p11600.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: [FlexJS] Panel Header Color
Posted by Alex Harui <ah...@adobe.com>.
You can also do it declaratively:
<js:Panel>
<js:beads>
<js:PanelView>
<js:titleBar>
<js:TitleBar height="20" >
<js:style>
<js:SimpleCSSStyles backgroundColor="0xA65904" />
</js:style>
</js:TitleBar>
</js:titleBar>
</js:PanelView>
</js:beads>
</js:Panel>
Pretty verbose huh? A slightly shorter version should be:
<js:Panel>
<js:beads>
<js:PanelView>
<js:titleBar>
<js:TitleBar height="20" style="backgroundColor="0xA65904" />
</js:titleBar>
</js:PanelView>
</js:beads>
</js:Panel>
The reason it is so verbose is because we are using more composition in
the basic FlexJS component set than you are used to in the current
FlexSDK. The rationale for that is to have better separation of concerns
in FlexJS so we don't end up with huge monolithic base classes. But you
have seen this sort of thing before: in the MX world you might do:
<mx:Application layout="vertical" >
Whereas in Spark it is:
<s:Application>
<s:layout>
<s:VerticalLayout />
</s:layout>
That's because when you make assumptions to reduce verbosity, you start
making everyone's apps fatter. The MX application automatically links the
3 layouts it need to know about to handle the 3 string values it accepts
for layout (vertical, horizontal, absolute). That means there is no way
to add "tile", and if your application only uses absolute positioning,
your customers are downloading vertical and horizontal layout code in the
SWF whether you wanted them to or not.
Now this extra verbosity will eventually be a pain when you have to type
or copy that sequence over and over again, and so when you find yourself
doing that, you can make subclasses of the components and make those kinds
of assumptions. And if enough folks are doing that, you can offer that
version to everyone else by donating it to this project or
offering/selling it on your own. For example, that's why there is a
VGroup in Spark and a Vcontainer in FlexJS. Enough folks will want to
save on typing all those lines of MXML.
We could add a titleBar property to Panel if enough folks want it, but
that assumes every custom PanelView will support replaceable titleBars,
which may not be the case. Then the code would look like:
<js:Panel>
<js:titleBar>
<js:TitleBar height="20" style="backgroundColor="0xA65904" />
</js:titleBar>
</js:Panel>
We could add "titleBarBackgroundColor" to Panel if enough folks want it,
but then it assumes that every custom PanelView will need to support the
titleBarBackgroundColor interface even if it just ignores that property,
but that shouldn't have to be the case. That would look like:
<js:Panel titleBarBackgroundColor=""0xA65904">
You can see how as we make more assumptions it gets less verbose, but the
list of properties starts to grow as well. How would you set the
TitleBar's height? By adding a titleBarHeight property?
I think over the next several months I am going to try to emulate more and
more of the Spark Controls in FlexJS and we will see how much fatter and
slower the apps are because Spark makes more assumptions than the current
FlexJS controls. Having more than one component set to choose from is a
fundamental principle of FlexJS. You should be able to choose various
stopping points along the continuum of tradeoffs of verbosity vs
application size. A more Spark-like component set may reduce your time to
migrate to FlexJS from Flex, but may not run as fast or be as small.
Taking more time to migrate all the way to the basic component set which
has been written to be small, fast and flexible by thinly wrapping browser
APIs as much as possible might be where you finally end up.
Feedback welcome,
-Alex
On 12/8/15, 7:11 AM, "Peter Ent" <pe...@adobe.com> wrote:
>Hi,
>
>You use CSS styles to change things like that. For all TitleBars, you can
>either use:
>
>js|TitleBar {
> backgroundColor: #FFFF00;
>}
>
>or
>
>.TitleBar {
> backgroundColor: #FFFF00;
>}
>
>If you want to target a specific Panel, give the Panel its own className
>and use that:
>
>.firstPanel .TitleBar {
> backgroundColor: #FFFF00;
>}
>
>
>Peter Ent
>Adobe Systems
>
>On 12/8/15, 5:25 AM, "PKumar" <pr...@gmail.com> wrote:
>
>>Hi,
>>
>>How can i change the Panel header color in FlexJS?
>>
>>
>>
>>-----
>>Prashant
>>Sr. Product Specialist, Sungard
>>--
>>View this message in context:
>>http://apache-flex-users.2333346.n4.nabble.com/FlexJS-Panel-Header-Color-
>>t
>>p11592.html
>>Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
Re: [FlexJS] Panel Header Color
Posted by PKumar <pr...@gmail.com>.
Thanks, It is working fine.
-----
Prashant
Sr. Product Specialist, Sungard
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-Panel-Header-Color-tp11592p11596.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: [FlexJS] Panel Header Color
Posted by Peter Ent <pe...@adobe.com>.
Hi,
You use CSS styles to change things like that. For all TitleBars, you can
either use:
js|TitleBar {
backgroundColor: #FFFF00;
}
or
.TitleBar {
backgroundColor: #FFFF00;
}
If you want to target a specific Panel, give the Panel its own className
and use that:
.firstPanel .TitleBar {
backgroundColor: #FFFF00;
}
Peter Ent
Adobe Systems
On 12/8/15, 5:25 AM, "PKumar" <pr...@gmail.com> wrote:
>Hi,
>
>How can i change the Panel header color in FlexJS?
>
>
>
>-----
>Prashant
>Sr. Product Specialist, Sungard
>--
>View this message in context:
>http://apache-flex-users.2333346.n4.nabble.com/FlexJS-Panel-Header-Color-t
>p11592.html
>Sent from the Apache Flex Users mailing list archive at Nabble.com.