Help/GUI/FlowView.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: 18.0px Helvetica}
  11 p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}
  12 p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco; min-height: 12.0px}
  13 p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; 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 0.0px; font: 9.0px Monaco}
  16 p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco; color: #762810; min-height: 12.0px}
  17 p.p8 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco; color: #0018a6; min-height: 12.0px}
  18 p.p9 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco; color: #9d200d}
  19 p.p10 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco; color: #762810}
  20 p.p11 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco; color: #0018a6}
  21 p.p12 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco; color: #87240e}
  22 p.p13 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco; color: #4d4d4d}
  23 p.p14 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco; color: #6a2a14}
  24 span.s1 {color: #0015ab}
  25 span.s2 {color: #0018a6}
  26 span.s3 {color: #87240e}
  27 span.s4 {color: #0012af}
  28 span.s5 {color: #9d200d}
  29 span.s6 {color: #000000}
  30 span.s7 {color: #4d4d4d}
  31 span.s8 {color: #001ea1}
  32 span.Apple-tab-span {white-space:pre}
  33 </style>
  34 </head>
  35 <body>
  36 <p class="p1"><b>FlowView</b></p>
  37 <p class="p2">superclass: SCViewHolder</p>
  38 <p class="p3"><br></p>
  39 <p class="p2">an SCCompositeView with a FlowLayout as decorator</p>
  40 <p class="p4"><br></p>
  41 <p class="p5"><b>FlowView.new(parent,bounds)</b></p>
  42 <p class="p4"><br></p>
  43 <p class="p4"><br></p>
  44 <p class="p2">In the simplest respect this is a lazy contraction of this :</p>
  45 <p class="p4"><br></p>
  46 <p class="p6">w = <span class="s1">GUI</span>.window.new;</p>
  47 <p class="p6">w.view.decorator = <span class="s1">FlowLayout</span>.new( w.bounds );</p>
  48 <p class="p6">w.front;</p>
  49 <p class="p4"><br></p>
  50 <p class="p2">FlowView add some features to this setup.<span class="Apple-converted-space"> </span></p>
  51 <p class="p4"><br></p>
  52 <p class="p6">(</p>
  53 <p class="p6">f = <span class="s2">FlowView</span>.new;</p>
  54 <p class="p3"><br></p>
  55 <p class="p6"><span class="s2">GUI</span>.slider.new(f,<span class="s2">Rect</span>(0,0,100,100));</p>
  56 <p class="p6"><span class="s2">GUI</span>.slider.new(f,<span class="s2">Rect</span>(0,0,100,100));</p>
  57 <p class="p3"><br></p>
  58 <p class="p6">// the StartRow will be fixed at this point in the children array</p>
  59 <p class="p6">f.startRow;</p>
  60 <p class="p7"><br></p>
  61 <p class="p6"><span class="s2">GUI</span>.slider.new(f,<span class="s2">Rect</span>(0,0,100,100));</p>
  62 <p class="p6">f.startRow;</p>
  63 <p class="p8"><br></p>
  64 <p class="p6"><span class="s2">GUI</span>.slider.new(f,<span class="s2">Rect</span>(0,0,100,100));</p>
  65 <p class="p3"><br></p>
  66 <p class="p6">)</p>
  67 <p class="p3"><br></p>
  68 <p class="p3"><br></p>
  69 <p class="p2"><b>indentedRemaining</b></p>
  70 <p class="p2">the maximum space that is left, starting at the current cursor position</p>
  71 <p class="p6">(</p>
  72 <p class="p6">f = <span class="s1">FlowView</span>.new;</p>
  73 <p class="p3"><br></p>
  74 <p class="p6"><span class="s1">GUI</span>.slider.new(f,<span class="s1">Rect</span>(0,0,100,100));</p>
  75 <p class="p6"><span class="s1">GUI</span>.slider.new(f,<span class="s1">Rect</span>(0,0,100,100));</p>
  76 <p class="p3"><br></p>
  77 <p class="p6"><span class="s1">GUI</span>.slider.new(f, f.indentedRemaining)</p>
  78 <p class="p6"><span class="Apple-tab-span">     </span>.background = <span class="s1">Color</span>.blue(alpha:0.2)</p>
  79 <p class="p3"><br></p>
  80 <p class="p6">)</p>
  81 <p class="p6">(</p>
  82 <p class="p3"><br></p>
  83 <p class="p6">f = <span class="s1">FlowView</span>.new;</p>
  84 <p class="p3"><br></p>
  85 <p class="p6"><span class="s1">GUI</span>.slider.new(f,<span class="s1">Rect</span>(0,0,100,100));</p>
  86 <p class="p6"><span class="s1">GUI</span>.slider.new(f,<span class="s1">Rect</span>(0,0,100,100));</p>
  87 <p class="p3"><br></p>
  88 <p class="p6">f.startRow; <span class="s3">// new row</span></p>
  89 <p class="p3"><br></p>
  90 <p class="p6"><span class="s1">GUI</span>.slider.new(f, f.indentedRemaining)</p>
  91 <p class="p6"><span class="Apple-tab-span">     </span>.background = <span class="s1">Color</span>.blue(alpha:0.2)</p>
  92 <p class="p3"><br></p>
  93 <p class="p6">)</p>
  94 <p class="p6">(</p>
  95 <p class="p3"><br></p>
  96 <p class="p6">f = <span class="s1">FlowView</span>.new;</p>
  97 <p class="p3"><br></p>
  98 <p class="p6"><span class="s1">GUI</span>.slider.new(f,<span class="s1">Rect</span>(0,0,100,100));</p>
  99 <p class="p6"><span class="s1">GUI</span>.slider.new(f,<span class="s1">Rect</span>(0,0,100,100));</p>
 100 <p class="p6"><span class="s1">GUI</span>.slider.new(f,<span class="s1">Rect</span>(0,0,100,100));</p>
 101 <p class="p6"><span class="s1">GUI</span>.slider.new(f,<span class="s1">Rect</span>(0,0,100,100));</p>
 102 <p class="p3"><br></p>
 103 <p class="p6"><span class="s1">GUI</span>.slider.new(f, f.indentedRemaining)</p>
 104 <p class="p6"><span class="Apple-tab-span">     </span>.background = <span class="s1">Color</span>.blue(alpha:0.2)</p>
 105 <p class="p6">)</p>
 106 <p class="p3"><br></p>
 107 <p class="p2"><b>used</b></p>
 108 <p class="p3"><br></p>
 109 <p class="p2">the area used so far, rounded up to the nearest rectangle plus margin</p>
 110 <p class="p6">(</p>
 111 <p class="p6">w = <span class="s4">GUI</span>.window.new;</p>
 112 <p class="p6">w.front;</p>
 113 <p class="p6">f = <span class="s4">FlowView</span>.new(w);</p>
 114 <p class="p6">f.background = <span class="s4">Color</span>.blue(alpha:0.1);</p>
 115 <p class="p3"><br></p>
 116 <p class="p6"><span class="s4">GUI</span>.slider.new(f,<span class="s4">Rect</span>(0,0,100,100));</p>
 117 <p class="p6"><span class="s4">GUI</span>.slider.new(f,<span class="s4">Rect</span>(0,0,100,100));</p>
 118 <p class="p3"><br></p>
 119 <p class="p6">f.used.postln;</p>
 120 <p class="p3"><br></p>
 121 <p class="p9">// overlaid</p>
 122 <p class="p6"><span class="s4">GUI</span>.compositeView.new(w,f.used)</p>
 123 <p class="p6"><span class="Apple-tab-span">     </span>.background = <span class="s4">Color</span>.red(alpha: 0.1);</p>
 124 <p class="p3"><br></p>
 125 <p class="p6">)</p>
 126 <p class="p6">(</p>
 127 <p class="p6">w = <span class="s4">GUI</span>.window.new;</p>
 128 <p class="p6">w.front;</p>
 129 <p class="p6">f = <span class="s4">FlowView</span>.new(w);</p>
 130 <p class="p6">f.background = <span class="s4">Color</span>.blue(alpha:0.1);</p>
 131 <p class="p3"><br></p>
 132 <p class="p6"><span class="s4">GUI</span>.slider.new(f,<span class="s4">Rect</span>(0,0,100,100));</p>
 133 <p class="p6"><span class="s4">GUI</span>.slider.new(f,<span class="s4">Rect</span>(0,0,100,100));</p>
 134 <p class="p3"><br></p>
 135 <p class="p6">f.startRow; <span class="s5">// new row</span></p>
 136 <p class="p3"><br></p>
 137 <p class="p6"><span class="s4">GUI</span>.slider.new(f,<span class="s4">Rect</span>(0,0,100,100));</p>
 138 <p class="p3"><br></p>
 139 <p class="p6">f.used.postln;</p>
 140 <p class="p3"><br></p>
 141 <p class="p9">// overlaid</p>
 142 <p class="p6"><span class="s4">GUI</span>.compositeView.new(w,f.used)</p>
 143 <p class="p6"><span class="Apple-tab-span">     </span>.background = <span class="s4">Color</span>.red(alpha: 0.1);</p>
 144 <p class="p3"><br></p>
 145 <p class="p6">)</p>
 146 <p class="p3"><br></p>
 147 <p class="p2"><b>flow</b></p>
 148 <p class="p2">insert a sub flow view into the current view</p>
 149 <p class="p6">(</p>
 150 <p class="p6">f = FlowView.new;</p>
 151 <p class="p3"><br></p>
 152 <p class="p6"><span class="s1">GUI</span>.slider.new(f,<span class="s1">Rect</span>(0,0,100,100));</p>
 153 <p class="p3"><br></p>
 154 <p class="p10">// flow within a flow</p>
 155 <p class="p6">g = f.flow({ <span class="s2">arg</span> g;</p>
 156 <p class="p11"><span class="s6"><span class="Apple-tab-span">   </span></span>ActionButton<span class="s6">(g,</span><span class="s7">"a"</span><span class="s6">);</span></p>
 157 <p class="p6"><span class="Apple-tab-span">     </span><span class="s2">GUI</span>.slider.new(g,<span class="s2">Rect</span>(0,0,100,100)).background_(<span class="s2">Color</span>.rand);</p>
 158 <p class="p6">}).background_(<span class="s2">Color</span>.black);</p>
 159 <p class="p10"><span class="s6"><span class="Apple-tab-span">   </span></span>// shrinks to fit the contents afterwards</p>
 160 <p class="p6">)</p>
 161 <p class="p2"><b>comp</b></p>
 162 <p class="p3"><br></p>
 163 <p class="p2">insert a sub composite view into the current view</p>
 164 <p class="p6">(</p>
 165 <p class="p6">f = <span class="s1">FlowView</span>.new;</p>
 166 <p class="p3"><br></p>
 167 <p class="p6"><span class="s1">GUI</span>.slider.new(f,<span class="s1">Rect</span>(0,0,100,100));</p>
 168 <p class="p3"><br></p>
 169 <p class="p12">// sc composite view</p>
 170 <p class="p6">g = f.comp({ <span class="s1">arg</span> g;</p>
 171 <p class="p6"><span class="Apple-tab-span">     </span><span class="s1">GUI</span>.slider.new(g,<span class="s1">Rect</span>(50,30,50,100)).background_(<span class="s1">Color</span>.rand);</p>
 172 <p class="p6"><span class="Apple-tab-span">     </span><span class="s1">GUI</span>.slider.new(g,<span class="s1">Rect</span>(120,30,50,100)).background_(<span class="s1">Color</span>.rand);</p>
 173 <p class="p6">},<span class="s1">Rect</span>(0,0,200,200)).background_(<span class="s1">Color</span>.black);</p>
 174 <p class="p3"><br></p>
 175 <p class="p6">f.startRow;</p>
 176 <p class="p13">"Back to flowing"<span class="s6">.gui(f);</span></p>
 177 <p class="p3"><br></p>
 178 <p class="p6">)</p>
 179 <p class="p3"><br></p>
 180 <p class="p3"><br></p>
 181 <p class="p3"><br></p>
 182 <p class="p3"><br></p>
 183 <p class="p3"><br></p>
 184 <p class="p3"><br></p>
 185 <p class="p6">// note: some of the following examples use ActionButton from the crucialib</p>
 186 <p class="p3"><br></p>
 187 <p class="p14">// tests</p>
 188 <p class="p6">(</p>
 189 <p class="p6"><span class="s8">FlowView</span>.new.flow({ <span class="s8">arg</span> f;</p>
 190 <p class="p14">//<span class="Apple-tab-span">  </span>b = ActionButton(f,"hi",minWidth:140)</p>
 191 <p class="p6">}).background_(<span class="s8">Color</span>.grey)</p>
 192 <p class="p3"><br></p>
 193 <p class="p6">)</p>
 194 <p class="p6">(</p>
 195 <p class="p6"><span class="s8">FlowView</span>.new.flow({ <span class="s8">arg</span> f;</p>
 196 <p class="p6"><span class="Apple-tab-span">     </span>b = <span class="s8">ActionButton</span>(f,<span class="s7">"hi"</span>,minWidth:140);</p>
 197 <p class="p6">}).background_(<span class="s8">Color</span>.grey)</p>
 198 <p class="p3"><br></p>
 199 <p class="p6">)</p>
 200 <p class="p6">(</p>
 201 <p class="p6"><span class="s2">FlowView</span>.new.flow({ <span class="s2">arg</span> f;</p>
 202 <p class="p6"><span class="Apple-tab-span">     </span>b = <span class="s2">GUI</span>.slider.new(f,<span class="s2">Rect</span>(0,0,100,100));</p>
 203 <p class="p6">}).background_(<span class="s2">Color</span>.grey)</p>
 204 <p class="p3"><br></p>
 205 <p class="p6">)</p>
 206 <p class="p6">(</p>
 207 <p class="p6"><span class="s8">FlowView</span>.new.flow({ <span class="s8">arg</span> f;</p>
 208 <p class="p6"><span class="Apple-tab-span">     </span>g = f;</p>
 209 <p class="p6"><span class="Apple-tab-span">     </span>f.flow({ <span class="s8">arg</span> f;</p>
 210 <p class="p14"><span class="s6"><span class="Apple-tab-span">   </span><span class="Apple-tab-span">    </span></span>//b = ActionButton(f,"hi",minWidth:140)</p>
 211 <p class="p6"><span class="Apple-tab-span">     </span>}).background_(<span class="s8">Color</span>.white)</p>
 212 <p class="p6">}).background_(<span class="s8">Color</span>.grey)</p>
 213 <p class="p3"><br></p>
 214 <p class="p6">)</p>
 215 <p class="p6">(</p>
 216 <p class="p3"><br></p>
 217 <p class="p6"><span class="s8">FlowView</span>.new.flow({ <span class="s8">arg</span> f;</p>
 218 <p class="p6"><span class="Apple-tab-span">     </span>g = f;</p>
 219 <p class="p6"><span class="Apple-tab-span">     </span>f.flow({ <span class="s8">arg</span> f;</p>
 220 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>b = <span class="s8">ActionButton</span>(f,<span class="s7">"hi"</span>,minWidth:140)</p>
 221 <p class="p6"><span class="Apple-tab-span">     </span>}).background_(<span class="s8">Color</span>.white)</p>
 222 <p class="p6">}).background_(<span class="s8">Color</span>.grey)</p>
 223 <p class="p3"><br></p>
 224 <p class="p6">)</p>
 225 <p class="p3"><br></p>
 226 <p class="p6">(</p>
 227 <p class="p3"><br></p>
 228 <p class="p6"><span class="s8">FlowView</span>.new.flow({ <span class="s8">arg</span> f;</p>
 229 <p class="p6"><span class="Apple-tab-span">     </span>g = f;</p>
 230 <p class="p6"><span class="Apple-tab-span">     </span>f.flow({ <span class="s8">arg</span> f;</p>
 231 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>f.flow({ <span class="s8">arg</span> f;</p>
 232 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span><span class="s8">ActionButton</span>(f,<span class="s7">"hello"</span>,minWidth:100);</p>
 233 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>}).background_(<span class="s8">Color</span>.blue);</p>
 234 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>b = <span class="s8">ActionButton</span>(f,<span class="s7">"hi"</span>,minWidth:140);</p>
 235 <p class="p6"><span class="Apple-tab-span">     </span>}).background_(<span class="s8">Color</span>.white)</p>
 236 <p class="p6">}).background_(<span class="s8">Color</span>.grey)</p>
 237 <p class="p3"><br></p>
 238 <p class="p3"><br></p>
 239 <p class="p6">)</p>
 240 <p class="p3"><br></p>
 241 <p class="p6">(</p>
 242 <p class="p3"><br></p>
 243 <p class="p6"><span class="s8">FlowView</span>.new.flow({ <span class="s8">arg</span> f;</p>
 244 <p class="p6"><span class="Apple-tab-span">     </span>g = f;</p>
 245 <p class="p6"><span class="Apple-tab-span">     </span>f.flow({ <span class="s8">arg</span> f;</p>
 246 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>f.flow({ <span class="s8">arg</span> f;</p>
 247 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span><span class="s8">ActionButton</span>(f,<span class="s7">"hello"</span>,minWidth:100);</p>
 248 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>}).background_(<span class="s8">Color</span>.blue);</p>
 249 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>b = <span class="s8">ActionButton</span>(f,<span class="s7">"hi"</span>,minWidth:140);</p>
 250 <p class="p6"><span class="Apple-tab-span">     </span>}).background_(<span class="s8">Color</span>.white)</p>
 251 <p class="p6">}).background_(<span class="s8">Color</span>.grey)</p>
 252 <p class="p3"><br></p>
 253 <p class="p3"><br></p>
 254 <p class="p6">)</p>
 255 <p class="p6">(</p>
 256 <p class="p3"><br></p>
 257 <p class="p6"><span class="s8">FlowView</span>.new.flow({ <span class="s8">arg</span> f;</p>
 258 <p class="p6"><span class="Apple-tab-span">     </span>g = f;</p>
 259 <p class="p6"><span class="Apple-tab-span">     </span>f.flow({ <span class="s8">arg</span> f;</p>
 260 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>b = <span class="s8">ActionButton</span>(f,<span class="s7">"hi"</span>,minWidth:140);</p>
 261 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>f.flow({ <span class="s8">arg</span> f;</p>
 262 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span><span class="s8">ActionButton</span>(f,<span class="s7">"hello"</span>,minWidth:100);</p>
 263 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>}).background_(<span class="s8">Color</span>.blue);</p>
 264 <p class="p6"><span class="Apple-tab-span">     </span>}).background_(<span class="s8">Color</span>.white)</p>
 265 <p class="p6">}).background_(<span class="s8">Color</span>.grey)</p>
 266 <p class="p3"><br></p>
 267 <p class="p6">)</p>
 268 <p class="p3"><br></p>
 269 <p class="p6">(</p>
 270 <p class="p3"><br></p>
 271 <p class="p6"><span class="s2">FlowView</span>.new.flow({ <span class="s2">arg</span> f;</p>
 272 <p class="p6"><span class="Apple-tab-span">     </span>g = f;</p>
 273 <p class="p6"><span class="Apple-tab-span">     </span>f.flow({ <span class="s2">arg</span> f;</p>
 274 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>b = <span class="s2">GUI</span>.slider.new(f,<span class="s2">Rect</span>(0,0,140,20));</p>
 275 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>f.flow({ <span class="s2">arg</span> f;</p>
 276 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span><span class="s2">ActionButton</span>(f,<span class="s7">"hello"</span>,minWidth:100);</p>
 277 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>}).background_(<span class="s2">Color</span>.blue);</p>
 278 <p class="p6"><span class="Apple-tab-span">     </span>}).background_(<span class="s2">Color</span>.white)</p>
 279 <p class="p6">}).background_(<span class="s2">Color</span>.grey)</p>
 280 <p class="p3"><br></p>
 281 <p class="p3"><br></p>
 282 <p class="p6">)</p>
 283 <p class="p3"><br></p>
 284 <p class="p3"><br></p>
 285 <p class="p6">(</p>
 286 <p class="p3"><br></p>
 287 <p class="p6"><span class="s2">FlowView</span>.new.flow({ <span class="s2">arg</span> f;</p>
 288 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>b = <span class="s2">GUI</span>.slider.new(f,<span class="s2">Rect</span>(0,0,140,20));</p>
 289 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>f.flow({ <span class="s2">arg</span> f;</p>
 290 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span><span class="s2">ActionButton</span>(f,<span class="s7">"hello"</span>,minWidth:100);</p>
 291 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>}).background_(<span class="s2">Color</span>.blue);</p>
 292 <p class="p6">}).background_(<span class="s2">Color</span>.grey)</p>
 293 <p class="p3"><br></p>
 294 <p class="p3"><br></p>
 295 <p class="p6">)</p>
 296 <p class="p3"><br></p>
 297 <p class="p3"><br></p>
 298 <p class="p6">(</p>
 299 <p class="p3"><br></p>
 300 <p class="p6">a = <span class="s8">FlowView</span>.new.flow({ <span class="s8">arg</span> f;</p>
 301 <p class="p6"><span class="Apple-tab-span">     </span>g = f;</p>
 302 <p class="p6"><span class="Apple-tab-span">     </span>w = f.flow({ <span class="s8">arg</span> f;</p>
 303 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>b = f.flow({ <span class="s8">arg</span> f;</p>
 304 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span><span class="s8">ActionButton</span>(f,<span class="s7">"hello"</span>,minWidth:100);</p>
 305 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>}).background_(<span class="s8">Color</span>.blue);</p>
 306 <p class="p6"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span><span class="s8">ActionButton</span>(f,<span class="s7">"hi"</span>,minWidth:140);</p>
 307 <p class="p6"><span class="Apple-tab-span">     </span>}).background_(<span class="s8">Color</span>.white)</p>
 308 <p class="p6">}).background_(<span class="s8">Color</span>.grey)</p>
 309 <p class="p3"><br></p>
 310 <p class="p6">)</p>
 311 <p class="p3"><br></p>
 312 <p class="p6">b.remove(<span class="s8">true</span>);</p>
 313 <p class="p6">w.resizeToFit(<span class="s8">true</span>,<span class="s8">true</span>);</p>
 314 <p class="p3"><br></p>
 315 <p class="p3"><br></p>
 316 <p class="p12">// add something big back in</p>
 317 <p class="p6"><span class="s1">ActionButton</span>(w,<span class="s7">"i'm back"</span>,minWidth: 200);</p>
 318 <p class="p6">w.resizeToFit(<span class="s1">true</span>,<span class="s1">true</span>);</p>
 319 <p class="p12">// slightly wrong size at the bottom</p>
 320 <p class="p3"><br></p>
 321 </body>
 322 </html>