Flex 4 - 如何从标题栏皮肤中删除标题文本？

Question

我想从标题栏皮肤中删除标题文本，但如果我只是注释掉，则会出现错误。我认为这意味着它是必需的皮肤部分？

<!-- title -->
<!--- @copy spark.components.windowClasses.TitleBar#titleText -->
<s:Label id="titleText" minWidth="0" maxDisplayedLines="1" width="100%" />

我尝试将其设置为 text="" 和 text="random text" 但没有效果。如果我在主应用程序中设置一个值，它可以工作，但不适用于空字符串。

现在它显示的应用程序名称可能来自“Main-app.xml”文件。

我怎样才能摆脱它？感谢任何帮助，这真的让我烦恼...

编辑 1：标题栏皮肤

<!--- The default skin class for the title bar of the Spark WindowedApplication component
      and Spark Window component when you use Flex chrome.  
      The title bar skin includes the close, minimize, and maximize buttons, the 
      title icon, and the title text.

      <p>The Flex chrome is defined by the SparkChromeWindowedApplicationSkin skin class 
      in the spark.skins.spark package. 
      To use the Flex chrome, set <code>systemChrome</code> to "none" in the application's .xml file,
      and set the <code>skinClass</code> style to spark.skins.spark.SparkChromeWindowedApplicationSkin. </p>

      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4

      @see spark.components.WindowedApplication
      @see spark.components.Window
      @see spark.skins.spark.SparkChromeWindowedApplicationSkin


    This Skin is based on "TitleBar";
-->
<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" xmlns:mx="library://ns.adobe.com/flex/mx" 
             minHeight="40" creationComplete="created()" >

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

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


        import mx.core.FlexGlobals;
        import mx.events.StateChangeEvent;

        /* Exclude the titleBar and scroller because they are SparkSkins and we
         * don't want to colorize them twice. */
        static private const exclusions:Array = ["titleBar"];

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

        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }

        public var ifo:Boolean;

        public function created():void
        {
            this.hostComponent.parentApplication.addEventListener(StateChangeEvent.CURRENT_STATE_CHANGE, buttonToggle);
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            //trace(hostComponent.parentApplication.currentState);
            backgroundRect.radiusX = getStyle("cornerRadius");

            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }

        private function returnButtonHandler(event:MouseEvent):void
        {
            this.hostComponent.parentApplication.currentState = "Home";
        }

        private var lastState:String;

        private function buttonToggle(event:StateChangeEvent):void
        {
            lastState = event.oldState;

            if(event.newState == "Home")
            {
                returnButton.visible = false;
                settingsButton.label = "Settings";
            }
            else if(event.newState == "MoviePage")
            {
                returnButton.visible = true;
                settingsButton.label = "Settings";
            }
            else
            {
                returnButton.visible = false;
                settingsButton.label = "Back";
            }
        }

        private function settingsButtonHandler(event:MouseEvent):void
        {
            if(settingsButton.label == "Settings") // if button label is settings
            {
                hostComponent.parentApplication.currentState = "Settings";
            }
            else // if button label is back
            {
                hostComponent.parentApplication.currentState = lastState; // return to previous state
            }
        }

    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalAndMaximized" stateGroups="maximizedGroup" />
        <s:State name="disabledAndMaximized" stateGroups="maximizedGroup" />
    </s:states>

    <!-- fill -->
    <!--- Defines the background color of the title bar. -->
    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0" >
        <s:fill>
            <s:LinearGradient id="bgFill" rotation="90">
                <s:GradientEntry color="0xFFFFFF" />
                <s:GradientEntry color="0xBABABA" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!-- title bar content -->
    <s:Group id="titleBar" minHeight="40" width="100%" height="100%" left="3" right="2" >
        <s:layout>
            <s:HorizontalLayout verticalAlign="middle" gap="5" />
        </s:layout>

        <!-- title bar icon -->
        <!--- @copy spark.components.windowClasses.TitleBar#titleIconImage -->
        <s:BitmapImage id="titleIconImage" minWidth="0" fillMode="clip"/>

        <!-- return button -->
        <s:Button id="returnButton" label="Return" click="returnButtonHandler(event)" visible="false" />

        <!-- title -->
        <!--- @copy spark.components.windowClasses.TitleBar#titleText -->
        <s:Label id="titleText" visible="false" includeInLayout="false" minWidth="0" maxDisplayedLines="1" width="100%" /> !!!!!!!! Error if this line is deleted !!!!!!!!!

        <!-- settings / back button -->
        <s:Button id="settingsButton" label="Settings" click="settingsButtonHandler(event)" visible="true" />

        <!-- minimize button -->
        <!--- 
            By default, the button uses the spark.skins.spark.windowChrome.MinimizeButtonSkin class
            to define the skin for the mimimized button.
            @copy spark.components.windowClasses.TitleBar#minimizeButton 
            @see spark.skins.spark.windowChrome.MinimizeButtonSkin 
        -->
        <s:Button id="minimizeButton" verticalCenter="0"
            skinClass="skins.CustomMinimizeButtonSkin" />

        <!-- maximize button -->
        <!--- 
            By default, the button uses the spark.skins.spark.windowChrome.MinimizeButtonSkin class
            to define the skin for the maximized button.
            @copy spark.components.windowClasses.TitleBar#maximizeButton
            @see spark.skins.spark.windowChrome.MaximizeButtonSkin 
        -->
        <s:Button id="maximizeButton" verticalCenter="0"
                  skinClass="skins.CustomMaximizeButtonSkin"
                  skinClass.maximizedGroup="skins.CustomRestoreButtonSkin" />

        <!-- close button -->
        <!---
            By default, the button uses the spark.skins.spark.windowChrome.MinimizeButtonSkin class
            to define the skin for the close button.
            @copy spark.components.windowClasses.TitleBar#closeButton
            @see spark.skins.spark.windowChrome.CloseButtonSkin
        -->
        <s:Button id="closeButton" verticalCenter="0"
            skinClass="skins.CustomCloseButtonSkin" />
        <s:Spacer />

    </s:Group>

