Flex 3 Popup resize

Hello Everyone ,
I have a flex app that uses a popup. When I first add the popup to the stage , it is missized , has scrollbars and is offcenter. Then a split second later it resizes , centering the content and removing the scrollbars. Is there anyway to avoid this abrupt behavior ?
Sincerely ,
Ubuntu

That would make sense ! I reused a component from another part of the application. I
may have to "hard size" it.

Similar Messages

Modal popup resize problem

First time poster here and new to Flex --
I have an application that pops up a TitleWindow which
contains a form. The TitleWindow is modal .. When the browser is
resized though, I dont get any scrollbars on the popup window.
scrollbars appear on the parent application window, but since the
popup is modal , I cant use them.
In addition, if I do start off with a smaller browser size (
say 800 X 600 ) , I can scroll in the app., get to the button to
make the popup appear , but the popup is cut off at the top and
bottom and the scrollbar that appears on the popup is not enough
for me to scroll to the top and bottom.
Has anyone had this problem ? Am I missing something very
elementary ? I can post code sample if needed. Any help would be
greatly appreciated.

Hi,
Even I'm facing the same problem. You have posted this in the year 2007. Did you find a solution after that ?... If yes, then please share the solution.

ADF - POPUP resize issue

Hi,
I have a POP-UP with few controls like toolbar and trees, Resize option is enabled in the popup.
While resizing the controls are not resized to fit the layout.
Please let me know the ADF functionally to resize the controls in POP-UP
Thanks,
Prabhu.

John,
I'm using <af:popup> only, and the ADF version is 11.1.1.59.
Please fine my code sample.
<af:popup ...>
<af:dialog resize="on" ...>
<af:panelStretchLayout id="ms_psl1" inlineStyle="height:400px; width:600px;">
<f:facet name="center">
<af:panelGroupLayout>
<af:inputText contentStyle="width:100px; height:14px"/>
<af:tree var="node" inlineStyle="width:200px; height:100px;"/>
</af:panelGroupLayout>
</f:facet>
</af:panelStretchLayout>
</af:dialog>
</af:popup>
Is it posible to resize the controls when popup gets resized?
I tried using "%" in the width, but height is not taking "%".
Please let me know the solution.
Thanks,
Prabhu.

Show flex popup in a new Tab

Hi All ,
   I have a flex application, in that if i Click on "editChart" LinkButton , it shows a Popup(TitleWindow) , But
my requirement is , that Popup should be open in a new Tab of the Browser, and my application and popup both should work fine.
Plzzzz reply..
Thanks in Advance..

