Flex Examples » PopUpAnchor (Spark) http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Creating a drop down DataGrid control in Flex 4 http://blog.flexexamples.com/2010/03/09/creating-a-drop-down-datagrid-control-in-flex-4/ http://blog.flexexamples.com/2010/03/09/creating-a-drop-down-datagrid-control-in-flex-4/#comments Tue, 09 Mar 2010 18:36:43 +0000 Peter deHaan http://blog.flexexamples.com/?p=2582 The following example shows how you can create a drop down MX DataGrid control in Flex 4 using the Spark PopUpAnchor control in Flex 4.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/03/09/creating-a-drop-down-datagrid-control-in-flex-4/ --> <s:Application name="Spark_PopUpAnchor_DataGrid_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="20" /> </s:layout>   <s:Group> <s:Button label="Pop up DataGrid" click="popUpAnc.displayPopUp = !popUpAnc.displayPopUp;" /> <s:PopUpAnchor id="popUpAnc" [...]]]> The following example shows how you can create a drop down MX DataGrid control in Flex 4 using the Spark PopUpAnchor control in Flex 4.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/09/creating-a-drop-down-datagrid-control-in-flex-4/ -->
<s:Application name="Spark_PopUpAnchor_DataGrid_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" paddingTop="20" />
    </s:layout>
 
    <s:Group>
        <s:Button label="Pop up DataGrid"
                click="popUpAnc.displayPopUp = !popUpAnc.displayPopUp;" />
        <s:PopUpAnchor id="popUpAnc"
                popUpPosition="below"
                width="100%" height="100%">
            <mx:DataGrid>
                <mx:dataProvider>
                    <s:ArrayList>
                        <fx:Object c1="Row 1, Column 1" c2="Row 1, Column 2" />
                        <fx:Object c1="Row 2, Column 1" c2="Row 2, Column 2" /> 
                        <fx:Object c1="Row 3, Column 1" c2="Row 3, Column 2" /> 
                        <fx:Object c1="Row 4, Column 1" c2="Row 4, Column 2" /> 
                        <fx:Object c1="Row 5, Column 1" c2="Row 5, Column 2" /> 
                        <fx:Object c1="Row 6, Column 1" c2="Row 6, Column 2" /> 
                        <fx:Object c1="Row 7, Column 1" c2="Row 7, Column 2" /> 
                        <fx:Object c1="Row 8, Column 1" c2="Row 8, Column 2" /> 
                        <fx:Object c1="Row 9, Column 1" c2="Row 9, Column 2" /> 
                    </s:ArrayList>
                </mx:dataProvider>
            </mx:DataGrid>
        </s:PopUpAnchor>
    </s:Group>
 