</s:SparkSkin>

应用程序皮肤代码片段：

<!-- layer 3: title bar + content -->
    <s:Group left="0" right="0" top="0" bottom="0" minHeight="0" minWidth="0" >
        <s:layout>
            <s:VerticalLayout gap="0"/>
        </s:layout>

        <!-- title bar -->
        <s:TitleBar id="titleBar" width="100%" minHeight="40" skinClass="skins.CustomTitleBarSkin" />

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

    </s:Group>

    <!-- layer 4: gripper -->
    <!--- @see spark.skins.spark.windowChrome.GripperSkin -->
    <s:Button id="gripper" right="6" bottom="5" tabEnabled="false" 
              skinClass="spark.skins.spark.windowChrome.GripperSkin" /> 

</s:SparkSkin>

错误：

[SWF] Main.swf - 5,439,008 bytes after decompression
TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at spark.components.windowClasses::TitleBar/commitProperties()[E:\dev\4.y\frameworks\projects\airspark\src\spark\components\windowClasses\TitleBar.as:443]
    at mx.core::UIComponent/validateProperties()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:8219]
    at mx.managers::LayoutManager/validateProperties()[E:\dev\4.y\frameworks\projects\framework\src\mx\managers\LayoutManager.as:597]
    at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.y\frameworks\projects\framework\src\mx\managers\LayoutManager.as:783]
    at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.y\frameworks\projects\framework\src\mx\managers\LayoutManager.as:1180]

Answer 1

我刚刚查看了 TitleBar 类中该行的代码，对我来说它看起来像是一个错误。

override protected function commitProperties():void {
    super.commitProperties();

    if (titleChanged) {
        titleText.text = _title;
        titleChanged = false;   
    }

....

正如您所看到的，在尝试设置其 text 属性之前，它不会检查 titleText 是否存在，即使 titleText 不是必需的外观。

所以我检查了 Adob​​e JIRA bug 数据库。事实证明，这个错误已经被提交，但仍未解决：

TitleBar 将 titleText 列为可选，但是缺席时抛出异常

我能想到的最简单的解决方法是将titleText标签保留在原处，然后将其可见 和includeInLayout 属性设置为 false。