It may help u to create pop up in a new window:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="openTitleWindow(event)" >
    <mx:Script>
        <![CDATA[
            import mx.events.CloseEvent;
            import mx.controls.Label;
            import mx.events.FlexEvent;
            import mx.containers.TitleWindow;
            import mx.managers.PopUpManager;
            // method to open the TitleWindow on creationComplete
            private function openTitleWindow(evt:FlexEvent):void {
                // create and configure the TitleWindow
                var tw:TitleWindow = new TitleWindow();
                tw.title = "Title Goes Here";
                tw.showCloseButton = true;
                tw.addEventListener(Event.CLOSE, closeTitleWindow);
                // create and configure a Label
                var label:Label = new Label();
                label.text = "This is a very simple popup window";
                // add the Label to the TitleWindow
                tw.addChild(label);
                // open the TitleWindow as a modal popup window
                PopUpManager.addPopUp(tw, this, true);
            // method to close the TitleWindow targeted by a close event
            private function closeTitleWindow(evt:CloseEvent):void {
                PopUpManager.removePopUp(TitleWindow(evt.target));
        ]]>
    </mx:Script>
</mx:Application>
Regards:
Amy Flair

Help with Flex based popup windows and data population.

Hello, I need a bit of help with Flex popups. I have a flex
application that uses a popup window when you click on a button and
displays information about the image above the button the user
clicked. I have about 4 images and I need to be able to display
information about each of them through the popup window when users
click on the buttons below the image.
At this time, I am trying to do this from somewhat of a
"static" point of view because I do not believe my hosting company
supports Flex Data services. You will find my code below.
First File.
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute" width="850" height="750"
cornerRadius="10" borderColor="#000000"
backgroundGradientColors="[#1b3434, #000000]">

<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
[Bindable]
private var win:IMSAI;
private function init():void{}
private function createPopup():void{
win=IMSAI(PopUpManager.createPopUp(this,IMSAI,true));
win.title = 'IMSAI.Net';
win.x = -500;
win.y = 0;
customMove.end();
customMove.play();
]]>
</mx:Script>
<mx:Style>
TitleWindow {
borderStyle:solid;
borderThickness:2;
</mx:Style>
<mx:Parallel id="customMove" target="{win}">
<mx:Move duration="2000" xTo="{(stage.width - win.width)
/ 2}" yTo="{(stage.height - win.height) / 2}" />
<mx:WipeDown duration="2000" />
</mx:Parallel>
This is the code to trigger the popup when a user clicks on
the button. The code below is the code for the popup.
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="vertical" creationComplete="init()"
close="PopUpManager.removePopUp(this)"
showCloseButton="true" alpha=".8"
headerColors="[#000000,#1F3F62]" color="#FFFFFF"
minHeight="200" minWidth="300"
backgroundColor="#000000" title="IMSAI.net" width="520"
height="394" verticalAlign="middle" horizontalAlign="center">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
private function init():void{}
]]>
</mx:Script>
<mx:Canvas width="470" height="338">
<mx:Image x="10" y="10" width="140" height="103">
<mx:source>file:///C|/ColdFusion8/wwwroot/IMSAI/Web-App/Site_Images/IMSAI
Final Movie.swf</mx:source>
</mx:Image>
<mx:Text x="10" y="121" text="Description:" width="75"
height="25" fontWeight="bold" color="#ff0000"/>
<mx:Text x="158" y="10" text="Client:" width="52"
height="28" fontWeight="bold" color="#ff0000"/>
<mx:Text x="196" y="10" text="IMSAI Microcomputers
& Fischer-Freitas Company" width="252" height="39"/>
<mx:Text x="159" y="46" text="Industry:"
fontWeight="bold" color="#ff0000"/>
<mx:Text x="216" y="46" text="Computer &
Microcontroller Manufacturing." width="232" height="35"/>
<mx:Text x="83" y="121" text="IMSAI.net is the front-end
web application for IMSAI Computer " width="355"/>
<mx:Text x="10" y="136" text="manufacturing, customer
support, and order processing. Driven by a Microsoft database
back-end, this application includes rich flash forms, site search
capabilities, and flash content. Currently under phase II of a
three phase development plan, the e-commerce logic and processing
capabilities are under development. Once finished, this application
will be able to process orders provide customers with instant order
confirmation numbers, shipment dates, and payment processing."
width="428"/>
<mx:Text x="10" y="244" text="Technologies:"
fontWeight="bold" color="#ff0000"/>
<mx:Image x="100" y="244" width="50" height="50">
<mx:source>file:///C|/ColdFusion8/wwwroot/Sapphire
Development/content/cf8icon.jpg</mx:source>
</mx:Image>
<mx:Image x="244" y="244" width="50" height="50">
<mx:source>file:///C|/ColdFusion8/wwwroot/Sapphire
Development/content/flashlogo.jpg</mx:source>
</mx:Image>
<mx:Text x="53" y="290" text="Coldfusion 8 Enterprise"
height="30"/>
<mx:Text x="230" y="290" text="Adobe Flash 8"/>
</mx:Canvas>
What I want to do is either be able to create a popup file
for each button and photo, or find a way to pass a name like a
button ID that corresponds to a XML data structure and then
provides the appropriate data for the photo. I have tried altering
the first page of code with the "public" declaration to allow for a
second popup file for each button and image, but the IDE won't
allow me to do such because it creates errors stating I can only
have one public declaration of the kind and function above per
application. Help resolving this would be greatly appreciated.
Thank you.

I have an idea of what I want to do. I am just having
difficulty articulating how to go about such. I know I want to find
a way so that if a user clicks on button 1, button 1 will send some
kind of variable. For example, a user clicks Btn1 under a picture.
Btn1 sends some kind of variable or binding to a data structure
which returns the picture's description, price, etc. and calls the
popup to display that data in a form like manner. Then the user
click Btn2 which does the same thing. The only purpose of the popup
is to display the data.
Do I create a data structure with a related name to say a
button name so when the btn is clicked, the a variable title btn1
will prepend itself to the data structure like
{btn1.imagename}
{btn1.price}
{btn1.description}.
I want each btn to call a different set of data about each
picture because right now, the code I have is allowing me multiple
buttons, but is just displays the popup. Is there a way to create a
separate popup window for each button? Thats seems as though it
would be easier. Thank you for your help.