</s:Application>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/03/09/creating-a-drop-down-datagrid-control-in-flex-4/feed/ 9 Creating a simple image gallery using the Spark PopUpAnchor control in Flex 4 http://blog.flexexamples.com/2010/02/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/ http://blog.flexexamples.com/2010/02/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/#comments Sun, 07 Feb 2010 16:05:03 +0000 Peter deHaan http://blog.flexexamples.com/?p=2413 The following example shows how you can create a simple image gallery using the Spark PopUpAnchor control in Flex 4 using the PopUpAnchor, BitmapImage, and MX Image controls.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/ --> <s:Application name="Spark_PopUpAnchor_gallery_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">   <s:HGroup horizontalCenter="0" top="20"> <!-- 1 --> <s:Group mouseDown="fullImg1.displayPopUp = true;"> <!-- embedded thumbnail [...]]]> The following example shows how you can create a simple image gallery using the Spark PopUpAnchor control in Flex 4 using the PopUpAnchor, BitmapImage, and MX Image controls.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/ -->
<s:Application name="Spark_PopUpAnchor_gallery_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <s:HGroup horizontalCenter="0" top="20">
        <!-- 1 -->
        <s:Group mouseDown="fullImg1.displayPopUp = true;">
            <!-- embedded thumbnail image -->
            <s:BitmapImage id="thumbImg1"
                    source="@Embed('assets/fx_appicon-tn.gif')" />
            <s:PopUpAnchor id="fullImg1"
                    popUpHeightMatchesAnchorHeight="false"
                    width="100%" height="100%">
                <s:popUp>
                    <!-- dynamically loaded full image -->
                    <mx:Image source="assets/fx_appicon.jpg"
                            width="300" height="300"
                            mouseUp="fullImg1.displayPopUp = false;" />
                </s:popUp>
            </s:PopUpAnchor>
        </s:Group>
 
        <!-- 2 -->
        <s:Group mouseDown="fullImg2.displayPopUp = true;">
            <s:BitmapImage id="thumbImg2"
                    source="@Embed('assets/ai_appicon-tn.gif')" />
            <s:PopUpAnchor id="fullImg2"
                    popUpHeightMatchesAnchorHeight="false"
                    width="100%" height="100%">
                <s:popUp>
                    <mx:Image source="assets/ai_appicon.jpg"
                            width="300" height="300"
                            mouseUp="fullImg2.displayPopUp = false;" />
                </s:popUp>
            </s:PopUpAnchor>
        </s:Group>
 
        <!-- 3 -->
        <s:Group mouseDown="fullImg3.displayPopUp = true;">
            <s:BitmapImage id="thumbImg3"
                           source="@Embed('assets/fl_player_appicon-tn.gif')" />
            <s:PopUpAnchor id="fullImg3"
                           popUpHeightMatchesAnchorHeight="false"
                           width="100%" height="100%">
                <s:popUp>
                    <mx:Image source="assets/fl_player_appicon.jpg"
                              width="300" height="300"
                              mouseUp="fullImg3.displayPopUp = false;" />
                </s:popUp>
            </s:PopUpAnchor>
        </s:Group>
    </s:HGroup>
 
</s:Application>

View source is enabled in the following example.

Or you could convert the PopUpAnchor code into a custom component, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/ -->
<s:Application name="Spark_PopUpAnchor_gallery_test"
        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:comps="comps.*">
 
    <s:HGroup horizontalCenter="0" top="20">
        <!-- 1 -->
        <comps:PopUpThumb id="thumb1"
                thumbnailImgClass="@Embed('assets/fx_appicon-tn.gif')"
                fullImgSrc="assets/fx_appicon.jpg" />
 
        <!-- 2 -->
        <comps:PopUpThumb id="thumb2"
                thumbnailImgClass="@Embed('assets/ai_appicon-tn.gif')"
                fullImgSrc="assets/ai_appicon.jpg" />
 
        <!-- 3 -->
        <comps:PopUpThumb id="thumb3"
                thumbnailImgClass="@Embed('assets/fl_player_appicon-tn.gif')"
                fullImgSrc="assets/fl_player_appicon.jpg" />
    </s:HGroup>
 
</s:Application>

And the custom PopUpThumb component, comps/PopUpThumb.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/ -->
<s:Group name="PopUpThumb"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"
        mouseDown="fullImg.displayPopUp = true;">
 
    <fx:Script>
        <![CDATA[
            [Bindable]
            public var thumbnailImgClass:Class;
 
            [Bindable]
            public var fullImgSrc:String;
        ]]>
    </fx:Script>
 
    <!-- embedded thumbnail image -->
    <s:BitmapImage id="thumbImg"
                   source="{thumbnailImgClass}" />
    <s:PopUpAnchor id="fullImg"
                   popUpHeightMatchesAnchorHeight="false"
                   width="100%" height="100%">
        <s:popUp>
            <!-- dynamically loaded full image -->
            <mx:Image source="{fullImgSrc}"
                      width="300" height="300"
                      mouseUp="fullImg.displayPopUp = false;" />
        </s:popUp>
    </s:PopUpAnchor>
 
