Using flex components within a papervision3d application

I am in the process of designing a 3D panorama viewer using papervision3d for the 3D library. I am coding entirely in ActionScript3 using FlashDevelop. I am at the point now where I need to add simple components (button, dropdown menu, toolbar, etc.) I know that using mxml it is easy to create UIs. Does anyone have any experience with creating UIs in mxml and then using them within a papervision3d object? Basically, I want to put a button specified by an mxml file in the middle of my panorama and I have no idea how to do this. Thanks for any help.

Solution

I'm doing something very similar: I have been developing a 3D panorama viewer with Papervision3D, with Flex controls added as an interface. (You can check out the current status of the viewer at http://www.panocast.com)

What I did here was exactly the opposite of what you request: I wrapped the Papervision3D view inside a UIComponent, and placed that into an MXML file. By putting it in a Canvas, I was able to position the controls on top of it. Here's how:

<mx:Canvas width="100%" height="100%">
    <!-- the main panoarama player object -->
    <pp:PanoViewer id="pv" width="100%" height="100%" />

    <!-- horizontal control bar -->
    <mx:HBox id="controls" bottom="10" left="10" right="10">
        <!-- rewind & play/pause buttons -->
        <mx:ButtonBar id="playbackButtons" buttonWidth="26">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object icon="@Embed(source='../../../../assets/rewind.png')" toolTip="Rewind video" name="rewind" />
                    <mx:Object icon="{playIcon}" toolTip="Play video (space)" name="play" />
                </mx:Array>
            </mx:dataProvider>
        </mx:ButtonBar>
    ...

etc.