Setting the Style of the Title in s:Panel

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Setting the Style of the Title in s:Panel

Cooper, Andrew
In 4.1 I accessed the textDisplay object directly.

 

But In 4.6 this changed to an interface.

So I decided to dabble with skins

 

      public class TitleStylePanel extends Panel

      {

            [Bindable]

            public var titleStyle:Object = null;

 

            public function TitleStylePanel()

            {

                  super();

            }

      }

 

I generated the skin based on SparkPanelSkin

 

Then changed the following

...              

                <!-- layer 3: text -->

                <!--- @copy spark.components.Panel#titleDisplay -->

                <s:Label id="titleDisplay" maxDisplayedLines="1"

                         left="9" right="3" top="1" bottom="0"
minHeight="30"

 
styleName="{hostComponent.titleStyle}"

                         verticalAlign="middle" fontWeight="bold">

                </s:Label>

...

 

<?xml version="1.0" encoding="utf-8"?>

<sparkcontainers:TitleStylePanel
xmlns:fx="http://ns.adobe.com/mxml/2009"

 
xmlns:s="library://ns.adobe.com/flex/spark"

                              xmlns:mx="library://ns.adobe.com/flex/mx"

 
xmlns:sparkcontainers="com.cimtek.maglite.views.controls.containers.*"

                              titleStyle="loginTitle"

 
creationComplete="panel1_creationCompleteHandler(event)"

                              defaultButton="{loginButton}">

...

 

 

When I run it the titleDisplay.styleName doesn't get updated

 

What am I doing wrong ?

Is there an easier way to change the style of the title without having
to have a skin for each instance

 

Andy

Reply | Threaded
Open this post in threaded view
|

RE: Setting the Style of the Title in s:Panel

Maurice Amsellem
Spark skins should not use bindings.

Since titleDisplay in a skinPart, you should modify it in partAdded()
Even though it's an interface, you can test whether it's stylable and apply a style to it.

Something like:

  public class TitleStylePanel extends Panel {

  override protected function partAdded(partName:String, instance:Object):void
    {
        super.partAdded(partName, instance);
       
        if (instance == titleDisplay )
        {
             if (instance is ISimpleStyleClient)
                      ISimpleStyleClient(instance).styleName = titleStyle;
        }

You can then use the standard PanelSkin without change.


Note: this is also the way you should have done it, even in 4.1.

Regards,

Maurice

-----Message d'origine-----
De : Cooper, Andrew [mailto:[hidden email]]
Envoyé : vendredi 1 février 2013 12:12
À : [hidden email]
Objet : Setting the Style of the Title in s:Panel

In 4.1 I accessed the textDisplay object directly.

 

But In 4.6 this changed to an interface.

So I decided to dabble with skins

 

      public class TitleStylePanel extends Panel

      {

            [Bindable]

            public var titleStyle:Object = null;

 

            public function TitleStylePanel()

            {

                  super();

            }

      }

 

I generated the skin based on SparkPanelSkin

 

Then changed the following

...              

                <!-- layer 3: text -->

                <!--- @copy spark.components.Panel#titleDisplay -->

                <s:Label id="titleDisplay" maxDisplayedLines="1"

                         left="9" right="3" top="1" bottom="0"
minHeight="30"

 
styleName="{hostComponent.titleStyle}"

                         verticalAlign="middle" fontWeight="bold">

                </s:Label>

...

 

<?xml version="1.0" encoding="utf-8"?>

<sparkcontainers:TitleStylePanel
xmlns:fx="http://ns.adobe.com/mxml/2009"

 
xmlns:s="library://ns.adobe.com/flex/spark"

                              xmlns:mx="library://ns.adobe.com/flex/mx"

 
xmlns:sparkcontainers="com.cimtek.maglite.views.controls.containers.*"

                              titleStyle="loginTitle"

 
creationComplete="panel1_creationCompleteHandler(event)"

                              defaultButton="{loginButton}">

...

 

 

When I run it the titleDisplay.styleName doesn't get updated

 

What am I doing wrong ?

Is there an easier way to change the style of the title without having to have a skin for each instance

 

Andy


Reply | Threaded
Open this post in threaded view
|

Re: Setting the Style of the Title in s:Panel

Alex Harui
In reply to this post by Cooper, Andrew



On 2/1/13 3:11 AM, "Cooper, Andrew" <[hidden email]> wrote:

> In 4.1 I accessed the textDisplay object directly.
>
>  
>
> But In 4.6 this changed to an interface.
Yes, but if you know the type and know it will not change, you can coerce to
it.
>
>
> When I run it the titleDisplay.styleName doesn't get updated
>
>  
>
> What am I doing wrong ?
Not sure.  I didn't see anything obvious.
>
> Is there an easier way to change the style of the title without having
> to have a skin for each instance
I believe you can use Advanced CSS to style the panel's titleDisplay.  Some
combination of descendant and id selectors should work.  I'm not a CSS
person so look for examples.

--
Alex Harui
Flex SDK Team
Adobe Systems, Inc.
http://blogs.adobe.com/aharui