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 Panel container can be used for this purpose. Panel performs no layout or preferred size calculations itself, giving the application complete control over components' size and position.
The following example demonstrates use of the Panel container. It defines a stack pane that contains an ImageView and a Panel. The image view contains a drawing that defines an absolutely positioned rectangle. The buttons in the Panel, which sits on top of the ImageView, are absolutely positioned such that they appear within the bounds of the rectangle:
The WTKX source code for this example is as follows. The Drawing and Rectangle classes are discussed in more detail in the Drawing section:
<Window title="Panels" maximized="true" xmlns:wtkx="http://pivot.apache.org/wtkx" xmlns:media="org.apache.pivot.wtk.media" xmlns:drawing="org.apache.pivot.wtk.media.drawing" xmlns="org.apache.pivot.wtk"> <content> <StackPane> <ImageView styles="{horizontalAlignment:'left', verticalAlignment:'top'}"> <image> <media:Drawing width="400" height="320"> <canvas> <drawing:Canvas> <drawing:Rectangle x="20" y="20" width="320" height="240" fill="{paintType:'gradient', startX:0, startY:0, startColor:'#4444ff', endX:320, endY:240, endColor:'#000044'}" stroke="#0000aa" strokeThickness="4" cornerRadius="10"/> </drawing:Canvas> </canvas> </media:Drawing> </image> </ImageView> <Panel> <PushButton buttonData="Button 1" styles="{color:'#ffffff', backgroundColor:'#000066', borderColor:'#0000dd'}" x="30" y="30" width="120" height="24"/> <PushButton buttonData="Button 2" styles="{color:'#ffffff', backgroundColor:'#000066', borderColor:'#0000dd'}" x="30" y="60" width="120" height="24"/> <PushButton buttonData="Button 3" styles="{color:'#ffffff', backgroundColor:'#000066', borderColor:'#0000dd'}" x="30" y="90" width="120" height="24"/> </Panel> </StackPane> </content> </Window>
The Java source is below. It simply loads the WTKX and displays it:
package org.apache.pivot.tutorials.layout; import org.apache.pivot.collections.Map; import org.apache.pivot.wtk.Application; import org.apache.pivot.wtk.DesktopApplicationContext; import org.apache.pivot.wtk.Display; import org.apache.pivot.wtk.Window; import org.apache.pivot.wtkx.WTKXSerializer; public class Panels implements Application { private Window window = null; public void startup(Display display, Map<String, String> properties) throws Exception { WTKXSerializer wtkxSerializer = new WTKXSerializer(); window = (Window)wtkxSerializer.readObject(this, "panels.wtkx"); window.open(display); } public boolean shutdown(boolean optional) { if (window != null) { window.close(); } return false; } public void suspend() { } public void resume() { } public static void main(String[] args) { DesktopApplicationContext.main(Panels.class, args); } }
Next: Navigation Containers