FocusManager null in Spark TitleWindow

Hi
I'm creating I titlewindow when I push a button.
in this titlewindow I will manage the focus to a input field and commit button at the same time by using the flex form structure.
at the first time when I open this window the focus is working (focusmanager.setFocus(myTextInputField)) but when I close this titlewindow and open it again the focusmanager is null.
any advice how to manage this problem?
thanks & best regards
ju

Hi darrell
thanks for the reply!
You are right the focusmanager from the textfield is null.
hmmm I add the titlewindow component by using addElement (the compiler told me to use addElement).
mySparkGroup.addElement(mySparkTitleWindow)
Is there a difference between addChild and addElement?
I don't understand why I can see the components on stage, but they are'nt in the dislaylist????
Just for understanding...can you explain it shortly, please.
And by the way the advice to handle that problem...
THANKS
ju

Similar Messages

How do you style a sparks TitleWindow?

I'm having a hard time getting my head around the new Sparks css. To pick an example, I have a custom TitleWindow called HelpWindow. How do I set the font and color for the TitleBar?
Also, is there a reference for what properties are available for styling on the new Sparks components?

hi,
With the new spark components you have a mixture of css and reskinning, usually when playing with things that have gradients like the titlewindow you are better off reskinning(my view) for the more standard parts you can use styles, for instance the titlewindow or panel have a titleDisplay property, this is where you could change font values etc..
myTitleWindow.titleDisplay.setStyle("fontSize",30);
David.

What is the point of [Bindable("selectionChange")] in parts of the spark datagrid class?

I dont understand the point of this code in the spark datagrid class:
what is the point of this:
    [Bindable("selectionChange")]
     [Bindable("valueCommit")]
     [Inspectable(category="General", defaultValue="null")]
in
    // selectedItem
    [Bindable("selectionChange")]
    [Bindable("valueCommit")]
    [Inspectable(category="General", defaultValue="null")]
     * @copy spark.components.Grid#selectedItem
     * @default null
     * @langversion 3.0
     * @playerversion Flash 10
     * @playerversion AIR 2.5
     * @productversion Flex 4.5
    public function get selectedItem():Object
        if (grid)
            return grid.selectedItem;
        return (dataProvider && (selectedIndex > 0)) ?
            dataProvider.getItemAt(selectedIndex) : undefined;
     * @private
    public function set selectedItem(value:Object):void
        if (grid)
            grid.selectedItem = value;
        else
            var f:Function = function(g:Grid):void
                g.selectedItem = value;
            deferredGridOperations.push(f);

Anything that is binding to selectedItem will go get the value again when either of those events fires.

Custom template component with Spark ?