Thumbnail popup will not resize - did with 3.7.1

Hi - found a problem with ADDT includes v1.0 - when the site includes were updated from 3.7.1 to ADDT 1.0 and uploaded the pop-up resize feature did not work. Image stayed larger than window. When the site was loaded back on to DW8 and includes 'updated' to 3.7.1 and only the includes uploaded - the popup resize feature on the site was working again. This is a nice feature, no? Can we get it working?
Thanks

Hello Jon,
What browser version are you using? I tried your approach on a Windows machine with Firefox 2 and could not reproduce the problem.
Do you have the "fit to box" option checked?
Ionut

Is there a way to get a resized element height by ILayoutElement??

Hi all,
I am currently working on a means of layout out dynamic text and want my layout to check the RichText component to determine if it has enough space horizontally to fit in the available real estate. For example, if the available browser width is 300px, and the RichText is 200px, everything is fine and the component can be placed without modification.
However, if the browser is 300px and the component is 400px, I want to resize the component to fit into the available space and trigger the RichText to present its content in a multi-line format. I'm really close to a solution, but Ive been unable to find out if there is any means to get the height that the component will be once the width resize is complete.
The crux of this approach relies upon using ILayoutElement within the layout and resizing as follows:
element.setLayoutBoundsSize(target.width-HorizontalGap, NaN)
Now I know that setting the height to NaN causes this method to set the elements height to its preferred height. I've checked the other available methods such as element.getLayoutBoundsHeight(), element.getPreferredBoundsHeight(), element.getMaxboundsHeight() but these all appear to return the height as if the resize for multi-line didn't exist.
My question is that I would like to find a way to figure out what the new height is GOING to be once the width resize occurs.
Any thoughts? Thanks in advance!
PS. While stepping through, I noticed there is a protected $height that appears to have the correct height, but there doesn't seem to be a way to access it. Do I need to subclass ILayoutElement to make this value available or is there something Im not seeing.
Cheers!

ok so as it turns out, the $height in the component appears to only be the height of a single line. What I really want is the complete height of the component when I allow Flex to resize. For example:
I have 200px of available space and the RichText has 300px of text. I want to know the height of the entire component once Flex has resized it to multi-line so that I can tell how far down my next line needs to be. To accomplish this, I'm doing the following:
if(element.getLayoutBoundsWidth() > target.width)
element.setLayoutBoundsSize(target.width, NaN); // I'm not setting the height of the component because Flex is doing that based upon the width
The problem is that even after calling setLayoutBoundsSize(), when I call element.getLayoutBoundsHeight() (or element.getLayoutBoundsHeight(true) ), it's still giving me the height of a single line of text and not the total height with multi-line. I need a way to tell the entire height of the component after Flex has resized for multi-line.
Thanks so much and I appreciate any help I can get.

Flex and HTML display shift in Safari in Mac OS

