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

75 lines
9.6 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="BTab_Overview.html" title="BTab" /><link rel="next" href="BTextControl_Overview.html" title="BTextControl" /></head><body><div id="header"><div id="headerT"><div id="headerTL"><a accesskey="p" href="BTab_Overview.html" title="BTab"><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="BTextControl_Overview.html" title="BTextControl"><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="BTab_Overview.html">BTab</a>  Up: <a href="TheInterfaceKit_Overview.html">The Interface Kit</a>  Next: <a href="BTextControl_Overview.html">BTextControl</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="BTabView_Overview"></a>BTabView</h2></div></div></div><a id="id558874" class="indexterm"></a><p>
The tab view is a fairly common construct in modern user interfaces. The
<a class="link" href="BTabView.html" title="BTabView"><code class="classname">BTabView</code></a> class
serves as a container for a series of
<a class="link" href="BTab.html" title="BTab"><code class="classname">BTab</code></a> objects as well
as their target views; the tabs run horizontally across the top of the
view from left to right, and beneath them is a container view in which
the currently-selected tab's target view is presented. A box is drawn
around the container view to clearly define the relationship between the
tabs and the container view.
</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="id558916"></a>Creating a BTabView</h3></div></div></div><p>
In the figure below, we see a window that contains a
<a class="link" href="BTabView.html" title="BTabView"><code class="classname">BTabView</code></a> with two
<a class="link" href="BTab.html" title="BTab"><code class="classname">BTab</code></a> objects attached,
called "Construct" and "Obliterate." The
"Construct" tab is currently selected, and its target view is visible.
The target view for the "Construct" tab contains two
<a class="link" href="BSlider.html" title="BSlider"><code class="classname">BSlider</code></a> objects
(these sliders are used as an example in the
<a class="link" href="BSlider.html" title="BSlider"><code class="classname">BSlider</code></a> section and you can
learn more about them there).
</p><div class="mediaobject"><img src="./images/TheInterfaceKit/slider.png" alt="A BTabView" /></div><p>
The <a class="link" href="BTabView.html" title="BTabView"><code class="classname">BTabView</code></a> in
this window is constructed using the following code,
which can be used in the constructor of the parent window:
</p><pre class="programlisting example cpp"><code class="classname">BRect</code> <code class="varname">r</code>;
<span class="type">BTabView *</span><code class="varname">tabView</code>;
<span class="type">BTab *</span><code class="varname">tab</code>;
<code class="varname">r</code> = <code class="methodname">Bounds</code>();
<code class="varname">r</code>.<code class="methodname">InsetBy</code>(5,5);
<code class="varname">tabView</code> = new <code class="classname">BTabView</code>(<code class="varname">r</code>, "tab_view");
<code class="varname">tabView</code>-&gt;<code class="methodname">SetViewColor</code>(216,216,216,0);
<code class="varname">r</code> = <code class="varname">tabView</code>-&gt;<code class="methodname">Bounds</code>();
<code class="varname">r</code>.<code class="methodname">InsetBy</code>(5,5);
<code class="varname">r</code>.<code class="varname">bottom</code> -= <code class="varname">tabView</code>-&gt;<code class="methodname">TabHeight</code>();
<code class="varname">tab</code> = new <code class="classname">BTab</code>();
<code class="varname">tabView</code>-&gt;<code class="methodname">AddTab</code>(new <code class="classname">ConstView</code>(<code class="varname">r</code>), <code class="varname">tab</code>);
<code class="varname">tab</code>-&gt;<code class="methodname">SetLabel</code>("Construct");
<code class="varname">tab</code> = new <code class="classname">BTab</code>();
<code class="varname">tabView</code>-&gt;<code class="methodname">AddTab</code>(new <code class="classname">DestView</code>(<code class="varname">r</code>), <code class="varname">tab</code>);
<code class="varname">tab</code>-&gt;<code class="methodname">SetLabel</code>("Obliterate");</pre><p>
This code creates a <a class="link" href="BTabView.html" title="BTabView"><code class="classname">BTabView</code></a>,
then sets its view color to the shade of grey used by standard
<a class="link" href="BTabView.html" title="BTabView"><code class="classname">BTabView</code></a> and
<a class="link" href="BTab.html" title="BTab"><code class="classname">BTab</code></a> objects.
</p><p>
Notice that the frame rectangle for the tabs' target views is being
computed by taking the bounds rectangle of the
<a class="link" href="BTabView.html" title="BTabView"><code class="classname">BTabView</code></a>, insetting it by
five pixels on each side (to leave some room between it and the bounding
box of the <a class="link" href="BTabView.html" title="BTabView"><code class="classname">BTabView</code></a>),
and subtracting the tab height from the bottom edge
of the rectangle. This places the target view inside the tab view. You
can adjust this computation to position the target view to your liking.
</p><p>
Then two <a class="link" href="BTab.html" title="BTab"><code class="classname">BTab</code></a> objects are
created and added to the <a class="link" href="BTabView.html" title="BTabView"><code class="classname">BTabView</code></a>. The
<code class="classname">ConstView</code> and <code class="classname">DestView</code> classes are derived fro
<a class="link" href="BView.html" title="BView"><code class="classname">BView</code></a> and represent the
"Construct" and "Obliterate" panels of the window (including the various
controls contained in those panels).
</p><p>
When the user clicks the "Obliterate" tab, the window will change to look
like this:
</p><div class="mediaobject"><img src="./images/TheInterfaceKit/obliterate.png" alt="Obliterated Tab" /></div></div></div><div id="footer"><hr /><div id="footerT">Prev: <a href="BTab_Overview.html">BTab</a>  Up: <a href="TheInterfaceKit_Overview.html">The Interface Kit</a>  Next: <a href="BTextControl_Overview.html">BTextControl</a> </div><div id="footerB"><div id="footerBL"><a href="BTab_Overview.html" title="BTab"><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="BTextControl_Overview.html" title="BTextControl"><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