Hi there, everyday's got its own (silly?) question :
I'm trying to develop a new component I've called "Drawer", made of a handle (button) and two skinnable containers displayed when the drawer is "opened" and hidden when it is closed.
So here is my AS class:
package nova.style
     import flash.events.MouseEvent;
     import spark.components.Button;
     import spark.components.SkinnableContainer;
     import spark.components.supportClasses.SkinnableComponent;
     [SkinState("closed")]
     [SkinState("opened")]
     public class Drawer extends SkinnableComponent
          // Define skin parts
          [SkinPart(required="true")]
          public var handle:Button;
          [SkinPart(required="true")]
          public var track:SkinnableContainer;
          [SkinPart(required="true")]
          public var drawerContent:SkinnableContainer;
          // Define component data
          [Bindable]
          public var drawerLabel:String;
          [Bindable]
          public var isOpen:Boolean=false;
          [Bindable]
          public var handleX:Number=500;
          public function Drawer()
               super();
               isOpen = false;
          override protected function getCurrentSkinState():String {
               if (isOpen) {
                    return "opened";
               } else {
                    return "closed";
          override protected function partAdded(partName:String, instance:Object):void
               super.partAdded(partName,instance);
               if( instance == handle)
                    handle.addEventListener(MouseEvent.CLICK,handle_clickHandler);
          override protected function partRemoved(partName:String, instance:Object):void
               super.partRemoved(partName,instance);
               if( instance == handle)
                    handle.removeEventListener(MouseEvent.CLICK,handle_clickHandler);
          private function handle_clickHandler(event:MouseEvent):void {
               isOpen=!isOpen;
               invalidateSkinState();
and the associated skin :
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/halo">
     <s:states>
          <s:State name="closed"/>
          <s:State name="opened"/>
     </s:states>
     
     <fx:Metadata>
          [HostComponent("nova.style.Drawer")]
     </fx:Metadata>
     <s:layout>
          <s:BasicLayout />
     </s:layout>
     <s:VGroup width="100%" height="100%" gap="-1">
          <s:Group includeIn="opened" width="100%" height="100%">
               <s:SkinnableContainer id="drawerContent" width="100%" height="100%">
               </s:SkinnableContainer>
               <s:SkinnableContainer id="track" x="{hostComponent.handleX}" width="{handle.width}">
               </s:SkinnableContainer>
          </s:Group>
          <s:Button id="handle" label="{hostComponent.drawerLabel}" x="{hostComponent.handleX}" skinClass="nova.style.skins.DrawerHandleSkin"/>
          </s:VGroup>
     </s:VGroup>
</s:SparkSkin>
I have defined my drawerContent and track parts as SkinnableContainer be cause I want them to be able to hold child elements that the user of my component would specify later on. Actually, I was hoping that I could instanciate my drawer's content in this way :
<nova:Drawer isOpen="true" drawerLabel="Alarms" skinClass="nova.style.DrawerSkin" handleX="100" width="100%">
          <nova:drawerContent>
               <s:Panel>
                         <s:Button label="drawer content button"></s:Button>
</s:Panel>
</nova:drawerContent>
<nova:track>
<s:Panel>
<s:Button label="track button">
</s:Button>
</s:Panel>
</nova:track>
</nova:Drawer>
Unfortunately, neither of the inner buttons are showing at runtime. I guess I've missed a point in my skin class to indicate that my skinnablecontainers can have a content, but I can't find out what.
Any clue much appreciated !
Thanks
Matt

Hey Matt,
I took a look at your skinnable approach, and you're pretty close. You're just missing the part where the properties get pushed in to the skin parts. For instance, in a button, we have a skin part, called labelDisplay, and a property called label. When someone sets the label property, you need to push that in to the labelDisplay skin part. If you were to look at the label setter in Button, you'd see something like:
if (labelDisplay)
        labelDisplay.text = label;
For your component, you need a track skin part, and then a trackContent property. When the trackContent gets set, you'd push that in to the track skin part. This is similar to what we do in Panel with controlBarContent and controlBarGroup. Here's some code snippets from Panel to get you started (I modified the code a bit to make it easier to understand):
// controlBarGroup
[SkinPart(required="false")]
* The skin part that defines the appearance of the
* control bar area of the container.
* By default, the PanelSkin class defines the control bar area to appear at the bottom
* of the content area of the Panel container with a grey background.
* @see spark.skins.spark.PanelSkin
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
public var controlBarGroup:Group;
// controlBarContent
[ArrayElementType("mx.core.IVisualElement")]
* The set of components to include in the control bar area of the
* Panel container.
* The location and appearance of the control bar area of the Panel container
* is determined by the spark.skins.spark.PanelSkin class.
* By default, the PanelSkin class defines the control bar area to appear at the bottom
* of the content area of the Panel container with a grey background.
* Create a custom skin to change the default appearance of the control bar.
* @default null
* @see spark.skins.spark.PanelSkin
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
public function get controlBarContent():Array
    if (controlBarGroup)
        return controlBarGroup.getMXMLContent();
    else
        return _controlBarContent;
* @private
public function set controlBarContent(value:Array):void
    if (controlBarGroup)
        controlBarGroup.mxmlContent = value;
    _controlBarContent = value;
* @private
override protected function partAdded(partName:String, instance:Object):void
    super.partAdded(partName, instance);
    if (instance == controlBarGroup)
        if (_controlBarContent !== undefined)
            controlBarGroup.mxmlContent = _controlBarContent
* @private
override protected function partRemoved(partName:String, instance:Object):void
    super.partRemoved(partName, instance);
    if (instance == controlBarGroup)
        _controlBarContent = controlBarGroup.getMXMLContent();
        controlBarGroup.mxmlContent = null;
As I said, I modified the code snippet a bit to make it easier to understand, but that should get you started.
As per the template component pattern, that stuff should still work, but I think you'd be better off following this new pattern which splits it up in tot he SkinnableComponent and the Skin.
-Ryan

How to round bottom corners of a spark panel?

Title says it all!

FlexExamples - invaluable source - should help you: http://blog.flexexamples.com/2010/04/27/setting-the-corner-radius-on-the-spark-titlewindow -container-in-flex-4/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+FlexExamp les+%28Flex+Examples%29
Read the comments.
Once again, thank you, Peter.
FTQuest

Changing themes of application in Flex 3

Hi All ,below is my mxml file , in which i am trying to change theme of my flex application by selecting the themes in combo box, but it is not working fine.Is there any bug in code ??? How to change the theme of flex application in Flex 3.. Plzz help...
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
           import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            import mx.styles.StyleManager;
            private var cssLoader:URLLoader;
        private var cssRequest:URLRequest;
          [Bindable]
            public var cards:ArrayCollection = new ArrayCollection(
                [ {label:"Theme 0", data:0},
                  {label:"Theme 1", data:1},
                  {label:"Theme 2", data:2},
                  {label:"Theme 3", data:3} ]);
               private function closeHandler(event:Event):void {
               if(event.target.selectedItem.data == 1){
                cssLoader = new URLLoader();
                cssRequest = new URLRequest("Alert.css");
                cssLoader.addEventListener(Event.COMPLETE, cssLoaderComplete);
                cssLoader.load(cssRequest);
            if(event.target.selectedItem.data == 2){
              cssLoader = new URLLoader();
                cssRequest = new URLRequest("Alert1.css");
                cssLoader.addEventListener(Event.COMPLETE, cssLoaderComplete);
                cssLoader.load(cssRequest);
            if(event.target.selectedItem.data == 3){
              cssLoader = new URLLoader();
                cssRequest = new URLRequest("Alert2.css");
                cssLoader.addEventListener(Event.COMPLETE, cssLoaderComplete);
                cssLoader.load(cssRequest);
             private function cssLoaderComplete(event:Event):void
                 var sheet:StyleSheet = new StyleSheet();
                 sheet.parseCSS(cssLoader.data);
                 Application.application.styleSheet = sheet;
]]>
</mx:Script>
<mx:Button label="Click Me" x="337" y="148"/>
<mx:ComboBox dataProvider="{cards}" id="themeCombo" width="100" change="closeHandler(event);" x="308" y="205"/>
</mx:Application>

Hi Bhasker,
I work for big bank sector corp - Citigroup.,i am using themes to load themes dynamically using style manager class.i wrote a application which have 3 themes as a combo box items. when theme selected the look and feel of the same application's UI screen has to change. for the loading i used below mxml application. please advise me as need to submit this task today to implement all our project.it will be very gr8 if u can help me.
<?xml version="1.0" encoding="utf-8"?><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" minWidth="955" minHeight="600">
<fx:Script><![CDATA[
import mx.controls.Alert;
import mx.styles.StyleManager;
import mx.events.StyleEvent;
[Bindable] private var themes:Array = [ "AeonGraphical","Spark","Halo" ];
private function initApp():void {
//Initialize the ComboBox to the first theme in the themes Array.
themesCmbBox.selectedIndex = themes.indexOf(0);
private function thmsCmbChangeHandler(themeName:String):void {
themeName= themesCmbBox.selectedLabel;
if (themeName!=null && themeName == "AeonGraphical") {
styleManager.loadStyleDeclarations("assets/AeonGraphical/AeonGraphical.swf");
if (themeName!=null && themeName == "Spark") {
styleManager.unloadStyleDeclarations("assets/AeonGraphical/AeonGraphical.swf");
styleManager.loadStyleDeclarations("assets/Spark/spark.swf");
if (themeName!=null && themeName == "Halo") {
styleManager.unloadStyleDeclarations("assets/Spark/spark.swf");
styleManager.loadStyleDeclarations("assets/Halo/halo.swf");
private function registrationComplete():void {
Alert.show('Thank you for registering!');
private function clickClear(event:KeyboardEvent=null):void {
if(event==null || event.keyCode == 13 ) {
person.text = "" ;
addr.text = "" ;
city.text = "";
state.text = "" ;
zip.text = "" ;
]]>
</fx:Script>
<mx:Form id="Themes">
<mx:FormItem>
<mx:Label text="{'Themes Demo in Flash 4'}" fontSize="35"/>
</mx:FormItem>
<mx:FormItem label="Themes" >
<mx:ComboBox id="themesCmbBox" dataProvider="{themes}" change="thmsCmbChangeHandler(themesCmbBox.selectedLabel)" />
</mx:FormItem>
<mx:FormItem label="Person Name">
<mx:TextInput id="person" />
</mx:FormItem>
<mx:FormItem label="Street Address">
<mx:TextInput id="addr"/>
</mx:FormItem>
<mx:FormItem label="City">
<mx:TextInput id="city"/>
</mx:FormItem>
<mx:FormItem label="State">
<mx:TextInput id="state" />
</mx:FormItem>
<mx:FormItem label="ZIP Code">
<mx:TextInput id="zip" />
</mx:FormItem>
</mx:Form>
<mx:HBox>
<mx:Button id="sub" label="{'Submit'}" y="100" click="registrationComplete()" />
<mx:Button id="reset" label="{'Reset'}" buttonDown="clickClear()" keyDown="clickClear(event)" />
</mx:HBox>
</s:Application>
and i given the compiler option: -theme=${flexlib}/themes/Halo/halo.swc,${flexlib}/themes/Spark/spark.css,${flexlib}/theme s/AeonGraphical/AeonGraphical.css
i tried with locally project assets path, and framework path nothing work out. and added these themes in the flex-config.xml file also. please advise me ASAP
Advance Thanks,
Usha
Optional Information:
Computer OS: Windows XP
Programming Language: mxml/as3
Compiler: flash 4.1.0

Cairngorm close and background disable

So after trying to write a custom class for TitleWindow popups for two weeks, I just couldn't invest any more time in getting them to work.
So as an alternative I am using Cairngorm popup 1.7.
Everything involving creating the popup works great, but I am having problems with closing.
I dont get any compiler errors, but flash debug error pops up when I try to hit the close button on the TitleWindow.
TypeError: Error #1034: Type Coercion failed: cannot convert flash.events::Event@10a9fdf9 to mx.events.CloseEvent.
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\co re\UIComponent.as:12266]
at components::newTicket/___newTicket_TitleWindow1_close()[/Users/brian/Documents/Adobe Flash Builder 4/PRISM/src/components/newTicket.mxml:9]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\co re\UIComponent.as:12266]
at spark.components::TitleWindow/closeButton_clickHandler()[E:\dev\4.0.0\frameworks\projects \spark\src\spark\components\TitleWindow.as:458]
If I disable the error console it works just fine. Any thoughts on getting rid of this error?
Here is the code from the popup component mxml
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow 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:popup="com.adobe.cairngorm.popup.*"
   title="Receive Items" x="800" y="600" width="800" height="264" close="dispatchEvent(new Event(Event.CLOSE))" textAlign="left">
<s:layout>
<s:VerticalLayout horizontalAlign="center"/>
</s:layout>
<fx:Script>
<![CDATA[
]]>
</fx:Script>
<fx:Declarations>
<fx:Array id="category">
<fx:String>Computers</fx:String>
<fx:String>Phones</fx:String>
<fx:String>Rides</fx:String>
<fx:String>Audio</fx:String>
<fx:String>Video</fx:String>
</fx:Array>
</fx:Declarations>
<s:BorderContainer width="680" height="166" borderVisible="false">
<s:Label text="Requested by: Someone" y="26" x="0"/>
<s:Label text="Item: Wireless Headset" y="51" x="0"/>
<s:Label text="Quantity Received:" y="106" x="0"/>
<s:Label text="Order Date: 06/11/2010" y="26" x="550"/>
<s:Label text="PO #: 378542" y="43" x="551"/>
<s:Label text="Quantity Ordered: 1" x="0" y="77"/>
<s:DropDownList x="105" y="100" width="43"></s:DropDownList>
<s:CheckBox x="77" y="131"/>
<s:Label text="Backordered:" y="136" x="0"/>
</s:BorderContainer>
<s:controlBarContent>
<mx:Spacer width="100%" />
<s:Button label="Save" click="dispatchEvent(new Event(Event.CLOSE))"/>
<s:Button label="Cancel" click="dispatchEvent(new Event(Event.CLOSE))"/>
</s:controlBarContent>
</s:TitleWindow>
Lastly, for those who are familiar with Cairngorm, is there a way to disable the background (aka main application) and have it blurred out just like the TitleWindow main function does?
thanks!

1. dispatchEvent(new CloseEvent(CloseEvent.CLOSE, true, false)) reports this error
Error: Error #1023: Stack overflow occurred.
at com.adobe.cairngorm.popup::PopUpEvent()[C:\workspaces\flex4.0betadrop17feb10\Cairngorm 3 trunk\target\checkout\libraries\Popup\src\com\adobe\cairngorm\popup\PopUpEvent.as:67]
at com.adobe.cairngorm.popup::PopUpBase/dispatchPopUpEvent()[C:\workspaces\flex4.0betadrop17 feb10\Cairngorm 3 trunk\target\checkout\libraries\Popup\src\com\adobe\cairngorm\popup\PopUpBase.as:362]
at com.adobe.cairngorm.popup::PopUpBase/closePopUp()[C:\workspaces\flex4.0betadrop17feb10\Ca irngorm 3 trunk\target\checkout\libraries\Popup\src\com\adobe\cairngorm\popup\PopUpBase.as:315]
at com.adobe.cairngorm.popup::PopUpBase/set open()[C:\workspaces\flex4.0betadrop17feb10\Cairngorm 3 trunk\target\checkout\libraries\Popup\src\com\adobe\cairngorm\popup\PopUpBase.as:192]
at com.adobe.cairngorm.popup::PopUpBase/onClose()[C:\workspaces\flex4.0betadrop17feb10\Cairn gorm 3 trunk\target\checkout\libraries\Popup\src\com\adobe\cairngorm\popup\PopUpBase.as:307]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\co re\UIComponent.as:12266]
at components::newTicket/___newTicket_TitleWindow1_close()[/Users/brian/Documents/Adobe Flash Builder 4/PRISM/src/components/newTicket.mxml:9]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\co re\UIComponent.as:12266]
at components::newTicket/___newTicket_TitleWindow1_close()[/Users/brian/Documents/Adobe Flash Builder 4/PRISM/src/components/newTicket.mxml:9]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\co re\UIComponent.as:12266]
at components::newTicket/___newTicket_TitleWindow1_close()[/Users/brian/Documents/Adobe Flash Builder 4/PRISM/src/components/newTicket.mxml:9]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\co re\UIComponent.as:12266]
at components::newTicket/___newTicket_TitleWindow1_close()[/Users/brian/Documents/Adobe Flash Builder 4/PRISM/src/components/newTicket.mxml:9]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\co re\UIComponent.as:12266]
at components::newTicket/___newTicket_TitleWindow1_close()[/Users/brian/Documents/Adobe Flash Builder 4/PRISM/src/components/newTicket.mxml:9]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\co re\UIComponent.as:12266]
at components::newTicket/___newTicket_TitleWindow1_close()[/Users/brian/Documents/Adobe Flash Builder 4/PRISM/src/components/newTicket.mxml:9]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\co re\UIComponent.as:12266]
at components::newTicket/___newTicket_TitleWindow1_close()[/Users/brian/Documents/Adobe Flash Builder 4/PRISM/src/components/newTicket.mxml:9]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\co re\UIComponent.as:12266]
at components::newTicket/___newTicket_TitleWindow1_close()[/Users/brian/Documents/Adobe Flash Builder 4/PRISM/src/components/newTicket.mxml:9]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\co re\UIComponent.as:12266]
at components::newTicket/___newTicket_TitleWindow1_close()[/Users/brian/Documents/Adobe Flash Builder 4/PRISM/src/components/newTicket.mxml:9]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\co re\UIComponent.as:12266]
at components::newTicket/___newTicket_TitleWindow1_close()[/Users/brian/Documents/Adobe Flash Builder 4/PRISM/src/components/newTicket.mxml:9]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\co re\UIComponent.as:12266]
at components::newTicket/___newTicket_TitleWindow1_close()[/Users/brian/Documents/Adobe Flash Builder 4/PRISM/src/components/newTicket.mxml:9]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\co re\UIComponent.as:12266]
at components::newTicket/___newTicket_TitleWindow1_close()[/Users/brian/Documents/Adobe Flash Builder 4/PRISM/src/components/newTicket.mxml:9]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\co re\UIComponent.as:12266]
at components::newTicket/___newTicket_TitleWindow1_close()[/Users/brian/Documents/Adobe Flash Builder 4/PRISM/src/components/newTicket.mxml:9]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\co re\UIComponent.as:12266]
at components::newTicket/___newTicket_TitleWindow1_close()[/Users/brian/Documents/Adobe Flash Builder 4/PRISM/src/components/newTicket.mxml:9]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\co re\UIComponent.as:12266]
2. not sure how to develop the event handler within the application for the close event
3. I am using flex 4 and the showCloseButton property is not available for Spark TitleWindow
4. how would I close a window using PopUpManager without calling removePopUp? I dont see anything like PopUpManager.Close
thanks for everything so far!