When a popup is displayed in Flex app, the Flex display gets shifted down in Safari in Mac OS alone. However, even if the display is shifted down, the controls seem to be in the correct position. For example, for clicking a button, the cursor has to be some pixels above the shown display. Not only the Flex display shifts down. HTML Links display also shifts down along with Flex and Links are clickable some pixels above the display.
The problem happens only while triggering the Flex popup display in long flex screen. On a Flex screen within the browser height, with the same actionscript and Javacsript code, there is no problem.
This works fine in all other browsers including Safari in windows.
Has anyone faced this scenario? Any help will be highly appreciated.
For the popup to be displayed in center of viewable area, the following code is used.
callLater(SMBObjectUtil.changePosition,args);
In SMBObjectUtil.as file,
public static function changePosition(x:int, y:int, obj:UIComponent):void {
     var yPos:int = ExternalInterface.call("findScrollTop");      var winHeight:int = ExternalInterface.call("getWindowHeight");
     var appHeight:int = Application.application.height;
     var objectWidth:int = obj.width;
     var objectHeight:int = obj.height;
     var calculatedX:int = 0;
     var calculatedY:int = 0;
     if(Application.application.width>obj.width) {
          try {               calculatedX = (Application.application.width - obj.width)/2;
               if(yPos <= 0){                    calculatedY = ((winHeight-objectHeight)/2-100)>0?(winHeight-objectHeight)/2-100:50;
else if(yPos<=(appHeight-winHeight)){                    calculatedY = (((winHeight-objectHeight)/2)+yPos-100)>0?((winHeight-objectHeight)/2)+yPos-100:50;
else if(yPos>(appHeight-winHeight)){                    calculatedY = appHeight - objectHeight - (winHeight-objectHeight)/2;
          catch(e:Error){          }
     }else {
obj.x = calculatedX;
obj.y = calculatedY;
Javascript functions used are:
function findScrollTop()
var ScrollTop = document.body.scrollTop;
if (ScrollTop == 0)
   if (window.pageYOffset)
    ScrollTop = window.pageYOffset;
   else
    ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
return ScrollTop;
function getWindowHeight()
var y = 0;
if (self.innerHeight) {
   y = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
   y = document.documentElement.clientHeight;
} else if (document.body) {
   y = document.body.clientHeight;
return y;

Found a fix for this. CallLater() was giving the problem in Safari. Once I removed CallLater and directly called my function, the problem was resolved.

Flex Spark Datagrid - Scalable (font size) with No scroll Bars

I was wondering what would be the most optimized way to scale (increase/decrease) the fonts size in a Spark DataGrid with NO Scroller, so as to make it when the User Resizes the DataGrid, the Fonts inside the Grid would increase/decrease.
Is there a way to listen for the size change of the DataGrid?
I would probably need to change the font size to increase/decrease as the event gets fired on Datagrid Resize.
Any suggestions?

I've pasted as much code as I can legally can. What i would like to achieve is that when the the window resizes, the Content & the DataGrid Scales. I am also aware of scalemode on the VBox, though it scale oddly with width more than height (this is internal).
Else, I tried:
protected function vgroup1_addedToStageHandler(event:Event):void
            //stage.scaleMode = StageScaleMode.EXACT_FIT;
            stage.scaleMode = StageScaleMode.SHOW_ALL;
            stage.align = StageAlign.TOP_LEFT;
            scaleX = .5;
            scaleY = .5;
            /* if(stage.stageWidth != (event.currentTarget as VGroup).width || stage.stageHeight != (event.currentTarget as VGroup).height)
                var scaling:Number = 1;
                if(width>height)
                    scaling = stage.stageWidth / (event.currentTarget as VGroup).width;
                else
                    scaling = stage.stageHeight / (event.currentTarget as VGroup).height;
                scaleX = scaleY = scaling;
== THIS IS All I can Post ==
<?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"
    xmlns:components="components.*"
     viewSourceURL="srcview/index.html">
    <fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;
        import mx.events.ResizeEvent;
        import mx.rpc.events.ResultEvent;
        import mx.rpc.xml.SimpleXMLDecoder;
        import mx.utils.ArrayUtil;
        import mx.utils.ObjectUtil;
        import spark.components.ResizeMode;
        import spark.effects.Resize;
        // Skin Colors
        private const ALTERNATING_GRID_COLOR:Array = [ 0xF5F5F0 , 0xE7E4E9 ];
        private const ROLL_OVER_COLOR:int = 0x6D9960;
        private const SELECTION_COLOR:int = 0x668F59;
        private const TEXT_FONT_SIZE:int = 11;
        private const TEXT_COLOR:int = 0x080808;
        private const SUMMARY_TEXT_COLOR:int = 0xFAAFFF;
        // First column width
        private var collectiveFirstColumnWidth:int = 160;
        private var collectiveValuesColumnWidth:int = 50;
        // XML data
        [Bindable] private var portfolioSummary1:XMLList;
        [Bindable] private var reconstructedAC:ArrayCollection;
        private function convertXmlToArrayCollection(file:String):ArrayCollection {
            var xml:XMLDocument = new XMLDocument(file);
            var decoder:SimpleXMLDecoder = new SimpleXMLDecoder();
            var data:Object = decoder.decodeXML(xml);
            var array:Array = ArrayUtil.toArray(data);
            return new ArrayCollection(array);
        private function convertToAC():void {
            var ac1:ArrayCollection = convertXmlToArrayCollection(psr1)
            trace(ObjectUtil.toString(ac1));
            //reStructureAC(ac1);
        private function restructureXMLIntoHierarchicalAC():void {
        private function addProperty(obj:Object, attribute:String, value:String):Object {
            var o:Object = obj;
            o[attribute] = value;
            return o;
        protected function httpservice1_resultHandler(event:ResultEvent):void
            portfolioSummary1 = event.result.Analytics.Side.Analytic as XMLList;
            trace('-----\nSide: Sell' + ObjectUtil.toString(event.result.Analytics.Side.(@name=='Sell')));
            trace('-----\nSide: Buy: Analytic Values : \n' + ObjectUtil.toString(event.result.Analytics.Side.(@name=='Buy').Analytic.@value));
            //dg.dataProvider = new XMLListCollection(portfolioSummary1);
            //dg.requestedRowCount = dg.dataProviderLength;
        protected function vgroup1_addedToStageHandler(event:Event):void
            //stage.scaleMode = StageScaleMode.EXACT_FIT;
            stage.scaleMode = StageScaleMode.SHOW_ALL;
            stage.align = StageAlign.TOP_LEFT;
            scaleX = .5;
            scaleY = .5;
            /* if(stage.stageWidth != (event.currentTarget as VGroup).width || stage.stageHeight != (event.currentTarget as VGroup).height)
                var scaling:Number = 1;
                if(width>height)
                    scaling = stage.stageWidth / (event.currentTarget as VGroup).width;
                else
                    scaling = stage.stageHeight / (event.currentTarget as VGroup).height;
                scaleX = scaleY = scaling;
        protected function vgroup1_resizeHandler(event:ResizeEvent):void
            (event.currentTarget as VGroup).resizeMode = ResizeMode.SCALE;
    ]]>
    </fx:Script>
    <fx:Declarations>
        <fx:XML id="psr1" source="data/PortfolioSummaryResponse1.xml" />
        <fx:XML id="psr2" source="data/PortfolioSummaryResponse2.xml" />
        <fx:XML id="psr3" source="data/PortfolioSummaryResponse3.xml" />
        <s:XMLListCollection id="headXMLListCol"
            source="{psr1.children()}" />
        <s:HTTPService id="portfolio_HS" result="httpservice1_resultHandler(event)"
            resultFormat="e4x" url="data/PortfolioSummaryResponse1.xml" />
    </fx:Declarations>
    <s:VGroup id="vbox" width="100%" height="100%" top="0" left="0" bottom="0" gap="0" addedToStage="vgroup1_addedToStageHandler(event)">
        
        <components:ExpandableDataGrid5 id="dg"
            color="{TEXT_COLOR}"
            rollOverColor="{ROLL_OVER_COLOR}"
            alternatingRowColors="{ALTERNATING_GRID_COLOR}"
            selectionColor="{SELECTION_COLOR}"
            skinClass="skins.ResizableDataGridSkin"
            >
            <components:columns>
                <s:ArrayList>
                    <s:GridColumn id="field1" dataField="dataField1" headerText="Portfolio Summary"
                        itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
                        headerRenderer="itemRenderers.HeaderGridItemRenderer"
                        />
                    <s:GridColumn id="field2" dataField="dataField2" headerText="Buy"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
                        />
                    <s:GridColumn id="field3" dataField="dataField3" headerText="Sell"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
                        />
                    <s:GridColumn id="field4" dataField="dataField4" headerText="Total"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
                        />
                </s:ArrayList>
            </components:columns>
            <components:dataProvider>
                <s:ArrayCollection>
                    <fx:Object dataField1="data1" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data2" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data3" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data4" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data5" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data6" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data7" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data8" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data9" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data10" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data11" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data12" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data13" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data14" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data15" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                </s:ArrayCollection>
            </components:dataProvider>
        </components:ExpandableDataGrid5>
        
        <components:SummaryRow >
            <s:Label text="Summary Totals" fontWeight="bold" color="{SUMMARY_TEXT_COLOR}"/>
            <s:Spacer width="100%" />
            <s:ButtonBar click="convertToAC()">
                <mx:ArrayCollection>
                    <fx:String>Convert to AC</fx:String>
                    <fx:String>CPS</fx:String>
                </mx:ArrayCollection>
            </s:ButtonBar>
            <s:ButtonBar click="restructureXMLIntoHierarchicalAC()">
                <mx:ArrayCollection>
                    <fx:String>Parse XML</fx:String>
                    <fx:String>15% POV</fx:String>
                </mx:ArrayCollection>
            </s:ButtonBar>
        </components:SummaryRow>
        
        <components:ExpandableDataGrid5 id="dg2"
            color="{TEXT_COLOR}"
            rollOverColor="{ROLL_OVER_COLOR}"
            selectionColor="{SELECTION_COLOR}"
            alternatingRowColors="{ALTERNATING_GRID_COLOR}"
            skinClass="skins.HeadlessDataGridSkin"
            >
            <components:columns>
                <s:ArrayList>
                    <s:GridColumn dataField="dataField1"
                        itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField2"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField3"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField4"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                </s:ArrayList>
            </components:columns>
            <s:ArrayList>
                <fx:Object dataField1="data16" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                <fx:Object dataField1="data17" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
            </s:ArrayList>
        </components:ExpandableDataGrid5>
        
        <components:SummaryRow>
            <s:Label text="Summary Totals - Values" width="100%" fontWeight="bold" color="{SUMMARY_TEXT_COLOR}"/>
        </components:SummaryRow>
        
        <components:ExpandableDataGrid5 id="dg3"
            color="{TEXT_COLOR}"
            rollOverColor="{ROLL_OVER_COLOR}"
            selectionColor="{SELECTION_COLOR}"
            alternatingRowColors="{ALTERNATING_GRID_COLOR}"
            skinClass="skins.HeadlessDataGridSkin"
            >
            <components:columns>
                <s:ArrayList>
                    <s:GridColumn dataField="dataField1"
                        itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField2"
                        itemRenderer="itemRenderers.ToolTipItemRenderer"
                        />
                    <s:GridColumn dataField="dataField3"
                        itemRenderer="itemRenderers.ToolTipItemRenderer"
                        />
                    <s:GridColumn dataField="dataField4"
                        itemRenderer="itemRenderers.ToolTipItemRenderer"
                        />
                </s:ArrayList>
            </components:columns>
            <s:ArrayList>
                <fx:Object dataField1="data18" dataField2="data2" dataField3="data3" dataField4="data16"></fx:Object>
                <fx:Object dataField1="data19" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
            </s:ArrayList>
        </components:ExpandableDataGrid5>
        
        <components:SummaryRow>
            <s:Label text="Percent of Tops" color="{SUMMARY_TEXT_COLOR}" width="100%" fontWeight="bold"/>
        </components:SummaryRow>
        
        <components:ExpandableDataGrid5 id="dg4"
            color="{TEXT_COLOR}"
            rollOverColor="{ROLL_OVER_COLOR}"
            selectionColor="{SELECTION_COLOR}"
            alternatingRowColors="{ALTERNATING_GRID_COLOR}"
            skinClass="skins.HeadlessDataGridSkin"
            >
            <components:columns>
                <s:ArrayList>
                    <s:GridColumn dataField="dataField1"
                        itemRenderer="itemRenderers.LeftAlignGridItemRenderer" />
                    <s:GridColumn dataField="dataField2"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField3"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField4"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                </s:ArrayList>
            </components:columns>
            <s:ArrayList>
                <fx:Object dataField1="data20" dataField2="data1" dataField3="data1" dataField4="data20"></fx:Object>
                <fx:Object dataField1="data21" dataField2="data2" dataField3="data2" dataField4="data21"></fx:Object>
                <fx:Object dataField1="data22" dataField2="data3" dataField3="data3" dataField4="data22"></fx:Object>
            </s:ArrayList>
        </components:ExpandableDataGrid5>
    </s:VGroup>
</s:Application>
ExpandableDataGrid5.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            horizontalScrollPolicy="off"
            verticalScrollPolicy="off"
            selectionMode="singleCell"
            variableRowHeight="true"
            requestedColumnCount="4"
            width="100%"
            resizableColumns="false"
            creationComplete="thisDatagrid_creationCompleteHandler(event)"
            >
    <fx:Script>
        <![CDATA[
             import mx.events.FlexEvent;
            /*import mx.events.ResizeEvent;
            [Bindable] private var oldWidth:int;
            [Bindable] private var oldHeight:int;
            protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
                oldWidth = event.oldWidth;
                oldHeight = event.oldHeight;
                this.invalidateDisplayList();
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (oldWidth < width) {
                    setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
                    //this.scaleX += .1;
                } else if (oldWidth > width) {
                    setStyle('fontSize', getStyle('fontSize') - 0.5);
                    //this.scaleX -= .1;
                trace('unscaledWidth: ' + unscaledWidth);
                trace('unscaledHeight: ' + unscaledHeight);
                trace('explicitMinHeight: ' + explicitMinHeight);
                trace('explicitMinWidth: ' + explicitMinWidth);
                minHeight = measuredMinHeight;
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
                requestedRowCount = dataProviderLength;
                requestedMaxRowCount = dataProviderLength;
                requestedMinRowCount = dataProviderLength;
                minHeight = measuredHeight;
            /* protected function datagrid1_addedToStageHandler(event:Event):void
                stage.scaleMode = StageScaleMode.SHOW_ALL;
                /*                stage.align = StageAlign.TOP;
                 this.width = stage.stageWidth;
                this.height = stage.stageHeight;
        ]]>
    </fx:Script>
</s:DataGrid>
You can Check other ExpandableDataGrids:
<?xml version="1.0" encoding="utf-8"?>
<s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            resize="thisDatagrid_resizeHandler(event)"
            creationComplete="thisDatagrid_creationCompleteHandler(event)"
            horizontalScrollPolicy="off" verticalScrollPolicy="off"
            selectionMode="singleCell"
            variableRowHeight="true"
            requestedColumnCount="4"
            editable="false"
            width="100%"
            >
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.events.ResizeEvent;
            protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
                //event.stopImmediatePropagation();
                if (event.oldWidth < width) {
                    setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
                    //this.scaleX += .1;
                } else if (event.oldWidth > width) {
                    setStyle('fontSize', getStyle('fontSize') - 0.5);
                    //this.scaleX -= .1;
                minWidth = measuredMinWidth;
            protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
                requestedRowCount = dataProviderLength;
                requestedMaxRowCount = dataProviderLength;
                requestedMinRowCount = dataProviderLength;
                minHeight = measuredMinHeight;
        ]]>
    </fx:Script>
</s:DataGrid>
OR
<?xml version="1.0" encoding="utf-8"?>
<s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            horizontalScrollPolicy="off"
            verticalScrollPolicy="off"
            selectionMode="singleCell"
            variableRowHeight="true"
            requestedColumnCount="4"
            width="100%"
            resize="thisDatagrid_resizeHandler(event)"
            creationComplete="thisDatagrid_creationCompleteHandler(event)"
            >
    <fx:Script>
        <![CDATA[
             import mx.events.FlexEvent;
             import mx.events.ResizeEvent;
            [Bindable] private var oldWidth:int;
            [Bindable] private var oldHeight:int;
            protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
                oldWidth = event.oldWidth;
                oldHeight = event.oldHeight;
                this.invalidateDisplayList();
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (oldWidth < width) {
                    setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
                    //this.scaleX += .1;
                } else if (oldWidth > width) {
                    setStyle('fontSize', getStyle('fontSize') - 0.5);
                    //this.scaleX -= .1;
                trace('unscaledWidth: ' + unscaledWidth);
                trace('unscaledHeight: ' + unscaledHeight);
                trace('explicitMinHeight: ' + explicitMinHeight);
                trace('explicitMinWidth: ' + explicitMinWidth);
                minHeight = measuredMinHeight;
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
                requestedRowCount = dataProviderLength;
                requestedMaxRowCount = dataProviderLength;
                requestedMinRowCount = dataProviderLength;
                minHeight = measuredHeight;
        ]]>
    </fx:Script>
</s:DataGrid>

Resizing an image in ActionScript

I'm working with a company on a project and we need a way to:
1). allow a user of our website to select an image on their
computer.
2). Compress that image to specific dimensions
3). Upload the image to the site.
We want to compress the image first to reduce upload time and
make sure the pictures fit nicely into the templates we
have.

I would approach it this way
Flash/Flex to resize the image so user can see what is going
on.
Then Flash/Flex can upload the resize data and the original
image.
Then on the server side you would perform the resizing.

Read byteArray(binary) from backend and display as pdf in flex titleWindow

i have requirement where the pdf come as byteArray from backend, which i need to read from flex app and diaplay as pdf in the flex titleWindow or any flex popup.
any ideas on this....,

Hello Sandra,
Thanks for your reply, but eventhen it fails to load the pdf. Is ADS required to be installed for this?
Can I just pass the pdf_fsize imported from CONVERT_OTF which is of type i.
CALL FUNCTION 'CONVERT_OTF'
    EXPORTING
      FORMAT                = 'PDF'
    IMPORTING
      BIN_FILESIZE          = PDF_FSIZE
bin_file              = pdfxstring
    TABLES
      OTF                   = L_JOB_OUTPUT_INFO-OTFDATA
      LINES                 = LT_PDF
    EXCEPTIONS
      ERR_MAX_LINEWIDTH     = 1
      ERR_FORMAT            = 2
      ERR_CONV_NOT_POSSIBLE = 3
      OTHERS                = 4.
CALL METHOD G_HTML_CONTROL->LOAD_DATA(
     EXPORTING
       TYPE         = 'application' "'text' " 'application'
       SUBTYPE      = 'pdf' "'html' "'pdf'
       size           = PDF_FSIZE
     IMPORTING
       ASSIGNED_URL         = lv_URL
     CHANGING
       DATA_TABLE           = LT_DATA "i_html "LT_DATA
     EXCEPTIONS
       DP_INVALID_PARAMETER = 1
       DP_ERROR_GENERAL     = 2
       CNTL_ERROR           = 3
       OTHERS               = 4 ).
Thanks,
Jaya.

HOWTO show a popup window with ZOOM OUT effect?

Hi,
I want to implement such an effect in flex:
Popup a modal window, which is showing as zooming out from
the backgroud stage.
I know how to implement in flash, but how in flex?
please help.
thanks.

When you define the pop-up, set its scaleX and scaleY to
zero. Then assign its showEffect to a <mx:Zoom> effect. If
you don't set the initial scale to 0, you may briefly see the
pop-up at full size before the Zoom effect re-scales it to zero.
Note that your text may not scale: it depends on the font and
if the Flash player can scale it; you can always embed the font and
it will work correctly.
You can make the Zoom effect either an MXML tag or create it
with ActionScript when you make the pop-up.

FLEX & AJAX Functionality

I want to develop AJAX type popups in a Flex app so that when
you roll your mouse over a key word or icon, an AJAX type window
will popup with data about the word or image. How do you create
that utilizing the FLEX-AJAX bridge or the Flex popup class? Thank
you.

toolTip?
Tracy

Popup menu when right clicking DataGrid column

I have a DataGrid and I'd like the user to be able to
right-click on the header and pick from some options in a menu.
Such as give them the ability to clear the rows in the grid. I saw
on Flex Examples you can add an option to the normal Flash menu
that pops up but thats not what I want. I want an actual Flex popup
to appear with my options in there. I saw this done somewhere once,
but can't find it now.
This would replace the need for a button below the table,
which I think will look nicer.
Any ideas?

Hi Miklos, you will have to hang your option in the GoTo Menu (id 5888) while creating your From. This menu is Form dependent, therefore when you open another form it will be reseted. After this you will see your option with the right mouse click.
Catch the MenuEvent and bind it to the class you already use to bring your "Analysis Report" to the front.
Check also object Form.Menu for further info.
oMenuitem = B1_Application.Menus.Item("5888")
MenuParam.Type = SAPbouiCOM.BoMenuType.mt_STRING
MenuParam.UniqueID = "REPTMNU"
MenuParam.String = "Analysis Report"
MenuParam.Enabled = True
oMenus = oMenuitem.SubMenus
oMenus.AddEx(MenuParam)
It's also possible to add it in your Xml Form file as follows:
- <FormMenu>
- <Menus>
- <action type="add">
<Menu Checked="0" Enabled="1" FatherUID="5888" Image="" Position="0" String="Analysis Report" Type="1" UniqueID="REPTMNU" />
</action>
</Menus>
</FormMenu>
Regards,
Felipe

Binding a VLAN to the WAN port

This is a Cisco SRP541W on the lasted firmware version.
I need to bind VLAN 10 (tag it as VLAN 10?) to the WAN interface to authenticate with my ISP, can't seem to find this in the interface and fear that this router may not be able to do it at all.
Any ideas?

I found a workaround. I'm using the pureMVC framework for my app. I assigned the creation of the pop up window within a mediator and I have the mediator listen for a notification that the app/stage has been resized. upon hearing that, the mediator tells the popup to resize.
Though it would still be nice to know how to bind the popup's dimensions to the stage's dimensions so I can let the Flex framework resize the component for me.

Flex 3 Popup resize

Similar Messages

Maybe you are looking for