Aug 12 2009
uiWindow: Setting Minimum Size Of Viewable Area
When using the Aspire UI library, each component instance will attempt to compute its own “ideal” preferred size if its size is not explicitly set. This “ideal” size typically means the minimum size at which the component may render itself fully (or sufficiently without appearing distorted), taking into account its child display objects such as labels or embedded images, if any.
To be very clear, for any Aspire UI component, if width and height is explicitly set, then this explicit size becomes the preferred size. This means that if you set the size of a component instance explicitly, you are overriding what the component deems to be ideal.
Default Window Size
In the case of the uiWindow component, the preferred size of the container depends on the composite preferred sizes of its child content and the title bar. A uiWindow instance may also contain a status bar and a menu bar, in which case the preferred sizes of these will also be taken into account when computing the window’s preferred size.
If you do not set the width and height of a uiWindow container explicitly, it will attempt to display its content fully by giving itself a size big enough to accommodate the content. If the content is relatively big (compared to the available application Stage area), you should consider putting it inside a scroll pane. See the previous post – Using uiWindow: Implementing Scrollable Content.
Content
The content property of a uiWindow returns a reference to the embedded uiForm container. This uiForm container in turn contains the child display objects that make up the “content” of the window (the window itself does not contain the child objects directly).
var win:uiWindow = new uiWindow(); win.content.addChild(childObject);
Minimum Viewable Area
If a uiWindow container is resizable by end-users, the minimum size of the viewable area depends on the preferred size of the content. Therefore, to change the minimum size of the viewable area, you need to explicitly set the size of this content (which is the embedded uiForm instance containing any child display objects that make up the “content”).
var win:uiWindow = new uiWindow(); win.content.setSize(50, 50); // sets minimum viewable area to 50x50
Live Demo
We made some changes to the example shown in the previous post Using uiWindow: Implementing Scrollable Content:
- set minimum viewable area of window to 50×50
- set window size to 300×250 (note the difference between setting content size and window size)
- set “livedragging” to “true”, to demonstrate live drag-resizing
WinViewSizeDemo Class
package { import com.ghostwire.ui.containers.uiScrollPane; import com.ghostwire.ui.containers.uiWindow; import com.ghostwire.ui.controls.uiImage; import com.ghostwire.ui.managers.uiCursors; import com.ghostwire.ui.managers.uiSkins; import flash.display.Sprite; import flash.events.Event; public class WinViewSizeDemo extends Sprite { public function WinViewSizeDemo() { addEventListener(Event.ADDED_TO_STAGE, init); } private function init(evt:Event):void { // ** let assets preload before starting application ** uiSkins.manager.addEventListener(Event.INIT, main); } private function main(evt:Event):void { // ** main application code ** uiCursors.initialize(stage); uiWindow.initialize(stage); // ** create the content ** var img:uiImage = new uiImage("flower.jpg"); // ** create a scroll pane ** var imgsp:uiScrollPane = new uiScrollPane(); imgsp.fillX = true; imgsp.fillY = true; imgsp.content.addChild(img); // ** add content to scroll pane ** // ** create the window ** var imgWin:uiWindow = new uiWindow(); imgWin.title = "Flower"; imgWin.content.addChild(imgsp); // ** add scroll pane to window ** // ** show window ** imgWin.open(); // ** set minimum viewable area size to 50x50 ** imgWin.content.setSize(50, 50); // ** set window size to 300x250 ** imgWin.setSize(300, 250); // ** demonstrate live drag-resizing ** imgWin.liveDragging = true; } } }
Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of the components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework. You may experiment with the various features by downloading a trial version.
