Help/GUI/Cocoa-GUI/SCScrollView.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.43">
   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: 9.0px Monaco; min-height: 12.0px}
  13 p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #46539b; 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 57.0px; text-indent: -57.0px; font: 14.0px Helvetica}
  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 0.0px; font: 9.0px Monaco; color: #a41c14}
  22 span.s1 {font: 18.0px Helvetica}
  23 span.s2 {color: #001ee6}
  24 span.s3 {color: #0c2eee}
  25 span.s4 {text-decoration: underline ; color: #334abd}
  26 span.s5 {color: #4c5aa7}
  27 span.s6 {color: #0018b8}
  28 span.s7 {color: #000000}
  29 span.s8 {color: #a41c14}
  30 span.s9 {color: #606060}
  31 span.Apple-tab-span {white-space:pre}
  32 </style>
  33 </head>
  34 <body>
  35 <p class="p1"><span class="s1"><b>SCScrollView<span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span></b></span><b>container view with scrollers</b><span class="s1"><b><span class="Apple-tab-span"> </span></b></span></p>
  36 <p class="p2"><br></p>
  37 <p class="p1"><b>Inherits from: </b><a href="../../Core/Object.html"><span class="s2"><b>Object</b></span></a><b> : </b><a href="SCView.html"><span class="s2"><b>SCView</b></span></a><b> : </b><a href="SCContainerView.html"><span class="s3"><b>SCContainerView</b></span></a><b> : </b><a href="SCCompositeView.html"><span class="s2"><b>SCCompositeView</b></span></a><b> : </b><a href="SCTopView.html"><span class="s3"><b>SCTopView</b></span></a><b> : </b><a href="SCScrollTopView.html"><span class="s2"><b>SCScrollTopView</b></span></a></p>
  38 <p class="p3"><br></p>
  39 <p class="p1">A container view which allows the user to scroll across content which exceeds the view's visible bounds.</p>
  40 <p class="p2"><br></p>
  41 <p class="p1"><b>See also:</b> <a href="SCWindow.html"><span class="s4">SCWindow</span></a> <a href="../GUI-Tools/GUI.html"><span class="s4">GUI</span></a></p>
  42 <p class="p4"><br></p>
  43 <p class="p5"><b>Some Important Issues Concerning SCScrollView</b></p>
  44 <p class="p2"><br></p>
  45 <p class="p1">SCScrollView inherits most of it's important methods from it's superclass, <a href="SCScrollTopView.html"><span class="s5">SCScrollTopView</span></a>. Please see its helpfile for more information.</p>
  46 <p class="p2"><br></p>
  47 <p class="p5"><b>Setting the Internal Bounds</b></p>
  48 <p class="p2"><br></p>
  49 <p class="p1">The size of the contained 'canvas' is determined by the bounds of the views which it encloses. Resize settings are thus ignored for contained views. To set it to a particular size, you can add a <a href="SCCompositeView.html"><span class="s5">SCCompositeView</span></a> or other container view, but there is no direct setter. One should not use a decorator such as FlowLayout directly on a SCScrollView, only on a container view within it.</p>
  50 <p class="p2"><br></p>
  51 <p class="p5"><b>Action Functions with Scrolling SCViews</b></p>
  52 <p class="p2"><br></p>
  53 <p class="p1">A SCScrollTopView or SCScrollView's action function is evaluated when a user scrolls the view or sets the visibleOrigin. See the example below.</p>
  54 <p class="p2"><br></p>
  55 <p class="p5"><b>Creation</b></p>
  56 <p class="p6"><br></p>
  57 <p class="p7"><b><span class="Apple-tab-span">  </span>*new(parent, bounds)</b></p>
  58 <p class="p8"><b><span class="Apple-tab-span">  </span></b></p>
  59 <p class="p7"><b><span class="Apple-tab-span">  </span><span class="Apple-tab-span">    </span></b>Returns a new SCScrollView. (Inheritted from <a href="SCView.html"><span class="s5">SCView</span></a>).</p>
  60 <p class="p9"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span><b>parent </b>- A <a href="SCWindow.html"><span class="s5">SCWindow</span></a>, or a container view such as <a href="SCCompositeView.html"><span class="s5">SCCompositeView</span></a>.</p>
  61 <p class="p9"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span><b>bounds</b> - A <a href="../../Geometry/Rect.html"><span class="s5">Rect</span></a>, which specifies the position of this view in its <b>parent</b>.<span class="Apple-tab-span">      </span><span class="Apple-tab-span">    </span></p>
  62 <p class="p8"><br></p>
  63 <p class="p10"><b>Instance Methods</b></p>
  64 <p class="p8"><span class="Apple-tab-span">     </span></p>
  65 <p class="p7"><b><span class="Apple-tab-span">  </span>hasBorder_(bool)</b></p>
  66 <p class="p7"><b><span class="Apple-tab-span">  </span>hasBorder</b></p>
  67 <p class="p8"><b><span class="Apple-tab-span">  </span></b><span class="Apple-tab-span">        </span></p>
  68 <p class="p7"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>These methods get and set a <a href="../../Core/Boolean.html"><span class="s5">Boolean</span></a> indicating whether or not a black border is drawn around the view. This border is drawn within the bounds of the SCScrollView. Thus the bounds do not change when a border is added, but the visible area is slightly reduced.<span class="Apple-tab-span">    </span></p>
  69 <p class="p2"><br></p>
  70 <p class="p10"><b>Examples</b></p>
  71 <p class="p3"><br></p>
  72 <p class="p11">(</p>
  73 <p class="p11">w = <span class="s6">Window</span>.new;</p>
  74 <p class="p3"><br></p>
  75 <p class="p11">b = <span class="s6">ScrollView</span>(w, <span class="s6">Rect</span>(0,0,150,100));</p>
  76 <p class="p11">c = <span class="s6">Slider2D</span>(b, <span class="s6">Rect</span>(0,0,100,100));<span class="Apple-tab-span"> </span></p>
  77 <p class="p11">d = <span class="s6">Slider2D</span>(b, <span class="s6">Rect</span>(100,0,100,100));</p>
  78 <p class="p3"><br></p>
  79 <p class="p11">w.front;</p>
  80 <p class="p11">)</p>
  81 <p class="p3"><br></p>
  82 <p class="p11">w.view.background = <span class="s6">Color</span>.white;</p>
  83 <p class="p3"><br></p>
  84 <p class="p11">b.background = <span class="s6">Color</span>.grey;</p>
  85 <p class="p3"><br></p>
  86 <p class="p12"><span class="s7">d.bounds = </span><span class="s6">Rect</span><span class="s7">(100,0,1000,100); </span>// the 'canvas' grows to accomodate it</p>
  87 <p class="p3"><br></p>
  88 <p class="p12"><span class="s7">b.resize = 5; </span>// the ScrollView resizes, but not its contents</p>
  89 <p class="p3"><br></p>
  90 <p class="p11">b.hasBorder_(<span class="s6">true</span>);</p>
  91 <p class="p3"><br></p>
  92 <p class="p11">b.hasBorder_(<span class="s6">false</span>);</p>
  93 <p class="p3"><br></p>
  94 <p class="p11">b.visibleOrigin;</p>
  95 <p class="p3"><br></p>
  96 <p class="p12"><span class="s7">b.visibleOrigin = </span><span class="s6">Point</span><span class="s7">(2000, 0); </span>// clips to the bounds of its contents</p>
  97 <p class="p3"><br></p>
  98 <p class="p11">b.hasHorizontalScroller_(<span class="s6">false</span>);</p>
  99 <p class="p3"><br></p>
 100 <p class="p11">b.hasVerticalScroller_(<span class="s6">true</span>);</p>
 101 <p class="p3"><br></p>
 102 <p class="p11">b.autohidesScrollers_(<span class="s6">false</span>);</p>
 103 <p class="p3"><br></p>
 104 <p class="p11">w.close;</p>
 105 <p class="p3"><br></p>
 106 <p class="p3"><br></p>
 107 <p class="p12">// Force a 'canvas' size</p>
 108 <p class="p3"><br></p>
 109 <p class="p11">(</p>
 110 <p class="p11">w = <span class="s6">Window</span>.new;</p>
 111 <p class="p3"><br></p>
 112 <p class="p11">b = <span class="s6">ScrollView</span>(w, <span class="s6">Rect</span>(0, 0, 300, 300)).hasBorder_(<span class="s6">true</span>);</p>
 113 <p class="p11">c = <span class="s6">CompositeView</span>(b, <span class="s6">Rect</span>(0, 0, 500, 500)); <span class="s8">// 'canvas' is this big</span></p>
 114 <p class="p12"><span class="s7">c.decorator = </span><span class="s6">FlowLayout</span><span class="s7">(c.bounds); </span>// now we can use a decorator</p>
 115 <p class="p3"><span class="Apple-tab-span">     </span></p>
 116 <p class="p11"><span class="s6">Slider2D</span>(c, <span class="s6">Rect</span>(0, 0, 240, 240));</p>
 117 <p class="p11"><span class="s6">Slider2D</span>(c, <span class="s6">Rect</span>(0, 0, 240, 240));</p>
 118 <p class="p11"><span class="s6">Slider2D</span>(c, <span class="s6">Rect</span>(0, 0, 240, 240));</p>
 119 <p class="p3"><br></p>
 120 <p class="p11">c.decorator.nextLine;</p>
 121 <p class="p11">w.front;</p>
 122 <p class="p11">)</p>
 123 <p class="p3"><br></p>
 124 <p class="p3"><br></p>
 125 <p class="p12">// "Rulers", using an action function</p>
 126 <p class="p3"><br></p>
 127 <p class="p11">(</p>
 128 <p class="p11"><span class="s6">var</span> drawFunc;</p>
 129 <p class="p11">w = <span class="s6">Window</span>.new;</p>
 130 <p class="p3"><br></p>
 131 <p class="p11">a = <span class="s6">ScrollView</span>(w, <span class="s6">Rect</span>(40, 40, 300, 300));</p>
 132 <p class="p11">b = <span class="s6">ScrollView</span>(w, <span class="s6">Rect</span>(0, 40, 40, 300)).hasHorizontalScroller_(<span class="s6">false</span>).hasVerticalScroller_(<span class="s6">false</span>)</p>
 133 <p class="p11"><span class="Apple-tab-span">    </span>.autoScrolls_(<span class="s6">false</span>);</p>
 134 <p class="p11">c = <span class="s6">ScrollView</span>(w, <span class="s6">Rect</span>(40, 0, 300, 40)).hasHorizontalScroller_(<span class="s6">false</span>).hasVerticalScroller_(<span class="s6">false</span>)</p>
 135 <p class="p11"><span class="Apple-tab-span">    </span>.autoScrolls_(<span class="s6">false</span>);</p>
 136 <p class="p11">b.background = <span class="s6">Color</span>.grey;</p>
 137 <p class="p11">c.background = <span class="s6">Color</span>.grey;</p>
 138 <p class="p3"><br></p>
 139 <p class="p11">d = <span class="s6">UserView</span>(a, <span class="s6">Rect</span>(0, 0, 620, 620));</p>
 140 <p class="p11">e = <span class="s6">UserView</span>(b, <span class="s6">Rect</span>(0, 0, 40, 630));</p>
 141 <p class="p11">f = <span class="s6">UserView</span>(c, <span class="s6">Rect</span>(0, 0, 630, 40));</p>
 142 <p class="p3"><br></p>
 143 <p class="p11">a.action = { <span class="s6">var</span> origin;</p>
 144 <p class="p11"><span class="Apple-tab-span">    </span>origin = a.visibleOrigin;</p>
 145 <p class="p11"><span class="Apple-tab-span">    </span>b.visibleOrigin = 0@(origin.y);</p>
 146 <p class="p11"><span class="Apple-tab-span">    </span>c.visibleOrigin = (origin.x)@0;</p>
 147 <p class="p11">};</p>
 148 <p class="p3"><br></p>
 149 <p class="p11">drawFunc = {</p>
 150 <p class="p11"><span class="Apple-tab-span">    </span>30.do({<span class="s6">arg</span> i;</p>
 151 <p class="p11"><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span>(i+1).asString.drawAtPoint((i+1 * 20)@0, <span class="s6">Font</span>(<span class="s9">"Courier"</span>, 9), <span class="s6">Color</span>.black);</p>
 152 <p class="p11"><span class="Apple-tab-span">    </span>});</p>
 153 <p class="p11">};</p>
 154 <p class="p3"><br></p>
 155 <p class="p11">d.drawFunc = {</p>
 156 <p class="p11"><span class="Apple-tab-span">    </span><span class="s6">Pen</span>.use({</p>
 157 <p class="p11"><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span><span class="s6">Pen</span>.translate(0, 5);</p>
 158 <p class="p11"><span class="Apple-tab-span">    </span><span class="Apple-tab-span">    </span>drawFunc.value;</p>
 159 <p class="p11"><span class="Apple-tab-span">    </span>});<span class="Apple-tab-span"> </span></p>
 160 <p class="p11"><span class="Apple-tab-span">    </span><span class="s6">Pen</span>.translate(15, 0).rotate(0.5pi);</p>
 161 <p class="p11"><span class="Apple-tab-span">    </span>drawFunc.value;</p>
 162 <p class="p11">};</p>
 163 <p class="p3"><br></p>
 164 <p class="p11">e.drawFunc = {<span class="Apple-tab-span">      </span></p>
 165 <p class="p11"><span class="Apple-tab-span">    </span><span class="s6">Pen</span>.translate(40, 0).rotate(0.5pi);</p>
 166 <p class="p11"><span class="Apple-tab-span">    </span>drawFunc.value;</p>
 167 <p class="p11">};</p>
 168 <p class="p3"><br></p>
 169 <p class="p11">f.drawFunc = {</p>
 170 <p class="p11"><span class="Apple-tab-span">    </span><span class="s6">Pen</span>.translate(0, 25);</p>
 171 <p class="p11"><span class="Apple-tab-span">    </span>drawFunc.value;</p>
 172 <p class="p11">};</p>
 173 <p class="p3"><br></p>
 174 <p class="p11">w.front;</p>
 175 <p class="p11">)</p>
 176 </body>
 177 </html>