Unable to attach Skin RTE

Hi I'm getting this error when creating an instance of a class from a loaded module:
Skin for phcfx.mainView.vsMain.formContainer.FormWindow2862.contentPanel.PresentationBuilderView28 63.templatePicker was not found.
This templatePicker component is just a spark TitleWindow MXML file.
If I load my module in a spark only application, the class is generated properly and throw no errors at all but currently we're loading our module into a HALO only application with is being compiled with SDK 4.5.1.
It seems I'll have to register every single spark component in my css file to get this fixed. Isn't there other way to fix it?

Hi Alex,
Our Halo application uses a CSS file which uses the new namespaces
@namespace "library://ns.adobe.com/flex/mx";
@namespace s "library://ns.adobe.com/flex/spark";
But the Halo components still use the old namespace definitions like <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml", is that a problem?
Only the Spark only modules are using:
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
Something else also weird is if I load our module in a dummy spark app, any external swc that uses defaults.css, is preserved but in our main halo app, I have to redefine again everything that was in that defaults.css.

Scroller not appearing in the popup when opened for the second time

Hi,
I have a popup window which has three tabs A, B, and C. My tab A has BorderContainer > Scroller > Vgroup
When opened for the first time, I can see the scroller. But , when opened for the second time, the scroller does not appear and the content in th Border container seems truncated.
Please help.

