The clipview basically just creates a view portal into its content. Here is a simple example. (You would need to handle the clipY properly when clip.maxY is < scene.height).
var group = VBox { };
var ndx:Integer = 0;
def cv : ClipView = ClipView {
pannable: false
node: group
width: bind scene.width - sb.layoutBounds.width
height: bind scene.height
};
var scene: Scene;
var sb: ScrollBar;
Stage {
title: "ClipView Test"
scene: scene = Scene {
width: 250
height: 80
content: [
cv,
Rectangle {
layoutX: bind scene.width - sb.layoutBounds.width - 50
width: 50
height: 50
fill: Color.RED
onMouseClicked: function(e) {
insert Text { content: "Text - {ndx++}" } into group.content;
if(cv.maxClipY > scene.height) {
cv.clipY = cv.maxClipY;
}
}
}
sb = ScrollBar {
vertical: true
layoutX: bind scene.width - sb.layoutBounds.width
height: bind scene.height
min: 0
max: bind cv.maxClipY
value: bind cv.clipY with inverse
}
]
}
}