Table of Contents

uiFrame

The uiFrame component is used to contain a single DisplayObject child. By default the skin asset “Frame.png” is used to render the background of the container. The skin is typically used to render a border around the child object.


Using uiFrame

ActionScript 3.0 Example

import com.ghostwire.ui.containers.uiBox;
import com.ghostwire.ui.containers.uiFrame;
import com.ghostwire.ui.containers.uiPane;
import com.ghostwire.ui.controls.uiCheckBox;
import com.ghostwire.ui.controls.uiText;
 
// ** create some content **
var fruit0:uiCheckBox = new uiCheckBox("Apple");
var fruit1:uiCheckBox = new uiCheckBox("Banana");
var fruit2:uiCheckBox = new uiCheckBox("Orange");
 
var fruitsBox:uiBox    = new uiBox();
fruitsBox.vertical    = true;
fruitsBox.spacing    = 4;
fruitsBox.addChild(new uiText("You can choose one or more fruits!"));
fruitsBox.addChild(fruit0);
fruitsBox.addChild(fruit1);
fruitsBox.addChild(fruit2);
 
var contentPane:uiPane = new uiPane();
contentPane.addChild(fruitsBox);
 
// ** create the frame **
var frm:uiFrame = new uiFrame();
frm.content = contentPane; // ** note: use content property **
frm.move(10,10);
 
// ** add to display list **
addChild(frm);

uiFrame example

Where the “classic” theme is used:

uiFrame example, classic theme


Title

The title property of a uiFrame container can be used to specify a uiComponent instance to be displayed as the title, at the top of the container. This uiComponent instance would typically be a uiText instance: 

var frm:uiFrame = new uiFrame();
frm.title = new uiText("Fruits");

uiFrame with title

Where the “classic” theme is used:

uiFrame with title, classic theme

By default, as shown above, the title is left-aligned. To change this alignment, use the alignX property of the title instance1): 

frm.title = new uiText("Fruits");
frm.title.alignX = ALIGN.CENTER;

uiFrame with title center-aligned 

frm.title = new uiText("Fruits");
frm.title.alignX = ALIGN.RIGHT;

uiFrame with title right-aligned


FrameDemo

ActionScript 3.0 FrameDemo class

 1: package
 2: {
 3:     import com.ghostwire.ui.containers.uiBox;
 4:     import com.ghostwire.ui.containers.uiFrame;
 5:     import com.ghostwire.ui.containers.uiPane;
 6:     import com.ghostwire.ui.controls.uiCheckBox;
 7:     import com.ghostwire.ui.controls.uiText;
 8:     import com.ghostwire.ui.enums.ALIGN;
 9:     import com.ghostwire.ui.managers.uiSkins;
10:
11:     import flash.display.Sprite;
12:     import flash.events.Event;
13:
14:     public class FrameDemo extends Sprite
15:     {
16:         public function FrameDemo()
17:         {
18:             addEventListener(Event.ADDED_TO_STAGE,init);
19:         }
20:
21:         private function init(evt:Event):void
22:         {
23:             // ** optional but recommended **
24:             stage.scaleMode    = "noScale";
25:             stage.align        = "TL";
26:
27:             // ** uncomment to use "classic" theme **
28:             // uiSkins.initialize("classic");
29:
30:             // ** optional but recommended **
31:             // ** let assets preload before starting application **
32:             uiSkins.manager.addEventListener(Event.INIT,main);
33:         }
34:
35:         private function main(evt:Event):void
36:         {
37:             // ** main application code **
38:             var fruit0:uiCheckBox = new uiCheckBox("Apple");
39:             var fruit1:uiCheckBox = new uiCheckBox("Banana");
40:             var fruit2:uiCheckBox = new uiCheckBox("Orange");
41:
42:             var fruitsBox:uiBox    = new uiBox();
43:             fruitsBox.vertical    = true;
44:             fruitsBox.spacing    = 4;
45:             fruitsBox.addChild(new uiText("You can choose one or more fruits!"));
46:             fruitsBox.addChild(fruit0);
47:             fruitsBox.addChild(fruit1);
48:             fruitsBox.addChild(fruit2);
49:
50:             var contentPane:uiPane = new uiPane();
51:             contentPane.addChild(fruitsBox);
52:
53:             var frm:uiFrame        = new uiFrame();
54:             frm.title            = new uiText("Fruits");
55:             frm.title.alignX    = ALIGN.RIGHT;
56:             frm.content            = contentPane;
57:             frm.move(10,10);
58:
59:             addChild(frm);
60:         }
61:     }
62: }

FrameDemo.as


See Also


API Reference

For more information on the members of the com.ghostwire.ui.containers.uiFrame class, please refer to the API Reference.


1) Remember to import com.ghostwire.ui.enums.ALIGN