No answers, but I may be seeing something similar.
I'm converting a project from Flex 3 to 4. In a popup (Spark TitleWindow) I have a some TabNavigators. On subsequent openings of the popup, the contents of the navigator children don't always render. After some changing of various Halo components to their Spark equivalents, I thought the problem had gone away. But the problem seems to have come back.
In my case, I'm not sure if the "subsequent opening" is the key issue. Sometimes, the contents of nested TabNaviagtor children don't render on the first opening. although the first child content always renders. But the problem seems to increase in subsequent openings. (I.e. more children of TabNavigators don't render.)
Perhaps not connected, but I notice when this happens, the outside borders of dataGrid components don't render in components outside of TabNavigators. I suspect there's a simple thing I need to to do to fix this, but I haven't found it. Any hints or insights would be welcomed.

Multiple themes for one application

Hi,
How to apply multiple themes dynamically for singel application. Is there any sample available.
Regards,
Jayagopal.

Hi,
I work for big bank sector corp - Citigroup.,i am using themes to load themes dynamically using style manager class.i wrote a application which have 3 themes as a combo box items. when theme selected the look and feel of the same application's UI screen has to change. for the loading i used below mxml application. please advise me as need to submit this task today to implement all our project.it will be very gr8 if u can help me.
<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.styles.StyleManager;
import mx.events.StyleEvent;
[Bindable] private var themes:Array = [ "AeonGraphical","Spark","Halo" ];
private function initApp():void {
//Initialize the ComboBox to the first theme in the themes Array.
themesCmbBox.selectedIndex = themes.indexOf(0);
private function thmsCmbChangeHandler(themeName:String):void {
themeName= themesCmbBox.selectedLabel;
if (themeName!=null && themeName == "AeonGraphical") {
styleManager.loadStyleDeclarations("assets/AeonGraphical/AeonGraphical .swf");
if (themeName!=null && themeName == "Spark") {
styleManager.unloadStyleDeclarations("assets/AeonGraphical/AeonGraphic al.swf");
styleManager.loadStyleDeclarations("assets/Spark/spark.swf");
if (themeName!=null && themeName == "Halo") {
styleManager.unloadStyleDeclarations("assets/Spark/spark.swf");
styleManager.loadStyleDeclarations("assets/Halo/halo.swf");
private function registrationComplete():void {
Alert.show('Thank you for registering!');
private function clickClear(event:KeyboardEvent=null):void {
if(event==null || event.keyCode == 13 ) {
person.text = "" ;
addr.text = "" ;
city.text = "";
state.text = "" ;
zip.text = "" ;
]]>
</fx:Script>
<mx:Form id="Themes">
<mx:FormItem>
<mx:Label text="{'Themes Demo in Flash 4'}" fontSize="35"/>
</mx:FormItem>
<mx:FormItem label="Themes" >
<mx:ComboBox id="themesCmbBox" dataProvider="{themes}" change="thmsCmbChangeHandler(themesCmbBox.selectedLabel)" />
</mx:FormItem>
<mx:FormItem label="Person Name">
<mx:TextInput id="person" />
</mx:FormItem>
<mx:FormItem label="Street Address">
<mx:TextInput id="addr"/>
</mx:FormItem>
<mx:FormItem label="City">
<mx:TextInput id="city"/>
</mx:FormItem>
<mx:FormItem label="State">
<mx:TextInput id="state" />
</mx:FormItem>
<mx:FormItem label="ZIP Code">
<mx:TextInput id="zip" />
</mx:FormItem>
</mx:Form>
<mx:HBox>
<mx:Button id="sub" label="{'Submit'}" y="100" click="registrationComplete()" />
<mx:Button id="reset" label="{'Reset'}" buttonDown="clickClear()" keyDown="clickClear(event)" />
</mx:HBox>
</s:Application>
and i given the compiler option:
-theme+=${flexlib}/themes/Halo/halo.css,${flexlib}/themes/Spark/spark.css,${flexlib}/theme s/AeonGraphical/AeonGraphical.css
or -theme+=assets/Halo/halo.css,assets/Spark/spark.css,assets/AeonGraphical/AeonGraphical.cs s
i tried with locally project assets path, and framework path nothing work out. and added these themes in the flex-config.xml file also.
And i tried to run your MyStyle app same problem. Please advise me ASAP.
Advance Thanks,
Usha
Optional Information:
Computer OS: Windows XP
Programming Language: mxml/as3
Compiler: flash 4.1.0

Focus stays when change view

Hello,
I have a viewstack with 2 views.
In view 1 is a textinput.
In view 2 is an image.
when i startup my application, view 1 is shown.
I type an a in the textinput.
Now i press a button and it goes to view 2.
I type bcd.
I close this view to return to view 1, and what i see is in my textinput shows bcd as value.
I tried to kill the focus when i press the button to change view but it doesn't work.
Please some help.
Code i tried:
this.stage.focus=null;
Application.application.focusManager.deactivate();
this.focusmanager=null;
this.focusEnabled=false;
this.focusManager.deactivate();

The button is in a menubar.
Is there a general place and/or function so i can see wich item in my project received focus?
Should i do something like creating an eventlistener on the stage that calls a function on each enterframe so i can trace focus?
I did solve my problem by setting: myMenuBar.focusenabled=true;
and when i click on the menu i put focus on the menubar by setting; stage.focus=myMenuBar;
I wonder if this is the best solution, cause when you are inside the second view and you use for example the S for a stroke function inside the second view, but you also created a menu shortcut with the S that saves your project.
This way the S will save the project because the menubar has focus..
Or would this be the only solution and youll have to be sure not to use the same key for different functionality?

FormLayout not working

Hi,
I have a Spark TitleWindow popup
which has a Spark Form and a lot of FormItems, say 15
(mostly Label and DropDownList's).
Labels range from 2-5cm.
I do have FormLayout specified inside that Form
(and VerticalLayout outside it, because there is a few Buttons at the bottom of the window,
but outside the Form).
All those Dropdown are set to the same width.
However, on that popup these FormItems
are not aligned, I mean those DropDownnLists are spread all over the form, not start on one level.
Any idea how to fix it?
Thank you in advance,
Oleg.
P.S. using Flex 4.5.1

I fixed that problem.
It happened that someone else put an extra VGroup inside the Form
in addition to one surrounding it.
As soon as I removed an inner one, FormLayout worked.
Thanks,
Oleg.

Scroller null focusManager exception

Currently working on a project that needs to take a component & pop it out of it's parent to the top level app. I am using a spark textAera. Initially when the textArea is "unpopped out" the textAera works fine. However, when it is popped out and a user then focuses in on the textArea a null object reference is thrown from the Scroller class focusInHandler method.
Currently to remove and pop out the component the code I am using is:
IVisualElementContainer(resizeComponent.parent).removeElement(resizeComponent);
FlexGlobals.topLevelApplication.systemManager.addChild(resizeComponent);
where resizeComponent is the component I want to pop out.
Exception occurs when focusing in, Scroller.as:
override protected function focusInHandler(event:FocusEvent):void
        super.focusInHandler(event);
        // When we gain focus, make sure the focused element is visible
        if (viewport && ensureElementIsVisibleForSoftKeyboard)
            var elt:IVisualElement = focusManager.getFocus() as IVisualElement; //null object excpetion thrown here
            lastFocusedElement = elt;
What am I doing wrong?
Thanks,
Kevin

Kevin,
The problem is that your popup doesn't implement the IFocusManagerContainer interface.
Implementing IFocusManagerContainer allows the system to assign a FocusManager to the popup, and this error goes away.
Regards,
Haim Arazy

Throwing null object reference , when focus into the spark textarea ,if it is in the popup

I added a textarea to vrgoup container and added that vgroup as popup to the application. while i am trying to focus into the textarea , it always throwing me null object reference. to see that you need to have debugger version of flash player installed. please help me if anybody knows the solution.
here is my code.
code
protected function btn_clickHandler(event:MouseEvent):void
var vgroup:VGroup = new VGroup();
var ta:TextArea = new TextArea();
vgroup.percentWidth = 100;
vgroup.addElement(ta);
PopUpManager.addPopUp(vgroup, this);
Following is the error thrown
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at spark.components::Scroller/focusInHandler()[E:\dev\hero_private\frameworks\projects\spark \src\spark\components\Scroller.as:1258]
at flash.display::Stage/set focus()
at flashx.textLayout.container::ContainerController/http://ns.adobe.com/textLayout/internal/2008::setFocus()[C:\Vellum\branches\v2\2.0\dev\out put\openSource\textLayout\src\flashx\textLayout\container\ContainerController.as:2265]
at flashx.textLayout.container::ContainerController/mouseDownHandler()[C:\Vellum\branches\v2 \2.0\dev\output\openSource\textLayout\src\flashx\textLayout\container\ContainerController. as:2067]
at flashx.textLayout.container::TextContainerManager/mouseDownHandler()[C:\Vellum\branches\v 2\2.0\dev\output\openSource\textLayout\src\flashx\textLayout\container\TextContainerManage r.as:1939]
at spark.components.supportClasses::RichEditableTextContainerManager/mouseDownHandler()[E:\d ev\hero_private\frameworks\projects\spark\src\spark\components\supportClasses\RichEditable TextContainerManager.as:665]
at flashx.textLayout.container::ContainerController/http://ns.adobe.com/textLayout/internal/2008::requiredMouseDownHandler()[C:\Vellum\branche s\v2\2.0\dev\output\openSource\textLayout\src\flashx\textLayout\container\ContainerControl ler.as:2088]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\hero_private\frameworks\projects\framework\sr c\mx\core\UIComponent.as:13128]
at mx.managers::SystemManager/mouseEventHandler()[E:\dev\hero_private\frameworks\projects\fr amework\src\mx\managers\SystemManager.as:2924]

The simplest example I could come up with consists of 3 files:
Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<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"
                  applicationComplete="open()">
     <fx:Script>
          <![CDATA[
               import mx.managers.PopUpManager;
               public function open():void {
                    var popUp:CustomComponent = PopUpManager.createPopUp(
                         this, //parent
                         CustomComponent, //class name
                         true //modal
                    ) as CustomComponent;
                    PopUpManager.centerPopUp(popUp);
          ]]>
     </fx:Script>
</s:Application>
CustomComponent.as
package {
     import spark.components.supportClasses.SkinnableComponent;
     public class CustomComponent extends SkinnableComponent {
          public function CustomComponent() {
               super();
               setStyle('skinClass', CustomComponentSkin);
CustomComponentSkin.mxml
<?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:mx="library://ns.adobe.com/flex/mx">
     <fx:Metadata>
          [HostComponent("CustomComponent")]
     </fx:Metadata>
     <s:Panel>
          <s:TextArea/>
     </s:Panel>
</s:Skin>

Overriding Spark DataGrid item renderer's prepare method - renderer's child is initially null

I am currently using the 4.12.0 SDK. I have a Spark DataGrid setup that makes use of an externally-defined itemRenderer:
<s:DataGrid id="dgEquipment"
            width="100%" height="100%"
            doubleClickEnabled="true"
            creationComplete="init()" doubleClick="popTab(event)">
<s:columns>
    <s:ArrayList>
      <s:GridColumn itemRenderer="renderers.equipment.IconRenderer"
                    dataField="EXISTING"
                    width="22"/>
The data provider is set programmatically after a remote call has returned a result.
I have the renderer setup as follows:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx"
                    dataChange="init()" remove="dispose()">
<s:layout>
    <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<fx:Script>
    <![CDATA[
      import mx.controls.Menu;
      import mx.events.MenuEvent;
      import spark.components.DataGrid;
      [Bindable]
      [Embed(source="../../../assets/images/Icon 1.png")]
      private var ico1:Class;
      [Bindable]
      [Embed(source="../../../assets/images/Icon 2.png")]
      private var ico2:Class;
      [Bindable]
      [Embed(source="../../../assets/images/Icon 3.png")]
      private var ico3:Class;
      private var isExisting:Boolean;
      private var popUp:Menu;
      private function init():void
        if (data)
          isExisting = data.EXISTING == 1;
      private function dispose():void
        if (popUp)
          popUp.removeEventListener(MenuEvent.ITEM_CLICK, popUp_click);
          popUp = null;
        if (imgActions)
          imgActions.removeEventListener(MouseEvent.CLICK, image_click);
          imgActions = null;
      override public function prepare(hasBeenRecycled:Boolean):void
        if (data)
          if ((data.TYPE == "A" || data.TYPE == "B") && !data.X && !data.Y)
            disableLink();
            imgActions.source = ico3;
            imgActions.toolTip = "Blah blah.";
          else if (data.TYPE == "C" || data.TYPE == "D")
            disableLink();
          else if (isExisting)
            imgActions.source = ico1; //******************************            imgActions.toolTip = "More blah blah.";
            imgActions.addEventListener(MouseEvent.CLICK, image_click);
          else
            imgActions.source = ico2;
            imgActions.addEventListener(MouseEvent.CLICK, image_click);
            imgActions.toolTip = "Even more blah blah.";
            initPopUp();
      private function initPopUp():void
      private function popUp_click(event:MenuEvent):void
      private function image_click(event:MouseEvent):void
      private function disableLink():void
    ]]>
</fx:Script>
<s:Image id="imgActions"
           height="18" width="18"/>
</s:GridItemRenderer>
When the code reaches the line where I have added a comment full of asterisks, I get the following error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at renderers.equipment::IconRenderer/prepare()[C:\…\renderers\equipment\IconRenderer.mxml:81 ]
    at spark.components.gridClasses::GridViewLayout/initializeItemRenderer()[/Users/justinmclean /Documents/ApacheFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/Gri dViewLayout.as:1808]
    at spark.components.gridClasses::GridViewLayout/createTypicalItemRenderer()[/Users/justinmcl ean/Documents/ApacheFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/ GridViewLayout.as:1243]
    at spark.components.gridClasses::GridViewLayout/updateTypicalCellSizes()[/Users/justinmclean /Documents/ApacheFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/Gri dViewLayout.as:1374]
    at spark.components.gridClasses::GridViewLayout/measure()[/Users/justinmclean/Documents/Apac heFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/GridViewLayout.as: 875]
    at spark.components.supportClasses::GroupBase/measure()[/Users/justinmclean/Documents/Apache Flex4.12.0/frameworks/projects/spark/src/spark/components/supportClasses/GroupBase.as:1156 ]
    at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::measureSizes()[/Users/justinmclean/Documents/ApacheFlex4.12.0/frameworks/projects/framework/src/mx/cor e/UIComponent.as:9038]
    at mx.core::UIComponent/validateSize()[/Users/justinmclean/Documents/ApacheFlex4.12.0/framew orks/projects/framework/src/mx/core/UIComponent.as:8962]
    at spark.components::Group/validateSize()[/Users/justinmclean/Documents/ApacheFlex4.12.0/fra meworks/projects/spark/src/spark/components/Group.as:1074]
    at mx.managers::LayoutManager/validateSize()[/Users/justinmclean/Documents/ApacheFlex4.12.0/ frameworks/projects/framework/src/mx/managers/LayoutManager.as:673]
    at mx.managers::LayoutManager/doPhasedInstantiation()[/Users/justinmclean/Documents/ApacheFl ex4.12.0/frameworks/projects/framework/src/mx/managers/LayoutManager.as:824]
    at mx.managers::LayoutManager/doPhasedInstantiationCallback()[/Users/justinmclean/Documents/ ApacheFlex4.12.0/frameworks/projects/framework/src/mx/managers/LayoutManager.as:1188]
Running the debugger shows that this occurs with the first item in the data provider. If I alter the prepare method to check for the existence of imgActions before doing anything, everything works fine after the first item. So I'll have one row in the DataGrid with a missing icon, and all the rest will have icons.
So the question is, is it normal for prepare to run before any children of the item renderer are created? If so, how should I handle this?
Many thanks in advance.

A little more info. I added some event handlers to the renderer and the image (for events that I thought would be relevant), and here is the order of events based on trace statements within the handlers:
griditemrenderer1_addedHandler
griditemrenderer1_addedToStageHandler
griditemrenderer1_preinitializeHandler
imgActions_addedHandler
griditemrenderer1_addedHandler
imgActions_addedToStageHandler
imgActions_preinitializeHandler
imgActions_addedHandler
griditemrenderer1_addedHandler
imgActions_initializeHandler
griditemrenderer1_elementAddHandler
imgActions_addHandler
griditemrenderer1_initializeHandler
griditemrenderer1_addHandler
prepare called
imgActions_resizeHandler
griditemrenderer1_resizeHandler
imgActions_creationCompleteHandler
imgActions_updateCompleteHandler
griditemrenderer1_creationCompleteHandler
griditemrenderer1_updateCompleteHandler
griditemrenderer1_removeHandler
griditemrenderer1_addedHandler
griditemrenderer1_addedToStageHandler
imgActions_addedToStageHandler
griditemrenderer1_addHandler
griditemrenderer1_dataChangeHandlerTypeError: Error #1009: Cannot access a property or method of a null object reference.
prepare called
    at renderers.equipment::IconRenderer/prepare()[C:\…\renderers\equipment\IconRenderer.mxml:91 ]
imgActions_renderHandler
griditemrenderer1_renderHandler

FocusManager null in Spark TitleWindow

Similar Messages

Maybe you are looking for