You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pivot.apache.org by sm...@apache.org on 2012/01/19 01:51:42 UTC
svn commit: r1233143 [41/47] - in /pivot/site/trunk/deploy: ./ 2.0.1/
2.0.1/docs/ 2.0.1/docs/api/ demos/ tutorials/
Modified: pivot/site/trunk/deploy/tutorials/tab-panes.html
URL: http://svn.apache.org/viewvc/pivot/site/trunk/deploy/tutorials/tab-panes.html?rev=1233143&r1=1233142&r2=1233143&view=diff
==============================================================================
--- pivot/site/trunk/deploy/tutorials/tab-panes.html (original)
+++ pivot/site/trunk/deploy/tutorials/tab-panes.html Thu Jan 19 00:51:39 2012
@@ -1,4 +1,4 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
@@ -14,340 +14,342 @@ distributed under the License is distrib
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
---><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><title>Tab Panes | Apache Pivot</title><link xmlns="" type="text/css" rel="stylesheet" href="/styles/pivot.css"><script xmlns="http://www.w3.org/1999/xhtml" type="text/javascript">
- var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
- document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
- </script><script type="text/javascript">
- try {
- var pageTracker = _gat._getTracker("UA-7977275-3");
- pageTracker._trackPageview();
- } catch(err) {}</script></head><body><div xmlns="" id="wrapper"><div id="main"><div id="header"><div class="logo"><a href="/index.html"><img title="Apache Pivot Homepage" alt="Apache Pivot" src="/images/logo.png"></a></div><div class="tagline"><img style="visibility:hidden" alt="Rich Internet Applications in Java" src="/images/tagline.png"></div><ul class="navi"><li><a href="/demos/">Demos</a></li><li><a href="/download.cgi#2.0">Download</a></li><li><a href="/tutorials/">Tutorial</a></li><li><a href="/get-involved.html">Get Involved</a></li><li><a href="/about.html">About</a></li></ul></div><div class="group" id="contentBase"><h1>Tab Panes</h1><ul class="naviLeft"><li><a href="/tutorials/sample-application.html">Sample Application</a></li><li><a href="/tutorials/platform-overview.html">Platform Overview</a></li><li><a href="/tutorials/hello-world.html">Hello, World!</a></li><li><a href="/tutorials/hello-bxml.html">Hello, BXML!</a></li><li><a href="/tutorials/
component-and-container.html">Component & Container</a></li><li><a href="/tutorials/labels-and-image-views.html">Labels & Image Views</a></li><li><a href="/tutorials/svg-images.html">SVG Images</a></li><li><a href="/tutorials/buttons.html">Buttons</a></li><li><a href="/tutorials/push-buttons.html">Push Buttons</a></li><li><a href="/tutorials/toggle-buttons.html">Toggle Buttons</a></li><li><a href="/tutorials/radio-buttons.html">Radio Buttons</a></li><li><a href="/tutorials/checkboxes.html">Checkboxes</a></li><li><a href="/tutorials/link-buttons.html">Link Buttons</a></li><li><a href="/tutorials/lists.html">Lists</a></li><li><a href="/tutorials/list-buttons.html">List Buttons</a></li><li><a href="/tutorials/repeatable-list-buttons.html">Repeatable List Buttons</a></li><li><a href="/tutorials/text.html">Text</a></li><li><a href="/tutorials/suggestion-popups.html">Suggestion Popups</a></li><li><a href="/tutorials/text-areas.html">Text Areas</a></li><li><a href="/tutoria
ls/separators.html">Separators</a></li><li><a href="/tutorials/layout-containers.html">Layout Containers</a></li><li><a href="/tutorials/flow-panes.html">Flow Panes</a></li><li><a href="/tutorials/box-panes.html">Box Panes</a></li><li><a href="/tutorials/grid-panes.html">Grid Panes</a></li><li><a href="/tutorials/table-panes.html">Table Panes</a></li><li><a href="/tutorials/borders.html">Borders</a></li><li><a href="/tutorials/stack-panes.html">Stack Panes</a></li><li><a href="/tutorials/split-panes.html">Split Panes</a></li><li><a href="/tutorials/forms.html">Forms</a></li><li><a href="/tutorials/panels.html">Panels</a></li><li><a href="/tutorials/navigation-containers.html">Navigation Containers</a></li><li><a href="/tutorials/card-panes.html">Card Panes</a></li><li><a href="/tutorials/tab-panes.html">Tab Panes</a></li><li><a href="/tutorials/accordions.html">Accordions</a></li><li><a href="/tutorials/expanders.html">Expanders</a></li><li><a href="/tutorials/rollups.html">
Rollups</a></li><li><a href="/tutorials/viewports.html">Viewports</a></li><li><a href="/tutorials/scroll-panes.html">Scroll Panes</a></li><li><a href="/tutorials/panoramas.html">Panoramas</a></li><li><a href="/tutorials/progress-indicators.html">Progress Indicators</a></li><li><a href="/tutorials/meters.html">Meters</a></li><li><a href="/tutorials/activity-indicators.html">Activity Indicators</a></li><li><a href="/tutorials/bounded-range-components.html">Bounded Range Components</a></li><li><a href="/tutorials/sliders.html">Sliders</a></li><li><a href="/tutorials/scroll-bars.html">Scroll Bars</a></li><li><a href="/tutorials/spinners.html">Spinners</a></li><li><a href="/tutorials/calendars.html">Calendars</a></li><li><a href="/tutorials/menus.html">Menus</a></li><li><a href="/tutorials/context-menus.html">Context Menus</a></li><li><a href="/tutorials/menu-bars.html">Menu Bars</a></li><li><a href="/tutorials/menu-buttons.html">Menu Buttons</a></li><li><a href="/tutorials/color
-choosers.html">Color Choosers</a></li><li><a href="/tutorials/table-views.html">Table Views</a></li><li><a href="/tutorials/table-views.json.html">JSON-based TableView</a></li><li><a href="/tutorials/table-views.custom.html">Custom TableView</a></li><li><a href="/tutorials/tree-views.html">Tree Views</a></li><li><a href="/tutorials/file-browsing.html">File Browsing</a></li><li><a href="/tutorials/windows.html">Windows</a></li><li><a href="/tutorials/clipboard.html">Clipboard</a></li><li><a href="/tutorials/drag-and-drop.html">Drag and Drop</a></li><li><a href="/tutorials/effects.html">Effects</a></li><li><a href="/tutorials/effects.transitions.html">Transitions</a></li><li><a href="/tutorials/data-binding.html">Data Binding</a></li><li><a href="/tutorials/property-binding.html">Property Binding</a></li><li><a href="/tutorials/localization.html">Localization</a></li><li><a href="/tutorials/background-tasks.html">Background Tasks</a></li><li><a href="/tutorials/web-queries.ht
ml">Web Queries</a></li><li><a href="/tutorials/query-servlet.html">QueryServlet</a></li><li><a href="/tutorials/scripting.html">Scripting</a></li><li><a href="/tutorials/summary.html">Summary</a></li><li><a href="/tutorials/stock-tracker.html">The "Stock Tracker" Application</a></li><li><a href="/tutorials/stock-tracker.ui.html">UI Markup Using BXML</a></li><li><a href="/tutorials/stock-tracker.events.html">Event Handling</a></li><li><a href="/tutorials/stock-tracker.web-queries.html">Web Queries</a></li><li><a href="/tutorials/stock-tracker.data-binding.html">Data Binding</a></li><li><a href="/tutorials/stock-tracker.localization.html">Localization</a></li><li><a href="/tutorials/bxml-primer.html">BXML Primer</a></li></ul><div class="content"><style type="text/css">
- applet {
- border: 1px solid #999999;
- }
- </style><!--NOTE: Syntax highlighting script is LGPL--><script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script><script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"></script><script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script><script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script><link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"><link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"><script type="text/javascript">
- SyntaxHighlighter.all();
- </script><div class="section">
- <p>
- Functionally, tab panes are similar to card panes in that they show only one of a
- collection of components at a time. Unlike card panes, tab panes include built-in
- support for navigating between the components, which are called "tabs". The following
- example demonstrates the use of the <tt>TabPane</tt> component:
- </p>
-
- <script src="http://java.com/js/deployJava.js" type="text/javascript"></script><script type="text/javascript">
-
- var attributes = {
- code:"org.apache.pivot.wtk.BrowserApplicationContext$HostApplet",
- width:"680",
- height:"480"
- };
-
-
-
-
-
- var libraries = [];
- libraries.push("/lib/pivot-core-2.0.jar");
- libraries.push("/lib/pivot-wtk-2.0.jar");
- libraries.push("/lib/pivot-wtk-terra-2.0.jar");
- libraries.push("/lib/pivot-tutorials-2.0.jar");
-
- libraries.push("/lib/svgSalamander-tiny.jar");
-
-
- attributes.archive = libraries.join(",");
-
-
- var parameters = {
- codebase_lookup:false,
- application_class_name:'org.apache.pivot.wtk.ScriptApplication'
- };
-
-
- var javaArguments = ["-Dsun.awt.noerasebackground=true",
- "-Dsun.awt.erasebackgroundonresize=true"];
-
-
-
- parameters.java_arguments = javaArguments.join(" ");
-
-
-
- var startupProperties = [];
-
- startupProperties.push("src=/org/apache/pivot/tutorials/navigation/tab_panes.bxml");
-
- parameters.startup_properties = startupProperties.join("&");
-
-
- deployJava.runApplet(attributes, parameters, "1.6");
- </script>
-
- <p>
- The BXML source that produces this example is as follows. The tab pane contains three
- tabs, each of which are flow panes containing bordered labels at different sizes. Like
- <tt>CardPane</tt>, the preferred size of a tab pane is the maximum of the preferred
- widths and heights of the tabs, plus the size of the area allocated to the tab
- navigation, and each tab is sized to fill the entire space allocated to the tabs. The
- tab pane itself is contained in a flow pane so that changes to its preferred size are
- easily visible.
- </p>
-
- <p>
- Note that, like the <a href="forms.html">Form</a> container, <tt>TabPane</tt> defines
- attributes that a caller can set to customize the appearance of the tab.
- <tt>TabPane</tt> currently defines two attributes: "label" and "icon" (additional
- attributes may be added in the future to support closeable tabs or other such features).
- Also note that disabling a tab component also disables its corresponding tab button,
- preventing the user from navigating to that tab:
- </p>
-
- <pre class="brush:xml">
-
- <navigation:TabPanes title="Tab Panes" maximized="true"
- xmlns:bxml="http://pivot.apache.org/bxml"
- xmlns:content="org.apache.pivot.wtk.content"
- xmlns:navigation="org.apache.pivot.tutorials.navigation"
- xmlns="org.apache.pivot.wtk">
- <bxml:define>
- <Prompt bxml:id="confirmCloseTabPrompt" title="Confirm Close Tab"
- message="Really close this tab?"
- options="['Cancel', 'OK']" selectedOptionIndex="1"/>
- </bxml:define>
-
- <TablePane styles="{padding:8, horizontalSpacing:6}">
- <columns>
- <TablePane.Column width="1*"/>
- <TablePane.Column/>
- </columns>
-
- <TablePane.Row height="1*">
- <Border styles="{padding:12}">
- <BoxPane>
- <TabPane bxml:id="tabPane">
- <corner>
- <BoxPane bxml:id="cornerBoxPane" styles="{horizontalAlignment:'right'}">
- <TextInput textSize="10"/>
- </BoxPane>
- </corner>
-
- <BoxPane styles="{horizontalAlignment:'center', verticalAlignment:'center'}">
- <TabPane.tabData>
- <content:ButtonData icon="/org/apache/pivot/tutorials/bell.png"
- text="Bell"/>
- </TabPane.tabData>
- <Border styles="{padding:2}">
- <Label text="240x180" preferredWidth="240" preferredHeight="180"
- styles="{horizontalAlignment:'center', verticalAlignment:'center'}"/>
- </Border>
- </BoxPane>
-
- <BoxPane styles="{horizontalAlignment:'center', verticalAlignment:'center'}">
- <TabPane.tabData>
- <content:ButtonData icon="/org/apache/pivot/tutorials/clock.png"
- text="Clock"/>
- </TabPane.tabData>
- <Border styles="{padding:2}">
- <Label text="320x240" preferredWidth="320" preferredHeight="240"
- styles="{horizontalAlignment:'center', verticalAlignment:'center'}"/>
- </Border>
- </BoxPane>
-
- <BoxPane styles="{horizontalAlignment:'center', verticalAlignment:'center'}">
- <TabPane.tabData>
- <content:ButtonData icon="/org/apache/pivot/tutorials/house.png"
- text="House"/>
- </TabPane.tabData>
- <Border styles="{padding:2}">
- <Label text="480x360" preferredWidth="480" preferredHeight="360"
- styles="{horizontalAlignment:'center', verticalAlignment:'center'}"/>
- </Border>
- </BoxPane>
-
- <BoxPane enabled="false">
- <TabPane.tabData>
- <content:ButtonData icon="/org/apache/pivot/tutorials/star.png"
- text="Star"/>
- </TabPane.tabData>
-
- <Border styles="{padding:2}">
- <Label text="480x360 (disabled)" preferredWidth="480" preferredHeight="360"
- styles="{horizontalAlignment:'center', verticalAlignment:'center'}"/>
- </Border>
- </BoxPane>
- </TabPane>
- </BoxPane>
- </Border>
-
- <Border styles="{padding:2}">
- <BoxPane orientation="vertical" styles="{padding:4, spacing:6}">
- <Checkbox bxml:id="closeableCheckbox" buttonData="Closeable"/>
- <Checkbox bxml:id="collapsibleCheckbox" buttonData="Collapsible"/>
-
- <Label text="Tab orientation:"/>
- <bxml:define>
- <ButtonGroup bxml:id="tabOrientation"/>
- </bxml:define>
- <RadioButton bxml:id="horizontalRadioButton" buttonData="Horizontal" selected="true"
- buttonGroup="$tabOrientation"/>
- <RadioButton bxml:id="verticalRadioButton" buttonData="Vertical"
- buttonGroup="$tabOrientation"/>
- </BoxPane>
- </Border>
- </TablePane.Row>
- </TablePane>
- </navigation:TabPanes>
-
- </pre>
-
- <p>
- The default tab pane skin provides some styles for customizing the appearance and
- behavior of the tab pane: "collapsible" and "tabOrientation". The "collapsible" style
- is a boolean that controls how the tab pane responds to clicks on the tab buttons. When
- set to <tt>true</tt>, clicking on the selected tab causes the tab pane to "collapse"
- such that only the tab buttons remain visible. This is handy in situations where screen
- real estate is at a premium, or when the content of the tab pane may be only
- periodically relevant to the user but should still be conveniently accessible. The
- "tabOrientation" style controls how the buttons themselves are laid out - either
- horizontally or vertically.
- </p>
-
- <p>
- The Java source for this example is as follows. It is fairly simple, consisting mostly
- of event handling code for the radio buttons and checkbox:
- </p>
-
- <pre class="brush:java">
-
- package org.apache.pivot.tutorials.navigation;
-
- import java.net.URL;
-
- import org.apache.pivot.beans.Bindable;
- import org.apache.pivot.collections.Map;
- import org.apache.pivot.util.Resources;
- import org.apache.pivot.util.Vote;
- import org.apache.pivot.wtk.Button;
- import org.apache.pivot.wtk.ButtonStateListener;
- import org.apache.pivot.wtk.Checkbox;
- import org.apache.pivot.wtk.BoxPane;
- import org.apache.pivot.wtk.Orientation;
- import org.apache.pivot.wtk.Prompt;
- import org.apache.pivot.wtk.RadioButton;
- import org.apache.pivot.wtk.Sheet;
- import org.apache.pivot.wtk.SheetCloseListener;
- import org.apache.pivot.wtk.TabPane;
- import org.apache.pivot.wtk.TabPaneListener;
- import org.apache.pivot.wtk.Window;
-
- public class TabPanes extends Window implements Bindable {
- private Prompt confirmCloseTabPrompt = null;
- private TabPane tabPane = null;
- private Checkbox closeableCheckbox = null;
- private Checkbox collapsibleCheckbox = null;
- private RadioButton horizontalRadioButton = null;
- private RadioButton verticalRadioButton = null;
- private BoxPane cornerBoxPane = null;
-
- private boolean confirmCloseTab = true;
-
- @Override
- public void initialize(Map<String, Object> namespace, URL location, Resources resources) {
- confirmCloseTabPrompt = (Prompt)namespace.get("confirmCloseTabPrompt");
- tabPane = (TabPane)namespace.get("tabPane");
- closeableCheckbox = (Checkbox)namespace.get("closeableCheckbox");
- collapsibleCheckbox = (Checkbox)namespace.get("collapsibleCheckbox");
- horizontalRadioButton = (RadioButton)namespace.get("horizontalRadioButton");
- verticalRadioButton = (RadioButton)namespace.get("verticalRadioButton");
- cornerBoxPane = (BoxPane)namespace.get("cornerBoxPane");
-
- tabPane.getTabPaneListeners().add(new TabPaneListener.Adapter() {
- @Override
- public Vote previewRemoveTabs(final TabPane tabPane, final int index, final int count) {
- Vote vote;
- if (confirmCloseTab) {
- confirmCloseTabPrompt.open(TabPanes.this, new SheetCloseListener() {
- @Override
- public void sheetClosed(Sheet sheet) {
- if (confirmCloseTabPrompt.getResult()
- && confirmCloseTabPrompt.getSelectedOptionIndex() == 1) {
- confirmCloseTab = false;
-
- int n = tabPane.getTabs().getLength();
- if (index < n - 1) {
- tabPane.setSelectedIndex(index + 1);
- } else {
- tabPane.setSelectedIndex(index - 1);
- }
-
- tabPane.getTabs().remove(index, count);
-
- confirmCloseTab = true;
- }
- }
- });
-
- vote = Vote.DENY;
- } else {
- vote = Vote.APPROVE;
- }
-
- return vote;
- }
- });
-
- ButtonStateListener checkboxStateListener = new ButtonStateListener() {
- @Override
- public void stateChanged(Button button, Button.State previousState) {
- updateTabPane();
- }
- };
-
- closeableCheckbox.getButtonStateListeners().add(checkboxStateListener);
- collapsibleCheckbox.getButtonStateListeners().add(checkboxStateListener);
-
- ButtonStateListener radioButtonStateListener = new ButtonStateListener() {
- @Override
- public void stateChanged(Button button, Button.State previousState) {
- if (button.isSelected()) {
- updateTabPane();
- }
- }
- };
-
- horizontalRadioButton.getButtonStateListeners().add(radioButtonStateListener);
- verticalRadioButton.getButtonStateListeners().add(radioButtonStateListener);
-
- updateTabPane();
- }
-
- private void updateTabPane() {
- tabPane.setCloseable(closeableCheckbox.isSelected());
- tabPane.setCollapsible(collapsibleCheckbox.isSelected());
-
- if (horizontalRadioButton.isSelected()) {
- tabPane.getStyles().put("tabOrientation", Orientation.HORIZONTAL);
- if (tabPane.getCorner() == null) {
- tabPane.setCorner(cornerBoxPane);
- }
- } else {
- tabPane.getStyles().put("tabOrientation", Orientation.VERTICAL);
- if (tabPane.getCorner() == cornerBoxPane) {
- tabPane.setCorner(null);
- }
- }
- }
- }
-
- </pre>
-
- <p>
- Note that this example also demonstrates the use of the tab pane corner component. For
- horizontally oriented tabs, this component appears in the upper right corner; for
- vertical tabs, it appears in the lower left. The corner component in this example is a
- flow pane containing a text input; it is hidden when the orientation is changed to
- vertical because the corner component itself is not rotated and would cause the button
- area to grow horizontally.
- </p>
- </div><p>Next: <a href="accordions.html">Accordions</a></p></div></div></div><div class="group" id="footer"><div class="footerLogo">Copyright (c) 1999-2011<br>The Apache Software Foundation.</div><div class="footerLinks"><ul class="footerMenuGr"><li><strong>Demos</strong><ul><li><a href="/demos/kitchen-sink.html" target="_new">"Kitchen Sink"</a></li><li><a href="/demos/component-explorer.html" target="_new">Component Explorer</a></li><li><a href="http://ixnay.biz/pivot-jfree-demos/charts_demo.html" target="_new">Charting</a></li><li><a href="/demos/">More Demos</a></li></ul></li><li><strong>Documentation</strong><ul><li><a href="/getting-started.html">Getting Started</a></li><li><a href="/tutorials/">Tutorial</a></li><li><a href="/faq.html">FAQ</a></li><li><a href="/2.0/docs/api/">Javadoc (2.0)</a></li></ul></li><li><strong>Get Involved</strong><ul><li><a href="/svn.html">SVN Repositories</a></li><li><a href="/lists.html">Mailing Lists</a></li><li><a href="http://issues.
apache.org/jira/browse/PIVOT">Bug Database</a></li><li><a href="http://cwiki.apache.org/PIVOT/">Wiki</a></li></ul></li><li><strong>Related</strong><ul><li><a href="http://code.google.com/p/pivot-jfree/">JFreeChart Provider</a></li></ul></li><li><strong>About</strong><ul><li><a href="/who-we-are.html">Who We Are</a></li><li><a href="/contact.html">Contact</a></li><li><a href="/news.html">News</a></li><li><a href="/legal.html">Legal/License</a></li></ul></li></ul></div></div></div></body></html>
\ No newline at end of file
+--><html xmlns="http://www.w3.org/1999/xhtml"><head><META http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Tab Panes | Apache Pivot</title><link href="/styles/pivot.css" rel="stylesheet" type="text/css"><script type="text/javascript">
+ var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+ document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+ </script><script type="text/javascript">
+ try {
+ var pageTracker = _gat._getTracker("UA-7977275-3");
+ pageTracker._trackPageview();
+ } catch(err) {}</script></head><body><div id="wrapper"><div id="main"><div id="header"><div xmlns="" class="logo"><a href="/index.html"><img src="/images/logo.png" alt="Apache Pivot" title="Apache Pivot Homepage"></a></div><div class="tagline"><img src="/images/tagline.png" alt="Rich Internet Applications in Java" style="visibility:hidden"></div><ul class="navi"><li><a href="/demos/">Demos</a></li><li><a href="/download.cgi#2.0.1">Download</a></li><li><a href="/tutorials/">Tutorial</a></li><li><a href="/get-involved.html">Get Involved</a></li><li><a href="/about.html">About</a></li></ul></div><div id="contentBase" class="group"><h1>Tab Panes</h1><ul class="naviLeft"><li><a href="/tutorials/sample-application.html">Sample Application</a></li><li><a href="/tutorials/platform-overview.html">Platform Overview</a></li><li><a href="/tutorials/hello-world.html">Hello, World!</a></li><li><a href="/tutorials/hello-bxml.html">Hello, BXML!</a></li><li><a href="/tutorial
s/component-and-container.html">Component & Container</a></li><li><a href="/tutorials/labels-and-image-views.html">Labels & Image Views</a></li><li><a href="/tutorials/svg-images.html">SVG Images</a></li><li><a href="/tutorials/buttons.html">Buttons</a></li><li><a href="/tutorials/push-buttons.html">Push Buttons</a></li><li><a href="/tutorials/toggle-buttons.html">Toggle Buttons</a></li><li><a href="/tutorials/radio-buttons.html">Radio Buttons</a></li><li><a href="/tutorials/checkboxes.html">Checkboxes</a></li><li><a href="/tutorials/link-buttons.html">Link Buttons</a></li><li><a href="/tutorials/lists.html">Lists</a></li><li><a href="/tutorials/list-buttons.html">List Buttons</a></li><li><a href="/tutorials/repeatable-list-buttons.html">Repeatable List Buttons</a></li><li><a href="/tutorials/text.html">Text</a></li><li><a href="/tutorials/suggestion-popups.html">Suggestion Popups</a></li><li><a href="/tutorials/text-areas.html">Text Areas</a></li><li><a href="/tutor
ials/separators.html">Separators</a></li><li><a href="/tutorials/layout-containers.html">Layout Containers</a></li><li><a href="/tutorials/flow-panes.html">Flow Panes</a></li><li><a href="/tutorials/box-panes.html">Box Panes</a></li><li><a href="/tutorials/fill-panes.html">Fill Panes</a></li><li><a href="/tutorials/grid-panes.html">Grid Panes</a></li><li><a href="/tutorials/table-panes.html">Table Panes</a></li><li><a href="/tutorials/borders.html">Borders</a></li><li><a href="/tutorials/stack-panes.html">Stack Panes</a></li><li><a href="/tutorials/split-panes.html">Split Panes</a></li><li><a href="/tutorials/forms.html">Forms</a></li><li><a href="/tutorials/panels.html">Panels</a></li><li><a href="/tutorials/navigation-containers.html">Navigation Containers</a></li><li><a href="/tutorials/card-panes.html">Card Panes</a></li><li><a href="/tutorials/tab-panes.html">Tab Panes</a></li><li><a href="/tutorials/accordions.html">Accordions</a></li><li><a href="/tutorials/expanders.
html">Expanders</a></li><li><a href="/tutorials/rollups.html">Rollups</a></li><li><a href="/tutorials/viewports.html">Viewports</a></li><li><a href="/tutorials/scroll-panes.html">Scroll Panes</a></li><li><a href="/tutorials/panoramas.html">Panoramas</a></li><li><a href="/tutorials/progress-indicators.html">Progress Indicators</a></li><li><a href="/tutorials/meters.html">Meters</a></li><li><a href="/tutorials/activity-indicators.html">Activity Indicators</a></li><li><a href="/tutorials/bounded-range-components.html">Bounded Range Components</a></li><li><a href="/tutorials/sliders.html">Sliders</a></li><li><a href="/tutorials/scroll-bars.html">Scroll Bars</a></li><li><a href="/tutorials/spinners.html">Spinners</a></li><li><a href="/tutorials/calendars.html">Calendars</a></li><li><a href="/tutorials/menus.html">Menus</a></li><li><a href="/tutorials/context-menus.html">Context Menus</a></li><li><a href="/tutorials/menu-bars.html">Menu Bars</a></li><li><a href="/tutorials/menu-bu
ttons.html">Menu Buttons</a></li><li><a href="/tutorials/color-choosers.html">Color Choosers</a></li><li><a href="/tutorials/table-views.html">Table Views</a></li><li><a href="/tutorials/table-views.json.html">JSON-based TableView</a></li><li><a href="/tutorials/table-views.custom.html">Custom TableView</a></li><li><a href="/tutorials/tree-views.html">Tree Views</a></li><li><a href="/tutorials/file-browsing.html">File Browsing</a></li><li><a href="/tutorials/windows.html">Windows</a></li><li><a href="/tutorials/clipboard.html">Clipboard</a></li><li><a href="/tutorials/drag-and-drop.html">Drag and Drop</a></li><li><a href="/tutorials/effects.html">Effects</a></li><li><a href="/tutorials/effects.transitions.html">Transitions</a></li><li><a href="/tutorials/data-binding.html">Data Binding</a></li><li><a href="/tutorials/property-binding.html">Property Binding</a></li><li><a href="/tutorials/localization.html">Localization</a></li><li><a href="/tutorials/background-tasks.html">B
ackground Tasks</a></li><li><a href="/tutorials/web-queries.html">Web Queries</a></li><li><a href="/tutorials/query-servlet.html">QueryServlet</a></li><li><a href="/tutorials/scripting.html">Scripting</a></li><li><a href="/tutorials/summary.html">Summary</a></li><li><a href="/tutorials/stock-tracker.html">The "Stock Tracker" Application</a></li><li><a href="/tutorials/stock-tracker.ui.html">UI Markup Using BXML</a></li><li><a href="/tutorials/stock-tracker.events.html">Event Handling</a></li><li><a href="/tutorials/stock-tracker.web-queries.html">Web Queries</a></li><li><a href="/tutorials/stock-tracker.data-binding.html">Data Binding</a></li><li><a href="/tutorials/stock-tracker.localization.html">Localization</a></li><li><a href="/tutorials/bxml-primer.html">BXML Primer</a></li></ul><div class="content"><style type="text/css">
+ applet {
+ border: 1px solid #999999;
+ }
+ </style><!--NOTE: Syntax highlighting script is LGPL--><script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script><script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js"></script><script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"></script><script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script><link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css"><link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css"><script type="text/javascript">
+ SyntaxHighlighter.all();
+ </script><div class="section">
+ <p>
+ Functionally, tab panes are similar to card panes in that they show only one of a
+ collection of components at a time. Unlike card panes, tab panes include built-in
+ support for navigating between the components, which are called "tabs". The following
+ example demonstrates the use of the <tt>TabPane</tt> component:
+ </p>
+
+ <script type="text/javascript" src="http://java.com/js/deployJava.js"></script><script type="text/javascript">
+
+ var attributes = {
+ code:"org.apache.pivot.wtk.BrowserApplicationContext$HostApplet",
+ width:"680",
+ height:"480"
+ };
+
+
+
+
+
+ var libraries = [];
+ libraries.push("/lib/pivot-core-2.0.1.jar");
+ libraries.push("/lib/pivot-wtk-2.0.1.jar");
+ libraries.push("/lib/pivot-wtk-terra-2.0.1.jar");
+ libraries.push("/lib/pivot-tutorials-2.0.1.jar");
+
+ libraries.push("/lib/svgSalamander-tiny.jar");
+
+
+ attributes.archive = libraries.join(",");
+
+
+ var parameters = {
+ codebase_lookup:false,
+ application_class_name:'org.apache.pivot.wtk.ScriptApplication'
+ };
+
+
+ var javaArguments = ["-Dsun.awt.noerasebackground=true",
+ "-Dsun.awt.erasebackgroundonresize=true"];
+
+
+
+ parameters.java_arguments = javaArguments.join(" ");
+
+
+
+ var startupProperties = [];
+
+ startupProperties.push("src=/org/apache/pivot/tutorials/navigation/tab_panes.bxml");
+
+ parameters.startup_properties = startupProperties.join("&");
+
+
+ deployJava.runApplet(attributes, parameters, "1.6");
+ </script>
+
+ <p>
+ The BXML source that produces this example is as follows. The tab pane contains three
+ tabs, each of which are flow panes containing bordered labels at different sizes. Like
+ <tt>CardPane</tt>, the preferred size of a tab pane is the maximum of the preferred
+ widths and heights of the tabs, plus the size of the area allocated to the tab
+ navigation, and each tab is sized to fill the entire space allocated to the tabs. The
+ tab pane itself is contained in a flow pane so that changes to its preferred size are
+ easily visible.
+ </p>
+
+ <p>
+ Note that, like the <a href="forms.html">Form</a> container, <tt>TabPane</tt> defines
+ attributes that a caller can set to customize the appearance of the tab.
+ <tt>TabPane</tt> currently defines two attributes: "label" and "icon" (additional
+ attributes may be added in the future to support closeable tabs or other such features).
+ Also note that disabling a tab component also disables its corresponding tab button,
+ preventing the user from navigating to that tab:
+ </p>
+
+ <pre class="brush:xml">
+
+ <navigation:TabPanes title="Tab Panes" maximized="true"
+ xmlns:bxml="http://pivot.apache.org/bxml"
+ xmlns:content="org.apache.pivot.wtk.content"
+ xmlns:navigation="org.apache.pivot.tutorials.navigation"
+ xmlns="org.apache.pivot.wtk">
+ <bxml:define>
+ <Prompt bxml:id="confirmCloseTabPrompt" title="Confirm Close Tab"
+ message="Really close this tab?"
+ options="['Cancel', 'OK']" selectedOptionIndex="1"/>
+ </bxml:define>
+
+ <TablePane styles="{padding:8, horizontalSpacing:6}">
+ <columns>
+ <TablePane.Column width="1*"/>
+ <TablePane.Column/>
+ </columns>
+
+ <TablePane.Row height="1*">
+ <Border styles="{padding:12}">
+ <BoxPane>
+ <TabPane bxml:id="tabPane">
+ <corner>
+ <BoxPane bxml:id="cornerBoxPane" styles="{horizontalAlignment:'right'}">
+ <TextInput textSize="10"/>
+ </BoxPane>
+ </corner>
+
+ <BoxPane styles="{horizontalAlignment:'center', verticalAlignment:'center'}">
+ <TabPane.tabData>
+ <content:ButtonData icon="/org/apache/pivot/tutorials/bell.png"
+ text="Bell"/>
+ </TabPane.tabData>
+ <Border styles="{padding:2}">
+ <Label text="240x180" preferredWidth="240" preferredHeight="180"
+ styles="{horizontalAlignment:'center', verticalAlignment:'center'}"/>
+ </Border>
+ </BoxPane>
+
+ <BoxPane styles="{horizontalAlignment:'center', verticalAlignment:'center'}">
+ <TabPane.tabData>
+ <content:ButtonData icon="/org/apache/pivot/tutorials/clock.png"
+ text="Clock"/>
+ </TabPane.tabData>
+ <Border styles="{padding:2}">
+ <Label text="320x240" preferredWidth="320" preferredHeight="240"
+ styles="{horizontalAlignment:'center', verticalAlignment:'center'}"/>
+ </Border>
+ </BoxPane>
+
+ <BoxPane styles="{horizontalAlignment:'center', verticalAlignment:'center'}">
+ <TabPane.tabData>
+ <content:ButtonData icon="/org/apache/pivot/tutorials/house.png"
+ text="House"/>
+ </TabPane.tabData>
+ <Border styles="{padding:2}">
+ <Label text="480x360" preferredWidth="480" preferredHeight="360"
+ styles="{horizontalAlignment:'center', verticalAlignment:'center'}"/>
+ </Border>
+ </BoxPane>
+
+ <BoxPane enabled="false">
+ <TabPane.tabData>
+ <content:ButtonData icon="/org/apache/pivot/tutorials/star.png"
+ text="Star"/>
+ </TabPane.tabData>
+
+ <Border styles="{padding:2}">
+ <Label text="480x360 (disabled)" preferredWidth="480" preferredHeight="360"
+ styles="{horizontalAlignment:'center', verticalAlignment:'center'}"/>
+ </Border>
+ </BoxPane>
+ </TabPane>
+ </BoxPane>
+ </Border>
+
+ <Border styles="{padding:2}">
+ <BoxPane orientation="vertical" styles="{padding:4, spacing:6}">
+ <Checkbox bxml:id="closeableCheckbox" buttonData="Closeable"/>
+ <Checkbox bxml:id="collapsibleCheckbox" buttonData="Collapsible"/>
+
+ <Label text="Tab orientation:"/>
+ <bxml:define>
+ <ButtonGroup bxml:id="tabOrientation"/>
+ </bxml:define>
+ <RadioButton bxml:id="horizontalRadioButton" buttonData="Horizontal" selected="true"
+ buttonGroup="$tabOrientation"/>
+ <RadioButton bxml:id="verticalRadioButton" buttonData="Vertical"
+ buttonGroup="$tabOrientation"/>
+ </BoxPane>
+ </Border>
+ </TablePane.Row>
+ </TablePane>
+ </navigation:TabPanes>
+
+ </pre>
+
+ <p>
+ The default tab pane skin provides some styles for customizing the appearance and
+ behavior of the tab pane: "collapsible" and "tabOrientation". The "collapsible" style
+ is a boolean that controls how the tab pane responds to clicks on the tab buttons. When
+ set to <tt>true</tt>, clicking on the selected tab causes the tab pane to "collapse"
+ such that only the tab buttons remain visible. This is handy in situations where screen
+ real estate is at a premium, or when the content of the tab pane may be only
+ periodically relevant to the user but should still be conveniently accessible. The
+ "tabOrientation" style controls how the buttons themselves are laid out - either
+ horizontally or vertically.
+ </p>
+
+ <p>
+ The Java source for this example is as follows. It is fairly simple, consisting mostly
+ of event handling code for the radio buttons and checkbox:
+ </p>
+
+ <pre class="brush:java">
+
+ package org.apache.pivot.tutorials.navigation;
+
+ import java.net.URL;
+
+ import org.apache.pivot.beans.Bindable;
+ import org.apache.pivot.collections.Map;
+ import org.apache.pivot.util.Resources;
+ import org.apache.pivot.util.Vote;
+ import org.apache.pivot.wtk.Button;
+ import org.apache.pivot.wtk.ButtonStateListener;
+ import org.apache.pivot.wtk.Checkbox;
+ import org.apache.pivot.wtk.BoxPane;
+ import org.apache.pivot.wtk.Orientation;
+ import org.apache.pivot.wtk.Prompt;
+ import org.apache.pivot.wtk.RadioButton;
+ import org.apache.pivot.wtk.Sheet;
+ import org.apache.pivot.wtk.SheetCloseListener;
+ import org.apache.pivot.wtk.TabPane;
+ import org.apache.pivot.wtk.TabPaneListener;
+ import org.apache.pivot.wtk.Window;
+
+ public class TabPanes extends Window implements Bindable {
+ private Prompt confirmCloseTabPrompt = null;
+ private TabPane tabPane = null;
+ private Checkbox closeableCheckbox = null;
+ private Checkbox collapsibleCheckbox = null;
+ private RadioButton horizontalRadioButton = null;
+ private RadioButton verticalRadioButton = null;
+ private BoxPane cornerBoxPane = null;
+
+ private boolean confirmCloseTab = true;
+
+ @Override
+ public void initialize(Map<String, Object> namespace, URL location, Resources resources) {
+ confirmCloseTabPrompt = (Prompt)namespace.get("confirmCloseTabPrompt");
+ tabPane = (TabPane)namespace.get("tabPane");
+ closeableCheckbox = (Checkbox)namespace.get("closeableCheckbox");
+ collapsibleCheckbox = (Checkbox)namespace.get("collapsibleCheckbox");
+ horizontalRadioButton = (RadioButton)namespace.get("horizontalRadioButton");
+ verticalRadioButton = (RadioButton)namespace.get("verticalRadioButton");
+ cornerBoxPane = (BoxPane)namespace.get("cornerBoxPane");
+
+ tabPane.getTabPaneListeners().add(new TabPaneListener.Adapter() {
+ @Override
+ public Vote previewRemoveTabs(final TabPane tabPane, final int index, final int count) {
+ Vote vote;
+ if (confirmCloseTab) {
+ confirmCloseTabPrompt.open(TabPanes.this, new SheetCloseListener() {
+ @Override
+ public void sheetClosed(Sheet sheet) {
+ if (confirmCloseTabPrompt.getResult()
+ && confirmCloseTabPrompt.getSelectedOptionIndex() == 1) {
+ confirmCloseTab = false;
+
+ int n = tabPane.getTabs().getLength();
+ if (index < n - 1) {
+ tabPane.setSelectedIndex(index + 1);
+ } else {
+ tabPane.setSelectedIndex(index - 1);
+ }
+
+ tabPane.getTabs().remove(index, count);
+
+ confirmCloseTab = true;
+ }
+ }
+ });
+
+ vote = Vote.DENY;
+ } else {
+ vote = Vote.APPROVE;
+ }
+
+ return vote;
+ }
+ });
+
+ ButtonStateListener checkboxStateListener = new ButtonStateListener() {
+ @Override
+ public void stateChanged(Button button, Button.State previousState) {
+ updateTabPane();
+ }
+ };
+
+ closeableCheckbox.getButtonStateListeners().add(checkboxStateListener);
+ collapsibleCheckbox.getButtonStateListeners().add(checkboxStateListener);
+
+ ButtonStateListener radioButtonStateListener = new ButtonStateListener() {
+ @Override
+ public void stateChanged(Button button, Button.State previousState) {
+ if (button.isSelected()) {
+ updateTabPane();
+ }
+ }
+ };
+
+ horizontalRadioButton.getButtonStateListeners().add(radioButtonStateListener);
+ verticalRadioButton.getButtonStateListeners().add(radioButtonStateListener);
+
+ updateTabPane();
+ }
+
+ private void updateTabPane() {
+ tabPane.setCloseable(closeableCheckbox.isSelected());
+ tabPane.setCollapsible(collapsibleCheckbox.isSelected());
+
+ if (horizontalRadioButton.isSelected()) {
+ tabPane.getStyles().put("tabOrientation", Orientation.HORIZONTAL);
+ if (tabPane.getCorner() == null) {
+ tabPane.setCorner(cornerBoxPane);
+ }
+ } else {
+ tabPane.getStyles().put("tabOrientation", Orientation.VERTICAL);
+ if (tabPane.getCorner() == cornerBoxPane) {
+ tabPane.setCorner(null);
+ }
+ }
+ }
+ }
+
+ </pre>
+
+ <p>
+ Note that this example also demonstrates the use of the tab pane corner component. For
+ horizontally oriented tabs, this component appears in the upper right corner; for
+ vertical tabs, it appears in the lower left. The corner component in this example is a
+ flow pane containing a text input; it is hidden when the orientation is changed to
+ vertical because the corner component itself is not rotated and would cause the button
+ area to grow horizontally.
+ </p>
+ </div><p>Next: <a href="accordions.html">Accordions</a></p></div></div></div><div id="footer" class="group"><div class="footerLogo">Copyright (c) 1999-2012<br>The Apache Software Foundation.</div><div class="footerLinks"><ul class="footerMenuGr"><li><strong>Demos</strong><ul><li><a href="/demos/kitchen-sink.html" target="_new">"Kitchen Sink"</a></li><li><a href="/demos/component-explorer.html" target="_new">Component Explorer</a></li><li><a href="http://cwiki.apache.org/confluence/display/PIVOT/Other+Demos" target="_new">Charting</a></li><li><a href="/demos/">More Demos</a></li></ul></li><li><strong>Documentation</strong><ul><li><a href="/getting-started.html">Getting Started</a></li><li><a href="/tutorials/">Tutorial</a></li><li><a href="/faq.html">FAQ</a></li><li><a href="/2.0.1/docs/api/">Javadoc (2.0.1)</a></li></ul></li><li><strong>Get Involved</strong><ul><li><a href="/svn.html">SVN Repositories</a></li><li><a href="/lists.html">Mailing Lists</a></li><li><a href="h
ttp://issues.apache.org/jira/browse/PIVOT">Bug Database</a></li><li><a href="http://cwiki.apache.org/PIVOT/">Wiki</a></li></ul></li><li><strong>Related</strong><ul><li><a href="http://code.google.com/a/apache-extras.org/p/pivot-jfree/">JFreeChart Provider</a></li><li><a href="http://code.google.com/a/apache-extras.org/p/pivot-common/">Pivot-Common</a></li><li><a href="http://code.google.com/a/apache-extras.org/p/pivot-contrib/">Pivot-Contrib</a></li><li><a href="http://code.google.com/a/apache-extras.org/p/pivot-multilang/">Pivot-Multilang</a></li></ul></li><li><strong>About</strong><ul><li><a href="/who-we-are.html">Who We Are</a></li><li><a href="/contact.html">Contact</a></li><li><a href="http://cwiki.apache.org/confluence/display/PIVOT/News">News</a></li><li><a href="/legal.html">Legal/License</a></li></ul></li></ul></div><div class="footerLinks">
+ Apache Pivot is a trademark of the Apache Software Foundation
+ </div></div></div></body></html>
\ No newline at end of file