Changeset 2194

Timestamp:

09/03/2007 11:15:31 AM (15 months ago)

Author:

tof

Message:

Add Quickstart TSlider description and example

Location:

branches/3.2-dev/demos/quickstart/protected/pages/Controls

Files:

• Samples/TSlider/Home.page (modified) (1 diff, 1 prop)
• Samples/TSlider/Home.php (modified) (1 diff)
• Slider.page (modified) (1 diff, 1 prop)

branches/3.2-dev/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.page

@@ -1 +1 @@
 <com:TContent id="body">
 <h1>TSlider Sample</h1>
-<p>Description here</p>
 
-<p>Horizontal slider, with image handle, Javascript 'onSlide' handler, ServerSide 'onSliderChanged' handler and autopostback=true</p>
-<com:TSlider id="hSlider" AutoPostBack="true" Handle.CssClass="handle-image" Direction="Horizontal" Enabled="true" MinValue="0" MaxValue="1" StepSize="0.1" OnValueChanged="sliderChanged">
+<table class="sampletable">
+
+<tr><td class="samplenote">
+Simple horizontal slider, with no events handler attached</td><td class="sampleaction">
+<com:TSlider id="slider1" Direction="Horizontal"/>
+</td>
+<td class="sampleaction">
+        <com:TButton onClick="submit1" Text="Submit"/>
+        <com:TLabel id="slider1Result"/>
+</td></tr>
+<tr><td class="samplenote">
+Horizontal slider from -50 to 50, with image handle, Javascript 'onSlide' handler, ServerSide 'onSliderChanged' handler, initial value and autopostback=true
+</td><td class="sampleaction">
+<com:TSlider id="slider2" AutoPostBack="true" Handle.CssClass="handle-image" Direction="Horizontal" Value="30" Enabled="true" MinValue="-50" MaxValue="50" OnValueChanged="slider2Changed">
         <prop:ClientSide.onSlide>
-                $('hslidervalue').innerHTML = value;
+                $('slider2value').innerHTML = value;
         </prop:ClientSide.onSlide>
 </com:TSlider>
- Value  : <span id="hslidervalue"><%=$this->hSlider->value%></span>
-<br/><br/>
-<p>
-Vertical slider, cursor handle, no auto postback, no event handler
-</p>
-<com:TSlider id="vSlider" Direction="Vertical" Enabled="true" Values="(-2,-1,0,1,6,2,7,3,4,5)" />
- <com:TButton onclick="testsubmit" text="Submit"/>
-
-<br/>
-<com:TSlider StepSize="0.1"/>
-<p>
-Results :<br/>
-Horizontal Slider value : <com:TLabel id="hSliderResult"/><br/>
-Vertical Slider value : <com:TLabel id="vSliderResult"/>
-</p>
+Value  : <span id="slider2value"><%=$this->slider2->value%></span>
+</td><td class="sampleaction">
+<com:TLabel id="slider2Result"/>
+</td></tr>
+<tr><td class="samplenote">
+Vertical slider from 0 to 1, with image handle, Javascript 'onSlide' handler, ServerSide 'onSliderChanged' handler, StepSize, and no autopostback
+</td><td class="sampleaction">
+<com:TSlider id="slider3" AutoPostBack="false" Handle.CssClass="handle-image" Direction="Vertical" Enabled="true" MinValue="0" MaxValue="1" StepSize="0.1" OnValueChanged="slider3Changed">
+        <prop:ClientSide.onSlide>
+                $('slider3value').innerHTML = value;
+        </prop:ClientSide.onSlide>
+</com:TSlider>
+Value  : <span id="slider3value"><%=$this->slider3->value%></span>
+</td><td class="sampleaction">
+<com:TButton Text="Submit"/>
+<com:TLabel id="slider3Result"/>
+</td></tr>
+</table>
 </com:TContent>

branches/3.2-dev/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.php

@@ -2 +2 @@
 class Home extends TPage 
 {
-        public function testsubmit ($sender, $param)
+        public function submit1 ($sender, $param)
         {
-                $this->hSliderResult->setText('submit : '.$this->hSlider->getValue());  
-                $this->vSliderResult->setText('submit : '.$this->vSlider->getValue());
+                $this->slider1Result->setText('Slider Value : '.$this->slider1->getValue());    
         }
         
-        public function sliderChanged ($sender, $param)
+        public function slider2Changed ($sender, $param)
         {
-                $this->hSliderResult->setText('onSliderChanged : '.$sender->getValue());
+                $this->slider2Result->setText('onSliderChanged, Value : '.$sender->getValue());
+        }
+        
+        public function slider3Changed ($sender, $param)
+        {
+                $this->slider3Result->setText('onSliderChanged, Value : '.$sender->getValue());
         }
 }

branches/3.2-dev/demos/quickstart/protected/pages/Controls/Slider.page

@@ -5 +5 @@
 
 <p id="510314" class="block-content">
-<tt>TSlider</tt> displays a slider on a page
+<tt>TSlider</tt> displays a slider for numeric input purpose. A slider consists of a <em>track</em> 
+which define the range of possible value, and a <em>handle</em> which can slide on the track, to select 
+a value in the range. The track can be either Horizontal or Vertical, depending of the <tt>Direction</tt>
+property. By default, it's horizontal.
+</p>
+<p>
+The range boundaries are defined by <tt> MinValue</tt> and <tt>MaxValue</tt> properties. 
+The default range is from 0 to 100. 
+The <tt>StepSize</tt> property can be used to define the <em>step</em> between 2 values inside the range.
+Notice that this step will be recomputed if there is more than 200 values between the range boundaries.
+You can also provide the allowed values by setting the <tt>Values</tt> array.
 </p>
 
-<p>To be continued...</p>
+<p>
+The handle sub-properties can be accessed by <tt>Handle</tt> property. You can also provide your own control
+for the handle, using <tt>HandleClass</tt> property. Note that this class must be a subclass of 
+<tt>TSliderHandle</tt>
+</p>
+
+<p>
+The TSlider control can be easily customized using CssClasses. You can provide your own css file, using the 
+<tt>CssUrl</tt> property.
+The css class for TSlider can be set by the <tt>CssClass</tt> property. Defaults values are <b>'hslider'</b> for
+an Horizontal slider, or <b>'vslider'</b> for a Vertical one. 
+The css class for the Handle can be set by the <tt>Handle.CssClass</tt> subproperty. Defaults is <b>'handle'</b>, which just
+draw a red block as a cursor. <b>'handle-image'</b> css class is also provided for your convenience, which display an image
+as the handle.
+</p>
+
+<p>
+If <tt>AutoPostBack</tt> property is true, postback is performed as soon as the value changed.
+</p>
+
+<p>
+TSlider raises the <tt>onValueChanged</tt> event when the value of the slider has changed during postback.
+</p>
+
+<p>
+You can also attach ClientSide javascript events handler to the slider :
+<ul>
+<li><tt>ClientSide.onSlide</tt> is called when the handle is slided on the track. You can get the current value in the <b>value</b>
+javascript variable. You can use this event to update on client side a label with the current value</li>
+<li><tt>ClientSide.onChange</tt> is called when the slider value has changed (at the end of a move).</li>
+</ul> 
+</p>
+
 <com:RunBar PagePath="Controls.Samples.TSlider.Home" />