nephele
/
haiku-website
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
haiku-website/static/legacy-docs/bebook/BSlider_Overview.html

114 lines
12 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>The Be Book - System Overview - The Interface Kit</title><link rel="stylesheet" href="be_book.css" type="text/css" media="all" /><link rel="shortcut icon" type="image/vnd.microsoft.icon" href="./images/favicon.ico" /><!--[if IE]>
<link rel="stylesheet" type="text/css" href="be_book_ie.css" />
<![endif]--><meta name="generator" content="DocBook XSL Stylesheets V1.73.2" /><meta name="keywords" content="Access, BeOS, BeBook, API" /><link rel="start" href="index.html" title="The Be Book" /><link rel="up" href="TheInterfaceKit_Overview.html" title="The Interface Kit" /><link rel="prev" href="BShelf_Overview.html" title="BShelf" /><link rel="next" href="BStatusBar_Overview.html" title="BStatusBar" /></head><body><div id="header"><div id="headerT"><div id="headerTL"><a accesskey="p" href="BShelf_Overview.html" title="BShelf"><img src="./images/navigation/prev.png" alt="Prev" /></a> <a accesskey="u" href="TheInterfaceKit_Overview.html" title="The Interface Kit"><img src="./images/navigation/up.png" alt="Up" /></a> <a accesskey="n" href="BStatusBar_Overview.html" title="BStatusBar"><img src="./images/navigation/next.png" alt="Next" /></a></div><div id="headerTR"><div id="navigpeople"><a href="http://www.haiku-os.org"><img src="./images/People_24.png" alt="haiku-os.org" title="Visit The Haiku Website" /></a></div><div class="navighome" title="Home"><a accesskey="h" href="index.html"><img src="./images/navigation/home.png" alt="Home" /></a></div><div class="navigboxed" id="navigindex"><a accesskey="i" href="ClassIndex.html" title="Index">I</a></div><div class="navigboxed" id="naviglang" title="English">en</div></div><div id="headerTC">The Be Book - System Overview - The Interface Kit</div></div><div id="headerB">Prev: <a href="BShelf_Overview.html">BShelf</a>  Up: <a href="TheInterfaceKit_Overview.html">The Interface Kit</a>  Next: <a href="BStatusBar_Overview.html">BStatusBar</a></div><hr /></div><div class="section"><div xmlns="" xmlns:d="http://docbook.org/ns/docbook" class="titlepage"><div><div xmlns:d="http://docbook.org/ns/docbook"><h2 xmlns="http://www.w3.org/1999/xhtml" class="title"><a id="BSlider_Overview"></a>BSlider</h2></div></div></div><a id="id556810" class="indexterm"></a><p>
A slider is a control that provide a standard way for the user to select
a value from a predetermined range; for example, if your application
needs to let the user pick a value between 1 and 100, it's easy to create
a <a class="link" href="BSlider.html" title="BSlider"><code class="classname">BSlider</code></a>
object that the user can use to do this. Sliders can be either
horizontal or vertical.
</p><p>
<a class="link" href="BSlider.html" title="BSlider"><code class="classname">BSlider</code></a>
objects also provide a wide assortment of hooks that let you
customize the appearance and behavior of your slider controls.
</p><div class="section"><div xmlns="" xmlns:d="http://docbook.org/ns/docbook" class="titlepage"><div><hr /><div xmlns:d="http://docbook.org/ns/docbook"><h3 xmlns="http://www.w3.org/1999/xhtml" class="title"><a id="id556856"></a>Using BSliders</h3></div></div></div><p>
Creating a basic BSlider is very simple:
</p><pre class="programlisting example cpp"><code class="varname">r</code>.<code class="methodname">Set</code>(5,5,255,55);
<code class="varname">slider</code> = new <code class="classname">BSlider</code>(<code class="varname">r</code>, "const:slider1",
"Construct Speed (%)", <code class="constant">NULL</code>,
0, 140);</pre><p>
This creates a slider named "const:slider1" with the label "Construct
Speed (%)" above it. The range of possible values for the slider is 0 to
140.
</p><p>
You can add a splash of color to the slider, too. For example, if you
want the slider bar to be light blue, you might add:
</p><pre class="programlisting example cpp"><code class="varname">slider</code>-&gt;<code class="methodname">SetBarColor</code>(<code class="varname">color</code>);</pre><p>
You can also add hash marks to the slider:
</p><pre class="programlisting example cpp"><code class="varname">slider</code>-&gt;<code class="methodname">SetHashMarks</code>(<code class="constant">B_HASH_MARKS_BOTTOM</code>);
<code class="varname">slider</code>-&gt;<code class="methodname">SetHashMarkCount</code>(10);</pre><p>
In this example, <code class="methodname">SetHashMarks()</code> is used to specify that the hash marks
should be below the slider; you can also specify <code class="constant">B_HASH_MARKS_TOP</code> to put
them above the slider, <code class="constant">B_HASH_MARKS_BOTH</code> to put them both above and below
the slider, and <code class="constant">B_HASH_MARKS_NONE</code> to omit them entirely (which is the
default).
</p><p>
<code class="methodname">SetHashMarkCount()</code> is called to indicate that you want 10 hash marks
spaced evenly across the slider.
</p><p>
Finally, if you want to add labels at the ends of the slider, to indicate
the minimum and maximum values, you can use the
<a class="link" href="BSlider.html#BSlider_SetLimitLabels" title="SetLimitLabels(), MinLimitLabel(), MaxLimitLabel()"><code class="methodname">SetLimitLabels()</code></a> function:
</p><pre class="programlisting example cpp"><code class="varname">slider</code>-&gt;<code class="methodname">SetLimitLabels</code>("Slow", "Fast");</pre><p>
This sets the label for the minimum value (the left end of the slider) to
"Slow" and the label for the maximum to "Fast".
</p><p>
The result is the "Construct Speed (%)" slider in the window pictured
below. An example of a slider with the <code class="constant">B_TRIANGLE_THUMB</code> thumbType and
hash marks above and below the slider is also shown.
</p></div><div class="section"><div xmlns="" xmlns:d="http://docbook.org/ns/docbook" class="titlepage"><div><hr /><div xmlns:d="http://docbook.org/ns/docbook"><h3 xmlns="http://www.w3.org/1999/xhtml" class="title"><a id="id557032"></a>Customizing a BSlider</h3></div></div></div><p>
You can customize the appearance of your BSlider by overriding virtual
functions in the <a class="link" href="BSlider.html" title="BSlider"><code class="classname">BSlider</code></a>
class that are responsible for drawing the
slider bar, thumb, focus mark, and hash marks.
</p><p>
For example, let's say you want your slider's thumb to be round. Just
create a new class—let's call it CustomSlider—derived from
<a class="link" href="BSlider.html" title="BSlider"><code class="classname">BSlider</code></a>,
and override the
<a class="link" href="BSlider.html#BSlider_DrawThumb" title="DrawThumb(), ThumbFrame()"><code class="methodname">DrawThumb()</code></a>
function with code that might look something like this:
</p><pre class="programlisting example cpp"><span class="type">const rgb_color</span> <code class="constant">kWhite</code> = {255,255,255,255};
<span class="type">const rgb_color</span> <code class="constant">kWhiteGray</code> = {235,235,235,255);
<span class="type">const rgb_color</span> <code class="constant">kDarkGray</code> = {100,100,100,255};
<span class="type">const rgb_color</span> <code class="constant">kBlackColor</code> = {0,0,0,255};
<span class="type">void</span> <code class="classname">CustomSlider</code>::<code class="methodname">DrawThumb</code>(<span class="type">void</span>) {
<code class="classname">BRect</code> r;
<span class="type">BView *</span><code class="varname">v</code>;
<span class="comment">// Get the frame rectangle of the thumb</span>
<span class="comment">// and the offscreen view.</span>
<code class="varname">r</code> = <code class="methodname">ThumbFrame</code>();
<code class="varname">v</code> = <code class="methodname">OffscreenView</code>();
<span class="comment">// Draw the black shadow</span>
<code class="varname">v</code>-&gt;<code class="methodname">SetHighColor</code>(<code class="constant">kBlackColor</code>);
<code class="varname">r</code>.<code class="varname">top</code>++;
<code class="varname">r</code>.<code class="varname">left</code>++;
<code class="varname">v</code>-&gt;<code class="methodname">StrokeEllipse</code>(<code class="varname">r</code>);
<span class="comment">// Draw the dark grey edge</span>
<code class="varname">v</code>-&gt;<code class="methodname">SetHighColor</code>(<code class="constant">kDarkGray</code>);
<code class="varname">r</code>.<code class="varname">bottom</code>--;
<code class="varname">r</code>.<code class="varname">right</code>--;
<code class="varname">v</code>-&gt;<code class="methodname">StrokeEllipse</code>(<code class="varname">r</code>);
<span class="comment">// Fill the inside of the thumb</span>
<code class="varname">v</code>-&gt;<code class="methodname">SetHighColor</code>(<code class="constant">kWhiteGrayColor</code>);
<code class="varname">r</code>.<code class="methodname">InsetBy</code>(1,1);
<code class="varname">v</code>-&gt;<code class="methodname">FillEllipse</code>(<code class="varname">r</code>);
}</pre><p>
All rendering of a <a class="link" href="BSlider.html" title="BSlider"><code class="classname">BSlider</code></a>
is done into an offscreen view, which you can get a pointer to by calling the
<a class="link" href="BSlider.html#BSlider_OffscreenView" title="OffscreenView()"><code class="methodname">OffscreenView()</code></a> function. This improves
performance and makes drawing the slider—especially complicated
ones—look much smoother to the user.
</p><p>
This code gets a pointer to the offscreen view, then renders a round,
beveled thumb into the offscreen view, filling the thumb's frame
rectangle as returned by the
<a class="link" href="BSlider.html#BSlider_ThumbFrame"><code class="methodname">ThumbFrame()</code></a> function.
</p><p>
The result is a round thumb that looks like the one in the "Totality of
Damage" slider in the picture below:
</p><div class="mediaobject"><img src="./images/TheInterfaceKit/slider_round.png" alt="Slider With Rounded Thumb" /></div></div></div><div id="footer"><hr /><div id="footerT">Prev: <a href="BShelf_Overview.html">BShelf</a>  Up: <a href="TheInterfaceKit_Overview.html">The Interface Kit</a>  Next: <a href="BStatusBar_Overview.html">BStatusBar</a> </div><div id="footerB"><div id="footerBL"><a href="BShelf_Overview.html" title="BShelf"><img src="./images/navigation/prev.png" alt="Prev" /></a> <a href="TheInterfaceKit_Overview.html" title="The Interface Kit"><img src="./images/navigation/up.png" alt="Up" /></a> <a href="BStatusBar_Overview.html" title="BStatusBar"><img src="./images/navigation/next.png" alt="Next" /></a></div><div id="footerBR"><div><a href="http://www.haiku-os.org"><img src="./images/People_24.png" alt="haiku-os.org" title="Visit The Haiku Website" /></a></div><div class="navighome" title="Home"><a accesskey="h" href="index.html"><img src="./images/navigation/home.png" alt="Home" /></a></div></div><div id="footerBC"><a href="http://www.access-company.com/home.html" title="ACCESS Co."><img alt="Access Company" src="./images/access_logo.png" /></a></div></div></div><div id="licenseFooter"><div id="licenseFooterBL"><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/" title="Creative Commons License"><img alt="Creative Commons License" style="border-width:0" src="https://licensebuttons.net/l/by-nc-nd/3.0/88x31.png" /></a></div><div id="licenseFooterBR"><a href="./LegalNotice.html">Legal Notice</a></div><div id="licenseFooterBC"><span id="licenseText">This work is licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/">Creative
Commons Attribution-Non commercial-No Derivative Works 3.0 License</a>.</span></div></div></body></html>
Reference in New Issue View Git Blame Copy Permalink