I want to remove title text from titleBar skin but I get an error if I just comment out. I assume it means it is required skin part?
<!-- title -->
<!--- @copy spark.components.windowClasses.TitleBar#titleText -->
<s:Label id="titleText" minWidth="0" maxDisplayedLines="1" width="100%" />
I tried setting it to text="" and text="random text" but no effect. If I set a value in Main application it works but not for empty string.
Right now it shows applications name presumably from "Main-app.xml" file.
How can I get rid of it? Any help appreciated, this is really bugging me...
Edit 1: TitleBar Skin
<!--- 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>
Application Skin Code Snippet:
<!-- 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>
Error:
[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]
I just took a look at the code on that line in the TitleBar class and it looked like a bug to me.
override protected function commitProperties():void {
super.commitProperties();
if (titleChanged) {
titleText.text = _title;
titleChanged = false;
}
....
As you can see, it doesn't check whether titleText exists before trying to set its text property, even though titleText is not a required skinpart.
So I checked the Adobe JIRA bug database. It turns that this bug has already been filed and is still unresolved:
TitleBar lists titleText as optional, but throws exception when absent
The simplest workaround that i can think of is to leave the titleText Label where it is and just set its visible and includeInLayout properties to false.