Flex/AIR layout for presentation tool (resize logic, aspect ratios etc.)

Question

I'm developing a presentation tool for AIR (to be used together with, or as a replacement to, PowerPoint) but I'm quite a newcomer to flex layouting.

As you can see from the image, the presenter can open various apps from the main window. Each of these apps open up in new windows which have different visual characteristics; some use the main content area to show graphics, others bullet points. Most app windows have buttons and view stacks with embedded Flash assets (using s:SpriteVisualElement).

My questions are the following:

1a. When developing a PowerPoint-like presentation tool with Flex, which layout type (basic, vertical etc.) will provide most flexibility?

1b. How do I make sure no clipping occurs on various projector screens - which aspect ratio should I have in mind?

2a. How can I resize children sprites in the SpriteVisualElement container proportionally to the window resolution?

2b. And where do I place this resize logic - on each component (sprite) with resizeHandlers or in one resizeHandler / window?

Please use the comment thread if you want me to elaborate further. Thanks.

Answer 1

Since you're new to Flex, I strongly reading up on the Flex Component LifeCycle.

1a. When developing a PowerPoint-like presentation tool with

Flex, which layout type (basic, vertical etc.) will provide most flexibility?

The layout you choose will depend on what you want to display. I don't see layouts as "Flexible". They do their job and position their elements appropriately. I can easily envision using all types of layouts in such a complicated application, each for different purposes.

1b. How do I make sure no clipping occurs on various projector screens - which aspect ratio should I have in mind?

I'm not quite sure I understand what this question means, but I take it to mean you want to avoid the presence of scroll bars in your app. To do that, you'll have to develop layout code that sizes and positions your children so that they do not extend past the height and width of your available content space. In Flex 3 (Halo) architecture, this would be done by writing an updateDisplayList() method for your component. In the Flex 4 (Spark) architecture, this would probably be done by writing an updateDisplayList() method for your skin class.

2a. How can I resize children sprites in the SpriteVisualElement container proportionally to the window resolution?

I believe my above answer already addresses this.

2b. And where do I place this resize logic - on each component

(sprite) with resizeHandlers or in one resizeHandler / window?

In a resize handler, I would most likely use invalidateSkinState and/or invalidateDisplayList. The resizing code would be in the skin and/or updateDisplayList.