StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
3384543
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2010-08-02T01:51:18.717
FavoriteCount
0
LastActivityDate
2010-08-02T05:51:40.510
LastEditDate
2010-08-02T05:51:40.510
LastEditorUserId
363039
OwnerUserId
363039
ParentId
3384482
PostTypeId
2
Score
2
ViewCount
0
LastEditorDisplayName
text
Body
Sounds to me like the exact component you're after is the <code>TabNavigator</code> (<a href="http://livedocs.adobe.com/flex/3/html/help.html?content=navigators_4.html" rel="nofollow noreferrer">Adobe docs</a>). It's fairly simple to use. Each child of the the <code>TabNavigator</code> component represents a tab page of content (note that children must be containers such as <code>Canvas</code> or <code>VBox</code>), and the <code>label</code> property of the child is used to represent the label on the tab itself. A very simple web site using tabs might look something like: <pre><code><?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" pageTitle="My Website" /> <mx:TabNavigator width="100%" height="100%"> <mx:VBox width="100%" height="100%" label="Standard Page"> <mx:Label text="Standard Page Title" fontWeight="bold"/> <mx:Text width="100%" height="100%" text="Here is some page content." /> </mx:VBox> <mx:VBox width="100%" height="100%" label="Image Gallery"> <mx:Label text="Image Gallery Title" fontWeight="bold" /> <mx:TileList width="100%" height="100%"> <mx:Image source="my_image1.png" /> <mx:Image source="my_image2.png" /> <mx:Image source="my_image3.png" /> <mx:Image source="my_image4.png" /> </mx:TileList> </mx:VBox> </mx:TabNavigator> </mx:Application> </code></pre> You can stack as many child container components within the <code>TabNavigator</code> as you like, and their contents will (by default) only be loaded when you select the relevant tab. If you can be a little more specific about what you're trying to build, there's probably a few more tricks for you out there too. Hopefully this gives you a start though. EDIT: Okay, if you're using dropdown menus instead, it's the same concept but a little more manual labour is involved. The <code>TabNavigator</code> component uses a <code>ViewStack</code> component (<a href="http://livedocs.adobe.com/flex/3/html/navigators_3.html" rel="nofollow noreferrer">Adobe docs</a>), which is basically a stack of content pages where only one is shown at a time (determined by the stack's <code>selectedIndex</code> property), with a <code>TabBar</code> component to control the selected index. What you want to do is still use that same ViewStack to hold all your pages, but you want a dropdown menu item selection to change the selectedIndex for you. A <code>MenuBar</code> component (<a href="http://livedocs.adobe.com/flex/3/html/help.html?content=menucontrols_6.html" rel="nofollow noreferrer">Adobe docs</a>) provides the dropdown items, generated from an XMLListCollection data provider. To handle item selections, set an <code>itemClick</code> event handler to the MenuBar, and set the ViewStack's selectedIndex property based on which menu item was selected. Something like this should give you a start, and hopefully the comments help explain it. From there you can add pages, MenuBar items, etc. <pre><code><?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Script> <![CDATA[ import mx.events.MenuEvent; /** * Handle the selection of a menu item. */ private function menuItemClickHandler(event:MenuEvent):void { // Get the submenuitem node that was clicked var selection:XML = XML(event.item); // Depending on the label of the item that was clicked, // modify the selectedIndex property of the content ViewStack switch(selection.@label.toString()) { case "Page 1": pageStack.selectedIndex = 0; break; case "Page 2": pageStack.selectedIndex = 1; break } } ]]> </mx:Script>  <mx:XMLListCollection id="menuXLC"> <mx:source> <mx:XMLList> <menuitem label="Content"> <submenuitem label="Page 1" /> <submenuitem label="Page 2" /> </menuitem> </mx:XMLList> </mx:source> </mx:XMLListCollection>  <mx:MenuBar dataProvider="{menuXLC}" width="100%" labelField="@label" itemClick="menuItemClickHandler(event)" />  <mx:ViewStack id="pageStack" width="100%" height="100%">  <mx:VBox id="contentPageOne" label="First Page" width="100%" height="100%"> <mx:Label text="First Page Title" /> <mx:Text text="First Page content." /> </mx:VBox> <mx:VBox id="contentPageTwo" label="Second Page" width="100%" height="100%"> <mx:Label text="Second Page Title" /> <mx:Text text="Second Page content." /> </mx:VBox> </mx:ViewStack> </mx:Application> </code></pre>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POFlex: Changing components
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USorlade
UserOwnerUserId
1. USorlade
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POFlex: Changing components
 singulars
 PostTypePostTypeId
 PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
3. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTAcceptedByOriginator
CommentsPostId
1. COhey that is interesting stuff. but my tabs are actually menuitems so there is drop down, I am not sure if tabnavigator would be the UI I want to use. Any other options?
 singulars
 PostPostId
 PO
 UserUserId
 USSuperString
2. COCheck out the edit to adapt it for use with a MenuBar. The whole trick is stacking up your pages in a ViewStack component, then using your chosen method of controlling the selectedIndex. The TabNavigator is nice because it does this for you behind the scenes, but it's really quite simple.
 singulars
 PostPostId
 PO
 UserUserId
 USorlade

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.