Flex Examples
Creating a pop up TitleWindow using the PopUpButton control in Flex
The following example shows how you can create a pop up TitleWindow container using the Flex PopUpButton control.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/13/creating-a-pop-up-titlewindow-using-the-popupbutton-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
TitleWindow {
roundedBottomCorners: false;
borderColor: haloSilver;
backgroundColor: haloSilver;
borderAlpha: 0.8;
backgroundAlpha: 0.8;
dropShadowEnabled: false;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridColumn;
private function checkBox_change(evt:Event):void {
var ch:CheckBox = evt.currentTarget as CheckBox;
var idx:int = int(ch.data);
var obj:Object = arrColl.getItemAt(idx);
obj.sel = ch.selected;
arrColl.disableAutoUpdate();
arrColl.setItemAt(obj, idx);
}
private function selectAll(evt:Event):void {
var idx:int;
var item:Object;
for (idx=0; idx<arrColl.length; idx++) {
item = arrColl.getItemAt(idx);
item.sel = CheckBox(evt.currentTarget).selected;
}
arrColl.refresh();
}
private function sel_labelFunc(item:Object, col:DataGridColumn):String {
var bool:Boolean = item.hasOwnProperty("sel") &&
(item.sel == "true" || item.sel == true);
return bool.toString();
}
]]>
</mx:Script>
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array id="arr">
<mx:Object label="Button" />
<mx:Object label="ButtonBar" />
<mx:Object label="CheckBox" />
<mx:Object label="ColorPicker" sel="true" />
<mx:Object label="ComboBox" sel="true" />
<mx:Object label="DataGrid" sel="true" />
<mx:Object label="DateChooser" />
<mx:Object label="DateField" sel="true" />
<mx:Object label="HorizontalList" />
<mx:Object label="HRule" />
<mx:Object label="HSlider" />
<mx:Object label="Image" />
<mx:Object label="Label" />
<mx:Object label="LinkBar" />
<mx:Object label="LinkButton" />
<mx:Object label="List" sel="true" />
<mx:Object label="Menu" />
<mx:Object label="MenuBar" />
<mx:Object label="NumericStepper" sel="true" />
<mx:Object label="ProgressBar" />
<mx:Object label="RadioButton" />
<mx:Object label="RadioButtonGroup" />
<mx:Object label="RichTextEditor" sel="true" />
<mx:Object label="Spacer" />
<mx:Object label="SWFLoader" />
<mx:Object label="TabBar" />
<mx:Object label="Text" />
<mx:Object label="TextArea" />
<mx:Object label="TextInput" />
<mx:Object label="TileList" />
<mx:Object label="Tree" sel="true" />
<mx:Object label="VideoDisplay" />
<mx:Object label="VRule" />
<mx:Object label="VScrollBar" />
<mx:Object label="VSlider" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:ApplicationControlBar dock="true">
<mx:PopUpButton id="popUpButton"
label="Please select some components"
openAlways="true"
close="arrColl.refresh();">
<mx:popUp>
<mx:TitleWindow id="titleWin"
height="200"
showCloseButton="true"
verticalScrollPolicy="on"
horizontalScrollPolicy="off"
close="popUpButton.close();">
<mx:ToolBar width="320">
<mx:Repeater id="myRep"
dataProvider="{arrColl}">
<mx:CheckBox data="{myRep.currentIndex}"
label="{myRep.currentItem.label}"
selected="{myRep.currentItem.sel}"
change="checkBox_change(event);"
width="100" />
</mx:Repeater>
</mx:ToolBar>
<mx:ControlBar>
<mx:CheckBox label="Select All"
labelPlacement="left"
change="selectAll(event);" />
</mx:ControlBar>
</mx:TitleWindow>
</mx:popUp>
</mx:PopUpButton>
</mx:ApplicationControlBar>
<mx:DataGrid dataProvider="{arrColl}">
<mx:columns>
<mx:DataGridColumn dataField="label" />
<mx:DataGridColumn dataField="sel"
labelFunction="sel_labelFunc" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
-
Add Widgets (Content Sidebar)
This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.
17 Responses to Creating a pop up TitleWindow using the PopUpButton control in Flex
Leave a Reply Cancel reply
-
Categories
- Accordion
- AccordionHeader
- ActionScript
- AddChild
- AdvancedDataGrid
- Alert
- alpha
- Animate
- AnimateProperties
- Application
- Application (Spark)
- ArrayCollection
- BarChart
- baseColor
- beta
- beta1
- beta2
- Bitmap
- Bitmap/BitmapData
- BitmapData
- BitmapFill
- BitmapFill (Spark)
- BitmapGraphic
- BitmapImage
- BitmapImage (Spark)
- BitmapImageResizeMode
- Border (Spark)
- BorderContainer (Spark)
- Box
- BuildInfo
- Button
- Button (Spark)
- ButtonBar
- ButtonBar (Spark)
- ByteArray
- Camera
- Charting
- CheckBox
- CheckBox (Spark)
- ClassFactory
- CollectionEvent
- Color
- ColorPicker
- ColorUtil
- ComboBox
- ComboBoxArrowSkin
- Compiler
- Component
- Component (Spark)
- Configuration
- Container
- ContextMenu
- ContextMenuEvent
- ContextMenuItem
- CSSCondition
- CSSSelector
- CSSStyleDeclaration
- CurrencyFormatter
- CursorManager
- Data Binding
- DataGrid
- DataGrid (Spark)
- DataGridColumn
- Date
- DateBase
- DateChooser
- DateField
- DateFormatter
- Debugging
- DefaultComplexItemRenderer
- DefaultTileListEffect
- DropDownList
- DropDownList (Spark)
- DropDownListButtonSkin
- DropDownListSkin
- DropShadowFilter
- E4X
- Effects
- Ellipse
- EmailValidator
- Embed
- Event
- Fade
- FileFilter
- FileReference
- fill
- Filters
- Flash
- Flash Integration
- FlashVars
- Flex 3 SDK
- Flex Builder
- Flex Builder 3
- Flex SDK
- Flex4
- FLVPlayback
- FocusManager
- FontLookup
- Fonts
- Form
- Form (Spark)
- FormHeading (Spark)
- FormItem
- FormItem (Spark)
- Forms
- FTETextField (Spark)
- FullScreen
- FullScreenEvent
- FxAnimateColor
- FxButtonBar
- FxCheckBox
- FXG
- FxHScrollBar
- FxHSlider
- FxList
- FxNumericStepper
- FxRadioButton
- FxRotate3D
- FxScroller
- FxTextArea
- FxTextInput
- FxToggleButton
- FxVScrollBar
- FxVSlider
- getStyleDeclaration()
- GradientEntry
- Graphic (Spark)
- HBox
- HDividedBox
- HGroup (Spark)
- HorizontalLayout
- HorizontalList
- HSBColor (Spark)
- HScrollBar (Spark)
- HSlider
- HSlider (Spark)
- HTML template
- ID3Info
- Image
- Image (Spark)
- ImageSnapshot
- itemRenderer
- JointStyle
- Label
- Label (Spark)
- Legend
- LegendItem
- LigatureLevel
- Line
- LinearGradientStroke
- LineScaleMode
- LinkBar
- LinkButton
- List
- List (Spark)
- Menu
- MenuBar
- Metadata
- MetadataEvent
- Model
- Mouse
- MouseCursor
- MouseEvent
- Move
- Namespace
- NavigatorContent (Spark)
- needsSWF
- NetConnection
- NetStream
- Nightly Builds
- NumberBaseRoundType
- NumberFormatter
- NumberValidator
- NumericCompare
- NumericStepper
- NumericStepper (Spark)
- ObjectProxy
- ObjectUtil
- paddingLeft
- paddingRight
- Panel
- Panel (Spark)
- Parallel
- Path
- PieChart
- PieSeries
- PieSeriesItem
- PopUpAnchor (Spark)
- PopUpButton
- PopUpManager
- ProgrammaticSkin
- ProgressBar
- PropertyChangeEvent
- QName
- RadialGradient
- RadioButton
- RadioButton (Spark)
- RadioButtonGroup
- RadioButtonGroup (Spark)
- Rect
- RegExp
- Regular Expressions
- Repeater
- RichEditableText
- RichText
- RichText (Spark)
- RichTextEditor
- Rotate
- Rotate3D (Spark)
- Scroller (Spark)
- Sequence
- setStyle()
- SimpleText
- SimpleText (Spark)
- skinClass
- Slider
- SliderEvent
- SolidColor
- SolidColorStroke
- Sort
- SortField
- Sound
- SoundEffect
- Spinner (Spark)
- SpriteVisualElement (Spark)
- StageDisplayState
- States
- StringUtil
- StringValidator
- StyleManager
- Styles
- SWFLoader
- SWFObject
- System
- SystemManager
- TabBar
- TabBar (Spark)
- TabNavigator
- TabStopFormat
- Text
- Text Layout Framework (TLF)
- TextArea
- TextArea (Spark)
- TextBox
- TextConverter
- TextEvent
- TextFlow
- TextFlowUtil
- TextFormat
- TextGraphic
- TextInput
- TextInput (Spark)
- TextLayoutFormat
- TextView
- Themes
- TileLayout
- TileList
- TileOrientation
- Timer
- TitleWindow
- TitleWindow (Spark)
- TLF
- ToggleButton (Spark)
- ToggleButtonBar
- ToolTip
- Transition
- Tree
- TruncationOptions
- UIComponent
- UIFTETextField
- Updater
- URLLoader
- URLRequest
- URLUtil
- URLVariables
- ValidationResultEvent
- Validator
- Validators
- VBox
- VDividedBox
- Vector
- VerticalLayout
- VerticalLayout (Spark)
- VGroup (Spark)
- Video
- VideoDisplay
- VideoElement
- VideoElement (Spark)
- VideoEvent
- VideoPlayer (Spark)
- VideoPlayerScrubBar
- ViewStack
- VScrollBar (Spark)
- VSlider
- VSlider (Spark)
- XML
- XMLList
- XMLListCollection
- ZipCodeValidator
- ZipCodeValidatorDomainType
- Zoom
-
Articles
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
-
Meta


