5 Replies Latest reply on May 4, 2010 12:34 AM by jtsfoto

    Flash Builder 4 not showing skins in Design View

    jtsfoto Level 1

      I'm new to flex and have got started with Flash Builder 4.

      I've been making great progress and I'm really pleased with my results.

       

      I've obviously had a blond moment and have changed something.

       

      When editing my code and I press the disign button, the skins aren't being displayed.

      It shows all the text, buttons etc.

       

      What have I done wrong?

       

      Thanks

       

      John

        • 1. Re: Flash Builder 4 not showing skins in Design View
          jtsfoto Level 1

          If I run the program, everything is there

          .

          I've looked and searched and can't find what I've done wrong.

          • 2. Re: Flash Builder 4 not showing skins in Design View
            Jason San Jose Adobe Employee

            Can you post some example code? Are you using MXML skinClass="..." or setStyle("skinClass")?

             

            Did Design View render the skins at one point then stopped working? Did you try the refresh button or a clean?

             

            Jason San Jose

            Software Engineer, Flash Builder

            • 3. Re: Flash Builder 4 not showing skins in Design View
              jtsfoto Level 1

              Hi Jason,

               


              Thanks for the prompt reply.

               

              I'm using the MXML skinClass="..."

               

              I have tried both the refreshed and clean buttons.

               

              This the first time I'm using skinClass.

               

              Thanks for your help.

               


              <s:Application 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:assets="assets.*" skinClass="skins.CustomAppSkin">
                <s:Label text="Test Display" fontSize="18" fontWeight="bold" fontStyle="italic"/>
              </s:Application>

               


              <?xml version="1.0" encoding="utf-8"?>
              <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5" xmlns:assets="assets.*">
                  <fx:Metadata>
                  <![CDATA[
                      [HostComponent("spark.components.Application")]
                  ]]>
                  </fx:Metadata>
                  <s:states>
                      <s:State name="normal" />
                      <s:State name="disabled" />
                      <s:State name="normalWithControlBar" />
                      <s:State name="disabledWithControlBar" />
                  </s:states>
                
                  <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
                      <s:fill>
                          <s:SolidColor id="bgRectFill" color="#1E5C75"/>
                      </s:fill>
                  </s:Rect>
                    
                  <s:Group left="0" right="0" top="0" bottom="0">
                      <s:layout>
                          <s:VerticalLayout gap="0" horizontalAlign="justify" />
                      </s:layout>

               

                      <!---  Application Control Bar  -->
                      <s:Group id="topGroup" minWidth="0" minHeight="0"
                                  includeIn="normalWithControlBar, disabledWithControlBar" >
                          <!-- layer 0: control bar highlight -->
                          <s:Rect left="0" right="0" top="0" bottom="1" >
                             <s:stroke>
                                  <s:LinearGradientStroke rotation="90" weight="1">
                                      <s:GradientEntry color="0xFFFFFF" />
                                      <s:GradientEntry color="0xD8D8D8" />
                                  </s:LinearGradientStroke>
                             </s:stroke>
                          </s:Rect>

               

                          <!-- layer 1: control bar fill -->
                          <s:Rect left="1" right="1" top="1" bottom="2" >
                             <s:fill>
                                  <s:LinearGradient rotation="90">
                                      <s:GradientEntry color="0xEDEDED" />
                                      <s:GradientEntry color="0xCDCDCD" />
                                  </s:LinearGradient>
                             </s:fill>
                          </s:Rect>

               

                          <!-- layer 2: control bar divider line -->
                          <s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
                              <s:fill>
                                  <s:SolidColor color="0x000000" />
                              </s:fill>
                          </s:Rect>

               

                          <!-- layer 3: control bar -->
                          <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                              <s:layout>
                                  <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                              </s:layout>
                          </s:Group>
                      </s:Group>

               

                    <s:Group height="100%" width="100%">
                      <s:Rect top="10" bottom="10" right="10" left="10">
                        <s:fill>
                          <s:LinearGradient>
                            <s:entries>
                              <s:GradientEntry color="#1E5C75"/>
                              <s:GradientEntry color="#6DB6C6"/>
                            </s:entries>
                          </s:LinearGradient>
                        </s:fill>
                        <s:filters>
                          <s:BlurFilter/>
                          <s:BevelFilter/>
                        </s:filters>
                      </s:Rect>
                      <assets:HandPLogo width="180" height="111" left="20" top="20"/>
                      <s:VGroup id="contentGroup" horizontalAlign="center" top="100" gap="20" width="100%" height="100%" minWidth="0" minHeight="0" />
                    </s:Group>

               

                  </s:Group>

               

              </s:Skin>

               


              • 4. Re: Flash Builder 4 not showing skins in Design View
                David_F57 Level 5

                hi,

                 

                I just loaded your skin and it worked fine in designview (less the logo asset)

                 

                Just incase its something in your workspace or project breaking design view try to first close the project and create a new basic project, add you skin to the project and see if design view works(try with out the logo asset incase that namespace is doing something strange).

                 

                If that fails try creating a new workspace, add a new basic project then try then skin again, first without the asset then with.

                 

                David.

                • 5. Re: Flash Builder 4 not showing skins in Design View
                  jtsfoto Level 1

                  Thanks guys for all your help. I really appreicate it.

                   

                  After messing about for a couple of days and not getting any joy, I felt really dumb.

                  So I re-installed from scratch, after removing all preferences and traces of FB.

                   

                  ..... and guess what .... it works.

                   

                  You guys are gr8t.

                   

                  John