</s:Group>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/02/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/feed/ 0 Setting the pop up position on a Spark PopUpAnchor control in Flex 4 http://blog.flexexamples.com/2010/01/20/setting-the-pop-up-position-on-a-spark-popupanchor-control-in-flex-4/ http://blog.flexexamples.com/2010/01/20/setting-the-pop-up-position-on-a-spark-popupanchor-control-in-flex-4/#comments Wed, 20 Jan 2010 15:22:11 +0000 Peter deHaan http://blog.flexexamples.com/?p=2300 The following example shows how you can set the pop up position on the Spark PopUpAnchor control in Flex 4 by setting the popUpPosition property to one of the static constants in the spark.components.PopUpPosition class.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/01/20/setting-the-pop-up-position-on-a-spark-popupanchor-control-in-flex-4/ --> <s:Application name="Spark_PopUpAnchor_popUpPosition_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:controlBarContent> <mx:Form> <mx:FormItem [...]]]> The following example shows how you can set the pop up position on the Spark PopUpAnchor control in Flex 4 by setting the popUpPosition property to one of the static constants in the spark.components.PopUpPosition class.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/20/setting-the-pop-up-position-on-a-spark-popupanchor-control-in-flex-4/ -->
<s:Application name="Spark_PopUpAnchor_popUpPosition_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="popUpPosition:">
                <s:ButtonBar id="ddl"
                        requireSelection="true"
                        click="ddl_changeHandler(event);"
                        >
                    <s:dataProvider>
                        <s:ArrayList>
                            <s:source>
                                <fx:String>{PopUpPosition.ABOVE}</fx:String>
                                <fx:String>{PopUpPosition.BELOW}</fx:String>
                                <fx:String>{PopUpPosition.CENTER}</fx:String>
                                <fx:String>{PopUpPosition.LEFT}</fx:String>
                                <fx:String>{PopUpPosition.RIGHT}</fx:String>
                                <fx:String>{PopUpPosition.TOP_LEFT}</fx:String>
                            </s:source>
                        </s:ArrayList>
                    </s:dataProvider>
                </s:ButtonBar>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.CloseEvent;
            import spark.components.PopUpPosition;
            import spark.events.IndexChangeEvent;
            import spark.events.TitleWindowBoundsEvent;
 
            protected function btn_clickHandler(evt:MouseEvent):void {
                popAnc.displayPopUp = true;
            }
 
            protected function ttlWndw_closeHandler(evt:CloseEvent):void {
                popAnc.displayPopUp = false;
            }
 
            protected function ttlWndw_windowMovingHandler(evt:TitleWindowBoundsEvent):void {
                evt.stopImmediatePropagation();
                evt.preventDefault();
            }
 
            protected function ddl_changeHandler(evt:Event):void {
                if (!popAnc.displayPopUp) {
                    popAnc.displayPopUp = true;
                }
            }
        ]]>
    </fx:Script>
 
    <s:Group horizontalCenter="0" verticalCenter="0">
        <s:Button id="btn"
                label="Open PopUp"
                chromeColor="haloBlue"
                click="btn_clickHandler(event);" />
        <s:PopUpAnchor id="popAnc"
                popUpPosition="{ddl.selectedItem}"
                width="{btn.width}" height="{btn.height}">
            <s:TitleWindow id="ttlWndw"
                    title="{ddl.selectedItem}"
                    backgroundAlpha="0.3"
                    backgroundColor="black"
                    close="ttlWndw_closeHandler(event);"
                    windowMoving="ttlWndw_windowMovingHandler(event);">
                <mx:Form>
                    <mx:FormItem label="Username:">
                        <s:TextInput />
                    </mx:FormItem>
                    <mx:FormItem label="Password:">
                        <s:TextInput displayAsPassword="true" />
                    </mx:FormItem>
                </mx:Form>
            </s:TitleWindow>
        </s:PopUpAnchor>
    </s:Group>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/01/20/setting-the-pop-up-position-on-a-spark-popupanchor-control-in-flex-4/feed/ 4