14 Replies Latest reply on Jun 25, 2009 1:05 PM by Peter deHaan

    Skinning Alert boxes?

    Handycam Level 1

      I am trying to skin the alert box, which skin does it use?  I started with the halo panel skin mxml, named it AlertSkin.mxml and put it into my skins directory.

       

      I am trying to apply it via:

       

      mx|Alert{
          skin:ClassReference("skins.AlertSkin");
      }

       

      but so far, no luck.

       

      What's the procedure here?

        • 2. Re: Skinning Alert boxes?
          Handycam Level 1

          That's a helpful page.  But what about the alert title bar?  Rounding that

          rounds all the corners, although I really only need the top ones to be

          rounded.

          • 3. Re: Skinning Alert boxes?
            Peter deHaan Level 4

            Yeah, in my simple example, i just removed the title bar fill and have a solid, rounded background rect (similar to the older Halo skin.

            As far as I know there isn't a way to round arbitrary corners in a Rect using the radiusX and radiusY properties. But I'm sure you can do a rounded header title and then use a second Rect with a corner radius of 0 to "fill in" the bottom two corners on the titlebar. (So, if you have a titlebar that is 30 pixels high with a corner radius of 10, I'd try creating a second Rect with height of 15px and a cornerRadius of 0, with a y==15 (so it will overlap the two rounded corners at the bottom of the titlebar.)

             

            I was meaning to file a bug/ECR against that, as it was a bit tricker than I expected to specify the corner radius on a Halo Alert control w/ Spark skin. Feel free to file one.

             

            Peter

            • 4. Re: Skinning Alert boxes?
              Handycam Level 1

              Thanks.

               

              Any way to control the button in the alert?

              • 5. Re: Skinning Alert boxes?
                Handycam Level 1

                Yes, thanks.

                 

                I also noticed I needed to change the script:

                 

                        private var _metrics:EdgeMetrics = new EdgeMetrics(1, 1, 32, 1);

                 

                to

                 

                        private var _metrics:EdgeMetrics = new EdgeMetrics(1, 1, 1, 1);

                 

                 

                So that it would be centered (I was editing a default PanelBorderSkin.mxml, not using your example.)

                • 6. Re: Skinning Alert boxes?
                  Peter deHaan Level 4

                  I'm not sure what you mean by "control", but you can style the buttons using the "buttonStyleName" style.

                  <?xml version="1.0"?>
                  <!-- textcontrols/SimpleTextExample.mxml -->
                  <s:Application 
                      xmlns:fx="http://ns.adobe.com/mxml/2009"    
                      xmlns:mx="library://ns.adobe.com/flex/halo"     
                      xmlns:s="library://ns.adobe.com/flex/spark">
                   <fx:Style>
                    @namespace mx "library://ns.adobe.com/flex/halo";
                    .myAlertButtonStyles {
                     color: red;
                     baseColor: haloGreen;
                     fontWeight: bold;
                     fontSize: 16;
                    }
                    mx|Alert {
                     buttonStyleName: myAlertButtonStyles;
                    }
                   </fx:Style>
                   <fx:Script>
                    <![CDATA[
                     import mx.controls.Alert;
                    ]]>
                   </fx:Script>
                      <s:Button click="Alert.show('hello', 'world');" />
                  </s:Application>
                  

                   

                  Peter

                  1 person found this helpful
                  • 7. Re: Skinning Alert boxes?
                    Peter deHaan Level 4

                    If it looks like a bug, can you please file it at http://bugs.adobe.com/flex/ and attach a simple test case and we can investigate.

                     

                    Thanks,

                    Peter

                    • 8. Re: Skinning Alert boxes?
                      Handycam Level 1

                      That might be good enough for now, thanks.

                       

                      What I was trying to do is have the alert use the same button skin the application is using:

                       

                      mx|Alert{
                           borderSkin:ClassReference("skins.AlertSkin");
                           modalTransparency:.8;
                           modalTransparencyColor: #F9EDAB;
                           buttonStyleName: myAlertButtonStyle;
                      }
                      
                      
                      .myAlertButtonStyle {
                           skinClass:ClassReference("components.Button1");
                      }
                      

                       

                      Since my application is already using <s:Button id="calculateBtn" skinClass="components.Button1" click="total_clickHandler(event)" />

                       

                      However, I see no change in my button.

                      • 9. Re: Skinning Alert boxes?
                        Peter deHaan Level 4

                        Handycam,

                         

                        That sort of makes sense. The Halo Alert control would be using a Halo Button control internally, whereas the example below you're using a Spark Button control. I doubt the same skin would work on Halo Button controls AND Spark Button controls.

                         

                        Peter

                        • 10. Re: Skinning Alert boxes?
                          Handycam Level 1

                          Yes, that does make sense now.

                           

                          However, I have now copied the skin file I found at

                           

                          /Applications/Adobe Flash Builder

                          Beta/sdks/4.0.0/frameworks/projects/sparkskins/src/mx/skins/spark/ButtonSkin.mxml

                           

                          Which begins with:

                           

                          <!--- The Spark skin class for the Halo Button component.

                           

                                @langversion 3.0

                                @playerversion Flash 10

                                @playerversion AIR 1.5

                                @productversion Flex 4

                          -->

                          <local:SparkSkinForHalo xmlns:fx="http://ns.adobe.com/mxml/2009"

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

                                xmlns:local="mx.skins.spark.*"

                                minWidth="21" minHeight="19"

                                alpha.disabled="0.5">

                           

                          Is this the wrong one?  I have named it ButtonSkinFHB.mxml and put it in my

                          skins directory, and changed my previous css to:

                           

                          mx|Alert

                           

                          .myAlertButtonStyle

                           

                          And I have tried changing various colors, but the alert button is the

                          default one.

                          • 11. Re: Skinning Alert boxes?
                            Peter deHaan Level 4

                            That is the correct skin file.

                             

                            I havent tried to do exactly what you're doing, but i can try and take a look at this a little later today.

                            Which styles/colors are you trying to set in your custom Alert Button skin?

                             

                            Peter

                            • 12. Re: Skinning Alert boxes?
                              Handycam Level 1

                              Well, if I can't use the png files the Spark button is using, I'd like to replicate the color of it. I tried changing the main gradient entry colors here, but so far nothing seems to "take" -- as you can see i changed it to red and green, but am not seeing it.

                              <!-- layer 2: fill -->
                              <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
                                  <s:fill>
                                      <s:LinearGradient rotation="90">
                                          <s:GradientEntry color="0xFF0000"
                                                         color.selectedUpStates="0xBBBDBD"
                                                         color.overStates="0xBBBDBD"
                                                         color.downStates="0xAAAAAA"
                                                         alpha="0.85"
                                                         alpha.selectedOver="1" />
                                          <s:GradientEntry color="0x00ffff"
                                                         color.selectedUpStates="0x9FA0A1"
                                                         color.over="0x9FA0A1"
                                                         color.selectedOver="0x8E8F90"
                                                         color.downStates="0x929496"
                                                         alpha="0.85"
                                                         alpha.selectedOver="1" />
                                      </s:LinearGradient>
                                  </s:fill>
                              </s:Rect>
                              

                               

                              Also, oddly, the skin file is not working properly in the outline of FB. There is only the Root element, and an exclamation point:

                               

                              http://img.skitch.com/20090625-nbfiq5tud8nii8tkt5kfsfiiq6.jpg

                              • 13. Re: Skinning Alert boxes?
                                Peter deHaan Level 4

                                I dont think I see the same thing as you, but here's how far I got after a quick test:

                                <?xml version="1.0"?>
                                <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                        xmlns:mx="library://ns.adobe.com/flex/halo"
                                        xmlns:s="library://ns.adobe.com/flex/spark">
                                    <fx:Style>
                                        @namespace mx "library://ns.adobe.com/flex/halo";
                                        .myAlertButtonStyles {
                                            color: white;
                                            fontWeight: bold;
                                        }
                                        mx|Alert {
                                            buttonStyleName: myAlertButtonStyles;
                                        }
                                        mx|Button {
                                            skin: ClassReference("skins.CustomButtonSkin");
                                        }
                                    </fx:Style>
                                    <fx:Script>
                                        <![CDATA[
                                            import mx.controls.Alert;
                                        ]]>
                                    </fx:Script>
                                    <s:VGroup>
                                        <mx:CheckBox id="cb" label="emphasized:" selected="true" />
                                        <mx:Button label="default" />
                                        <mx:Button label="emphasized" emphasized="{cb.selected}" />
                                        <mx:Button label="Show alert (1)" click="Alert.show('hello', 'world', Alert.YES|Alert.NO|Alert.OK|Alert.CANCEL);" />
                                        <mx:Button label="Show alert (2)" click="Alert.show('one', 'two', Alert.OK|Alert.NO, null, null, null, Alert.NO);" />
                                    </s:VGroup>
                                </s:Application>
                                

                                 

                                And i used the same default Halo Button Spark skin and changed the fill to some "exciting" colors:

                                <!-- layer 2: fill -->
                                <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
                                    <s:fill>
                                        <s:LinearGradient rotation="90">
                                            <s:GradientEntry color="red" 
                                                           color.selectedUpStates="haloOrange"
                                                           color.overStates="yellow" 
                                                           color.downStates="haloGreen" 
                                                           alpha="0.85" 
                                                           alpha.selectedOver="1" />
                                            <s:GradientEntry color="red" 
                                                           color.selectedUpStates="haloOrange"
                                                           color.over="yellow" 
                                                           color.selectedOver="purple"
                                                           color.downStates="haloGreen" 
                                                           alpha="0.85"
                                                           alpha.selectedOver="1" />
                                        </s:LinearGradient>
                                    </s:fill>
                                </s:Rect>

                                 

                                Now, all of the buttons except the default/emphasized Button have my custom Button skin applied. I havent found the best way to style that emphasized state yet though.

                                 

                                Peter

                                • 14. Re: Skinning Alert boxes?
                                  Peter deHaan Level 4

                                  At this rate i'll be top poster in no time!

                                   

                                  Actually, the solution to my emphasized Button problem was to set the emphasizedSkin style:

                                  .myAlertButtonStyles {
                                      color: white;
                                      fontWeight: bold;
                                      skin: ClassReference("skins.CustomButtonSkin");
                                      emphasizedSkin: ClassReference("skins.CustomButtonSkin");
                                  }

                                   

                                  This will set the emphasized and non-emphasized button states to the same skin, but you may want to make your own custom emphasized button skin which is slightly different (change the alpha or whatever, so you can visually tell what the current default button actually is).

                                   

                                  Hope that helps,

                                  Peter