Each child of VBox must report have either its measuredWidth/Height or explicitWidth/Height set, otherwise the VBox doesn't know how big they are
Alex Harui Flex SDK Developer Adobe Systems Inc.<http://www.adobe.com/> Blog: http://blogs.adobe.com/aharui From: flexcoders@yahoogroups.com [mailto:flexcod...@yahoogroups.com] On Behalf Of annelie2008 Sent: Thursday, February 05, 2009 4:33 AM To: flexcoders@yahoogroups.com Subject: [flexcoders] Displaying UIComponents vertically Hi, I'm having trouble with the layout of the musical score I'm displaying. It's generated from an xml file and I want the staves to be placed on top of each other but I can't make it work. I have a class which draws out the lines and the notes on it, so I instantiate that class, create the lines and notes, then create a UIComponent to add it to. There's three staves, so I do this for all three, then I add them all to a VBox which I display. I thought this would mean they'd be stacked on top of each other, but they're horizontally placed (the second two a little bit lower than the first for some reason). I'm assuming I'm missing something really obvious, so I'd be grateful if anyone could point me in the right direction. Here's the code: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical" initialize="initializeHandler()" horizontalAlign="left"> <mx:Script> <![CDATA[ import mx.containers.HBox; import mx.containers.VBox; import mx.containers.Canvas; import mx.core.UIComponent; import test.DrawNotes; public var myXmlList:XMLList; private function initializeHandler():void { //myXmlList = scoreXml.children(); // loop through this xml to get the attributes for the lines and fonts, but for now just hardcode it // MEASURE 1 var measure1:DrawNotes = new DrawNotes (); measure1.createLine(0, 0, 0, 20, "Black", 0.3, ""); measure1.createLine(350, 0, 350, 20, "Black", 0.3, ""); measure1.createLine(0, 0, 350, 0, "Black", 0.3, ""); measure1.createLine(0, 5, 350, 5, "Black", 0.3, ""); measure1.createLine(0, 10, 350, 10, "Black", 0.3, ""); measure1.createLine(0, 15, 350, 15, "Black", 0.3, ""); measure1.createLine(0, 20, 350, 20, "Black", 0.3, ""); measure1.createGlyph("1Et", 14, 55.5, "#FF000000", 14, "q", "", 58, 10, ""); measure1.createGlyph("1Et", 14, 55.5, "#FF000000", 14, "q", "", 116, -2.5, ""); measure1.createGlyph("1Et", 14, 55.5, "#FF000000", 14, "h", "", 174, 2.5, ""); // MEASURE 2 var measure2:DrawNotes = new DrawNotes (); measure2.createLine(350, 0, 350, 20, "Black", 0.3, ""); measure2.createLine(700, 0, 700, 20, "Black", 0.3, ""); measure2.createLine(350, 0, 700, 0, "Black", 0.3, ""); measure2.createLine(350, 5, 700, 5, "Black", 0.3, ""); measure2.createLine(350, 10, 700, 10, "Black", 0.3, ""); measure2.createLine(350, 15, 700, 15, "Black", 0.3, ""); measure2.createLine(350, 20, 700, 20, "Black", 0.3, ""); measure2.createGlyph("1Et", 14, 55.5, "#FF000000", 14, "w", "", 408, 2, ""); // MEASURE 3 var measure3:DrawNotes = new DrawNotes (); measure3.createLine(700, 0, 700, 20, "Black", 0.3, ""); measure3.createLine(1050, 0, 1050, 20, "Black", 0.3, ""); measure3.createLine(700, 0, 1050, 0, "Black", 0.3, ""); measure3.createLine(700, 5, 1050, 5, "Black", 0.3, ""); measure3.createLine(700, 10, 1050, 10, "Black", 0.3, ""); measure3.createLine(700, 15, 1050, 15, "Black", 0.3, ""); measure3.createLine(700, 20, 1050, 20, "Black", 0.3, ""); measure3.createGlyph("1Et", 14, 55.5, "#FF000000", 14, "h", "", 758, 0, ""); measure3.createGlyph("1Et", 14, 55.5, "#FF000000", 14, "h", "", 874, 0, ""); var uic1:UIComponent = new UIComponent (); uic1.addChild(measure1); var uic2:UIComponent = new UIComponent (); uic2.addChild(measure2); var uic3:UIComponent = new UIComponent (); uic3.addChild(measure3); var verticalBox:VBox = new VBox(); verticalBox.addChild(uic1); verticalBox.addChild(uic2); verticalBox.addChild(uic3); addChild(verticalBox); } ]]> </mx:Script> <mx:XML id="scoreXml" source="scoreCanvas.xml" /> </mx:Application> Thanks, Annelie
