Help/GUI/Cocoa-GUI/SCHLayoutView.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.54">
   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: #001ee6}
  13 p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #0018b8; 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 57.0px; text-indent: -57.0px; font: 14.0px Helvetica; min-height: 17.0px}
  23 p.p14 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco; color: #a41c14}
  24 p.p15 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Helvetica; min-height: 17.0px}
  25 p.p16 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco; color: #606060}
  26 span.s1 {font: 18.0px Helvetica}
  27 span.s2 {color: #000000}
  28 span.s3 {color: #0018b8}
  29 span.s4 {text-decoration: underline}
  30 span.s5 {font: 12.0px Helvetica}
  31 span.s6 {color: #a41c14}
  32 span.s7 {color: #606060}
  33 span.s8 {color: #356f14}
  34 span.Apple-tab-span {white-space:pre}
  35 </style>
  36 </head>
  37 <body>
  38 <p class="p1"><span class="s1"><b>SCHLayoutView<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 rows</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">SCHLayoutView automatically arranges its sub-views in horizontal order, expanding their height to the bounds of the SCHLayoutView. Only the bounds.width 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="SCVLayoutView.html"><span class="s4">SCVLayoutView</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 SCHLayoutView</b></p>
  47 <p class="p2"><br></p>
  48 <p class="p1">SCHLayoutView 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">SCHLayoutView responds to the minWidth and maxWidth <b>properties</b> in its child views. This is useful when <b>resize</b> is set to 2, 5, or 8. 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="s3">Rect</span></a>, or a <a href="../../Geometry/Point.html"><span class="s3">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="s3">Window</span>.new;</p>
  61 <p class="p11"><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span>v = <span class="s3">HLayoutView</span>(w, <span class="s3">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="s3">Array</span>.fill( 10, { <span class="s3">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="s3">Slider</span>( v, <span class="s3">Rect</span>(0,0,20,75) ).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="p10"><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span><span class="s5"><span class="Apple-tab-span">   </span></span></p>
  68 <p class="p12"><b>Examples</b></p>
  69 <p class="p13"><br></p>
  70 <p class="p14">// Childview height fills the View automatically</p>
  71 <p class="p10"><br></p>
  72 <p class="p11">(</p>
  73 <p class="p11">q = 10;</p>
  74 <p class="p11">w = <span class="s3">Window</span>.new;</p>
  75 <p class="p10"><br></p>
  76 <p class="p11">h = <span class="s3">HLayoutView</span>(w,<span class="s3">Rect</span>(0,0,300,300));</p>
  77 <p class="p10"><br></p>
  78 <p class="p11"><span class="s3">Array</span>.fill(q,{ <span class="s3">arg</span> i;</p>
  79 <p class="p11"><span class="Apple-tab-span">    </span><span class="s3">Slider</span>(h,<span class="s3">Rect</span>(0,0,20,75)).value_(i / q)</p>
  80 <p class="p11">});</p>
  81 <p class="p11">h.background_(<span class="s3">Color</span>.rand);</p>
  82 <p class="p10"><br></p>
  83 <p class="p11">w.front</p>
  84 <p class="p11">)</p>
  85 <p class="p10"><br></p>
  86 <p class="p10"><br></p>
  87 <p class="p10"><br></p>
  88 <p class="p14">// Stretching the layout view. Slider height fills the View automatically.</p>
  89 <p class="p15"><br></p>
  90 <p class="p11">(</p>
  91 <p class="p11">q = 8;</p>
  92 <p class="p11">w = <span class="s3">Window</span>.new;</p>
  93 <p class="p10"><br></p>
  94 <p class="p11">h = <span class="s3">HLayoutView</span>(w,<span class="s3">Rect</span>(0,0,300,300));</p>
  95 <p class="p11">h.background = <span class="s3">Color</span>.rand;</p>
  96 <p class="p11">h.resize = 5; <span class="s6">// elastic</span></p>
  97 <p class="p10"><br></p>
  98 <p class="p11"><span class="s3">Array</span>.fill(q,{ <span class="s3">arg</span> i;</p>
  99 <p class="p11"><span class="Apple-tab-span">    </span><span class="s3">var</span> s;</p>
 100 <p class="p11"><span class="Apple-tab-span">    </span>s = <span class="s3">Slider</span>(h,<span class="s3">Rect</span>(0,0,20,75)).background_(<span class="s3">Color</span>.grey.alpha_(0.4));</p>
 101 <p class="p11"><span class="Apple-tab-span">    </span>s.value = i / q;</p>
 102 <p class="p11"><span class="Apple-tab-span">    </span>s</p>
 103 <p class="p11">});</p>
 104 <p class="p11"><span class="s3">StaticText</span>(h, <span class="s3">Rect</span>(0,0,105,20)).background_(<span class="s3">Color</span>.rand).string_(<span class="s7">" Some Example\n Text"</span>);</p>
 105 <p class="p11">w.front</p>
 106 <p class="p11">)</p>
 107 <p class="p10"><br></p>
 108 <p class="p14">// Stretching the layout view and the contents.</p>
 109 <p class="p14">// If all the contents are elastic, the widths of the contents are perfectly divided up:</p>
 110 <p class="p14">// in this example, the StaticText is not elastic in order to preserv its width.</p>
 111 <p class="p10"><br></p>
 112 <p class="p11">(</p>
 113 <p class="p11">q = 10;</p>
 114 <p class="p11">w = <span class="s3">Window</span>.new;</p>
 115 <p class="p10"><br></p>
 116 <p class="p11">h = <span class="s3">HLayoutView</span>(w,<span class="s3">Rect</span>(0,0,300,300));</p>
 117 <p class="p11">h.resize = 5; <span class="s6">// elastic</span></p>
 118 <p class="p11">h.background = <span class="s3">Color</span>.rand;</p>
 119 <p class="p10"><br></p>
 120 <p class="p11"><span class="s3">Array</span>.fill(q,{ <span class="s3">arg</span> i;</p>
 121 <p class="p11"><span class="Apple-tab-span">    </span><span class="s3">var</span> s;</p>
 122 <p class="p11"><span class="Apple-tab-span">    </span>s = <span class="s3">Slider</span>(h,<span class="s3">Rect</span>(0,0,20,75));</p>
 123 <p class="p11"><span class="Apple-tab-span">    </span>s.resize = 5; <span class="s6">// elastic</span></p>
 124 <p class="p11"><span class="Apple-tab-span">    </span>s.value = i / q;</p>
 125 <p class="p11"><span class="Apple-tab-span">    </span>s</p>
 126 <p class="p11">});</p>
 127 <p class="p11"><span class="s3">StaticText</span>(h, <span class="s3">Rect</span>(0,0,105,20)).background_(<span class="s3">Color</span>.rand).string_(<span class="s7">" Some Example\n Text"</span>);</p>
 128 <p class="p10"><br></p>
 129 <p class="p11">w.front</p>
 130 <p class="p11">)</p>
 131 <p class="p10"><br></p>
 132 <p class="p10"><br></p>
 133 <p class="p14">// set minWidth on contents</p>
 134 <p class="p14">// beware that if the layout view width is smaller than the combined width of all the contents,</p>
 135 <p class="p14">// things might disappear when you try to handle them with the mouse.</p>
 136 <p class="p10"><br></p>
 137 <p class="p11">(</p>
 138 <p class="p11">q = 5;</p>
 139 <p class="p11">w = <span class="s3">Window</span>.new;</p>
 140 <p class="p10"><br></p>
 141 <p class="p11">h = <span class="s3">HLayoutView</span>(w,<span class="s3">Rect</span>(0,0,300,300));</p>
 142 <p class="p11">h.background = <span class="s3">Color</span>.rand;</p>
 143 <p class="p11">h.resize = 5; <span class="s6">// elastic</span></p>
 144 <p class="p10"><br></p>
 145 <p class="p11"><span class="s3">Array</span>.fill(q,{ <span class="s3">arg</span> i;</p>
 146 <p class="p11"><span class="Apple-tab-span">    </span><span class="s3">var</span> s;</p>
 147 <p class="p11"><span class="Apple-tab-span">    </span>s = <span class="s3">Slider</span>(h,<span class="s3">Rect</span>(0,0,20,75));</p>
 148 <p class="p11"><span class="Apple-tab-span">    </span>s.value = i / 5;</p>
 149 <p class="p11"><span class="Apple-tab-span">    </span>if(i &lt; 2,{</p>
 150 <p class="p11"><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span>s.resize = 5; <span class="s6">// some elastic</span></p>
 151 <p class="p11"><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span>s.setProperty(<span class="s8">\minWidth</span>,20);</p>
 152 <p class="p11"><span class="Apple-tab-span">    </span>},{</p>
 153 <p class="p14"><span class="s2"><span class="Apple-tab-span">   </span><span class="Apple-tab-span">    </span>s.resize = 1; </span>// some not elastic</p>
 154 <p class="p11"><span class="Apple-tab-span">    </span>});</p>
 155 <p class="p11"><span class="Apple-tab-span">    </span>s</p>
 156 <p class="p11">});</p>
 157 <p class="p11"><span class="s3">StaticText</span>(h, <span class="s3">Rect</span>(0,0,105,20)).background_(<span class="s3">Color</span>.rand).string_(<span class="s7">" Some Example\n Text"</span>);</p>
 158 <p class="p10"><br></p>
 159 <p class="p11">w.front</p>
 160 <p class="p11">)</p>
 161 <p class="p10"><br></p>
 162 <p class="p11">(</p>
 163 <p class="p11">q = 5;</p>
 164 <p class="p11">w = <span class="s3">Window</span>.new;</p>
 165 <p class="p10"><br></p>
 166 <p class="p11">h = <span class="s3">HLayoutView</span>(w,<span class="s3">Rect</span>(0,0,300,300));</p>
 167 <p class="p11">h.resize = 5; <span class="s6">// elastic</span></p>
 168 <p class="p11">h.background = <span class="s3">Color</span>.rand;</p>
 169 <p class="p11"><span class="s3">Array</span>.fill(q,{ <span class="s3">arg</span> i;</p>
 170 <p class="p11"><span class="Apple-tab-span">    </span><span class="s3">var</span> s;</p>
 171 <p class="p11"><span class="Apple-tab-span">    </span>s = <span class="s3">Slider</span>(h,<span class="s3">Rect</span>(0,0,20,75));</p>
 172 <p class="p10"><span class="Apple-tab-span">    </span></p>
 173 <p class="p11"><span class="Apple-tab-span">    </span>s.value = i / 5;</p>
 174 <p class="p11"><span class="Apple-tab-span">    </span>s.resize = 5;</p>
 175 <p class="p11"><span class="Apple-tab-span">    </span>s.setProperty(<span class="s8">\minWidth</span>,20);</p>
 176 <p class="p11"><span class="Apple-tab-span">    </span>s.setProperty(<span class="s8">\maxWidth</span>,40);</p>
 177 <p class="p11"><span class="Apple-tab-span">    </span>s</p>
 178 <p class="p11">});</p>
 179 <p class="p10"><br></p>
 180 <p class="p11">w.front</p>
 181 <p class="p11">)</p>
 182 <p class="p10"><br></p>
 183 <p class="p10"><br></p>
 184 <p class="p14">// Text flows</p>
 185 <p class="p10"><br></p>
 186 <p class="p11">(</p>
 187 <p class="p11">q = 5;</p>
 188 <p class="p11">w = <span class="s3">Window</span>.new;</p>
 189 <p class="p10"><br></p>
 190 <p class="p11">h = <span class="s3">HLayoutView</span>(w,<span class="s3">Rect</span>(0,0,300,300));</p>
 191 <p class="p11">h.resize = 5; <span class="s6">// elastic</span></p>
 192 <p class="p10"><br></p>
 193 <p class="p11"><span class="s3">Array</span>.fill(q,{ <span class="s3">arg</span> i;</p>
 194 <p class="p11"><span class="Apple-tab-span">    </span><span class="s3">var</span> s;</p>
 195 <p class="p16"><span class="s2"><span class="Apple-tab-span">   </span>s = <span class="Apple-tab-span">        </span></span><span class="s3">StaticText</span><span class="s2">(h,120@20).string_(</span>"Some short text which wraps around"<span class="s2">);</span></p>
 196 <p class="p10"><br></p>
 197 <p class="p11"><span class="Apple-tab-span">    </span>s.resize = 5;</p>
 198 <p class="p11"><span class="Apple-tab-span">    </span>s.setProperty(<span class="s8">\minWidth</span>,10);</p>
 199 <p class="p11"><span class="Apple-tab-span">    </span>s.setProperty(<span class="s8">\maxWidth</span>,120);</p>
 200 <p class="p10"><br></p>
 201 <p class="p14"><span class="s2"><span class="Apple-tab-span">   </span></span>// not working</p>
 202 <p class="p11"><span class="Apple-tab-span">    </span>s.setProperty(<span class="s8">\maxHeight</span>,10);</p>
 203 <p class="p11"><span class="Apple-tab-span">    </span>s.setProperty(<span class="s8">\minHeight</span>,10);</p>
 204 <p class="p10"><br></p>
 205 <p class="p11"><span class="Apple-tab-span">    </span>s.background = <span class="s3">Color</span>.white;</p>
 206 <p class="p11"><span class="Apple-tab-span">    </span>s</p>
 207 <p class="p11">});</p>
 208 <p class="p10"><br></p>
 209 <p class="p11">w.front</p>
 210 <p class="p11">)</p>
 211 <p class="p10"><br></p>
 212 <p class="p10"><br></p>
 213 <p class="p14">// Spacing</p>
 214 <p class="p10"><br></p>
 215 <p class="p11">(</p>
 216 <p class="p11">q = 10;</p>
 217 <p class="p11">w = <span class="s3">Window</span>.new;</p>
 218 <p class="p10"><br></p>
 219 <p class="p11">h = <span class="s3">HLayoutView</span>(w,<span class="s3">Rect</span>(0,0,300,300));</p>
 220 <p class="p11">h.setProperty(<span class="s8">\spacing</span>,0);</p>
 221 <p class="p10"><br></p>
 222 <p class="p11"><span class="s3">Array</span>.fill(q,{</p>
 223 <p class="p11"><span class="Apple-tab-span">    </span><span class="s3">Slider</span>(h,<span class="s3">Rect</span>(0,0,20,75))</p>
 224 <p class="p11">});</p>
 225 <p class="p10"><br></p>
 226 <p class="p11">w.front</p>
 227 <p class="p11">)</p>
 228 <p class="p10"><br></p>
 229 </body>
 230 </html>