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

173 lines
19 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="BStringView_Overview.html" title="BStringView" /><link rel="next" href="BTabView_Overview.html" title="BTabView" /></head><body><div id="header"><div id="headerT"><div id="headerTL"><a accesskey="p" href="BStringView_Overview.html" title="BStringView"><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="BTabView_Overview.html" title="BTabView"><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="BStringView_Overview.html">BStringView</a>  Up: <a href="TheInterfaceKit_Overview.html">The Interface Kit</a>  Next: <a href="BTabView_Overview.html">BTabView</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="BTab_Overview"></a>BTab</h2></div></div></div><a id="id557614" class="indexterm"></a><p>
The <a class="link" href="BTab.html" title="BTab"><code class="classname">BTab</code></a>
class defines the tabs used by the
<a class="link" href="BTabView.html" title="BTabView"><code class="classname">BTabView</code></a> class. Each tab is
represented by a single <a class="link" href="BTab.html" title="BTab"><code class="classname">BTab</code></a>
object, which is called to render and manage the tab.
</p><p>
When a tab is created, a target view is specified as a parameter to the
<a class="link" href="BTab.html" title="BTab"><code class="classname">BTab</code></a>
<a class="link" href="BTab.html#BTab_Constructor" title="BTab()">constructor</a>,
or by calling
<a class="link" href="BTab.html#BTab_SetView"><code class="methodname">SetView()</code></a>.
The target view is the view that will be displayed in the
<a class="link" href="BTabView.html" title="BTabView"><code class="classname">BTabView</code></a>'s container view when the
<a class="link" href="BTab.html" title="BTab"><code class="classname">BTab</code></a> is selected.
</p><p>
Users select tabs by clicking on them, or by using keyboard navigation to
focus and select the tab.
</p><p>
An example of how to create a <a class="link" href="BTabView.html" title="BTabView"><code class="classname">BTabView</code></a>
and attach <a class="link" href="BTab.html" title="BTab"><code class="classname">BTab</code></a> objects to it is
given in the <a class="link" href="BTabView.html" title="BTabView"><code class="classname">BTabView</code></a> section.
</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="id557728"></a>Customizing the Appearance of a BTab</h3></div></div></div><p>
Customizing the appearance of your tabs is achieved by overriding the
<a class="link" href="BTab.html#BTab_DrawTab"><code class="methodname">DrawTab()</code></a>,
<a class="link" href="BTab.html#BTab_DrawFocusMark" title="DrawFocusMark() , DrawTab() , DrawLabel()"><code class="methodname">DrawFocusMark()</code></a>, and/or
<a class="link" href="BTab.html#BTab_DrawLabel"><code class="methodname">DrawLabel()</code></a> functions.
</p><p>
These functions are responsible for all drawing of the
<a class="link" href="BTab.html" title="BTab"><code class="classname">BTab</code></a>.
<a class="link" href="BTab.html#BTab_DrawTab"><code class="methodname">DrawTab()</code></a>
renders the entire tab, excluding the focus mark: it draws the borders
and calls
<a class="link" href="BTab.html#BTab_DrawLabel"><code class="methodname">DrawLabel()</code></a>
to render the text of the label.
</p><p>
<a class="link" href="BTab.html#BTab_DrawFocusMark" title="DrawFocusMark() , DrawTab() , DrawLabel()"><code class="methodname">DrawFocusMark()</code></a>
draws the indicator that shows which tab is the current
focus for keyboard navigation.
</p><p>
By default, tabs have a beveled, rounded look. Let's look at an example
in which we replace this appearance with a square shape:
</p><p>
To do this, we create a new class, derived from
<a class="link" href="BTab.html" title="BTab"><code class="classname">BTab</code></a>, that overrides the
<a class="link" href="BTab.html#BTab_DrawTab"><code class="methodname">DrawTab()</code></a> function.
</p><pre class="programlisting example cpp">class <code class="classname">CustomTab</code> : public <code class="classname">BTab</code> {
public:
virtual <span class="type">void</span> <code class="methodname">DrawTab</code>(<span class="type">BView *</span><code class="parameter">owner</code>, <code class="classname">BRect</code> <code class="parameter">frame</code>,
<span class="type">tab_position</span> <code class="parameter">position</code>, <span class="type">bool</span> <code class="parameter">full</code>=<code class="constant">true</code>);
};</pre><p>
The <a class="link" href="BTab.html#BTab_DrawTab"><code class="methodname">DrawTab()</code></a>
function is implemented as follows:
</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">kGray</code> = {219,219,219,255};
<span class="type">const rgb_color</span> <code class="constant">kMedGray</code> = {180,180,180,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">CustomTab</code>::<code class="methodname">DrawTab</code>(<span class="type">BView *</span><code class="parameter">owner</code>, <code class="classname">BRect</code> <code class="parameter">frame</code>,
<span class="type">tab_position</span> <code class="parameter">position</code>,
<span class="type">bool</span> <code class="parameter">full</code>) {
<span class="type">rgb_color</span> <code class="varname">hi</code>;
<span class="type">rgb_color</span> <code class="varname">lo</code>;
<span class="comment">// Save the original colors</span>
<code class="varname">hi</code> = <code class="parameter">owner</code>-&gt;<code class="methodname">HighColor</code>();
<code class="varname">lo</code> = <code class="parameter">owner</code>-&gt;<code class="methodname">LowColor</code>();
<span class="comment">// Draw the label by calling DrawLabel()</span>
<code class="parameter">owner</code>-&gt;<code class="methodname">SetHighColor</code>(<code class="constant">kBlackColor</code>);
<code class="parameter">owner</code>-&gt;<code class="methodname">SetLowColor</code>(<code class="constant">kGray</code>);
<code class="methodname">DrawLabel</code>(<code class="parameter">owner</code>, <code class="parameter">frame</code>);
<span class="comment">// Start a line array to draw the tab --</span>
<span class="comment">// this is faster than drawing the lines</span>
<span class="comment">// one by one.</span>
<code class="parameter">owner</code>-&gt;<code class="methodname">BeginLineArray</code>(7);
<span class="comment">// Do the bottom left corner, visible</span>
<span class="comment">// only on the frontmost tab.</span>
if (<code class="parameter">position</code> != <code class="constant">B_TAB_ANY</code>) {
<code class="parameter">owner</code>-&gt;<code class="methodname">AddLine</code>(<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">left</code>, <code class="parameter">frame</code>.<code class="varname">bottom</code>),
<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">left</code>+3, <code class="parameter">frame</code>.<code class="varname">bottom</code>-3), <code class="constant">kWhite</code>);
}
<span class="comment">// Left wall -- always drawn</span>
<code class="parameter">owner</code>-&gt;<code class="methodname">AddLine</code>(<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">left</code>+4, <code class="parameter">frame</code>.<code class="varname">bottom</code>-4),
<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">left</code>+4, <code class="parameter">frame</code>.<code class="varname">top</code>), <code class="constant">kWhite</code>);
<span class="comment">// Top -- always drawn</span>
<code class="parameter">owner</code>-&gt;<code class="methodname">AddLine</code>(<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">left</code>+5, <code class="parameter">frame</code>.<code class="varname">top</code>),
<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">right</code>-5, <code class="parameter">frame</code>.<code class="varname">top</code>), <code class="constant">kWhite</code>);
<span class="comment">// Right wall -- always drawn. Has a nice bevel.</span>
<code class="parameter">owner</code>-&gt;<code class="methodname">AddLine</code>(<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">right</code>-4, <code class="parameter">frame</code>.<code class="varname">top</code>),
<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">right</code>-4, <code class="parameter">frame</code>.<code class="varname">bottom</code>-4), <code class="constant">kDarkGray</code>);
<code class="parameter">owner</code>-&gt;<code class="methodname">AddLine</code>(<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">right</code>-5, <code class="parameter">frame</code>.<code class="varname">top</code>),
<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">right</code>-5, <code class="parameter">frame</code>.<code class="varname">bottom</code>-4), <code class="constant">kMedGray</code>);
<span class="comment">// Bottom-right corner, only visible if the tab</span>
<span class="comment">// is either frontmost or the rightmost tab.</span>
if (<code class="parameter">full</code>) {
<code class="parameter">owner</code>-&gt;<code class="methodname">AddLine</code>(<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">right</code>-3, <code class="parameter">frame</code>.<code class="varname">bottom</code>-3),
<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">right</code>, <code class="parameter">frame</code>.<code class="varname">bottom</code>), <code class="constant">kDarkGray</code>);
<code class="parameter">owner</code>-&gt;<code class="methodname">AddLine</code>(<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">right</code>-4, <code class="parameter">frame</code>.<code class="varname">bottom</code>-3),
<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">right</code>-1, <code class="parameter">frame</code>.<code class="varname">bottom</code>), <code class="constant">kMedGray</code>);
}
<code class="parameter">owner</code>-&gt;<code class="methodname">EndLineArray</code>();
<code class="parameter">owner</code>-&gt;<code class="methodname">SetHighColor</code>(<code class="varname">hi</code>);
<code class="parameter">owner</code>-&gt;<code class="methodname">SetLowColor</code>(<code class="varname">lo</code>);
}</pre><p>
The <code class="parameter">owner</code> parameter is a pointer to the
<a class="link" href="BView.html" title="BView"><code class="classname">BView</code></a> in which the tab is drawn.
<code class="parameter">frame</code> is the frame rectangle of the tab; the tab should be drawn to fill
this rectangle. The <code class="parameter">position</code> parameter, which can be one of the following
values, specifies the placement of the tab, to assist in making
intelligent decisions on which parts of the tab are visible and which are
not:
</p><table class="variablelist constants"><thead><tr><th>Constant</th><th>Description</th></tr></thead><tbody><tr><td><p><span class="term"><code class="constant">B_TAB_FIRST</code></span></p></td><td><p>The tab is the leftmost tab (the one with index 0 in the
<a class="link" href="BTabView.html" title="BTabView"><code class="classname">BTabView</code></a>).</p></td></tr><tr><td><p><span class="term"><code class="constant">B_TAB_FRONT</code></span></p></td><td><p>The tab is the frontmost tab.</p></td></tr><tr><td><p><span class="term"><code class="constant">B_TAB_ANY</code></span></p></td><td><p>The tab neither the frontmost nor the leftmost tab.</p></td></tr></tbody></table><p>
This is a fairly trivial example, and is self-explanatory—with two
caveats:
</p><pre class="programlisting example cpp"><span class="comment">// Do the bottom left corner, visible</span>
<span class="comment">// only on the frontmost tab.</span>
if (<code class="varname">position</code> != <code class="constant">B_TAB_ANY</code>) {
<code class="parameter">owner</code>-&gt;<code class="methodname">AddLine</code>(<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">left</code>, <code class="parameter">frame</code>.<code class="varname">bottom</code>),
<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">left</code>+3, <code class="parameter">frame</code>.<code class="varname">bottom</code>-3), <code class="constant">kWhite</code>);
}</pre><p>
This code is responsible for drawing the portion of the tab that connects
to the box surrounding the
<a class="link" href="BTabView.html" title="BTabView"><code class="classname">BTabView</code></a>'s container.
In our custom <a class="link" href="BTab.html" title="BTab"><code class="classname">BTab</code></a>, this
is simply a diagonal line that extends from the bottom left corner of the
frame upward and inward slightly.
</p><p>
However, this portion of the tab is only visible on the first or
frontmost tab, so we only draw this segment if its position isn't
<code class="constant">B_TAB_ANY</code> (in other words, if its position is either
<code class="constant">B_TAB_FRONT</code> or <code class="constant">B_TAB_FIRST</code>).
</p><pre class="programlisting example cpp"><span class="comment">// Bottom-right corner, only visible if the tab</span>
<span class="comment">// is either frontmost or the rightmost tab.</span>
if (<code class="parameter">full</code>) {
<code class="parameter">owner</code>-&gt;<code class="methodname">AddLine</code>(<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">right</code>-3, <code class="parameter">frame</code>.<code class="varname">bottom</code>-3),
<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">right</code>, <code class="parameter">frame</code>.<code class="varname">bottom</code>), <code class="constant">kDarkGray</code>);
<code class="parameter">owner</code>-&gt;<code class="methodname">AddLine</code>(<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">right</code>-4, <code class="parameter">frame</code>.<code class="varname">bottom</code>-3),
<code class="classname">BPoint</code>(<code class="parameter">frame</code>.<code class="varname">right</code>-1, <code class="parameter">frame</code>.<code class="varname">bottom</code>), <code class="constant">kMedGray</code>);
}</pre><p>
This code, which draws the lower-right corner of the tab (where it meets
back up with the box surrounding the container view), only runs if the
<code class="parameter">full</code> parameter is <code class="constant">true</code>.
This is because the right edge of a tab can be
obscured by the tab to its left.
</p></div></div><div id="footer"><hr /><div id="footerT">Prev: <a href="BStringView_Overview.html">BStringView</a>  Up: <a href="TheInterfaceKit_Overview.html">The Interface Kit</a>  Next: <a href="BTabView_Overview.html">BTabView</a> </div><div id="footerB"><div id="footerBL"><a href="BStringView_Overview.html" title="BStringView"><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="BTabView_Overview.html" title="BTabView"><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