1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
<HTML>
<head><title>Tab classes overview</title></head>
<BODY BGCOLOR=#FFFFFF>
<A NAME="wxtaboverview"></A><CENTER>
<A HREF="wx.htm"><img align=center src="contents.gif" BORDER=0 ALT="Contents"></A> <A HREF="wx278.htm#overviews"><img align=center src="up.gif" BORDER=0 ALT="Up"></A> <A HREF="wx305.htm#windowstyles"><img align=center src="back.gif" BORDER=0 ALT="Previous"></A> <A HREF="wx307.htm#wxtabviewoverview"><img align=center src="forward.gif" BORDER=0 ALT="Next"></A> </CENTER><HR>
<H2>Tab classes overview</H2>
<P>
Classes: <A HREF="wx232.htm#wxtabview">wxTabView</A>, <A HREF="wx167.htm#wxpaneltabview">wxPanelTabView</A>,
<A HREF="wx230.htm#wxtabbedpanel">wxTabbedPanel</A>, <A HREF="wx229.htm#wxtabbeddialog">wxTabbedDialog</A>,
<A HREF="wx231.htm#wxtabcontrol">wxTabControl</A><P>
The tab classes provides a way to display rows of tabs (like file divider tabs), which can be
used to switch between panels or other information. Tabs are most
commonly used in dialog boxes where the number of options is too great
to fit on one dialog.<P>
<B><FONT COLOR="#FF0000">The appearance and behaviour of a wxTabbedDialog</FONT></B><P>
The following screenshot shows the appearance of the sample tabbed dialog application.<P>
<CENTER></CENTER><img src="wxtab1.gif"></A><CENTER></CENTER><P>
By clicking on the tabs, the user can display a different set of controls. In the example,
the Close and Help buttons remain constant. These two buttons are children of the main dialog box,
whereas the other controls are children of panels which are shown and hidden according to
which tab is active.<P>
A tabbed dialog may have several layers (rows) of tabs, each being
offset vertically and horizontally from the previous. Tabs work in
columns, in that when a tab is pressed, it swaps place with the tab on
the first row of the same column, in order to give the effect of
displaying that tab. All tabs must be of the same width.
This is a constraint of the implementation, but it also
means that the user will find it easier to find tabs since there are
distinct tab columns. On some tabbed dialog implementations, tabs jump around
seemingly randomly because tabs have different widths.
In this implementation, a tab can always be found on the same column.<P>
Tabs are always drawn along the top of the view area; the implementation does
not allow for vertical tabs or any other configuration.<P>
<B><FONT COLOR="#FF0000">Using tabs</FONT></B><P>
The tab classes provide facilities for switching between contexts by
means of 'tabs', which look like file divider tabs.<P>
You must create both a <I>view</I> to handle the tabs, and a <I>window</I> to display the tabs
and related information. The wxTabbedDialog and wxTabbedPanel classes are provided for
convenience, but you could equally well construct your own window class and derived
tab view.<P>
If you wish to display a tabbed dialog - the most common use - you should follow these steps.<P>
<OL>
<LI> Create a new wxTabbedDialog class, and any buttons you wish always to be displayed
(regardless of which tab is active).
<LI> Create a new wxPanelTabView, passing the dialog as the first argument.
<LI> Set the view rectangle with <A HREF="wx232.htm#wxtabviewsetviewrect">wxTabView::SetViewRect</A>,
to specify the area in which child panels will be
shown. The tabs will sit on top of this view rectangle.
<LI> Call <A HREF="wx232.htm#wxtabviewcalculatetabwidth">wxTabView::CalculateTabWidth</A> to calculate
the width of the tabs based on the view area. This is optional if, for example, you have one row
of tabs which does not extend the full width of the view area.
<LI> Call <A HREF="wx232.htm#wxtabviewaddtab">wxTabView::AddTab</A> for each of the tabs you wish to create, passing
a unique identifier and a tab label.
<LI> Construct a number of windows, one for each tab, and call <A HREF="wx167.htm#wxpaneltabviewaddtabwindow">wxPanelTabView::AddTabWindow</A> for
each of these, passing a tab identifier and the window.
<LI> Set the tab selection.
<LI> Show the dialog.
</OL>
<P>
Under Motif, you may also need to size the dialog just before setting the tab selection, for unknown reasons.<P>
Some constraints you need to be aware of:<P>
<UL>
<LI> All tabs must be of the same width.
<LI> Omit the wxTAB_STYLE_COLOUR_INTERIOR flag to ensure that the dialog background
and tab backgrounds match.
</UL>
<P>
<A HREF="#topic1145">Example</A><BR>
<P>
<HR>
<A NAME="topic1145"></A>
<H3>Example</H3>
<P>
The following fragment is taken from the file test.cpp.<P>
<FONT SIZE=2>
<PRE>
void MyDialog::Init(void)
{
int dialogWidth = 365;
int dialogHeight = 390;
wxButton *okButton = new wxButton(this, wxID_OK, "Close", wxPoint(100, 330), wxSize(80, 25));
wxButton *cancelButton = new wxButton(this, wxID_CANCEL, "Cancel", wxPoint(185, 330), wxSize(80, 25));
wxButton *HelpButton = new wxButton(this, wxID_HELP, "Help", wxPoint(270, 330), wxSize(80, 25));
okButton->SetDefault();
// Note, omit the wxTAB_STYLE_COLOUR_INTERIOR, so we will guarantee a match
// with the panel background, and save a bit of time.
wxPanelTabView *view = new wxPanelTabView(this, wxTAB_STYLE_DRAW_BOX);
wxRectangle rect;
rect.x = 5;
rect.y = 70;
// Could calculate the view width from the tab width and spacing,
// as below, but let's assume we have a fixed view width.
// rect.width = view->GetTabWidth()*4 + 3*view->GetHorizontalTabSpacing();
rect.width = 326;
rect.height = 250;
view->SetViewRect(rect);
// Calculate the tab width for 4 tabs, based on a view width of 326 and
// the current horizontal spacing. Adjust the view width to exactly fit
// the tabs.
view->CalculateTabWidth(4, TRUE);
if (!view->AddTab(TEST_TAB_CAT, wxString("Cat")))
return;
if (!view->AddTab(TEST_TAB_DOG, wxString("Dog")))
return;
if (!view->AddTab(TEST_TAB_GUINEAPIG, wxString("Guinea Pig")))
return;
if (!view->AddTab(TEST_TAB_GOAT, wxString("Goat")))
return;
if (!view->AddTab(TEST_TAB_ANTEATER, wxString("Ant-eater")))
return;
if (!view->AddTab(TEST_TAB_SHEEP, wxString("Sheep")))
return;
if (!view->AddTab(TEST_TAB_COW, wxString("Cow")))
return;
if (!view->AddTab(TEST_TAB_HORSE, wxString("Horse")))
return;
if (!view->AddTab(TEST_TAB_PIG, wxString("Pig")))
return;
if (!view->AddTab(TEST_TAB_OSTRICH, wxString("Ostrich")))
return;
if (!view->AddTab(TEST_TAB_AARDVARK, wxString("Aardvark")))
return;
if (!view->AddTab(TEST_TAB_HUMMINGBIRD,wxString("Hummingbird")))
return;
// Add some panels
wxPanel *panel1 = new wxPanel(this, -1, wxPoint(rect.x + 20, rect.y + 10), wxSize(290, 220), wxTAB_TRAVERSAL);
(void)new wxButton(panel1, -1, "Press me", wxPoint(10, 10));
(void)new wxTextCtrl(panel1, -1, "1234", wxPoint(10, 40), wxSize(120, 150));
view->AddTabWindow(TEST_TAB_CAT, panel1);
wxPanel *panel2 = new wxPanel(this, -1, wxPoint(rect.x + 20, rect.y + 10), wxSize(290, 220));
wxString animals[] = { "Fox", "Hare", "Rabbit", "Sabre-toothed tiger", "T Rex" };
(void)new wxListBox(panel2, -1, wxPoint(5, 5), wxSize(170, 80), 5, animals);
(void)new wxTextCtrl(panel2, -1, "Some notes about the animals in this house", wxPoint(5, 100), wxSize(170, 100)),
wxTE_MULTILINE;
view->AddTabWindow(TEST_TAB_DOG, panel2);
// Don't know why this is necessary under Motif...
#ifdef wx_motif
this->SetSize(dialogWidth, dialogHeight-20);
#endif
view->SetTabSelection(TEST_TAB_CAT);
this->Centre(wxBOTH);
}
</PRE>
</FONT><P>
</BODY></HTML>
|
