基本上ListView並不具備捲動功能，因此必須將之附屬於ScrollPane元件之中，ScorllPane會自動依據內容的多寡而調整元件的高度，UI設計人員無須介入。更詳細的ScrollPane介紹留待以後說明。本範例由官網取得。
============範例展示=================================================
============範例展示=================================================
ListView的內容來源是指定在listData屬性中，而以JSON字串陣列的方式來描述。ui.bxml如下：（ListViews類別仍然是放在myex#ListViews）
<!--ui.bxml-->
<myex:ListViews title="List Views" maximized="true"
xmlns:bxml="http://pivot.apache.org/bxml"
xmlns:myex="myex"
xmlns="org.apache.pivot.wtk">
<Border>
<BoxPane styles="{padding:4, spacing:4}">
<Border styles="{color:10}">
<ScrollPane preferredWidth="120" preferredHeight="110"
horizontalScrollBarPolicy="fill"
verticalScrollBarPolicy="fill_to_capacity">
<ListView bxml:id="listView" selectMode="multi"
listData="['第一個ListItem','第二個ListItem',
'第三個ListItem','第四個ListItem','第五個ListItem',
'第六個ListItem','第七個ListItem','第八個ListItem',
'第九個ListItem','第十個ListItem']"/>
</ScrollPane>
</Border>
<BoxPane orientation="vertical" preferredWidth="120" styles="{fill:true}">
<Label text="你的選擇有:"/>
<Label bxml:id="selectionLabel" styles="{wrapText:true}"/>
</BoxPane>
</BoxPane>
</Border>
</myex:ListViews>
接下來是myex#ListViews類別，它主要繼承了Window類別，並實作Bindable介面，以處理ListViewSelection事件。在範例程式碼中，有針對Span及Sequence做了簡單的說明。
#ListViews.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.wtk.*;
import org.apache.pivot.wtk.content.ListItem;
public class ListViews extends Window implements Bindable {
private Label selectionLabel = null;
private ListView listView = null;
@Override
public void initialize(Map<String, Object> namespace, URL location, Resources resources) {
selectionLabel = (Label) namespace.get("selectionLabel");
listView = (ListView) namespace.get("listView");
//ListViewSelection事件處理
listView.getListViewSelectionListeners().add(new ListViewSelectionListener() {
@Override
public void selectedRangeAdded(ListView listView, int rangeStart, int rangeEnd) {
//使用者使用多重選擇Ctrl+L-Click加入某個選項
updateSelection(listView);
}
@Override
public void selectedRangeRemoved(ListView listView, int rangeStart, int rangeEnd) {
//使用者移除某個選擇
updateSelection(listView);
}
@Override
public void selectedRangesChanged(ListView listView, Sequence<Span> previousSelectedRanges) {
//使用者選擇狀態發生改變->加入或移除某個選項
if (previousSelectedRanges != null
&& previousSelectedRanges != listView.getSelectedRanges()) {
//如果尚未選擇過(例如:程式一開始執行)或是選項沒有改變就不更新
updateSelection(listView);
}
}
@Override
public void selectedItemChanged(ListView listView, Object previousSelectedItem) {
// No-op
}
//自訂method,用來將使用者選的選項顯示在右方的Label中
private void updateSelection(ListView listView) {
String selectionText = "";
//Span類別是用來儲存一定範圍的整數值
//Sequence則是Pivot中用來表示有序項目的集合元件
//使用者可能不是連續選取ListView的項目,而是跳著選
//因此ListView#getStlectedRanges()可能會取得多個Span
//而每個Span都包含了許多個連續選取的項目索引
Sequence<Span> selectedRanges = listView.getSelectedRanges();
for (int i = 0, n = selectedRanges.getLength(); i < n; i++) {
//取得其中的Span
Span selectedRange = selectedRanges.get(i);
for (int j = selectedRange.start;
j <= selectedRange.end;
j++) {
if (selectionText.length() > 0) {
selectionText += ", ";
}
Object item = listView.getListData().get(j);
String text;
if (item instanceof ListItem) {
//如果是圖片(ListItem)
text = ((ListItem) item).getText();
} else {
//純文字內容(listData)
text = item.toString();
}
selectionText += text;
}
}
selectionLabel.setText(selectionText);
}
});
}
}
最後的程式進入點和先前的NewClass.java都相同，就不再重覆。
============範例展示 2=================================================
============範例展示 2=================================================
第二個範例則展示了ListView中使用ListItem（包含圖片及文字）的功能，ui2.bxml如下：
<!--ui2.bxml-->
<myex:ListViews title="List Views with Images" maximized="true"
xmlns:bxml="http://pivot.apache.org/bxml"
xmlns:content="org.apache.pivot.wtk.content"
xmlns:myex="myex"
xmlns="org.apache.pivot.wtk">
<Border>
<BoxPane styles="{padding:4, spacing:4}">
<Border styles="{color:10}">
<ScrollPane preferredWidth="80" preferredHeight="110"
horizontalScrollBarPolicy="fill"
verticalScrollBarPolicy="fill_to_capacity">
<ListView bxml:id="listView" selectMode="multi"
>
<itemRenderer>
<content:ListViewItemRenderer iconWidth="16" iconHeight="16"
showIcon="true"
/>
</itemRenderer>
<content:ListItem icon="/anchor.png" text="Anchor"/>
<content:ListItem icon="/bell.png" text="Bell"/>
<content:ListItem icon="/clock.png" text="Clock"/>
<content:ListItem icon="/cup.png" text="Cup"/>
<content:ListItem icon="/house.png" text="House"/>
<content:ListItem icon="/star.png" text="Star"/>
</ListView>
</ScrollPane>
</Border>
<BoxPane orientation="vertical" preferredWidth="120" styles="{fill:true}">
<Label text="You selected:"/>
<Label bxml:id="selectionLabel" styles="{wrapText:true}"/>
</BoxPane>
</BoxPane>
</Border>
</myex:ListViews>
No comments:
Post a Comment