Help/GUI/Cocoa-GUI/SCVLayoutView.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <head>
   4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   5 <meta http-equiv="Content-Style-Type" content="text/css">
   6 <title></title>
   7 <meta name="Generator" content="Cocoa HTML Writer">
   8 <meta name="CocoaVersion" content="949.46">
   9 <style type="text/css">
  10 p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}
  11 p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}
  12 p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #0000bf}
  13 p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #0000bf; min-height: 14.0px}
  14 p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Helvetica}
  15 p.p6 {margin: 0.0px 0.0px 0.0px 57.0px; text-indent: -57.0px; font: 9.0px Monaco; min-height: 12.0px}
  16 p.p7 {margin: 0.0px 0.0px 0.0px 57.0px; text-indent: -57.0px; font: 12.0px Helvetica}
  17 p.p8 {margin: 0.0px 0.0px 0.0px 57.0px; text-indent: -57.0px; font: 12.0px Helvetica; min-height: 14.0px}
  18 p.p9 {margin: 0.0px 0.0px 0.0px 85.0px; text-indent: -85.0px; font: 12.0px Helvetica}
  19 p.p10 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco; min-height: 12.0px}
  20 p.p11 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco}
  21 p.p12 {margin: 0.0px 0.0px 0.0px 57.0px; text-indent: -57.0px; font: 14.0px Helvetica}
  22 p.p13 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco; color: #bf0000}
  23 p.p14 {margin: 0.0px 0.0px 0.0px 57.0px; text-indent: -57.0px; font: 14.0px Helvetica; min-height: 17.0px}
  24 span.s1 {font: 18.0px Helvetica}
  25 span.s2 {color: #000000}
  26 span.s3 {color: #0000bf}
  27 span.s4 {text-decoration: underline}
  28 span.s5 {color: #0000bf}
  29 span.s6 {color: #0000bf}
  30 span.s7 {color: #0000bf}
  31 span.s8 {color: #bf0000}
  32 span.s9 {color: #606060}
  33 span.s10 {color: #007300}
  34 span.Apple-tab-span {white-space:pre}
  35 </style>
  36 </head>
  37 <body>
  38 <p class="p1"><span class="s1"><b>SCVLayoutView<span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span></b></span><b>a container that automatically places widgets in a column</b></p>
  39 <p class="p2"><br></p>
  40 <p class="p3"><span class="s2"><b>Inherits from: </b><a href="../../Core/Object.html"><b>Object</b></a><b> : </b><a href="SCView.html"><b>SCView</b></a><b> : </b><a href="SCContainerView.html"><b>SCContainerView</b></a><b> : </b><a href="SCLayoutView.html"><b>SCLayoutView</b></a></span></p>
  41 <p class="p4"><br></p>
  42 <p class="p1">SCVLayoutView automatically arranges its sub-views in vertical order, expanding their width to the bounds of the SCVLayoutView. Only the bounds.height of the sub-view is relevant. Its abstract superclass, <a href="SCLayoutView.html"><span class="s3">SCLayoutView</span></a>, provides some important formatting methods.</p>
  43 <p class="p2"><br></p>
  44 <p class="p3"><span class="s2"><b>See also:</b> <a href="SCHLayoutView.html"><span class="s4">SCHLayoutView</span></a>, <a href="SCCompositeView.html"><span class="s4">SCCompositeView</span></a></span></p>
  45 <p class="p2"><br></p>
  46 <p class="p5"><b>Some Important Issues Regarding SCVLayoutView</b></p>
  47 <p class="p2"><br></p>
  48 <p class="p1">SCVLayoutView is designed mainly for grouping and placing widgets. While you can set it to accept key strokes, it does not itself accept mouse clicks or drags.</p>
  49 <p class="p2"><br></p>
  50 <p class="p1">SCVLayoutView responds to the minHeight and maxHeight <b>properties </b>in its child views. This is useful when <b>resize</b> is set to 4, 5, or 6. See examples below.</p>
  51 <p class="p2"><br></p>
  52 <p class="p5"><b>Creation / Class Methods</b></p>
  53 <p class="p6"><br></p>
  54 <p class="p7"><b><span class="Apple-tab-span">  </span>*new (parent, bounds)</b></p>
  55 <p class="p8"><b><span class="Apple-tab-span">  </span></b></p>
  56 <p class="p9"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span><b>parent </b>- The parent view.</p>
  57 <p class="p9"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span><b>bounds </b>- An instance of <a href="../../Geometry/Rect.html"><span class="s5">Rect</span></a>, or a <a href="../../Geometry/Point.html"><span class="s5">Point</span></a> indicating width@height.</p>
  58 <p class="p10"><br></p>
  59 <p class="p11"><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span>(</p>
  60 <p class="p11"><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span>w = <span class="s6">Window</span>.new;</p>
  61 <p class="p11"><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span>v = <span class="s6">VLayoutView</span>(w, <span class="s6">Rect</span>(10,10,300,300) );</p>
  62 <p class="p11"><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span><span class="s6">Array</span>.fill( 10, { <span class="s6">arg</span> i;</p>
  63 <p class="p11"><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span><span class="s6">Slider</span>( v, <span class="s6">Rect</span>(0,0,75,20) ).value_(i / 10)</p>
  64 <p class="p11"><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span>});</p>
  65 <p class="p11"><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span>w.front</p>
  66 <p class="p11"><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span>)</p>
  67 <p class="p8"><span class="Apple-tab-span">     </span></p>
  68 <p class="p12"><b>Examples</b></p>
  69 <p class="p10"><br></p>
  70 <p class="p11">(</p>
  71 <p class="p11">q = 10;</p>
  72 <p class="p11">w = <span class="s7">Window</span>.new;</p>
  73 <p class="p10"><br></p>
  74 <p class="p11">v = <span class="s7">VLayoutView</span>(w,<span class="s7">Rect</span>(10,10,300,300));</p>
  75 <p class="p10"><br></p>
  76 <p class="p11"><span class="s7">Array</span>.fill(q,{ <span class="s7">arg</span> i;</p>
  77 <p class="p11"><span class="Apple-tab-span">    </span><span class="s7">Slider</span>(v,<span class="s7">Rect</span>(0,0,75,20)).value_(i / q)</p>
  78 <p class="p11">});</p>
  79 <p class="p10"><br></p>
  80 <p class="p11">w.front</p>
  81 <p class="p11">)</p>
  82 <p class="p10"><br></p>
  83 <p class="p13">// show the area of the view.</p>
  84 <p class="p13"><span class="s2">v.background_(</span><span class="s7">Color</span><span class="s2">.rand) </span>// The sliders automatically expand to the optimal width</p>
  85 <p class="p10"><br></p>
  86 <p class="p10"><br></p>
  87 <p class="p14"><br></p>
  88 <p class="p13">// Stretching the layout view. Slider height is fixed.</p>
  89 <p class="p11">(</p>
  90 <p class="p11">q = 10;</p>
  91 <p class="p11">w = <span class="s7">Window</span>.new;</p>
  92 <p class="p10"><br></p>
  93 <p class="p11">v = <span class="s7">VLayoutView</span>(w,<span class="s7">Rect</span>(10,10,300,300));</p>
  94 <p class="p11">v.background_(<span class="s7">Color</span>.rand);</p>
  95 <p class="p11">v.resize = 5; <span class="s8">// elastic</span></p>
  96 <p class="p11"><span class="s7">Array</span>.fill(q,{ <span class="s7">arg</span> i;</p>
  97 <p class="p11"><span class="Apple-tab-span">    </span><span class="s7">var</span> s;</p>
  98 <p class="p13"><span class="s2"><span class="Apple-tab-span">   </span>s = </span><span class="s7">Slider</span><span class="s2">(v,</span><span class="s7">Rect</span><span class="s2">(0,0,55,20));</span>// The bounds.width are irrelevant here. They expand to the optimal width</p>
  99 <p class="p11"><span class="Apple-tab-span">    </span>s.value = i / q;</p>
 100 <p class="p11"><span class="Apple-tab-span">    </span>s</p>
 101 <p class="p11">});</p>
 102 <p class="p11"><span class="s7">StaticText</span>(v, <span class="s7">Rect</span>(0,0,55,20)).background_(<span class="s7">Color</span>.rand).string_(<span class="s9">"Some Example Text"</span>).align_(<span class="s10">\center</span>);</p>
 103 <p class="p11">w.front</p>
 104 <p class="p11">)</p>
 105 <p class="p10"><br></p>
 106 <p class="p10"><br></p>
 107 <p class="p13">// Stretching the layout view and the contents.</p>
 108 <p class="p13">// If all the contents are elastic, the heights of the contents are perfectly divided up.</p>
 109 <p class="p13">// in this example, the StaticText is not elastic in order to preserv its height.</p>
 110 <p class="p11">(</p>
 111 <p class="p11">q = 10;</p>
 112 <p class="p11">w = <span class="s7">Window</span>.new;</p>
 113 <p class="p10"><br></p>
 114 <p class="p11">v = <span class="s7">VLayoutView</span>(w,<span class="s7">Rect</span>(10,10,300,300));</p>
 115 <p class="p11">v.background_(<span class="s7">Color</span>.rand);</p>
 116 <p class="p11">v.resize = 5; <span class="s8">// elastic</span></p>
 117 <p class="p11"><span class="s7">Array</span>.fill(q,{ <span class="s7">arg</span> i;</p>
 118 <p class="p11"><span class="Apple-tab-span">    </span><span class="s7">var</span> s;</p>
 119 <p class="p11"><span class="Apple-tab-span">    </span>s = <span class="s7">Slider</span>(v,<span class="s7">Rect</span>(0,0,75,20));</p>
 120 <p class="p11"><span class="Apple-tab-span">    </span>s.resize = 5; <span class="s8">// elastic</span></p>
 121 <p class="p11"><span class="Apple-tab-span">    </span>s.value = i / q;</p>
 122 <p class="p11"><span class="Apple-tab-span">    </span>s</p>
 123 <p class="p11">});</p>
 124 <p class="p11"><span class="s7">StaticText</span>(v, <span class="s7">Rect</span>(0,0,55,40))</p>
 125 <p class="p11"><span class="Apple-tab-span">    </span>.background_(<span class="s7">Color</span>.rand).string_(<span class="s9">"Some Example Text"</span>)</p>
 126 <p class="p11"><span class="Apple-tab-span">    </span>.align_(<span class="s10">\center</span>);</p>
 127 <p class="p10"><br></p>
 128 <p class="p11">w.front</p>
 129 <p class="p11">)</p>
 130 <p class="p10"><br></p>
 131 <p class="p10"><br></p>
 132 <p class="p13">// Mixed stretching modes</p>
 133 <p class="p11">(</p>
 134 <p class="p11">q = 5;</p>
 135 <p class="p11">w = <span class="s7">Window</span>.new;</p>
 136 <p class="p10"><br></p>
 137 <p class="p11">v = <span class="s7">VLayoutView</span>(w,<span class="s7">Rect</span>(10,10,300,300));</p>
 138 <p class="p11">v.resize = 5; <span class="s8">// elastic</span></p>
 139 <p class="p11">v.background_(<span class="s7">Color</span>.grey);</p>
 140 <p class="p11"><span class="s7">Array</span>.fill(q,{ <span class="s7">arg</span> i;</p>
 141 <p class="p11"><span class="Apple-tab-span">    </span><span class="s7">var</span> s;</p>
 142 <p class="p11"><span class="Apple-tab-span">    </span>s = <span class="s7">Slider</span>(v,<span class="s7">Rect</span>(0,0,75,20)).background_(<span class="s7">Color</span>.rand);</p>
 143 <p class="p11"><span class="Apple-tab-span">    </span>s.value = i / 5;</p>
 144 <p class="p11"><span class="Apple-tab-span">    </span>if(i &lt; 2,{</p>
 145 <p class="p11"><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span>s.resize = 5; <span class="s8">// some elastic</span></p>
 146 <p class="p11"><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span>s.setProperty(<span class="s10">\minHeight</span>,20);</p>
 147 <p class="p11"><span class="Apple-tab-span">    </span>},{</p>
 148 <p class="p13"><span class="s2"><span class="Apple-tab-span">   </span><span class="Apple-tab-span">    </span>s.resize = 1; </span>// some not elastic</p>
 149 <p class="p11"><span class="Apple-tab-span">    </span>});</p>
 150 <p class="p11"><span class="Apple-tab-span">    </span>s</p>
 151 <p class="p11">});</p>
 152 <p class="p11"><span class="s7">StaticText</span>(v, <span class="s7">Rect</span>(0,0,55,20)).background_(<span class="s7">Color</span>.rand).string_(<span class="s9">"Some Example Text"</span>).align_(<span class="s10">\center</span>);</p>
 153 <p class="p10"><br></p>
 154 <p class="p11">w.front</p>
 155 <p class="p11">)</p>
 156 <p class="p10"><br></p>
 157 <p class="p10"><br></p>
 158 <p class="p13">// Set minimum heights</p>
 159 <p class="p13">// beware that if the layout view height is smaller than the combined height of all the contents,</p>
 160 <p class="p13">// things might disappear when you try to handle them with the mouse:</p>
 161 <p class="p11">(</p>
 162 <p class="p11">q = 5;</p>
 163 <p class="p11">w = <span class="s7">Window</span>.new;</p>
 164 <p class="p10"><br></p>
 165 <p class="p11">v = <span class="s7">VLayoutView</span>(w,<span class="s7">Rect</span>(10,10,300,300));</p>
 166 <p class="p11">v.resize = 5; <span class="s8">// elastic</span></p>
 167 <p class="p11">v.background_(<span class="s7">Color</span>.grey);</p>
 168 <p class="p11"><span class="s7">Array</span>.fill(q,{ <span class="s7">arg</span> i;</p>
 169 <p class="p11"><span class="Apple-tab-span">    </span><span class="s7">var</span> s;</p>
 170 <p class="p11"><span class="Apple-tab-span">    </span>s = <span class="s7">Slider</span>(v,<span class="s7">Rect</span>(0,0,75,20)).background_(<span class="s7">Color</span>.blue.alpha_(0.2));</p>
 171 <p class="p10"><span class="Apple-tab-span">    </span></p>
 172 <p class="p11"><span class="Apple-tab-span">    </span>s.value = i / 5;</p>
 173 <p class="p11"><span class="Apple-tab-span">    </span>s.resize = 5;</p>
 174 <p class="p11"><span class="Apple-tab-span">    </span>s.setProperty(<span class="s10">\minHeight</span>,20);</p>
 175 <p class="p11"><span class="Apple-tab-span">    </span>s.setProperty(<span class="s10">\maxHeight</span>,40);</p>
 176 <p class="p11"><span class="Apple-tab-span">    </span>s</p>
 177 <p class="p11">});</p>
 178 <p class="p11">w.front</p>
 179 <p class="p11">)</p>
 180 <p class="p10"><br></p>
 181 <p class="p10"><br></p>
 182 <p class="p10"><br></p>
 183 <p class="p13">// Spacing</p>
 184 <p class="p11">(</p>
 185 <p class="p11">q = 10;</p>
 186 <p class="p11">w = <span class="s7">Window</span>.new;</p>
 187 <p class="p10"><br></p>
 188 <p class="p11">v = <span class="s7">VLayoutView</span>(w,<span class="s7">Rect</span>(10,10,300,300));</p>
 189 <p class="p11">v.setProperty(<span class="s10">\spacing</span>,0);</p>
 190 <p class="p10"><br></p>
 191 <p class="p11"><span class="s7">Array</span>.fill(q,{</p>
 192 <p class="p11"><span class="Apple-tab-span">    </span><span class="s7">Slider</span>(v,<span class="s7">Rect</span>(0,0,75,20))</p>
 193 <p class="p11">});</p>
 194 <p class="p10"><br></p>
 195 <p class="p11">w.front</p>
 196 <p class="p11">)</p>
 197 <p class="p10"><br></p>
 198 <p class="p10"><br></p>
 199 <p class="p10"><br></p>
 200 <p class="p13">// Nesting</p>
 201 <p class="p13">// Use VLayoutView and HLayoutView in combination</p>
 202 <p class="p11">(</p>
 203 <p class="p11">q = 10;</p>
 204 <p class="p11">w = <span class="s7">Window</span>.new(<span class="s9">"nesting"</span>,<span class="s7">Rect</span>(30,30,400,700));</p>
 205 <p class="p10"><br></p>
 206 <p class="p11">v = <span class="s7">VLayoutView</span>(w,<span class="s7">Rect</span>(10,10,300,600));</p>
 207 <p class="p10"><br></p>
 208 <p class="p11">v.background = <span class="s7">Color</span>.rand;</p>
 209 <p class="p10"><br></p>
 210 <p class="p11"><span class="s7">Array</span>.fill(q,{ <span class="s7">arg</span> i;</p>
 211 <p class="p11"><span class="Apple-tab-span">    </span><span class="s7">Slider</span>(v,<span class="s7">Rect</span>(0,0,75,20)).value_(i / q)</p>
 212 <p class="p11">});</p>
 213 <p class="p10"><br></p>
 214 <p class="p11"><span class="s7">StaticText</span>(v, <span class="s7">Rect</span>(0,0,55,20)).background_(<span class="s7">Color</span>.rand).string_(<span class="s9">"Some Example Text"</span>).align_(<span class="s10">\center</span>);</p>
 215 <p class="p10"><br></p>
 216 <p class="p11">h = <span class="s7">HLayoutView</span>(v,<span class="s7">Rect</span>(10,10,300,300));</p>
 217 <p class="p10"><br></p>
 218 <p class="p11"><span class="s7">Array</span>.fill(q,{ <span class="s7">arg</span> i;</p>
 219 <p class="p11"><span class="Apple-tab-span">    </span><span class="s7">Slider</span>(h,<span class="s7">Rect</span>(0,0,20,70)).value_(i / q)</p>
 220 <p class="p11">});</p>
 221 <p class="p11">h.background = <span class="s7">Color</span>.rand;</p>
 222 <p class="p10"><br></p>
 223 <p class="p10"><br></p>
 224 <p class="p11">w.front</p>
 225 <p class="p10"><br></p>
 226 <p class="p11">)</p>
 227 <p class="p10"><br></p>
 228 </body>
 229 </html>