Re: [flexcoders] Overlay container on panels

[Sreejith Unnikrishnan]

"Should one treat the HBox as a row (i.e., tr), and a VBox as a cell (i.e., td)" No, do not take the HTML table example too far. Its really very simple. HBox will layout any number of components horizontally. Inversely, VBox lays out everything vertically. Regarding your question, if you want to put 2 panels side-by-side, you will just put those 2 panels in a HBox. <mx:HBox width=100% height=100%>     <mx:Panel width=50% height=100%></mx:Panel>     <mx:Panel width=50% height=100%></mx:Panel> </HBox> The layout component that is very close to a "HTML table" is the mx:Grid. This container lets you arrange children as rows and columns. I suggest you read the Flex ActionScript and MXML API Reference Version 1.5 online at http://livedocs.macromedia.com/flex/15/asdocs_en/index.html and check out section on mx:containers. Invariably jump to http://livedocs.macromedia.com/flex/15/asdocs_en/mx/containers/index.html to get a good understanding of the containers. The best way to get up to speed on all Flex concepts is to thoroughly go through the Flex Samples that come with the installation. Regards Sree [EMAIL PROTECTED] wrote: 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:flexcoders@yahoogroups.com] 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: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:DataGridColumn width="320" headerText="Description" > columnName="Description"/>--> >          </mx:Array> >        </mx:columns> >      </mx:DataGrid> >    </mx:Panel> >  </mx:Canvas> > </mx:Application> >  >  > >     -----Original Message----- >     *From:* flexcoders@yahoogroups.com >     [mailto:flexcoders@yahoogroups.com]*On 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.