You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@pivot.apache.org by Piotr Kołaczkowski <pk...@ii.pw.edu.pl> on 2011/06/19 11:56:47 UTC
User resizable panes
Hi,
In Pivot 2.0, is there a way to create a component with one edge thick
just like the splitter in the SplitPane, so that when user drags this
edge, the component resizes appropriately, but only this component and
not the other one that is above/below/left/right?
Imagine two components, one placed over another, in a single Expander
(but it can be a BoxPane, Border or whatever):
===================
Expander title
-----------------------------
Vertically resizable component
------------++--------------
Fixed size component
===================
I want the edge denoted by ---++--- to act very much like a traditional
SplitPane, except that
it doesn't resize the bottom component. So of course, when the user
drags it, the total height of the container holding the two components
also changes.
If it is not possible to do that with the draggable splitter in the
middle, I would be also satisfied with a solution, that the bottom edge
of the expander can be resized, like this:
===================
Expander title
-----------------------------
Resizable component 1
----------------------------
Fixed size component 2
=======++==========
I tried that with SplitPane, by simply setting minimum, maximum and
preferredHeight of the bottom component to the same value, but it seems
to ignore this, and it also doesn't resize the container. :(
Thank you and best regards,
Piotr
--
Piotr Kołaczkowski
Instytut Informatyki, Politechnika Warszawska
Nowowiejska 15/19, 00-665 Warszawa
e-mail: pkolaczk@ii.pw.edu.pl
www: http://home.elka.pw.edu.pl/~pkolaczk/
Re: User resizable panes
Posted by Chris Bartlett <cb...@gmail.com>.
I've been thinking about this some more, and have some questions.
What is the primary functionality that you want?
- Is it to allow for any Component to be resized by the user with the mouse?
- Or perhaps to have a Container that holds 2 Components and allows the user
to drag a 'splitter' to resize just one of the Components and the Container
itself?
- Something else?
There may be a much simpler and more generic approach that the earlier ones
I suggested. Something along the lines of one or more mouse listeners that
can be added to any Component to add the resizing functionality. These
would be combined with a Decorator that would paint the resize 'splitter'
when required.
Then you would simply be able to write something like
Resizer.setResizable(component, Resizer.Direction.VERTICAL)
Resizer.setResizable(component, Resizer.Direction.HORIZONTAL)
Resizer.setResizable(component, Resizer.Direction.BOTH)
Resizer.setResizable(component, Resizer.Direction.NONE)
The advantage of this is that you would be free to use any Containers for
your layout, and any Component.
I have very limited experience with the layout side of things in Pivot, so
I'm sure Greg, Todd or others can correct me if required, or suggest a
better method.
I will re-read the Component & Container tutorial and see if I change my
mind once again! :)
http://pivot.apache.org/tutorials/component-and-container.html
Chris
2011/6/19 Piotr Kołaczkowski <pk...@ii.pw.edu.pl>
>
> Hi,
>
> In Pivot 2.0, is there a way to create a component with one edge thick
> just like the splitter in the SplitPane, so that when user drags this edge,
> the component resizes appropriately, but only this component and not the
> other one that is above/below/left/right?
>
> Imagine two components, one placed over another, in a single Expander (but
> it can be a BoxPane, Border or whatever):
>
> ===================
> Expander title
> -----------------------------
>
> Vertically resizable component
>
> ------------++--------------
> Fixed size component
> ===================
>
> I want the edge denoted by ---++--- to act very much like a traditional
> SplitPane, except that
> it doesn't resize the bottom component. So of course, when the user drags
> it, the total height of the container holding the two components also
> changes.
> If it is not possible to do that with the draggable splitter in the middle,
> I would be also satisfied with a solution, that the bottom edge of the
> expander can be resized, like this:
>
> ===================
> Expander title
> -----------------------------
>
> Resizable component 1
>
> ----------------------------
> Fixed size component 2
> =======++==========
>
>
> I tried that with SplitPane, by simply setting minimum, maximum and
> preferredHeight of the bottom component to the same value, but it seems to
> ignore this, and it also doesn't resize the container. :(
>
> Thank you and best regards,
> Piotr
>
>
> --
> Piotr Kołaczkowski
> Instytut Informatyki, Politechnika Warszawska
> Nowowiejska 15/19, 00-665 Warszawa
> e-mail: pkolaczk@ii.pw.edu.pl
> www: http://home.elka.pw.edu.pl/~pkolaczk/
>
>
Re: User resizable panes
Posted by Piotr Kołaczkowski <pk...@ii.pw.edu.pl>.
W dniu 2011-06-20 14:15, Greg Brown pisze:
> SplitPane cannot be used for this. SplitPane assumes a fixed size - its preferred size does not change based on the position of the splitter. I do not believe there is currently a component that does what you describe, though it would be a useful addition. It could be something like Expander, only instead of expand/collapse, it could resize (maybe call it Resizer?). Then you could add them to a vertical box pane to get the behavior you want.
Wow! A generic resizer would be a great idea, and if you already have
expanders and splitters. I believe implementing them should not be too
difficult (for someone who knows Pivot's internals).
Regards,
Piotr
--
Piotr Kołaczkowski
Instytut Informatyki, Politechnika Warszawska
Nowowiejska 15/19, 00-665 Warszawa
e-mail: pkolaczk@ii.pw.edu.pl
www: http://home.elka.pw.edu.pl/~pkolaczk/
Re: User resizable panes
Posted by Greg Brown <gk...@verizon.net>.
> Are you suggesting a Container that just wraps a single Component?
> A bit like a Border but where the bottom and/or right hand edges are decorated and draggable?
Yes, exactly. I imagine the "handle" might look like a SplitPane divider, though I haven't prototyped it to see how that would work.
> If so, would the resizing change the preferred size of the wrapped Component, or the size of the Container itself?
I imagine it would change its own preferred size, similar to how resizing a Frame works.
> Would the Container perform any layout? (horizontal & vertical alignment)
No - I think it would probably act like Window, Expander, Border, etc. and always stretch its content to fit. As with those other containers, alignment can be managed by using another container as the Resizer's content and adding the "actual" content to that.
G
Re: User resizable panes
Posted by Chris Bartlett <cb...@gmail.com>.
Greg,
Are you suggesting a Container that just wraps a single Component?
A bit like a Border but where the bottom and/or right hand edges are
decorated and draggable?
If so, would the resizing change the preferred size of the wrapped
Component, or the size of the Container itself?
Would the Container perform any layout? (horizontal & vertical alignment)
Chris
On 20 June 2011 19:15, Greg Brown <gk...@verizon.net> wrote:
> I do not believe there is currently a component that does what you
> describe, though it would be a useful addition. It could be something like
> Expander, only instead of expand/collapse, it could resize (maybe call it
> Resizer?). Then you could add them to a vertical box pane to get the
> behavior you want.
>
Re: User resizable panes
Posted by Greg Brown <gk...@verizon.net>.
SplitPane cannot be used for this. SplitPane assumes a fixed size - its preferred size does not change based on the position of the splitter. I do not believe there is currently a component that does what you describe, though it would be a useful addition. It could be something like Expander, only instead of expand/collapse, it could resize (maybe call it Resizer?). Then you could add them to a vertical box pane to get the behavior you want.
On Jun 19, 2011, at 5:56 AM, Piotr Kołaczkowski wrote:
>
> Hi,
>
> In Pivot 2.0, is there a way to create a component with one edge thick just like the splitter in the SplitPane, so that when user drags this edge, the component resizes appropriately, but only this component and not the other one that is above/below/left/right?
>
> Imagine two components, one placed over another, in a single Expander (but it can be a BoxPane, Border or whatever):
>
> ===================
> Expander title
> -----------------------------
>
> Vertically resizable component
>
> ------------++--------------
> Fixed size component
> ===================
>
> I want the edge denoted by ---++--- to act very much like a traditional SplitPane, except that
> it doesn't resize the bottom component. So of course, when the user drags it, the total height of the container holding the two components also changes.
> If it is not possible to do that with the draggable splitter in the middle, I would be also satisfied with a solution, that the bottom edge of the expander can be resized, like this:
>
> ===================
> Expander title
> -----------------------------
>
> Resizable component 1
>
> ----------------------------
> Fixed size component 2
> =======++==========
>
>
> I tried that with SplitPane, by simply setting minimum, maximum and preferredHeight of the bottom component to the same value, but it seems to ignore this, and it also doesn't resize the container. :(
>
> Thank you and best regards,
> Piotr
>
>
> --
> Piotr Kołaczkowski
> Instytut Informatyki, Politechnika Warszawska
> Nowowiejska 15/19, 00-665 Warszawa
> e-mail: pkolaczk@ii.pw.edu.pl
> www: http://home.elka.pw.edu.pl/~pkolaczk/
>
Re: User resizable panes
Posted by Chris Bartlett <cb...@gmail.com>.
I am not sure if there is an official example of creating and using a custom
skin, but here is one I created for an old thread.
See the attachment in this post (thomas.zip)
http://apache-pivot-users.399431.n3.nabble.com/KeyListeners-on-ImageView-tp2600622p2602733.html
The post should hopefully explain what the example does, but basically it
demonstrates changing the behaviour of a Pivot ImageVIew by extending it
creating a custom skin.
FocusableImageView.java <-- custom version of the Pivot ImageView
component
FocusableImageViewSkin.java <-- custom version of the Pivot ImageView skin
FocusableImageViewExample.java <-- this is the demo application which
shows adding the custom component and skin into the Theme
If this is not clear for you, I will try to create a new example tomorrow.
Chris
2011/6/19 Piotr Kołaczkowski <pk...@ii.pw.edu.pl>
> W dniu 2011-06-19 13:12, Chris Bartlett pisze:
>
> 2011/6/19 Chris Bartlett <cb...@gmail.com>
>
>> ... perhaps I just misunderstood the purpose of PRIMARY_REGION?
>>
>
> Yes, I think I did misunderstand.
>
> Looking at the source for the skin, the PRIMARY_REGION enum value is only
> ever referred to in the
> TerraSplitPaneSkin.setSize(int, int) method.
>
> http://svn.apache.org/repos/asf/pivot/trunk/wtk-terra/src/org/apache/pivot/wtk/skin/terra/TerraSplitPaneSkin.java
>
>
> I think it refers to how the SplitPane will adjust if the SplitPane's
> width or height are changed, and not the 'splitRatio'
>
> Chris
>
>
> Thank you very much for the detailed answer.
> Can you point me to a tutorial or an example how to install a custom skin
> on a subclassed component?
>
> Regards,
> Piotr Kołaczkowski
>
>
> --
> Piotr Kołaczkowski
> Instytut Informatyki, Politechnika Warszawska
> Nowowiejska 15/19, 00-665 Warszawa
> e-mail: pkolaczk@ii.pw.edu.pl
> www: http://home.elka.pw.edu.pl/~pkolaczk/
>
>
Re: User resizable panes
Posted by Piotr Kołaczkowski <pk...@ii.pw.edu.pl>.
W dniu 2011-06-19 13:12, Chris Bartlett pisze:
> 2011/6/19 Chris Bartlett <cbartlett.x@gmail.com
> <ma...@gmail.com>>
>
> ... perhaps I just misunderstood the purpose of PRIMARY_REGION?
>
>
> Yes, I think I did misunderstand.
>
> Looking at the source for the skin, the PRIMARY_REGION enum value is
> only ever referred to in the
> TerraSplitPaneSkin.setSize(int, int) method.
> http://svn.apache.org/repos/asf/pivot/trunk/wtk-terra/src/org/apache/pivot/wtk/skin/terra/TerraSplitPaneSkin.java
>
>
> I think it refers to how the SplitPane will adjust if the SplitPane's
> width or height are changed, and not the 'splitRatio'
>
> Chris
Thank you very much for the detailed answer.
Can you point me to a tutorial or an example how to install a custom
skin on a subclassed component?
Regards,
Piotr Kołaczkowski
--
Piotr Kołaczkowski
Instytut Informatyki, Politechnika Warszawska
Nowowiejska 15/19, 00-665 Warszawa
e-mail: pkolaczk@ii.pw.edu.pl
www: http://home.elka.pw.edu.pl/~pkolaczk/
Re: User resizable panes
Posted by Chris Bartlett <cb...@gmail.com>.
2011/6/19 Chris Bartlett <cb...@gmail.com>
> ... perhaps I just misunderstood the purpose of PRIMARY_REGION?
>
Yes, I think I did misunderstand.
Looking at the source for the skin, the PRIMARY_REGION enum value is only
ever referred to in the
TerraSplitPaneSkin.setSize(int, int) method.
http://svn.apache.org/repos/asf/pivot/trunk/wtk-terra/src/org/apache/pivot/wtk/skin/terra/TerraSplitPaneSkin.java
I think it refers to how the SplitPane will adjust if the SplitPane's width
or height are changed, and not the 'splitRatio'
Chris
Re: User resizable panes
Posted by Chris Bartlett <cb...@gmail.com>.
Piotr,
The JavaDoc comment suggests that setting a SplitPane's 'resizeMode'
property to PRIMARY_REGION should do it.
http://pivot.apache.org/2.0/docs/api/org/apache/pivot/wtk/SplitPane.ResizeMode.html#PRIMARY_REGION
http://pivot.apache.org/2.0/docs/api/org/apache/pivot/wtk/SplitPane.html#setResizeMode(org.apache.pivot.wtk.SplitPane.ResizeMode)
But I just played around with in the Component Explorer demo, and can't see
a change in behaviour when the resize mode is changed, but that might just
be because of the Container that is is in (a ScrollPane in this particular
demo).
http://pivot.apache.org/demos/component-explorer.html (Layout Containers
-> SplitPane)
If the PRIMARY_REGION resize mode doesn't actually work (perhaps I just
misunderstood the purpose of PRIMARY_REGION?), then it should still be
possible to achieve what you want without too much effort. (I dont't have
the source code in front of me right now, but will check it later.)
My first idea was to use a SplitPaneListener to listen for the
'splitRatioChanged' events. The listener would would resize the target
Component & SplitPane, and adjust the 'splitRatio' as required. Although
that might work, I think the user experience would not be good due to all
the resizing.
http://pivot.apache.org/2.0/docs/api/org/apache/pivot/wtk/SplitPaneListener.html
It might be easier to subclass SplitPane and associate it with a custom
SplitPaneSkin (based on the existing
org.apache.pivot.wtk.skin.terra.TerraSplitPaneSkin class).
Your custom skin would keep the mouse handling & splitter painting code from
TerraSplitPaneSkin , but just change what happens when the splitter is
dragged. So rather than changing the 'splitRatio', it would resize the
'target' Component (and SplitPane itself) as the splitter handle is dragged
.
Another option would be to use a TablePane as the Container for your 2
Components.
http://pivot.apache.org/2.0/docs/api/org/apache/pivot/wtk/TablePane.html
(This method would be quick and easy if the 'splitter' size only ever
changes programmatically, but it is probably too much work to build in the
changes based on use/mouse input.)
For the vertical layout orientation, you would create 1 column and 2 rows.
One row would have a relative height of '1*', meaning that it would use all
space available to it. The other would have a relative height of '-1',
meaning that it would just use the size required for the Component in the
row. You could use 2 columns, and 1 row for a horizontal layout
orientation.
The TablePane would handle the actual sizing for you, but you would need to
handle the mouse events yourself as well as the painting of the 'spliiter
handle'.
http://pivot.apache.org/2.0/docs/api/org/apache/pivot/wtk/ComponentMouseListener.html
http://pivot.apache.org/2.0/docs/api/org/apache/pivot/wtk/ComponentMouseButtonListener.html
http://pivot.apache.org/2.0/docs/api/org/apache/pivot/wtk/ComponentMouseWheelListener.html
http://pivot.apache.org/2.0/docs/api/org/apache/pivot/wtk/ContainerMouseListener.html
Chris
2011/6/19 Piotr Kołaczkowski <pk...@ii.pw.edu.pl>
>
> Hi,
>
> In Pivot 2.0, is there a way to create a component with one edge thick
> just like the splitter in the SplitPane, so that when user drags this edge,
> the component resizes appropriately, but only this component and not the
> other one that is above/below/left/right?
>
> Imagine two components, one placed over another, in a single Expander (but
> it can be a BoxPane, Border or whatever):
>
> ===================
> Expander title
> -----------------------------
>
> Vertically resizable component
>
> ------------++--------------
> Fixed size component
> ===================
>
> I want the edge denoted by ---++--- to act very much like a traditional
> SplitPane, except that
> it doesn't resize the bottom component. So of course, when the user drags
> it, the total height of the container holding the two components also
> changes.
> If it is not possible to do that with the draggable splitter in the middle,
> I would be also satisfied with a solution, that the bottom edge of the
> expander can be resized, like this:
>
> ===================
> Expander title
> -----------------------------
>
> Resizable component 1
>
> ----------------------------
> Fixed size component 2
> =======++==========
>
>
> I tried that with SplitPane, by simply setting minimum, maximum and
> preferredHeight of the bottom component to the same value, but it seems to
> ignore this, and it also doesn't resize the container. :(
>
> Thank you and best regards,
> Piotr
>
>
> --
> Piotr Kołaczkowski
> Instytut Informatyki, Politechnika Warszawska
> Nowowiejska 15/19, 00-665 Warszawa
> e-mail: pkolaczk@ii.pw.edu.pl
> www: http://home.elka.pw.edu.pl/~pkolaczk/
>
>