RE: [flexcoders] Overlay container on panels

dfatta Thu, 28 Jul 2005 17:26:43 -0700

Title: Message

Thanks, Sree. That helps enormously.

I'm still a bit confused by the HBox and VBox components. Should one treat the HBox as a row (i.e., tr), and a VBox as a cell (i.e., td)? For instance, if I want two panels to be side by side, do I put them in one HBox with two nested VBox? What would be the syntax for that?

I can't wait till I get I2 Flex book in the mail. I need to review some basics before I move forward.

Darius

-----Original Message-----
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Sreejith Unnikrishnan
Sent: Wednesday, July 27, 2005 11:11 PM
To: flexcoders@yahoogroups.com
Subject: Re: [flexcoders] Overlay container on panels

Hi, I ran through your code. Looks like you have not quite understood the concept of using mx:Canvas. Also I found that your layout is in total disarray! Use these guidelines for basic layout. 1. You use mx:HBox to layout components horizontally. 2. Use mx:VBox to layout components vertically 3. Use mx:Canvas to layout components over each other or you have real reason to moce around components on the stage. 4. For your requirement, I assume an accordian would be the best. 5. Try and avoid statically positioning/sizing components. Use percentages as much as possible. (I myself have started seeing the beauty of flexi/scalable layouts! and I believe this is what Flex makes your layout a lot more attractive) If I understand your requirement correctly, you want to just show and hide the shopping cart on click of a button. So do the following. Put all your code, EXCEPT the shopping cart in a VBox/HBox. Lets call it ALLOTHERCODE. And the shopping cart - CART Then your code should look like this. <mx:Application ...... <mx:Canvas> <ALLOTHERCODE> <CART> </mx:Canvas> </mx:Application> Let us know if it helps ... I suggest you work with a skeleton structure in the begining with just containers. Once you are happy with the result, populate the PieCharts, Datagrids, etc (typically how you would approach HTML page design) Regards Sree [EMAIL PROTECTED] wrote: > I thought this would do it but I'm still getting the same problem. I > have one canvas tag that wraps all my other code. I'm scratching my > head on this one... > > If you could take a second look, I've included the modified code below: > > Also, a general layout question. Is it good practice to have one > canvas for your entire application that you then nest other containers > and components in? Just wondering... > > Thanks, > Darius > > > > <?xml version="1.0" encoding="utf-8"?> > <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" > xmlns="*" initialize="doClick()"> > > <mx:Style source="DallyStyle.css" /> > <mx:Script source="index4.as"/> > > <mx:Effect> > <mx:WipeDown name="showCart" show="false" duration="300"/> > <mx:WipeUp name="hideCart" show="false" duration="300"/> > </mx:Effect> > > <mx:RemoteObject id="ro" > endpoint="http://gx270dev.net/flashservices/gateway" > source="Model.mUtilities.mUpdate.qry_UpdateAuthorization" > fault="mx.controls.Alert.show(event.fault.faultstring)" > showBusyCursor="true"> > <mx:method name="GetUpdateAuthorization" result="doResult(event)"/> > </mx:RemoteObject> > > > <mx:Canvas width="1000" height="534" backgroundColor="#336699"> > <mx:Image x="2" y="3" source="Images/logo.swf" /> > <mx:PieChart id="Collections" x="108" y="1" > dataProvider="{PaymentSources}" showDataTips="false" width="68" > height="64" resizeEffect="Resize"> > <mx:series> > <mx:Array> > <mx:PieSeries labelPosition="inside" field="Amount" > labelFunction="display"/> > </mx:Array> > </mx:series> > </mx:PieChart> > <mx:Button x="7" y="40" width="50" label="Logout" /> > <mx:Button x="60" y="40" label="{cart.visible?'Close':'Search'}" > width="50" click="cart.visible=!cart.visible"/> > <mx:VBox id="cart" backgroundColor="#EEF5EE" > borderStyle="solid" marginTop="8" marginLeft="8" marginBottom="8" > marginRight="8" visible="false" showEffect="showCart" > hideEffect="hideCart" x="62" y="41"> > <mx:Label text="Search"/> > <mx:DataGrid id="dg" width="300" height="200"> > <mx:columns> > <mx:Array> > <mx:DataGridColumn columnName="name" > headerText="Name" width="200"/> > <mx:DataGridColumn columnName="price" > headerText="Price" width="100"/> > </mx:Array> > </mx:columns> > </mx:DataGrid> > </mx:VBox> > > <mx:Panel x="7" y="77" width="183" height="96" title="Alerts" > > </mx:Panel> > <mx:Panel x="193" y="26" width="779" title="Case Construct" > height="121" > > <mx:DataGrid id="CaseConstruct" width="769" height="83"> > <mx:columns> > <mx:Array> > <mx:DataGridColumn headerText="Name" columnName="Name" /> > <mx:DataGridColumn headerText="Status" columnName="Status" /> > <mx:DataGridColumn headerText="Role" columnName="Role" /> > <mx:DataGridColumn headerText="Residence" > columnName="Residence" /> > <mx:DataGridColumn headerText="SSN" columnName="Ssn" /> > <mx:DataGridColumn headerText="Born" columnName="Born" /> > <mx:DataGridColumn headerText="Aid" columnName="Aid" /> > <mx:DataGridColumn headerText="Paternity" > columnName="Paternity" /> > <mx:DataGridColumn headerText="Relation" columnName="Relation" /> > <mx:DataGridColumn headerText="Gender" columnName="Gender" /> > </mx:Array> > </mx:columns> > </mx:DataGrid> > </mx:Panel> > <mx:Panel x="411" y="291" width="183" title="Updates" height="198"> >  > <mx:DataGrid id="Updates" width="166" height="156" > mouseDown="showWindow(true)" wordWrap="true"> > <mx:columns> > <mx:Array> > <mx:DataGridColumn width="200" headerText="Update Form" > columnName="Function"/> >  > </mx:Array> > </mx:columns> > </mx:DataGrid> > </mx:Panel> > </mx:Canvas> > </mx:Application> > > > > -----Original Message----- > *From:* flexcoders@yahoogroups.com > [mailto:[EMAIL PROTECTED] Behalf Of *Sreejith > Unnikrishnan > *Sent:* Wednesday, July 27, 2005 1:19 PM > *To:* flexcoders@yahoogroups.com > *Subject:* Re: [flexcoders] Overlay container on panels > > The key to overlay is using mx:Canvas and putting the containers > inside > the canvas. > You can then set the visibility of each of those containers. > > Sree > > coldfs wrote: > > > Hi, > > > > I have a vertical container that I need to overlay all other panels > > upon the click of a button. I used the code in the Flex > explorer and > > got everything working except the ability for the container to > > overlay my other panels. Is there an attribute or other trick to > > doing this. > > > > Thank you, > > Darius > > > > <mx:Effect> > > <mx:WipeDown name="showCart" show="false" duration="300"/> > > <mx:WipeUp name="hideCart" show="false" duration="300"/> > > </mx:Effect> > > > > <mx:Button x="11" y="41" width="50" label="Logout" /> > > <mx:Button x="62" y="41" label="{cart.visible?'Close':'Search'}" > > width="50" click="cart.visible=!cart.visible"/> > > > > > > <mx:VBox id="cart" backgroundColor="#EEF5EE" > > borderStyle="solid" marginTop="8" marginLeft="8" marginBottom="8" > > marginRight="8" visible="false" showEffect="showCart" > > hideEffect="hideCart" x="62" y="41"> > > <mx:Label text="Search"/> > > <mx:DataGrid id="dg" width="300" height="200"> > > <mx:columns> > > <mx:Array> > > <mx:DataGridColumn columnName="name" > > headerText="Name" width="200"/> > > <mx:DataGridColumn columnName="price" > > headerText="Price" width="100"/> > > </mx:Array> > > </mx:columns> > > </mx:DataGrid> > > </mx:VBox> > > > > > > > > > > > > -- > > Flexcoders Mailing List > > FAQ: > http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt > > Search Archives: > http://www.mail-archive.com/flexcoders%40yahoogroups.com > > > > > > > ------------------------------------------------------------------------ > > YAHOO! GROUPS LINKS > > > > * Visit your group "flexcoders > > <http://groups.yahoo.com/group/flexcoders>" on the web. > > > > * To unsubscribe from this group, send an email to: > > [EMAIL PROTECTED] > > > <mailto:[EMAIL PROTECTED]> > > > > * Your use of Yahoo! Groups is subject to the Yahoo! Terms of > > Service <http://docs.yahoo.com/info/terms/>. > > > > > > > ------------------------------------------------------------------------ > > > > > > > -- > Flexcoders Mailing List > FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt > Search Archives: > http://www.mail-archive.com/flexcoders%40yahoogroups.com > > > ------------------------------------------------------------------------ > YAHOO! GROUPS LINKS > > * Visit your group "flexcoders > <http://groups.yahoo.com/group/flexcoders>" on the web. > > * To unsubscribe from this group, send an email to: > [EMAIL PROTECTED] > <mailto:[EMAIL PROTECTED]> > > * Your use of Yahoo! Groups is subject to the Yahoo! Terms of > Service <http://docs.yahoo.com/info/terms/>. > > > ------------------------------------------------------------------------ >

-- Flexcoders Mailing List FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com

YAHOO! GROUPS LINKS

Visit your group "flexcoders" on the web.
To unsubscribe from this group, send an email to: [EMAIL PROTECTED]
Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service.

RE: [flexcoders] Overlay container on panels

Reply via email to