Solved

Flex TitleWindow: Add buttons to Title

Posted on 2009-07-14
6
3,577 Views
Last Modified: 2012-05-07
My question is Related to http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Flex/Q_24513126.html

I've been trying to implement a help button in the title of a TitleWindow and have followed this thread without "real" success. My button is created as a single (blue) sprite and appears at TitleWindow.x=0 & TitleWindow.y=0 coordinates.

I want to position my button within the title on the far right, in the same position as the close button would appear if it were turned on.

Attached is my extended TitleWindow class and a screen shot of my TitleWindow. As the related solution didn't have a post of the final workng code I was wondering if you might be able to help by looking at my implementation of the same?
package com.anz.cola.custom.actionscript

{

        import com.anz.cola.custom.ANZButton;

        import com.anz.cola.utils.Omniture;

        

        import flash.events.MouseEvent;

        import flash.external.ExternalInterface;

        

        import mx.containers.TitleWindow;

        import mx.controls.Alert;

        

        public class ANZTitleWindow extends TitleWindow

        {

                public function ANZTitleWindow()

                {

                        super();

                }

                

                override protected function createChildren():void {

                        super.createChildren();

                        

                        var helpButton:ANZButton = new ANZButton();

                        helpButton.label = "Help";

                        helpButton.useHandCursor = true;

                        helpButton.visible = true;

                        helpButton.includeInLayout = true;

                        

                        helpButton.addEventListener(MouseEvent.CLICK, loadHelp);

                        titleBar.addChild(helpButton);

                        

                }

 

                private function loadHelp(event:MouseEvent):void {      

                        var javascriptFunction:String = "loadHelpPage"; 

                        

                        if (ExternalInterface.available) {

                                ExternalInterface.call(javascriptFunction, "SaveConfirmationPopup");

                                var omniture:Omniture = new Omniture();

                                //send Omniture button HELP button Click event

                                omniture.omnitureTrackButtonClick("creditcard:ola:HelpButton_SaveConfirmationPopup");

                        } else {

                                Alert.show(javascriptFunction + " is not available");

                        }       

        

                }

 

        }

}

Open in new window

TitleWindow.PNG
0
Comment
Question by:mah8473
  • 3
  • 3
6 Comments
 
LVL 37

Expert Comment

by:zzynx
ID: 24858102
Try this:

var helpButton:ANZButton = new ANZButton();
helpButton.x = this.width - 100;     // <<<<<<<< Added
helpButton.y = 5;                            // <<<<<<<< Added
helpButton.width = 100;                // <<<<<<<< Added
helpButton.height = 20;                // <<<<<<<< Added
helpButton.label = "Help";

0
 
LVL 5

Author Comment

by:mah8473
ID: 24865605
zzynx,
Thanks you got me pointed in the right direction, my button now appears at the correct size however it still floats outside the upperLeft corner of the titleBar. All attempts to position relative to the titleWindow or titleBar x/y, widths etc have just skipped the button from outside left to outside right of the titleWindows borders. But I can't follow exactly how or why it's doing it. I've set watches and interrogated any number of properties with limited success in finding my answer.

Although I've messed around with any number of alternatives over the couple of hours, the only way I've been able to get the button to appear inside the titleBar is to explicitly set  it's xPos as follows:  

helpButton.x = this.titleTextField.width + 430;

Though this works it's kind of ugly, particularly if I wanted to dynamically add the titleText. A change in the titleText value length would impact the button position.  Certainly less than idel.

I was hoping to find a cleaner solution...any further thoughts would be grately appreciated.

Cheers
Mark
0
 
LVL 37

Accepted Solution

by:
zzynx earned 500 total points
ID: 24867001
Well, the most simple app I could write works fine for me:
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 

	verticalAlign="middle" xmlns:local="*" creationComplete="init()" viewSourceURL="srcview/index.html" xmlns:demo="demo.*">

	<demo:CustomTitleWindow title="My window title" id="titleWindow"

		width="600" height="500" showCloseButton="true">

	</demo:CustomTitleWindow>

</mx:Application>
 

with 
 
 

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

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" >

	<mx:Script>

		<![CDATA[

			import mx.controls.Button;

		

            override protected function createChildren():void {

                    super.createChildren();

                    

                    var helpButton:Button = new Button();

                    helpButton.x = this.width - 100;

                    helpButton.y = 5;

                    helpButton.width = 100;

                    helpButton.height = 20;

                    helpButton.label = "Help";

                    helpButton.useHandCursor = true;

                    helpButton.visible = true;

                    helpButton.includeInLayout = true;

                    

                    titleBar.addChild(helpButton);

            }

			

		]]>

	</mx:Script>

</mx:TitleWindow>

Open in new window

0
Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 
LVL 5

Author Comment

by:mah8473
ID: 24867272
zzynx,

Right you are, your simple code works a treat. Unfortunately I'm not writing my applicaiton in native Flex, I'm using Flex as a Wrapper for the Adobe FormGuide Designer ES.....not by choice I might add. All the code I'm writing in Flex are actually hacks on inadequacies of the FormGuide....and believe me there are MANY!!!

This would appear to be yet another time where the parent application (IE: the FormGuide) is making life hell for me and confusing itself as the parent rather than the titleWindow of my Button. I have seen this behaviour before unfortunately. An all though I can see the source code of the FormGuide I can't edit it as is rebuilt each time I comile the Form....GRRRRRR!

Your answer is spot on so I shall reward you the points....you got me to where I needed to be....I'll have to do some more hacky stuff to make this work exactly how I want. I know how far I want the intent to be from the right border so for now I'm going to settle for :
override protected function createChildren():void {

    super.createChildren();
 

    var helpButton:Button = new Button();

    var xPos:int = (this.width - this.titleTextField.width) - 110;

    helpButton.x = this.titleTextField.width + xPos;

    helpButton.y = 5;

    helpButton.width = 100;

    helpButton.height = 20;

    helpButton.label = "Help";

    helpButton.useHandCursor = true;

    helpButton.visible = true;

    helpButton.includeInLayout = true;
 

    titleBar.addChild(helpButton);

}

Open in new window

0
 
LVL 5

Author Closing Comment

by:mah8473
ID: 31603612
Thanks for you help....spot on!!
0
 
LVL 37

Expert Comment

by:zzynx
ID: 24867303
Thanx 4 axxepting
... and good luck :o)
0

Featured Post

Zoho SalesIQ

Hassle-free live chat software re-imagined for business growth. 2 users, always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Automatic Notifications 16 331
Function to return shape (as3) 1 524
CheckBox inside itemRenderer issue 13 581
ActionScript 3 - Removing Duplicates in ArrayCollection 1 351
First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
Note: This is the third blog post in a series on email clearinghouses (https://www.xmatters.com/alert-management/blog-email-has-failed-us?utm_campaign=70138000000ydLoAAI&utm_source=exex&utm_medium=article&utm_content=blog-post).   We’ve been talki…
This demo shows you how to set up the containerized NetScaler CPX with NetScaler Management and Analytics System in a non-routable Mesos/Marathon environment for use with Micro-Services applications.
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now