<?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="panels">
    <properties>
        <title>Panels</title>
    </properties>

    <body>
        <p>
            Although Pivot's automatic layout management features are convenient, sometimes it is
            preferable to perform layout manually (for example, when aligning components to an
            existing graphical asset being used as a background image). The <tt>Panel</tt>
            container can be used for this purpose. <tt>Panel</tt> performs no layout or preferred
            size calculations itself, giving the application complete control over components' size
            and position.
        </p>

        <p>
            The following example demonstrates use of the <tt>Panel</tt> container. It defines a
            stack pane that contains an <tt>ImageView</tt> and a <tt>Panel</tt>. The image view
            contains a drawing that defines an absolutely positioned rectangle. The buttons in
            the <tt>Panel</tt>, which sits on top of the <tt>ImageView</tt>, are absolutely
            positioned such that they appear within the bounds of the rectangle:
        </p>

        <application class="org.apache.pivot.wtk.ScriptApplication"
            width="400" height="280">
            <libraries>
                <library>core</library>
                <library>wtk</library>
                <library>wtk-terra</library>
                <library>tutorials</library>
            </libraries>
            <startup-properties>
                <src>/org/apache/pivot/tutorials/layout/panels.bxml</src>
            </startup-properties>
        </application>

        <p>
            The BXML source code for this example is as follows:
        </p>

        <source type="xml" location="org/apache/pivot/tutorials/layout/panels.bxml">
            <![CDATA[
            <Window title="Panels" maximized="true"
                xmlns:bxml="http://pivot.apache.org/bxml"
                xmlns:media="org.apache.pivot.wtk.media"
                xmlns="org.apache.pivot.wtk">
                <Border>
                    <Panel>
                        <PushButton buttonData="Button 1"
                            x="20" y="20" width="120" height="24"/>
                        <PushButton buttonData="Button 2"
                            x="40" y="50" width="120" height="24"/>
                        <PushButton buttonData="Button 3"
                            x="60" y="80" width="120" height="24"/>
                    </Panel>
                </Border>
            </Window>
            ]]>
        </source>

        <p>
            Since this example contains no logic, there is no associated Java source.
        </p>
    </body>
</document>
