本文的範例來源一樣是官網，它呈現了結帳的3個步驟。
要注意的是，預設狀況之下，Accordions能允許使用者任意選擇不同的panel，但是此範例則限制使用者只能按『下一步』的按鈕，以瀏覽下一個panel。
============範例展示=================================================
============範例展示=================================================
首先是ui.bxml，它在Accordion的區塊中，以include的方式將各個panel各自以bxml的檔案來設計UI。
<!--ui.bxml-->
<myex:Accordions title="Accordions" maximized="true"
xmlns:bxml="http://pivot.apache.org/bxml"
xmlns:myex="myex"
xmlns="org.apache.pivot.wtk">
<Accordion bxml:id="accordion" styles="{padding:0}">
<bxml:include bxml:id="shippingPanel" src="shipping.bxml" Accordion.headerData="寄送地址"/>
<bxml:include bxml:id="paymentPanel" src="payment.bxml" Accordion.headerData="付款資訊"/>
<bxml:include bxml:id="summaryPanel" src="summary.bxml" Accordion.headerData="確認資料"/>
</Accordion>
</myex:Accordions>
接下來一一列出各bxml的內容。
要注意的是在shipping.bxml（寄送地址）又引入了address.bxml（讓使用者可以用listbutton的方式選擇寄送州別）。
<!--shipping.bxml-->
<?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.
-->
<TablePane xmlns:bxml="http://pivot.apache.org/bxml"
xmlns="org.apache.pivot.wtk">
<columns>
<TablePane.Column width="1*"/>
</columns>
<TablePane.Row height="1*">
<BoxPane orientation="vertical" styles="{padding:6, spacing:8}">
<Label text="Ship to:" styles="{font:{bold:true}}"/>
<bxml:include src="address.bxml"/>
</BoxPane>
</TablePane.Row>
<TablePane.Row height="-1">
<BoxPane styles="{horizontalAlignment:'right', backgroundColor:11, padding:4}">
<PushButton bxml:id="nextButton" buttonData="下一步"
styles="{minimumAspectRatio:3}">
<buttonPressListeners>
function buttonPressed(button) {
var accordion = button.getAncestor("org.apache.pivot.wtk.Accordion");
accordion.selectedIndex += 1;
}
</buttonPressListeners>
</PushButton>
</BoxPane>
</TablePane.Row>
</TablePane>
<!--address.bxml-->
<?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.
-->
<Form styles="{showFlagIcons:false}"
xmlns:bxml="http://pivot.apache.org/bxml"
xmlns="org.apache.pivot.wtk">
<Form.Section>
<TextInput Form.label="Name"/>
<BoxPane Form.label="Address" orientation="vertical">
<TextInput/>
<TextInput/>
</BoxPane>
<TextInput Form.label="City"/>
<ListButton Form.label="State"
listData="[
'Alabama',
'Alaska',
'Arizona',
'Arkansas',
'California',
'Colorado',
'Connecticut',
'Delaware',
'District of Columbia',
'Florida',
'Georgia',
'Hawaii',
'Idaho',
'Illinois',
'Indiana',
'Iowa',
'Kansas',
'Kentucky',
'Louisiana',
'Maine',
'Maryland',
'Massachusetts',
'Michigan',
'Minnesota',
'Mississippi',
'Missouri',
'Montana',
'Nebraska',
'Nevada',
'New Hampshire',
'New Jersey',
'New Mexico',
'New York',
'North Carolina',
'North Dakota',
'Ohio',
'Oklahoma',
'Oregon',
'Pennsylvania',
'Rhode Island',
'South Carolina',
'South Dakota',
'Tennessee',
'Texas',
'Utah',
'Vermont',
'Virginia',
'Washington',
'West Virginia',
'Wisconsin',
'Wyoming'
]">
</ListButton>
<TextInput Form.label="Zip"/>
</Form.Section>
</Form>
再來是帳務資訊（payment.bxml）。
<!--payment.bxml-->
<?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.
-->
<TablePane xmlns:bxml="http://pivot.apache.org/bxml"
xmlns="org.apache.pivot.wtk">
<columns>
<TablePane.Column width="1*"/>
</columns>
<TablePane.Row height="1*">
<BoxPane orientation="vertical" styles="{padding:6, spacing:8}">
<Label text="Bill to:" styles="{font:{bold:true}}"/>
<bxml:include src="address.bxml"/>
</BoxPane>
</TablePane.Row>
<TablePane.Row height="-1">
<BoxPane styles="{horizontalAlignment:'right', backgroundColor:11,
padding:4}">
<PushButton bxml:id="nextButton" buttonData="下一步"
styles="{minimumAspectRatio:3}">
<buttonPressListeners>
function buttonPressed(button) {
var accordion = button.getAncestor("org.apache.pivot.wtk.Accordion");
accordion.selectedIndex += 1;
}
</buttonPressListeners>
</PushButton>
</BoxPane>
</TablePane.Row>
</TablePane>
最後一個panel則是資料確認的panel（summary.bxml）。
<!--summary.bxml-->
<?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.
-->
<TablePane xmlns:bxml="http://pivot.apache.org/bxml"
xmlns="org.apache.pivot.wtk">
<bxml:script>
function updateConfirmOrderButtonData() {
confirmOrderButton.buttonData = (activityIndicator.active) ? "Cancel" : "Confirm Order";
}
</bxml:script>
<columns>
<TablePane.Column width="1*"/>
</columns>
<TablePane.Row height="1*">
<BoxPane orientation="vertical" styles="{padding:6, spacing:8, fill:true}">
<Label text="Ship to:" styles="{textDecoration:'underline'}"/>
<BoxPane orientation="vertical" styles="{padding:{left:8}}">
<Label text="Joe Shopper"/>
<Label text="123 Main St."/>
<Label text="Anytown, USA 12345"/>
</BoxPane>
<Label text="Bill to:" styles="{textDecoration:'underline'}"/>
<BoxPane orientation="vertical" styles="{padding:{left:8}}">
<Label text="Joe Shopper"/>
<Label text="123 Main St."/>
<Label text="Anytown, USA 12345"/>
</BoxPane>
<BoxPane orientation="vertical"
styles="{horizontalAlignment:'center', spacing:12, padding:{top:12}}">
<PushButton bxml:id="confirmOrderButton" styles="{minimumAspectRatio:3}">
<buttonPressListeners>
function buttonPressed(button) {
activityIndicator.active = !activityIndicator.active;
processingOrderLabel.visible = activityIndicator.active;
}
</buttonPressListeners>
</PushButton>
<ActivityIndicator bxml:id="activityIndicator" styles="{color:16}"
preferredWidth="48" preferredHeight="48">
<activityIndicatorListeners>
function activeChanged(activityIndicator) {
updateConfirmOrderButtonData();
}
</activityIndicatorListeners>
</ActivityIndicator>
<Label bxml:id="processingOrderLabel" text="Pretending to process order..." visible="false"
styles="{font:{italic:true}}"/>
</BoxPane>
</BoxPane>
</TablePane.Row>
<bxml:script>
updateConfirmOrderButtonData();
</bxml:script>
</TablePane>
最後則是自訂的Accordions類別。
//myex#Accordions.java
package myex;
import java.net.URL;
import org.apache.pivot.beans.Bindable;
import org.apache.pivot.collections.Map;
import org.apache.pivot.collections.Sequence;
import org.apache.pivot.util.Resources;
import org.apache.pivot.util.Vote;
import org.apache.pivot.wtk.Accordion;
import org.apache.pivot.wtk.AccordionSelectionListener;
import org.apache.pivot.wtk.Component;
import org.apache.pivot.wtk.Window;
public class Accordions extends Window implements Bindable {
private Accordion accordion = null;
@Override
public void initialize(Map<String, Object> namespace, URL location, Resources resources) {
accordion = (Accordion)namespace.get("accordion");
accordion.getAccordionSelectionListeners().add(new AccordionSelectionListener() {
private int selectedIndex = -1;
@Override
public Vote previewSelectedIndexChange(Accordion accordion, int selectedIndex) {
this.selectedIndex = selectedIndex;
// Enable the next panel or disable the previous panel so the
// transition looks smoother
if (selectedIndex != -1) {
int previousSelectedIndex = accordion.getSelectedIndex();
if (selectedIndex > previousSelectedIndex) {
accordion.getPanels().get(selectedIndex).setEnabled(true);
} else {
accordion.getPanels().get(previousSelectedIndex).setEnabled(false);
}
}
return Vote.APPROVE;
}
@Override
public void selectedIndexChangeVetoed(Accordion accordion, Vote reason) {
if (reason == Vote.DENY
&& selectedIndex != -1) {
Component panel = accordion.getPanels().get(selectedIndex);
panel.setEnabled(!panel.isEnabled());
}
}
@Override
public void selectedIndexChanged(Accordion accordion, int previousSelection) {
updateAccordion();
}
});
updateAccordion();
}
private void updateAccordion() {
int selectedIndex = accordion.getSelectedIndex();
Sequence<Component> panels = accordion.getPanels();
for (int i = 0, n = panels.getLength(); i < n; i++) {
panels.get(i).setEnabled(i <= selectedIndex);
}
}
}
No comments:
Post a Comment