Help/GUI/Cocoa-GUI/SCUserViewSubclassing/SCUserView-Subclassing.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 57.0px; text-indent: -57.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; color: #0000f1}
  14 p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}
  15 p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}
  16 p.p7 {margin: 0.0px 0.0px 0.0px 57.0px; text-indent: -57.0px; font: 12.0px Helvetica; min-height: 14.0px}
  17 p.p8 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Helvetica; min-height: 17.0px}
  18 p.p9 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco; color: #c20000}
  19 p.p10 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px Monaco}
  20 span.s1 {color: #000000}
  21 span.s2 {text-decoration: underline ; color: #0000c1}
  22 span.s3 {text-decoration: underline}
  23 span.s4 {color: #0000c1}
  24 span.Apple-tab-span {white-space:pre}
  25 </style>
  26 </head>
  27 <body>
  28 <p class="p1"><b>SCUserView Subclassing Tutorial</b></p>
  29 <p class="p2">by Jost Muxfeldt<span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span></p>
  30 <p class="p3"><br></p>
  31 <p class="p4"><span class="s1">See also: <a href="../../GUI-Overview.html"><span class="s2">GUI-Overview</span></a>, <a href="../SCUserView.html"><span class="s3">SCUserView</span></a>, <a href="../SCView.html"><span class="s3">SCView</span></a>, <a href="../../../Extending and Customizing SC/Writing-Classes.html"><span class="s3">Writing Classes</span></a></span></p>
  32 <p class="p5"><br></p>
  33 <p class="p6">The following is a short tutorial on how to make a custom gui widget by subclassing SCUserView. It is assumed that you know how to write classes in SuperCollider. See <a href="../../../Extending and Customizing SC/Writing-Classes.html"><span class="s4">Writing Classes</span></a>.</p>
  34 <p class="p5"><br></p>
  35 <p class="p6">You also need to open the template class file, <a href="SCUserViewTutorial.sc"><span class="s2">SCUserViewTutorial.sc</span></a> , first to follow this tutorial.</p>
  36 <p class="p5"><br></p>
  37 <p class="p6">You can use the contents of <a href="SCUserViewTutorial.sc"><span class="s2">SCUserViewTutorial.sc</span></a> as a template for writing your own subclass. Simply copy the file to your SC extensions folder and rename the file and class, <b>MyWidget</b>, to whatever you want to call your class. Then adjust the class methods to fit your design.</p>
  38 <p class="p5"><br></p>
  39 <p class="p6">The following narrates the code in SCUserViewTutorial.sc:</p>
  40 <p class="p5"><br></p>
  41 <p class="p2"><b><span class="Apple-tab-span">  </span>1. Setup instance vars appropriate to your widget</b></p>
  42 <p class="p7"><b><span class="Apple-tab-span">  </span></b></p>
  43 <p class="p2"><b><span class="Apple-tab-span">  </span><span class="Apple-tab-span">    </span></b>You inherit all of the instance variables from SCUserView and SCView, of course, but many gui widgets need their own variables. In particular, you need to overide <b>value</b>, to return whatever you want your view to return. The instance variable, <b>step</b>, is also often used to allow <b>value</b> to be quantized. <b>thumbSize</b> is used for both width and height of a slider thumb, while <b>thumbWidth</b> or <b>thumbHeight</b> are typically used for only one dimension. <b>x</b> and <b>y</b> are used for mouse clicks. Take a look at a similar SC widget to see what the standard instance variables are.</p>
  44 <p class="p7"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span></p>
  45 <p class="p2"><b><span class="Apple-tab-span">  </span>2. Define the viewClass to SCUserView</b></p>
  46 <p class="p7"><b><span class="Apple-tab-span">  </span></b></p>
  47 <p class="p2"><b><span class="Apple-tab-span">  </span><span class="Apple-tab-span">    </span></b>This is mandatory. You must do this so that your class calls the primitive of SCUserView on init.</p>
  48 <p class="p5"><br></p>
  49 <p class="p2"><b><span class="Apple-tab-span">  </span>3. Set up your view</b></p>
  50 <p class="p7"><b><span class="Apple-tab-span">  </span></b></p>
  51 <p class="p2"><b><span class="Apple-tab-span">  </span><span class="Apple-tab-span">    </span></b>You will want to override <b>init</b> to customize your sub class.Here you will set the defaults of some of your instant variables and anything else you want to do on creating the view.</p>
  52 <p class="p7"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span></p>
  53 <p class="p2"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span>Finally, you should set <b>this.drawFunc</b> (SCUserView's drawing function) to the method <b>this.draw</b>, which you will define below.</p>
  54 <p class="p7"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span></p>
  55 <p class="p2"><b><span class="Apple-tab-span">  </span>4. Define a drawing function for SCPen</b></p>
  56 <p class="p7"><b><span class="Apple-tab-span">  </span></b></p>
  57 <p class="p2"><b><span class="Apple-tab-span">  </span><span class="Apple-tab-span">    </span></b>This is where you will define how the view appears. As of SC3.31, drawing should use relative coordinates. How you draw will<span class="Apple-converted-space">  </span>typically will be dependent on instance variables which you defined such as <b>value</b>, <b>states</b> (for buttons), <b>x</b> and <b>y</b> (for mouse clicks), or anything else you might need for your design. See <a href="../SCPen.html"><span class="s4">SCPen</span></a> for drwaing methods.</p>
  58 <p class="p8"><br></p>
  59 <p class="p2"><b><span class="Apple-tab-span">  </span>5. Define typical widget methods</b></p>
  60 <p class="p7"><b><span class="Apple-tab-span">  </span></b></p>
  61 <p class="p2"><b><span class="Apple-tab-span">  </span><span class="Apple-tab-span">    </span></b>Here you define various methods according to your own design. You should look at similar gui objects to see what they have. The setter, <b>valueAction_</b> is defined by practically any gui widget, for example. It sets the <b>value</b> and performs the <b>action</b> (already defined in SCView).</p>
  62 <p class="p8"><br></p>
  63 <p class="p2"><b><span class="Apple-tab-span">  </span>6. Override mouseActions</b></p>
  64 <p class="p7"><b><span class="Apple-tab-span">  </span></b></p>
  65 <p class="p2"><b><span class="Apple-tab-span">  </span><span class="Apple-tab-span">    </span></b>SCView defines <b>mouseDown</b>, <b>mouseMove</b> and <b>mouseUp</b>, as methods, and the corresponding user definable methods, <b>mouseDownAction</b>, <b>mouseMoveAction</b> and <b>mouseUpAction</b>. You should overrider <b>mouseDown</b>, <b>mouseMove</b> or <b>mouseUp</b> as needed, and <b><i>make sure</i></b><i> your method calls the corresponding action as well</i>, so your user can later add user actions, just like in the template. Also see the <a href="../SCView.html"><span class="s4">SCView</span></a> help file.</p>
  66 <p class="p7"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span></p>
  67 <p class="p2"><b><span class="Apple-tab-span">  </span>7. Define default key actions</b></p>
  68 <p class="p7"><b><span class="Apple-tab-span">  </span></b></p>
  69 <p class="p2"><b><span class="Apple-tab-span">  </span><span class="Apple-tab-span">    </span></b>Here you define your default key responses in <b>defaultKeyDownAction</b> or <b>defaultKeyUpAction</b>. Differently than with mouse actions, you do not call the keyAction in your method, since this mechanism is handled by <a href="../SCView.html"><span class="s4">SCView</span></a>. If the user defines a <b>keyDownAction</b>, or <b>keyUpAction</b>, SCView makes it override your default action. See the template, and see the <a href="../SCView.html"><span class="s4">SCView</span></a> help file.</p>
  70 <p class="p7"><br></p>
  71 <p class="p2"><b><span class="Apple-tab-span">  </span>8. Define default drag and drop actions</b></p>
  72 <p class="p7"><b><span class="Apple-tab-span">  </span></b></p>
  73 <p class="p2"><b><span class="Apple-tab-span">  </span><span class="Apple-tab-span">    </span></b>Here you define your drag responses in <b>defaultGetDrag</b>, <b>defaultCanReceiveDrag</b>, and , <b>defaultReceiveDrag</b>. Differently than with mouse actions, you do not call the dragAction in your method, since this mechanism is handled by <a href="../SCView.html"><span class="s4">SCView</span></a>. If your user defines a <b>beginDragAction, canReceiveDragHandler, </b>or <b>receiveDragHandler, </b>SCView makes it override your default action. See the template, and see the <a href="../SCView.html"><span class="s4">SCView</span></a> help file.</p>
  74 <p class="p7"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span></p>
  75 <p class="p7"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span></p>
  76 <p class="p2">That's it. Now recompile, only to find your first syntax errors. ;-)</p>
  77 <p class="p7"><br></p>
  78 <p class="p2">Happy subclassing.</p>
  79 <p class="p7"><br></p>
  80 <p class="p9">//try this after you have added the class to the class library</p>
  81 <p class="p10">(<span class="Apple-tab-span">   </span></p>
  82 <p class="p10"><span class="Apple-tab-span">    </span><span class="s4">GUI</span>.cocoa;</p>
  83 <p class="p10"><span class="Apple-tab-span">    </span>w=<span class="s4">Window</span>.new.front;</p>
  84 <p class="p10"><span class="Apple-tab-span">    </span>v=<span class="s4">MyWidget</span>(w, <span class="s4">Rect</span>(10,20,200,20)).valueAction_(0.5);</p>
  85 <p class="p3"><span class="Apple-tab-span">     </span></p>
  86 <p class="p10"><span class="Apple-tab-span">    </span>q=<span class="s4">MyWidget</span>(w, <span class="s4">Rect</span>(10,60,200,20)).valueAction_(0.3);</p>
  87 <p class="p10">)</p>
  88 <p class="p7"><br></p>
  89 <p class="p7"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span></p>
  90 <p class="p7"><span class="Apple-tab-span">     </span><span class="Apple-tab-span">    </span></p>
  91 </body>
  92 </html>