4 Replies Latest reply on Nov 17, 2010 5:46 PM by Adoobe4ccl

    Skin on Main App can no longer edit using Design mode

    Adoobe4ccl

      I have created a skin for my main app...Now when I try to work on it in design mode FB gives warnings and will not display the application in Design mode until I remove the skin.

        • 1. Re: Skin on Main App can no longer edit using Design mode
          RaniKumar Level 2

          Can you please give the following details :

           

          which version of flash builder ?

          Is the issue reproducible on a fresh project ?  If not , please share your project

          what is the warning observed ?

          • 2. Re: Skin on Main App can no longer edit using Design mode
            Adoobe4ccl Level 1

            Ok created a sample application does the same thing...

            Am trying to create an application with a status bar using adobe air 2.0, windows 7, and Flash Builder 4.01

            Wasn't sure how to get to the variables in the skin in the skin I hacked using flex globals to get to some variables in the main app...

            But if you try this in design mode you will see that the application does not view correctly in design mode of the mian TestAppSkin.mxml file...

            I have a much more complicated application and none of my app shows up in design mode if I have this skinclass set in the main app file...

            Thanks for your help...

             

            Here is the generated then modified skin file tAppSkin.mxml

             

            <!--

             

            ADOBE SYSTEMS INCORPORATED

            Copyright 2009 Adobe Systems Incorporated

            All Rights Reserved.

             

            NOTICE: Adobe permits you to use, modify, and distribute this file

            in accordance with the terms of the license agreement accompanying it.

             

            -->

            <!--- A skin class for the Spark WindowedApplication and Window containers.

            This class defines just a border and status bar, but no gripper button,

            title bar, or title bar buttons.

             

            <p>You can either use system chrome, the FlexChromSkin class, or

            the WindowedApplicationSkin class to define the appearance of

            the WindowedApplication and Window containers.

            To use the WindowedApplicationSkin class with the WindowedApplication container,

            set <code>systemChrome</code> to "none"

            in the application's .xml file, and set the <code>skinClass</code> style to

            spark.skins.spark.WindowedApplicationSkin.

            To use the WindowedApplicationSkin class with the Window container,

            set the <code>Window.systemChrome</code> property to "none",

            and set the <code>skinClass</code> style to

            spark.skins.spark.WindowedApplicationSkin.</p>

             

            @see spark.components.WindowedApplication

             

            @langversion 3.0

            @playerversion Flash 10

            @playerversion AIR 1.5

            @productversion Flex 4

             

            -->

            <s:SparkSkin

             

             

            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.disabledGroup="0.5" xmlns:mx="library://ns.adobe.com/flex/mx" width.normal="600" height.normal="480">

             

             

            <fx:Metadata>[HostComponent("spark.components.WindowedApplication")]</fx:Metadata>

             

             

            <fx:Script fb:purpose="styling">

             

             

            /* Define the skin elements that should not be colorized.

            * For WindowedApplication, border and status bar background are colorized,

            * but the content area and status text are not.

            * Exclude the titleBar and scroller because they are SparkSkins and we

            * don't want to colorize them twice.

            *

            * @langversion 3.0

            * @playerversion Flash 10

            * @playerversion AIR 1.5

            * @productversion Flex 4

            */

             

             

            static private const exclusions:Array = ["backgroundRect", "contentGroup", "statusText"];

             

             

            /**

            * @private

            */

             

             

            override public function get colorizeExclusions():Array {return exclusions;}

             

             

            /**

            * @private

            */

             

             

            override protected function initializationComplete():void

            {

            useChromeColor =

             

            true;

             

            super.initializationComplete();

             

            mx.core.FlexGlobals.topLevelApplication.g_statusBarCopyProgress = progress_statusBarCopyProgress;

            mx.core.FlexGlobals.topLevelApplication.g_statusBarPlayerProgress = progress_statusBarPlaylistPlaying;

            mx.core.FlexGlobals.topLevelApplication.g_statusBarModeText = label_statusBarModeText;

            mx.core.FlexGlobals.topLevelApplication.g_statusBarModeLabel = label_statusBarMode;

            mx.core.FlexGlobals.topLevelApplication.g_statusbarCopyIdleLabel = label_statusBarCopyIdle;

            mx.core.FlexGlobals.topLevelApplication.g_statusBarPlayerIdleLabel = label_statusBarPlayerIdle;

            }

             

             

            /**

            * @private

            */

             

             

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void

            {

             

             

             

            backgroundFill.color = getStyle(

             

            "backgroundColor");

            backgroundFill.alpha = getStyle(

            "backgroundAlpha");

             

            super.updateDisplayList(unscaledWidth, unscaledHeight);

            }

             

            </fx:Script>

             

             

             

            <s:states>

             

             

            <s:State name="normal" />

             

             

            <s:State name="disabled" stateGroups="disabledGroup" />

             

             

            <s:State name="normalAndInactive" stateGroups="inactiveGroup" />

             

             

            <s:State name="disabledAndInactive" stateGroups="disabledGroup, inactiveGroup" />

             

             

            </s:states>

             

             

             

            <!-- layer 1: background fill -->

             

             

            <!--- Defines the background color of the skin. -->

             

             

            <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0" >

             

             

            <s:fill>

             

             

            <!--- @private -->

             

             

            <s:SolidColor id="backgroundFill" />

             

             

            </s:fill>

             

             

            </s:Rect>

             

             

             

            <!-- layer 2: content + status bar -->

             

             

            <s:Group left="0" right="0" top="0" bottom="0" minHeight="24" minWidth="0" >

             

             

            <s:layout>

             

             

            <s:VerticalLayout gap="0"/>

             

             

            </s:layout>

             

             

             

            <!-- content -->

             

             

            <!--- @copy spark.components.SkinnableContainer#contentGroup -->

             

             

            <s:Group id="contentGroup" width="100%" height="100%" minHeight="0" minWidth="0"/>

             

             

             

            <!-- status bar -->

             

             

            <!--- @copy spark.components.WindowedApplication#statusBar -->

             

             

            <s:Group id="statusBar" width="100%" minHeight="24" >

             

             

             

            <!-- status bar fill -->

             

             

            <s:Rect left="0" right="0" top="0" bottom="0">

             

             

            <s:fill>

             

             

            <s:LinearGradient rotation="90">

             

             

            <s:GradientEntry color="0xE2E2E2" />

             

             

            <s:GradientEntry color="0xD9D9D9" />

             

             

            </s:LinearGradient>

             

            </s:fill>

             

            </s:Rect>

             

             

            <!-- status bar highlight -->

             

            <s:Rect left="1" right="1" top="1" bottom="0" >

             

            <s:stroke>

             

            <s:LinearGradientStroke rotation="90" weight="1">

             

            <s:GradientEntry color="0xEAEAEA" />

             

            <s:GradientEntry color="0xBEBEBE" />

             

            </s:LinearGradientStroke>

             

            </s:stroke>

             

            </s:Rect>

             

             

            <!-- status text -->

             

            <!--- @copy spark.components.WindowedApplication#statusText -->

             

            <s:Label id="statusText" top="2" bottom="2" left="10" right="10" verticalAlign="middle"

            fontSize="

            10" color="0x585858" width="100%" maxDisplayedLines="1" text.normal="Test App" fontSize.normal="14"/>

             

            <s:Label includeIn="normal, disabled, disabledAndInactive, disabledGroup, inactiveGroup, normalAndInactive" y="3" text="Player Mode" fontSize="14" height="20" verticalAlign="middle" width="94" textAlign="right" id="label_statusBarModeText" right="302"/>

             

            <s:Label includeIn="normal, disabled, disabledAndInactive, disabledGroup, inactiveGroup, normalAndInactive" y="3" text="Manual" fontSize="14" verticalAlign="middle" height="20" width="76" id="label_statusBarMode" itemCreationPolicy="immediate" right="221" textAlign="center"/>

             

            <mx:VRule includeIn="normal, disabled, disabledAndInactive, disabledGroup, inactiveGroup, normalAndInactive" y="2" width="3" height="20" right="105"/>

             

            <s:Label includeIn="normal, disabled, disabledAndInactive, disabledGroup, inactiveGroup, normalAndInactive" y="3" text="Player is Idle" width="94" height="20" id="label_statusBarPlayerIdle" fontSize="14" verticalAlign="middle" toolTip="No playlist is playing" itemCreationPolicy="immediate" right="109" textAlign="center"/>

             

            <mx:ProgressBar includeIn="normal, disabled, disabledAndInactive, disabledGroup, inactiveGroup, normalAndInactive" y="3" label="Playing" indeterminate="true" width="94" labelPlacement="right" fontSize="14" itemCreationPolicy="immediate" id="progress_statusBarPlaylistPlaying" toolTip="Playlist is playing" right="109" visible="false"/>

             

            <mx:VRule includeIn="normal, disabled, disabledAndInactive, disabledGroup, inactiveGroup, normalAndInactive" y="3" width="3" height="20" right="213"/>

             

            <mx:ProgressBar includeIn="normal, disabled, disabledAndInactive, disabledGroup, inactiveGroup, normalAndInactive" y="3" labelPlacement="right" label="Copying" indeterminate="true" width="94" fontSize="14" id="progress_statusBarCopyProgress" click="progress_statusBarCopyProgress_clickHandler(event)" itemCreationPolicy="immediate" right="3" visible="false"/>

             

            <s:Label includeIn="normal, disabled, disabledAndInactive, disabledGroup, inactiveGroup, normalAndInactive" y="3" text="Copy is Idle" width="94" height="20" fontSize="14" verticalAlign="middle" right="5" id="label_statusBarCopyIdle" itemCreationPolicy="immediate" toolTip="No copy is in progress" textAlign="center"/>

             

            <fx:Script>

            <![CDATA[

             

            import mx.controls.Alert;

             

            import mx.core.FlexGlobals;

             

             

            protected function progress_statusBarCopyProgress_clickHandler(event:MouseEvent):void

            {

            mx.core.FlexGlobals.topLevelApplication.g_dlgProgress.visible =

            true;

            }

             

            ]]>

             

            </fx:Script>

             

            </s:Group>

             

            </s:Group>

             

            </s:SparkSkin>

             

             

            And Here is the main app file TestAppSkin.mxml:

             

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

            <s:WindowedApplication

             

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

            xmlns:s="

            library://ns.adobe.com/flex/spark"

            xmlns:mx="

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

            skinClass="

            tAppSkin">

             

            <fx:Script>

            <![CDATA[

             

             

            import flash.text.*;

             

             

            import mx.collections.*;

             

            import mx.controls.ProgressBar;

             

            import mx.utils.*;

             

             

            import spark.components.Label;

             

            import spark.components.WindowedApplication;

             

             

            // Status bar objects

             

            public var g_statusBarCopyProgress:ProgressBar;

             

            public var g_statusBarPlayerProgress:ProgressBar;

             

            public var g_statusBarModeText:spark.components.Label;

             

            public var g_statusBarModeLabel:spark.components.Label;

             

            public var g_statusbarCopyIdleLabel:spark.components.Label;

             

            public var g_statusBarPlayerIdleLabel:spark.components.Label;

            ]]>

             

            </fx:Script>

             

             

            <fx:Declarations>

             

            <!-- Place non-visual elements (e.g., services, value objects) here -->

             

            </fx:Declarations>

            </s:WindowedApplication>

            • 3. Re: Skin on Main App can no longer edit using Design mode
              svakil

              Hi

              Can you please log a bug in adobe bug base http://bugs.adobe.com/jira/secure/Dashboard.jspa along with the sample files as well as the detailed steps to reproduce this issue ? We will definitely look into this.

               

              Regards

              Shanaz

              • 4. Re: Skin on Main App can no longer edit using Design mode
                Adoobe4ccl Level 1

                Here is a work around, remove the skin from the

                <s:WindowedApplication

                 

                 

                area and put it in the fx:Style area ie:

                 

                 

                <fx:Style>

                 

                @namespace "library://ns.adobe.com/flex/spark";

                 

                WindowedApplication {

                 

                skinClass:ClassReference("skins.MainAppSkin");

                }

                 

                This way you can still see and work on your main application in design mode...