<?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="checkboxes">
    <properties>
        <title>Checkboxes</title>
    </properties>

    <body>
        <p>
            The following example demonstrates how to use the <tt>Checkbox</tt> class in a Pivot
            application. Selecting a checkbox shows or hides an associated icon:
        </p>

        <application class="org.apache.pivot.wtk.ScriptApplication"
            width="140" height="100">
            <libraries>
                <library>core</library>
                <library>wtk</library>
                <library>wtk-terra</library>
                <library>tutorials</library>
            </libraries>
            <startup-properties>
                <src>/org/apache/pivot/tutorials/buttons/checkboxes.bxml</src>
            </startup-properties>
        </application>

        <p>
            The BXML source for the example is below:
        </p>

        <source type="xml" location="org/apache/pivot/tutorials/buttons/checkboxes.bxml">
            <![CDATA[
            <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="Bell"
                                ButtonPressListener.buttonPressed="bellImageView.setVisible(!bellImageView.isVisible());"/>
                        </BoxPane>
                        <ImageView bxml:id="bellImageView" image="/org/apache/pivot/tutorials/bell.png" visible="false"/>
                    </TablePane.Row>

                    <TablePane.Row height="24">
                        <BoxPane styles="{verticalAlignment:'center'}">
                            <Checkbox buttonData="Clock"
                                ButtonPressListener.buttonPressed="clockImageView.setVisible(!clockImageView.isVisible());"/>
                        </BoxPane>
                        <ImageView bxml:id="clockImageView" image="/org/apache/pivot/tutorials/clock.png" visible="false"/>
                    </TablePane.Row>

                    <TablePane.Row height="24">
                        <BoxPane styles="{verticalAlignment:'center'}">
                            <Checkbox buttonData="House"
                                ButtonPressListener.buttonPressed="houseImageView.setVisible(!houseImageView.isVisible());"/>
                        </BoxPane>
                        <ImageView bxml:id="houseImageView" image="/org/apache/pivot/tutorials/house.png" visible="false"/>
                    </TablePane.Row>
                </TablePane>
            </Window>
            ]]>
        </source>

        <p>
            Note that this example uses the <tt>TablePane</tt> layout container. <tt>TablePane</tt>
            defines a two-dimensional grid structure and is similar to an HTML table. It is
            discussed in more detail in the <a href="layout-containers.html">Layout Containers</a>
            section.
        </p>

        <p>
            Also note the use of script code to respond to button press events fired by the
            checkboxes. The <tt>ButtonPressListener.buttonPressed</tt> attribute of each component
            contains JavaScript code that toggles the visibility of the corresponding image view,
            causing the image to appear and disappear based on the checkbox's selection state.
            It is common in Pivot development to implement simple event handlers in script code
            this way, since it can often be much less verbose than performing the same logic in Java.
        </p>

        <p>
            In fact, since all of the logic for this application is implemented in script, there
            is no Java source associated with this example.
        </p>
    </body>
</document>