hi…nice blog:)
This is another flex blog i found interesting…
http://dougmccune.com/blog/
Hi, i have a problem with this code. When I change a state in my application, the popupbutton stops working, nothing happens when clicking on the button.
Icep,
Interesting. Can you please file a bug at http://bugs.adobe.com/flex/ and include a simple test case?
Thanks,
Peter
Icep,
did you file a bug? I have the “same” problem, but it happens when I resize a VDividedBox that it is in.
I’m having the same problem – doesn’t work in a viewstack. Trying to find a workaround.
iam having a same problem does not work in accordion
hi shwetha u have posted a nice blog
I have a form designed using Flex. The form does not fit the screen area and hence I am having scroll bars in it. When we click on some of the controls in the form, we open popups. But when the popup is opened, if we scroll the form using the form scroll bar then the popup is not getting scrolled. I want the popup to be scrolled along with the form elements. Please let me know how this can be done.
Thanks
Abhilash
Is it possible to make the popped out TitleWindow modal ?
Ian,
The easiest way i could think of is to override the close function of PopUpButton and use a boolean flag to actually close at your beck and call vis-a-vis when u click on the close button instead of focusOut.
override public function close():void {
if(flag == true){ super.close();}
}
When you first load, and hit the popupbutton and check off Select All, it closes the popup…then when you expand it again, it works fine.
Seems like the first time Select All is checked, it doesn’t work and just closes the popup.
Any thoughts?
Thanks!
Daniel , focusEnabled=false will solve your problem
To everyone who is having trouble with the popup button not working after changing states: Download the 3.2 (or greater) SDK or update for flex builder and your problem will be fixed.
You can grab the FlexBuilder updater here:
http://www.adobe.com/support/flex/downloads_updaters.html#flex3
Or just the SDK here:
http://opensource.adobe.com/wiki/display/flexsdk/Downloads
right now we can able draga and drop this pop up how can we stop this drag and drip feature for the multimple select code
Has anyone figured out a method for making the popupbutton titlewindow modal?
Matthew, The easiest way i could think of is to override the close function of PopUpButton and use a boolean flag to actually close at your beck and call vis-a-vis when u click on the close button instead of focusOut.
override public function close():void {
if(flag == true){ super.close();}
}
Peter D, Where is the delete comment button?