HelpSource/Classes/CompositeView.schelp

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