blob: 834b72f46809e937091fb7d7293875c0497c550a [file] [log] [blame]
<?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="rollups">
<properties>
<title>Rollups</title>
</properties>
<body>
<p>
Rollups are conceptually similar to Expanders. Like expanders, rollups also allow the
user to expand or collapse a region of the screen to make more room for other content.
However, rather than a defining a titled, rectangular region, Rollups supports a
configurable "header" component; when collapsed, only the header is visible.
Additionally, rollups can be nested to create the appearance of a "tree"
structure.
</p>
<p>
The first three rollups in the example below present the same content as in the
Expanders example. The fourth includes an example of nested rollups:
</p>
<application class="org.apache.pivot.wtk.ScriptApplication"
width="220" height="360">
<libraries>
<library>core</library>
<library>wtk</library>
<library>wtk-terra</library>
<library>tutorials</library>
</libraries>
<startup-properties>
<src>/org/apache/pivot/tutorials/navigation/rollups.bxml</src>
</startup-properties>
</application>
<p>
The BXML source for this example is as follows. Note that the "fill" style is set
to <tt>true</tt> on the nested rollups - this allows the rollup content to wrap:
</p>
<source type="xml" location="org/apache/pivot/tutorials/navigation/rollups.bxml">
<![CDATA[
<Window title="Rollups" maximized="true"
xmlns:bxml="http://pivot.apache.org/bxml"
xmlns="org.apache.pivot.wtk">
<Border>
<ScrollPane horizontalScrollBarPolicy="fill">
<BoxPane orientation="vertical" styles="{fill:true, padding:6}">
<Rollup expanded="true">
<heading>
<Label text="Stocks" styles="{font:{bold:true}, color:13}"/>
</heading>
<bxml:include src="stocks.bxml"/>
</Rollup>
<Rollup>
<heading>
<Label text="Weather" styles="{font:{bold:true}, color:13}"/>
</heading>
<bxml:include src="weather.bxml"/>
</Rollup>
<Rollup>
<heading>
<Label text="Calendar" styles="{font:{bold:true}, color:13}"/>
</heading>
<Calendar/>
</Rollup>
<Rollup styles="{fill:true}">
<heading>
<Label text="Nested" styles="{font:{bold:true}, color:13}"/>
</heading>
<BoxPane orientation="vertical" styles="{fill:true}">
<Rollup styles="{fill:true}">
<heading>
<Label text="Level 1"/>
</heading>
<Label text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
styles="{wrapText:true}"/>
</Rollup>
<Rollup styles="{fill:true}">
<heading>
<Label text="Level 2"/>
</heading>
<Label text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
styles="{wrapText:true}"/>
</Rollup>
<Rollup styles="{fill:true}">
<heading>
<Label text="Level 3"/>
</heading>
<Label text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
styles="{wrapText:true}"/>
</Rollup>
</BoxPane>
</Rollup>
</BoxPane>
</ScrollPane>
</Border>
</Window>
]]>
</source>
<p>
Since this example contains no logic, there is no associated Java source.
</p>
</body>
</document>