HelpSource/Classes/CompositeView.schelp

   1 class:: CompositeView
   2 redirect:: implClass
   3 summary:: A view that contains other views.
   4 categories:: GUI
   5 related:: Classes/FlowView, Classes/FlowLayout
   6
   7 description::
   8 A container for grouping other views and widgets. CompositeView inherits all of its methods from ContainerView.
   9
  10 subsection:: Some Important Issues Regarding CompositeView
  11
  12 CompositeView is used for grouping widgets in a window. While it accepts key actions, it does not accept mouse clicks or drags.
  13
  14 classmethods::
  15
  16 method:: new
  17 argument:: parent
  18 The parent view.
  19 argument:: bounds
  20 An instance of link::Classes/Rect::, or a link::Classes/Point:: indicating code::width@height::.
  21 discussion::
  22 Example:
  23 code::
  24 (
  25 w = Window.new;
  26 c = CompositeView(w, Rect(0, 0, 300, 300));
  27
  28 a = Slider2D(c, Rect(10,10,100,100));
  29 b = Slider2D(c, Rect(110,110,100,100));
  30
  31 w.front;
  32 )
  33 ::
  34
  35 subsection:: Coordinate System
  36
  37 Containers use relative coordinates, i.e.  views are placed relative to the upper left corner of the container.
  38 code::
  39 (
  40 w = Window.new;
  41
  42 c = CompositeView(w, Rect(50, 0, 300, 300));
  43 a = Slider2D(c, Rect(0, 0, 100, 100)); // actually displays at (50, 0)
  44 b = Slider2D(c, Rect(100, 100, 100, 100));
  45
  46 c.background = Color.rand;
  47
  48 w.front;
  49 )
  50
  51 c.bounds_(Rect(100, 0, 300, 300)); // contents adust since coords are relative
  52 c.resize_(6); // contents adust since coords are relative
  53 ::
  54
  55 subsection:: Keydown Bubbling
  56
  57 Key actions "bubble up" to the parent view if a view does not define one itself. In the following example, a and b do not have keyDown actions themselves, so the key event is passed to c, the parent, which defines the key down action. d's parent is the link::Classes/SCTopView::, which has no key down action. See also link::Classes/View::.
  58 code::
  59 ( //Click on the different views and hit keys on the keyboard.
  60
  61 w = Window.new;
  62
  63 c = CompositeView(w, Rect(0, 0, 200, 200)).background_(Color.grey.alpha_(0.3));
  64
  65 a = Slider2D(c,Rect(0, 0, 100, 100)).background_(Color.rand);
  66 b = Slider2D(c,Rect(100, 100, 100, 100)).background_(Color.rand);
  67
  68 w.front;
  69
  70 c.keyDownAction = {
  71         "keydown bubbled up to c".postln;
  72 };
  73
  74 // d is on window w, not on composite view c
  75 d = Slider2D(w,Rect(200, 200, 100, 100));
  76 d.background = Color.black;
  77 )
  78 ::
  79
  80 subsection:: Decorators
  81
  82 A 'decorator' object can be set to handle layout management. All views added to the CompositeView will now be placed by the decorator. Currently the only one existing is link::Classes/FlowLayout::. You can use the link::Classes/ContainerView#addFlowLayout:: method as a short cut to assigning FlowLayout to decorator.
  83 code::
  84 (
  85 a = Window.new;
  86
  87 b = CompositeView(a,Rect(0, 0, 500, 500));
  88 b.decorator = FlowLayout(b.bounds);
  89 //b.addFlowLayout; // you can also write this for convenience
  90
  91 // adding views to b automatically use the decorator
  92 // no need to use parent.decorator.place
  93 c = Slider2D(b,Rect(0, 0, 100, 100)); // size matters
  94 d = Slider2D(b,Rect(0, 0, 100, 100)); // origin doesn't
  95
  96 a.front;
  97 )
  98 ::
  99
 100 You can also use an empty composite view nicely as a spacer in link::Classes/VLayoutView::, link::Classes/HLayoutView::, or views that have a link::Classes/FlowLayout:: as their decorator.
 101 code::
 102 (
 103 a = Window.new;
 104 b = CompositeView(a, Rect(0, 0, 500, 500));
 105
 106 b.decorator = FlowLayout(Rect(0, 0, 500, 500));
 107
 108 Slider2D(b,Rect(0, 0, 100, 100)).background_(Color.rand);
 109 CompositeView(b, Rect(0, 0, 70, 100)); // just used for spacing
 110 Slider2D(b,Rect(0, 0, 100, 100)).background_(Color.rand);
 111 Slider2D(b,Rect(0, 0, 100, 100)).background_(Color.rand);
 112
 113 b.decorator.nextLine;
 114
 115 Slider2D(b, Rect(0, 0, 100, 100)).background_(Color.rand);
 116 Slider2D(b, Rect(0, 0, 100, 100)).background_(Color.rand);
 117 CompositeView(b, Rect(0, 0, 70, 100)); // just used for spacing
 118 Slider2D(b,Rect(0,0,100,100)).background_(Color.rand);
 119
 120 a.front;
 121 )
 122 ::
 123
 124 subsection:: Hiding / Swapping
 125
 126 You can stack CompositeViews on top of each other and use a button show only one of them:
 127 code::
 128 (
 129 var colors = [Color.blue, Color.red, Color.green];
 130 a = Window.new;
 131 q = 3;
 132
 133 b = Button(a, Rect(0, 0, 160, 20));
 134
 135 b.states = Array.fill(q, { arg i;
 136         [i.asString, Color.white, colors.wrapAt(i)]
 137 });
 138
 139 b.action = { arg butt;
 140         p.visible = false;
 141         p = c.at(butt.value);
 142         p.visible = true;
 143 };
 144
 145 c = Array.fill(q, { arg i;
 146         b = CompositeView(a, Rect(0, 25, 300, 300));
 147         b.background = colors[i].alpha_(0.2);
 148         b.visible = false;
 149         b;
 150 });
 151
 152 5.do{ arg i; c[0].add(Slider(c[0], Rect(10, i * 30 + 10, 150, 25)).value_(1.0.rand)) };
 153 5.do{ arg i; c[1].add(Slider(c[1], Rect(i * 30 + 10, 10, 25, 150)).value_(1.0.rand)) };
 154 c[2].add(Slider2D(c[2], Rect(10, 10, 155, 150)).x_(1.0.rand).y_(1.0.rand));
 155
 156 p = c.at(0); // previous
 157 p.visible = true; // show first one
 158
 159 a.front;
 160 )
 161 ::
 162
 163 subsection:: Nested Example
 164
 165 In this example, the link::Classes/StaticText:: accepts mouse clicks, since container views can't:
 166 code::
 167 (
 168 w = Window.new.front;
 169 v = CompositeView.new(w, w.view.bounds.insetBy(10)).background_(Color.rand);
 170 v.decorator = FlowLayout(v.bounds);
 171
 172 l = "SUPERCOLLIDER".scramble;
 173 t = Array.fill(9, {arg i; var n, r, q;
 174         n = CompositeView.new(v, Rect(20, 20, 121, 121)).background_(Color.rand);
 175         q = StaticText(n, n.bounds.moveTo(0,0).insetBy(25)).string_(l[i]).align_(\center);
 176         q.enabled = true;
 177         q.font = Font("Geneva", 10);
 178         q.background_(Color.rand);
 179         q.mouseDownAction = {
 180                 n.background_(Color.rand);
 181                 q.font=q.font.size_(5 + q.font.size + 7 % 60)
 182         };
 183 });
 184 )
 185 ::