Re: [flexcoders] Overlay container on panels
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:[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
* To visit your group on the web, go to:
http://groups.yahoo.com/group/flexcoders/
* To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
* Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
RE: [flexcoders] Overlay container on panels
="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:[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
"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:
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: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" resizeEff
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
* To visit your group on the web, go to:
http://groups.yahoo.com/group/flexcoders/
* To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
* Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
RE: [flexcoders] Overlay container on panels
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:RemoteObjectmx: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:VBoxmx:Panel x="7" y="77" width="183"
height="96" title="Alerts"
/mx:Panelmx: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:Panelmx: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:[EMAIL PROTECTED]On Behalf Of Sreejith
UnnikrishnanSent: Wednesday, July 27, 2005 1:19 PMTo:
flexcoders@yahoogroups.comSubject: Re: [flexcoders] Overlay
container on panelsThe 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.Sreecoldfs
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"/
