tutorials/www/checkboxes.xml - pivot - Git at Google

 <?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>
	<?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>