image/svg+xml
3. The final layout if completed by connecting the left pocket of P2 with the right pocket of P3.
W1
P1 1. Inserting widget W1 into center pocket of pocket widget P1.
2. Final layout of pocket widget P1.
RIGHT
LEFT
BOTTOM
P1
1. Preparing widget W2 by inserting it into the center pocket of P2.
P1
P2
2. No previous layout exists. A new horizontal layout is creating by duplicating P1 with P3and then moving W1 to P3.
P1
P1 CENTER
TOP
CENTER
W1
W1
W2
P3
P2
W1
W2
P3
W1
P2
W2
P1
P3
W1
P2
W2
W3
P1
P5
P3
W1
P2
W2
W3
P1
P5
P3
W1
P2
W2
W3
1. Preparing widget W3 by inserting it into the center pocket of P4.
2. No previous vertical layout exists. A new vertical layout is created byreplacing P1 (and it's content) with P5.
3. The final layout if completed by connecting the bottom pocket of P5 with the top pocket of P4.
P4
P4 Deep Pocket Layout
F
C
B
Widget2
E
Widget4
H
A
Widget1
F
C
B
Widget2
E
Widget4
H
A
Widget1
F
C
B
Widget2
E
Widget4
H
F
C
B
Widget2
E
Widget4
F
C
B
Widget2
E
Widget4
F
E
Widget4
C
B
Widget2
F
E
Widget4
C
B
Widget2
Figure: Available pockets in the pocket widget
Figure: Readying a non-pocket widget for layouting with pocket widgets
Figure: Creating a horizontal layout from pocket widgets.
P4 Figure: Creating a vertical layout from pocket widgets.
W4
W3
1. Preparing widget W4 by inserting it into the center pocket of P5.
2. No previous vertical layout exists. A new vertical layout is created byreplacing P3 (and it's content) with P7.
3. The final vertical layout if completed by connecting the bottom pocket of P6with the top pocket of P7.
P6
P6
Figure: Splitting a horizontal layout into a vertically layout.
P1
P5
P3
W1
P2
W2
W3
P4
P1
P5
P3
P2
W2
W3
P4
P7
W1
P1
P5
P3
P2
W2
W3
P4
P7
W1
W3
P6