| <?xml version="1.0" encoding="UTF-8"?> |
| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to you under the Apache License, |
| Version 2.0 (the "License"); you may not use this file except in |
| compliance with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| 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. |
| --> |
| |
| <document id="flow-panes"> |
| <properties> |
| <title>Flow Panes</title> |
| </properties> |
| |
| <body> |
| <p> |
| Flow panes arrange components in a horizontal line, wrapping when the contents don't |
| fit on a single line. Components may be horizontally aligned to left, right, or center |
| when there is space left over within a given line, and may optionally be vertically |
| aligned by to their baselines. |
| </p> |
| |
| <p> |
| The following example demonstrates the use of the <tt>FlowPane</tt> container. The |
| buttons on the right can be used to modify the alignment properties. A |
| <tt>BaselineDecorator</tt> is used to highlight the flow pane's baseline. This |
| decorator draws a red line across a component's baseline. If the component does not |
| have a baseline, it draws a blue line across the component's vertical midpoint: |
| </p> |
| |
| <application class="org.apache.pivot.wtk.ScriptApplication" |
| width="512" height="240"> |
| <libraries> |
| <library>core</library> |
| <library>wtk</library> |
| <library>wtk-terra</library> |
| <library>tutorials</library> |
| </libraries> |
| <startup-properties> |
| <src>/org/apache/pivot/tutorials/layout/flow_panes.bxml</src> |
| </startup-properties> |
| </application> |
| |
| <p> |
| The BXML source for this example is shown below: |
| </p> |
| |
| <source type="xml" location="org/apache/pivot/tutorials/layout/flow_panes.bxml"> |
| <![CDATA[ |
| <layout:FlowPanes title="Flow Panes" maximized="true" |
| xmlns:bxml="http://pivot.apache.org/bxml" |
| xmlns:effects="org.apache.pivot.wtk.effects" |
| xmlns:layout="org.apache.pivot.tutorials.layout" |
| xmlns="org.apache.pivot.wtk"> |
| <SplitPane splitRatio="0.75"> |
| <left> |
| <Border styles="{padding:4}"> |
| <BoxPane orientation="vertical" styles="{fill:true}"> |
| <FlowPane bxml:id="flowPane" styles="{padding:2}"> |
| <decorators> |
| <effects:BaselineDecorator/> |
| </decorators> |
| |
| <PushButton buttonData="0" styles="{minimumAspectRatio:1.5}"/> |
| <PushButton buttonData="1" styles="{minimumAspectRatio:1.5}"/> |
| <PushButton buttonData="2" styles="{minimumAspectRatio:1.5}"/> |
| <PushButton buttonData="3" preferredWidth="20" preferredHeight="20"/> |
| <PushButton buttonData="4" preferredWidth="30" preferredHeight="30"/> |
| <PushButton buttonData="5" preferredWidth="40" preferredHeight="40"/> |
| <PushButton buttonData="6" styles="{minimumAspectRatio:1.5}"/> |
| <PushButton buttonData="7" styles="{minimumAspectRatio:1.5}"/> |
| </FlowPane> |
| </BoxPane> |
| </Border> |
| </left> |
| |
| <right> |
| <Border styles="{padding:{top:2, left:6}}"> |
| <BoxPane orientation="vertical"> |
| <Label text="Alignment" styles="{font:{bold:true}}"/> |
| |
| <bxml:define> |
| <ButtonGroup bxml:id="alignment"/> |
| </bxml:define> |
| <RadioButton bxml:id="leftRadioButton" buttonData="Left" buttonGroup="$alignment" selected="true"/> |
| <RadioButton bxml:id="rightRadioButton" buttonData="Right" buttonGroup="$alignment"/> |
| <RadioButton bxml:id="centerRadioButton" buttonData="Center" buttonGroup="$alignment"/> |
| |
| <BoxPane styles="{padding:{top:6}}"> |
| <Checkbox bxml:id="alignToBaselineCheckbox" buttonData="Align to baseline"/> |
| </BoxPane> |
| </BoxPane> |
| </Border> |
| </right> |
| </SplitPane> |
| </layout:FlowPanes> |
| ]]> |
| </source> |
| |
| <p> |
| The Java source is as follows. It wires up the event handlers that respond to changes |
| in the radio buttons' state: |
| </p> |
| |
| <source type="java" location="org/apache/pivot/tutorials/layout/FlowPanes.java"> |
| <![CDATA[ |
| package org.apache.pivot.tutorials.layout; |
| |
| 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.wtk.Button; |
| import org.apache.pivot.wtk.ButtonStateListener; |
| import org.apache.pivot.wtk.Checkbox; |
| import org.apache.pivot.wtk.FlowPane; |
| import org.apache.pivot.wtk.HorizontalAlignment; |
| import org.apache.pivot.wtk.RadioButton; |
| import org.apache.pivot.wtk.Style; |
| import org.apache.pivot.wtk.Window; |
| |
| public class FlowPanes extends Window implements Bindable { |
| private FlowPane flowPane = null; |
| private RadioButton leftRadioButton = null; |
| private RadioButton rightRadioButton = null; |
| private RadioButton centerRadioButton = null; |
| private Checkbox alignToBaselineCheckbox = null; |
| |
| @Override |
| public void initialize(Map<String, Object> namespace, URL location, Resources resources) { |
| flowPane = (FlowPane)namespace.get("flowPane"); |
| leftRadioButton = (RadioButton)namespace.get("leftRadioButton"); |
| rightRadioButton = (RadioButton)namespace.get("rightRadioButton"); |
| centerRadioButton = (RadioButton)namespace.get("centerRadioButton"); |
| alignToBaselineCheckbox = (Checkbox)namespace.get("alignToBaselineCheckbox"); |
| |
| ButtonStateListener buttonStateListener = new ButtonStateListener() { |
| @Override |
| public void stateChanged(Button button, Button.State previousState) { |
| updateFlowPaneState(); |
| } |
| }; |
| |
| leftRadioButton.getButtonStateListeners().add(buttonStateListener); |
| rightRadioButton.getButtonStateListeners().add(buttonStateListener); |
| centerRadioButton.getButtonStateListeners().add(buttonStateListener); |
| alignToBaselineCheckbox.getButtonStateListeners().add(buttonStateListener); |
| |
| updateFlowPaneState(); |
| } |
| |
| private void updateFlowPaneState() { |
| HorizontalAlignment alignment = null; |
| |
| if (leftRadioButton.isSelected()) { |
| alignment = HorizontalAlignment.LEFT; |
| } else if (rightRadioButton.isSelected()) { |
| alignment = HorizontalAlignment.RIGHT; |
| } else if (centerRadioButton.isSelected()) { |
| alignment = HorizontalAlignment.CENTER; |
| } |
| |
| if (alignment != null) { |
| flowPane.getStyles().put(Style.alignment, alignment); |
| } |
| |
| flowPane.getStyles().put(Style.alignToBaseline, alignToBaselineCheckbox.isSelected()); |
| } |
| } |
| ]]> |
| </source> |
| </body> |
| </document> |
