I am using TornadoFX in my project. I have a root View which is a borderPane. I was able to find setPrefSize(1200.0, 720.0) and it works perfectly. However, by default the window is resizable, which user can resize it without any limits. Is there any property or method to set minHeight and minWidth of a window so that when resized, it stops at those limits?
So far I have tried these but none of them seem to work:
override val root = borderPane {
minHeight = 400.0
minWidth = 600.0
setMinSize(600.0, 400,0)
setWindowMinSize(600, 400) // this throws NPE
addClass(loginScreen) // I even set properties in CSS
}
// StyleClass
loginScreen{
minWidth = 600.px
minHeight = 400.px
}
What is the proper way of setting minHeight and minWidth of a window in TornadoFX? And one more thing, how do I actually disable window resizing in TornadoFX, there is no property called isResizable?
P.S. I am a super novice in Kotlin and in TornadoFX. Just started it today.
You are on the right track. The preferred size of the root component will become the initial size of the window. You can further configure a minimum size for the window, but you can't do it in the constructor of the UIComponent, since it is created before the actual window it will be shown in. For that reason, the onDock callback is a good place to configure the window with setWindowMinSize. If this is the main application window though, an even better strategy would be to override start and configure the minWidth and minHeigh properties for the Stage (which is a Window).
It is worth noting that the convenience function setWindowMinSize is only available if you override onDock in your UIComponent, since it's defined as a shortcut to set the min size of the currentStage for the UIComponent. If you override start, you have to manipulate the properties directly, like this:
class MyApp : App(MainView::class) {
override fun start(stage: Stage) {
with(stage) {
minWidth = 600.0
minHeight = 400.0
super.start(this)
}
}
}
class MainView : View() {
override val root = borderpane {
setPrefSize(1200.0, 720.0)
}
}
You can set isResizable = false on the Stage/Window in the start function as well if you want to prevent resizing.
Related
When I run the following code in the start method of my Main (JavaFX) class I get weird results. The window gets displayed but pane (with a green border) has a width of 0. It is supposed to have the same width as the container's height since I binded prefWidth to the height property.
Then, when I resize the window, the binding comes into effect and the pane becomes a square. Notice that if I maximize the window it also doesn't apply the bindings.
Thank you!
//Create a pane with a min width of 10 and a green border to be able to see it
Pane pane = new Pane();
pane.setStyle("-fx-border-color: green; -fx-border-width: 2");
//Bind the pane's preferred width to the pane's height
pane.prefWidthProperty().bind(pane.heightProperty());
//Put the pane in a vbox that does not fill the stage's width and make the pane grow in the vbox
VBox container = new VBox(pane);
container.setFillWidth(false);
VBox.setVgrow(pane, Priority.SOMETIMES);
//Show the vbox
primaryStage.setScene(new Scene(container, 600, 400));
primaryStage.show();
The problem you are running into here is that when the container is laid out, it has no reasonable information as to the order in which it should compute the width and the height of the pane. So essentially what happens is it computes the width, which (since it's empty), is zero; then computes the height (which fills the container, since you told the VBox to do that). After that, the prefWidth property is changed, but by then the actual width has already been set, so it's essentially too late. The next time a layout pass occurs, the new pref width is taken into account.
I haven't checked the actual layout code, but (since the default content bias is null) most likely the layout code for the vbox is going to do something equivalent to the following pseudocode:
protected void layoutChildren() {
// content bias is null:
double prefWidth = pane.prefWidth(-1);
double prefHeight = pane.prefHeight(-1);
// no fill width:
double paneWidth = Math.max(this.getWidth(), prefWidth);
// vgrow, so ignore preferred height and size to height of the vbox:
double paneHeight = this.getHeight();
pane.resizeRelocate(0, 0, paneWidth, paneHeight);
}
The last call actually causes the height of the pane to change, which then causes the prefWidth to change via the binding. Of course, that's too late for the current layout pass, which has already set the width based on the previous preferred width calculation.
Basically, relying on bindings to manage layout like this is not a reliable way of doing things, because you are changing properties (such as prefWidth in this example) during the layout pass, when it may be already too late to resize the component.
The reliable way to manage layout for a pane like this is to override the appropriate layout methods, which are invoked by the layout pass in order to size the component.
For this example, since the width depends on the height, you should return VERTICAL for the contentBias, and you should override computePrefWidth(double height) to return the height (so the width is set to the height):
#Override
public void start(Stage primaryStage) {
Pane pane = new Pane() {
#Override
public Orientation getContentBias() {
return Orientation.VERTICAL ;
}
#Override
public double computePrefWidth(double height) {
return height ;
}
};
pane.setStyle("-fx-border-color: green; -fx-border-width: 2");
//Bind the pane's preferred width to the pane's height
// pane.prefWidthProperty().bind(pane.heightProperty());
//Put the pane in a vbox that does not fill the stage's width and make the pane grow in the vbox
VBox container = new VBox(pane);
container.setFillWidth(false);
VBox.setVgrow(pane, Priority.SOMETIMES);
//Show the vbox
primaryStage.setScene(new Scene(container, 600, 400));
primaryStage.show();
}
I have a weird problem with verticalScrollPosition in Flex.
I have a content Canvas and a wrapper Canvas. The content is large (5000px X 5000px), the wrapper is 800px X 800px.
public var wrapper:Canvas = new Canvas();
public var content:Canvas = new Canvas();
wrapper.addChild(content);
application.addChild(wrapper);
I would like to set the wrapper's scrollbar position dynamically anytime. I can do it by calling its properties:
wrapper.verticalScrollPosition = A;
wrapper.horizontalScrollPosition = B;
This is working fine. But! If I set a default scrollbar position when the Canvas is complete:
wrapper.addEventListener(FlexEvent.CREATION_COMPLETE, function(e:FlexEvent):void{
wrapper.verticalScrollPosition = DEFAULT_A;
wrapper.horizontalScrollPosition = DEFAULT_B;
});
I can't set the verticalScrollPosition anymore:
wrapper.verticalScrollPosition = C;
trace(wrapper.verticalScrollPosition); // Outputs: DEFAULT_A
So the problem only exist if I set a default position using 'FlexEvent.CREATION_COMPLETE'.
What am I doing wrong here?
Thanks in advance.
I've found a horrible workaround - I wait 1 microsecond to set the default state:
wrapper.addEventListener(FlexEvent.CREATION_COMPLETE, function(e:FlexEvent):void{
setTimeout(
function():void{wrapper.verticalScrollPosition = DEFAULT_A;},
1
);
});
I think we can agree it's really ugly. How can I make it better?
I've found the problem. I attached the event listener to the child of the wrapper. When I added the listener to the wrapper itself it works.
So lesson I've learnt: always track the topmost ui element's events you have to work with.
I thought I had a handle on AS3, DisplayObjectContainers, etc. but this basic thing is really confusing me: changing the width/height of a sprite does not affect it's visual contents - either graphics drawn within it or any children it may have.
I have searched around and found an Adobe page that represents my own little test code. From that page, I would expect the sprite to increase in visual size as it's width increases. For me, it doesn't. (http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/display/DisplayObject.html#width)
width property
width:Number [read-write]
Indicates the width of the display object, in pixels. The width is calculated based on the bounds of the content of the display object. When you set the width property, the scaleX property is adjusted accordingly, as shown in the following code:
My code below doesn't affect the visual display at all - but it does set the width/height, at least according to the trace output. It does not affect the scaleX/scaleY.
What the heck am I missing here??
My setup code:
testSprite = new SpriteVisualElement();
var childSprite:SpriteVisualElement = new SpriteVisualElement();
childSprite.graphics.beginFill(0xFFFF00, 1);
childSprite.graphics.drawRect(0, 0, 200, 100);
childSprite.graphics.endFill();
childSprite.name = "child";
testSprite.addChild(childSprite);
container.addElement(testSprite);
testSprite.addEventListener(MouseEvent.CLICK, grow);
}
public function grow(event:MouseEvent):void
{
event.target.width += 5;
event.target.height += 5;
trace("grow", event.target.width);
}
If I understand the code correctly; you are changing the width / height of the sprite. But you are doing nothing to change the width/ height of the sprite's children.
In the context of a Flex Application, you can use percentageWidth and percentageHeight on the child to resize the child when the parent is resized. You could also add a listener to the the resize event and adjust sizing that way; preferably tying in to the Flex Component LifeCycle methods somehow.
I believe these approaches are all Flex specific, and dependent upon the Flex Framework. Generic Sprites, as best I understand, do not automatically size themselves to percentages of their parent container; and changing the parent will not automatically resize the parent's children.
I bet something like this would work:
public function grow(event:MouseEvent):void
{
event.target.width += 5;
event.target.height += 5;
childSprite.width += 5;
childSprite.height += 5;
trace("grow", event.target.width);
}
First, if you have a problem with a flex component, you can look over its source code.
In my environment, (as I installed flex SDK to C:\flex\flex_sdk_4.1), the source code for SpriteVisualElement is located at
C:\flex\flex_sdk_4.1\frameworks\projects\spark\src\spark\core\SpriteVisualElement.as
In the source code, you'll find that width property is overridden :
/**
* #private
*/
override public function set width(value:Number):void
{
// Apply to the current actual size
_width = value;
setActualSize(_width, _height);
// Modify the explicit width
if (_explicitWidth == value)
return;
_explicitWidth = value;
invalidateParentSizeAndDisplayList();
}
So, you cannot expect the auto-scaling of the component.
Making custom components will be one solution.
Here is a sample implementation of custom component.
Custom Component Example - wonderfl build flash online
I am trying to attach some of my actionscript class, inherited from Sprite, to my Flex application by attaching it to a UIComponent, then add UIComponent to a panel. However, the size of my Sprite class appears to be larger than the panel. So, I try to resize it using DisplayObject.scale property, but I need to know the size of my container. Since I try to make my code reusable, I figure that I should let my Sprite class handle the resize by getting it via its parent property (let's say, I can resize it by set
this.scaleX = this.parent.Width/this.width or something like this)
However, my Sprite class's parent, which is the UIComponent, has width/height of 0.
So, my question is:
1) Is there any better way to resize DisplayObject class to fit its container when attached to Flex object?
2) If you know, why my UIComponent's size remain 0 and my DisplayObject still appears at its full size?
Here's my code, using Flash Builder 4:
private var loader:Loader = new Loader();
private function testLoader():void {
var urlRequest:URLRequest = new URLRequest("http://localhost/welcome.png");
loader.load(urlRequest);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoaderLoadComplete);
}
private function onLoaderLoadComplete(e:Event):void {
loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,onLoaderLoadComplete);
var ui : UIComponent = new UIComponent();
ui.addChild(loader);
panelTest.addElement(ui);
trace("ui.width = " + ui.width);
trace("ui.height = " + ui.height);
trace("loader.width = " + loader.width);
trace("loader.height = " + loader.height);
trace("panelTest.width = " + panelTest.width);
trace("panelTest.height = " + panelTest.height);
}
And this is the result when run:
ui.width = 0
ui.height = 0
loader.width = 571
loader.height = 411
panelTest.width = 480
panelTest.height = 320
I think it's the other way around: the parent should set the child element size while rendering. You can override the updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) method to set the size of your loader child. See Advanced Visual Components in ActionScript.
I guess that the size of your ui is not really 0. The size is updated later after the layout and rendering process. So you have to wait for the layout to complete after adding a component to stage.
About the remaining 0, unfortunately is a known (grrr) problem: http://www.mail-archive.com/flexcoders#yahoogroups.com/msg39998.html
You can try to access it in a hacked way (using the mx_internal namespace): get width of dynamically created custom uicomponent
Adding the sprite directly to the panel may also be helpful. This can be done by adding the loader to the panel's rawChildren: http://www.actionscript.org/forums/showthread.php3?p=728034
Enjoy.
I want to make a label that has a tiny title above it, for example so the label say $1,000 with a small retail price or our price above it. I am trying to add the title label to the display list of the main label. I get no error but the title does not show up. I also considered rawChildren but apparently Label has no rawChildren property.
Here is my code:
package
{
import mx.controls.Label;
public class PriceLabel extends StrikeThroughLabel //<-- exntension of label to add strike
{
private var _title:Label;
public function PriceLabel()
{
super();
}
[Bindable]
public function set title(s:String):void
{
if(_title == null)
{
_title = new Label();
addChild(_title);
this.alpha = .2;
}
_title.text = s;
}
public function get title():String
{
var s:String
if(_title != null)
{
s = _title.text;
}
return s;
}
}
}
If you add children to a Flex component that is not a container, then you have to manually manage sizing and positioning of those children. Containers do a lot of that work for you.
Here's what you should do:
Move the creation of your child Label into an override of the createChildren() function.
Set the text property of the child label in an override of the commitProperties() function. Your title getter and setter should save the value in a _title variable to be used later for the assignment in commitProperties(). This is actually important for performance.
Override the measure() function and update measuredWidth and measuredHeight to be the maximum width and height values of the main label and it's child.
Override updateDisplayList() and use setActualSize() on the child Label to set it to the required width and height.
That may seem like a lot of work, but in terms of best practices, that's the way you're supposed to build custom components. The Flex Team at Adobe spent a lot of time maximizing performance, and that's why things happen in several steps like that.
That's how to do it based on what you asked. Personally, I would make a subclass of UIComponent with two Labels or UITextFields as children, each with their own separate property.
By the way, the rawChildren property is only available on containers. It exists so that you can add "chrome" to a container that isn't part of the container's child layout algorithm. For example, Panel has a title bar and a border that aren't affected by the vertical/horizontal/absolute layout options.
Why not create a custom component that contains both labels as its children, instead of trying to throw a child on the Label? That feels cleaner to me, as adding children to build-in components like that doesn't seem right.