PDA

View Full Version : HDividedBox and VDividedBox issue


webninja
03-30-2006, 07:11 AM
Hi All...

I'm new to Flash development and to Flex, but I have many years experience in development with other languages. I was working on a Java applet when it occured to me that Flash might be a better technology. I downloaded the Flex 2 Alpha but could not make much of it since docs were missing, but I grabbed the Beta 2 the other day and I am quite impressed! AS3 looks really great.

Anyhow, enough rambling. I am trying to code an interface using 3 VDividedBox controls inside an HDividedBox. This seems to work well enough, but when I add components to the VDividedBox controls I see that I can not anchor them. For example, if I add a components into the VDividedBox, like a Tree and a TextArea, and run the app, I can resize the VDividedBox but the components don't adjust their size to match.

I tried various properties and also tried adding a canvas first (The Canvas in the VDividedBox and then the Tree in the Canvas). No joy.

So what's the trick? I would appreciate any help. I have been through the docs and didn't find it, but there is alot there and I could have missed it. If someone could tell me the trick or point me at the docs, I would really appreciate it!

Thanks!

Jim

hangalot
03-30-2006, 02:18 PM
give me an example in code so i can take a look.

webninja
03-30-2006, 04:44 PM
Thank you very much!

I have it to the pont where the components resize vertically but not horozontally. With vetical resizing, the components get as tall as the application, which is great. With horozontal resizing, the only get so wide and then stop, getting no wider.

I am trying to achieve something similar to this:

http://www.everythingflex.com/blog/1/2005/12/HDividedPrefBox-and-VDividedPrefBox.cfm


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute">
<mx:HDividedBox left="0" top="0" liveDragging="true" height="700" width="800">
<mx:VDividedBox height="695">
<mx:Tree></mx:Tree>
<mx:TextArea/>
</mx:VDividedBox>
<mx:VDividedBox>
<mx:Tree bottom="0" right="0" left="0" top="0"></mx:Tree>
<mx:BarChart id="barchart1">
<mx:series>
<mx:BarSeries displayName="Series 1" xField=""/>
</mx:series>
</mx:BarChart>

<mx:DataGrid>
<mx:columns>
<mx:DataGridColumn dataField="col1"/>
<mx:DataGridColumn dataField="col2"/>
<mx:DataGridColumn dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:VDividedBox>
<mx:Tile height="695" direction="vertical">
</mx:Tile>

</mx:HDividedBox>

</mx:Application>

hangalot
03-31-2006, 01:02 AM
ok. so that has more to do with the controls inside that resizer thingy.
take this code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute">
<mx:HDividedBox left="0" top="0" liveDragging="true" height="700" width="800" >
<mx:VDividedBox height="695">
<mx:Tree></mx:Tree>
<mx:TextArea/>
</mx:VDividedBox>
<mx:VDividedBox>
<mx:Tree bottom="0" right="0" left="0" top="0"></mx:Tree>
<mx:BarChart id="barchart1" width="100%">
<mx:series>
<mx:BarSeries displayName="Series 1" xField=""/>
</mx:series>
</mx:BarChart>

<mx:DataGrid>
<mx:columns>
<mx:DataGridColumn dataField="col1"/>
<mx:DataGridColumn dataField="col2"/>
<mx:DataGridColumn dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:VDividedBox>
<mx:Tile height="695" direction="vertical">
</mx:Tile>

</mx:HDividedBox>

</mx:Application>


and resize around the barchart and see what happens. all i did was set charts width to 100%

webninja
03-31-2006, 03:17 AM
Setting the width to 100% on all the components fixed the problem, thanks very much! I have two (hopefully) quick questions if you don't mind...

First, why didn't I have to set the height to 100%?

Second, do the UI components in Flex2 work like the ones in an earlier Flex, so if I go out and get a book about how to use the UI components, it will be useful?

Thanks again!

Jim

hangalot
04-01-2006, 01:25 PM
first question, i will have to look at the flex source how it does it resizes, but my feeling is it should be consistant both ways.

ui components are pretty simmiliar to flex 1.5 (i never used 1 properly), but everything has been rewritten in AS3, so the quirks will not be the same. the flex book however should help you a fair bit in understanding how the firstpass compiler works and what is posible in the framework

webninja
04-01-2006, 05:18 PM
Thanks again! Actually I'm starting to figure this out pretty well. I really like the components. Today, I'm going to try to write my own, as I need something unique for this app. There are some descent docs on how to start with that, either in MXML or AS3. AS3 is quite a lot like java in many ways, so I thinking working in AS3 directly will be easier for me.

Fingers crossed!

hangalot
04-01-2006, 05:25 PM
your own component is just a mxml page. simple as.
i will put a link of some stuff up now. give me a couple of minutes
#

hangalot
04-01-2006, 05:39 PM
my server is not liking something currently. i will get back to this in a day

webninja
04-02-2006, 09:33 AM
I can't thank you enough. You're a huge help!

hangalot
04-02-2006, 02:06 PM
ok, my server is still having issues, so i popped this on another server for you
http://www.loudmouth.co.za/godfather/vs/ViewStacksAndStates.html
source is here
http://www.loudmouth.co.za/godfather/vs/ViewStacksAndStates.zip

webninja
04-02-2006, 05:31 PM
That ROCKS, thanks! In addition to helping me create a component, it is an effect I wanted to implement (the collapsing windows) for my images!

Thanks!!!

hangalot
04-02-2006, 05:40 PM
do the collapsing window in mxml using the other example of the mx:State tags. as you can see i never got the resize to work properly using AS only, am waiting for someone to help me out with that :s

hangalot
04-09-2006, 10:49 PM
the explanation of that code and everything working.

http://www.lennel.org/blog/2006/04/09/some-more-on-viewstacks-and-states/