Wednesday, July 11, 2012

CheckBox

本文將介紹CheckBox元件,當使用者按了CheckBox之後,會顯示出圖片。本範例由官網取得。

在ui.bxml中要特別一提的是,使用ButtonPressListener.buttonPressed的方式來定義事件處理機制,在bxml中是以java script來撰寫事件處理(當然,在Java原始碼中進行事件處理也可以)。同時,本範例是以TablePane來排列元件,詳細TablePane說明留待以後說明。



============範例展示=================================================


============範例展示=================================================

<!--ui.bxml-->

<Window title="Checkboxes" maximized="true"
        xmlns:bxml="http://pivot.apache.org/bxml"
        xmlns="org.apache.pivot.wtk">
    <TablePane styles="{showHorizontalGridLines: true, showVerticalGridLines:true,
        padding:4, horizontalSpacing:1, verticalSpacing:1,
        horizontalGridColor:10, verticalGridColor:10}">
        <columns>
            <TablePane.Column width="-1"/>
            <TablePane.Column width="24"/>
        </columns>
 
        <TablePane.Row height="24">
            <BoxPane styles="{verticalAlignment:'center'}">
                <Checkbox buttonData="鐘"
                          ButtonPressListener.buttonPressed="bellImageView.setVisible(!bellImageView.isVisible());"/>
            </BoxPane>
            <ImageView bxml:id="bellImageView" image="/bell.png" visible="false"/>
        </TablePane.Row>
 
        <TablePane.Row height="24">
            <BoxPane styles="{verticalAlignment:'center'}">
                <Checkbox buttonData="時鐘"
                          ButtonPressListener.buttonPressed="clockImageView.setVisible(!clockImageView.isVisible());"/>
            </BoxPane>
            <ImageView bxml:id="clockImageView" image="/clock.png" visible="false"/>
        </TablePane.Row>
 
        <TablePane.Row height="24">
            <BoxPane styles="{verticalAlignment:'center'}">
                <Checkbox buttonData="房子"
                          ButtonPressListener.buttonPressed="houseImageView.setVisible(!houseImageView.isVisible());"/>
            </BoxPane>
            <ImageView bxml:id="houseImageView" image="/house.png" visible="false"/>
        </TablePane.Row>
    </TablePane>
</Window>

在上述UI中,我們使用TablePane指定了3(row)x2(column)的表格。

以下是NewClass.java。

//NewClass.java
import java.awt.Font;
import org.apache.pivot.beans.BXMLSerializer;
import org.apache.pivot.collections.Map;
import org.apache.pivot.wtk.*;

public class NewClass implements Application {

    private Window window = null;

    public static void main(String[] args) {
        DesktopApplicationContext.main(NewClass.class, args);
    }

    @Override
    public void startup(Display display, Map<String, String> properties)
            throws Exception {
        Theme.getTheme().setFont(new Font("PMingLiU",Font.PLAIN,12));
        BXMLSerializer bxmlSerializer = new BXMLSerializer();
        window = (Window) bxmlSerializer.readObject(NewClass.class, "ui.bxml");
        window.open(display);
    }

    @Override
    public boolean shutdown(boolean optional) {
        if (window != null) {
            window.close();
        }

        return false;
    }

    @Override
    public void suspend() {
    }

    @Override
    public void resume() {
    }
}

No comments:

Post a Comment