Skip to main content

Scrollable area

12 replies [Last post]
vi5in
Offline
Joined: 2008-08-08
Points: 0

I'm trying to create an area that will contain a number of rectangle nodes, and I'd like to have this area be scrollable.

I am experimenting with the ScrollableComponent object, but I'm not sure how I'd put the Node elements within it. I know you can put swing elements into the node hierarchy with ComponentView. Is there a way to do the opposite? Perhaps I'm going about this the wrong way!

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
vi5in
Offline
Joined: 2008-08-08
Points: 0

Are you able to set the background color of the canvas to transparent? I get this weird gray color.

riepi
Offline
Joined: 2008-03-27
Points: 0

only other colors, transparent does not work

alexsch
Offline
Joined: 2007-07-12
Points: 0

The [i]opacity[/i] attribute is used to make a component transparent.

vi5in
Offline
Joined: 2008-08-08
Points: 0

Canvas doesn't seem to have an opacity attribute... also, if I make set the opacity attribute on a containing object, will it's children inherit that property and have the same opacity also? I basically just want a transparent canvas that is placed over a rounded rectangle. Or is there some other way to put nodes in a swing component without using canvas?

alexsch
Offline
Joined: 2007-07-12
Points: 0

> Canvas doesn't seem to have an opacity attribute...
> also, if I make set the opacity attribute on a
> containing object, will it's children inherit that
> property and have the same opacity also?

Could you give an example?

> I basically
> just want a transparent canvas that is placed over a
> rounded rectangle. Or is there some other way to put
> nodes in a swing component without using canvas?

You can use[i] javafx.application.Frame[/i] class and put swing components on [i]ComponentView [/i] :

[code]
import javafx.scene.*;

import javafx.ext.swing.*;
import javafx.application.*;

Frame {
title: "MyApplication"
width: 200
height: 200
visible: true

stage: Stage {
content: Group{
opacity: 0.5
content: ComponentView {
component: Button {
text: "Press Me!"
action: function() {
}
}
}
}

}
}
[/code]

vi5in
Offline
Joined: 2008-08-08
Points: 0

I have a rounded rectangle over which I have overlaid ScrollPane. Inside the scroll pane I want to have a list of objects that you can scroll through using the ScrollPane.

These objects however are Nodes. So I want to figure out a way of putting Nodes inside Swing components. I'm using ComponentView right now to put the ScrollPane with Node elements. But I want to be able to do it the other way round - that is, put Node elements under Swing components. I understand that this is possible with the Canvas object, but like I said, I am not able to set the background color to transparent, and from the documentation it doesn't look like it has an opacity attribute (unless I am mistaken?).

--added later:---
I just checked and Canvas doesn't have the opacity attribute. Also, assigning the opacity attribute to the group gives every element under that group the same opacity.

Message was edited by: vi5in

riepi
Offline
Joined: 2008-03-27
Points: 0

Hi vi5in,
would be nice to see your full code.

I cannot use the ScrollPane, i always get errors using Preview SDK.

Greetz

gdclem
Offline
Joined: 2008-08-15
Points: 0

This is very basic, I reused the code above.

I wish the hbox had a built in scroll bar when the nodes extended past the size.
I did an example of listing images of a directory across the bottom of a frame then popped them up when clicked on but when the images scrolled past the box I couldn't get to them. Then i saw this example, put it around my images and tada!

----------------------------------------------
import javafx.application.*;
import javafx.scene.paint.*;
import javafx.scene.geometry.*;
import javafx.ext.swing.*;
import javafx.scene.transform.*;

Frame{
title: "Scroll Example"
width: 350
height: 350
visible: true

stage: Stage {
content:
ComponentView {
transform: Translate { x: 10 y: 45 }
component: ScrollPane {
preferredSize: [200, 200]
scrollable: true
visible: true
enabled: true

view: Canvas {
content: for(x in [0..10]) {
Rectangle { x: 0 y: indexof x * 50 width: 200 height: 50 arcWidth: 20 arcHeight: 20 fill: Color.web("#a3a3a3") }
}
}
}
}
}
}

riepi
Offline
Joined: 2008-03-27
Points: 0

thannk u, now it works

vi5in
Offline
Joined: 2008-08-08
Points: 0

I think I figured it out.

I am using a scrollpane, and setting the view attribute to Canvas. I can now add Nodes to the content attribute of Canvas. I have to check to see if it is scrollable though.

vi5in
Offline
Joined: 2008-08-08
Points: 0

I'm able to use canvas and put Nodes inside it. I tried setting the background of the canvas to Color.TRANSPARENT, but this weird light-gray color shows up. Also, the scrolling doesn't seem to work. The content extends past the height of the ScrollPane.

My code looks like this:

[code]
ComponentView {
transform: Translate { x: 10 y: 45 }
component: ScrollPane {
height: widgetHeight - 100
width: widgetWidth - 20
scrollable: true
visible: true
enabled: true
view: Canvas {
content: for(x in [0..10]) {
Rectangle { x: 0 y: indexof x * 50 width: 200 height: 50 arcWidth: 20 arcHeight: 20 fill: Color.web("#a3a3a3") }
}
}
}
}
[/code]

I'm guessing that the height and width aren't being set correctly so it doesn't know how much to scroll by.

Message was edited by: vi5in

vi5in
Offline
Joined: 2008-08-08
Points: 0

I figured it out by setting preferredSize. I think if I had more experience with Swing, this would be easier ;)

[code]
ComponentView {
transform: Translate { x: 10 y: 45 }
component: ScrollPane {
preferredSize: [widgetWidth - 20, widgetHeight - 100]
scrollable: true
visible: true
enabled: true
view: Canvas {
content: for(x in [0..10]) {
Rectangle { x: 0 y: indexof x * 50 width: 200 height: 50 arcWidth: 20 arcHeight: 20 fill: Color.web("#a3a3a3") }
}
}
}
}
[/code]