Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » e(fx)clipse » How to create a simple custom window with efx.window.root.fxml
How to create a simple custom window with efx.window.root.fxml [message #1708431] Wed, 16 September 2015 12:51 Go to next message
Christoph Keimel is currently offline Christoph KeimelFriend
Messages: 482
Registered: December 2010
Location: Germany
Senior Member
Hi Tom,

I would like to create an e4 Application with 2 menu bars that are placed on top of one another. The top menu bar (Main menu) will be populated by the menus and menu items defined in the application model. The lower (secondary) menu bar will be populated by code (legacy stuff).

My first approach to this was to use a tool control in a window trim to load the secondary menu bar. That looks pretty good but doesn't get me very far, because I need this slot for the tool bar (adding a second window trim - top for the tool bar will overwrite the first one).

My second approach was to use efx.window.root.fxml to get control over the window. I looked at the compensator example and was able to copy this approach using DefaultTrimmedWindowPane. Unfortunately (at least for me Wink) DefaultTrimmedWindowPane is styled to look very different from a standard JavaFX frame. This is cool, but my customers would rather have a "normal" stage which just has a second MenuBar below the first.

I guess I need to implement my own Frame (or TrimmedWindow). What I don't understand here is what to do with all the methods in Frame (except setClientArea). setTitle, setResizable, etc. are methods I would typically forward to the stage, or not? If so, can I inject the stage or do I need to create it?

What do I gain from having to use a Frame or TrimmedWindow? Since efx.window.root.fxml accepts an fxml, I would probably be perfectly happy with something like this:
<BorderPane xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
  <top>
    <VBox maxWidth="1.7976931348623157E308">
      <children>
        <Pane id="menu-bar-area" maxWidth="1.7976931348623157E308" />
        <Pane fx:id="secondaryMenuBar" maxWidth="1.7976931348623157E308" />
      </children>
    </VBox>
  </top>
  <center>
    <FillLayoutPane id="client-area"/> 
  </center>
</BorderPane>
If I could use a BorderPane directly, I would not have to create a new class to add some more ui elements to my window.

I will explore further. In the meantime any help/hints are very welcome!

Thanks,
Christoph
Re: How to create a simple custom window with efx.window.root.fxml [message #1708433 is a reply to message #1708431] Wed, 16 September 2015 13:09 Go to previous messageGo to next message
Thomas Schindl is currently offline Thomas SchindlFriend
Messages: 6651
Registered: July 2009
Senior Member
Use NativeDecoratedTrimmedWindow instead of DefaultTrimmedWindowPane
this should have native window but still allows you to customize the
window content?

Tom

On 16.09.15 14:51, Christoph Keimel wrote:
> Hi Tom,
>
> I would like to create an e4 Application with 2 menu bars that are
> placed on top of one another. The top menu bar (Main menu) will be
> populated by the menus and menu items defined in the application model.
> The lower (secondary) menu bar will be populated by code (legacy stuff).
>
> My first approach to this was to use a tool control in a window trim to
> load the secondary menu bar. That looks pretty good but doesn't get me
> very far, because I need this slot for the tool bar (adding a second
> window trim - top for the tool bar will overwrite the first one).
>
> My second approach was to use efx.window.root.fxml to get control over
> the window. I looked at the compensator example and was able to copy
> this approach using DefaultTrimmedWindowPane. Unfortunately (at least
> for me ;)) DefaultTrimmedWindowPane is styled to look very different
> from a standard JavaFX frame. This is cool, but my customers would
> rather have a "normal" stage which just has a second MenuBar below the
> first.
>
> I guess I need to implement my own Frame (or TrimmedWindow). What I
> don't understand here is what to do with all the methods in Frame
> (except setClientArea). setTitle, setResizable, etc. are methods I would
> typically forward to the stage, or not? If so, can I inject the stage or
> do I need to create it?
>
> What do I gain from having to use a Frame or TrimmedWindow? Since
> efx.window.root.fxml accepts an fxml, I would probably be perfectly
> happy with something like this:
> <BorderPane xmlns="http://javafx.com/javafx/8.0.40"
> xmlns:fx="http://javafx.com/fxml/1">
> <top>
> <VBox maxWidth="1.7976931348623157E308">
> <children>
> <Pane id="menu-bar-area" maxWidth="1.7976931348623157E308" />
> <Pane fx:id="secondaryMenuBar" maxWidth="1.7976931348623157E308" />
> </children>
> </VBox>
> </top>
> <center>
> <FillLayoutPane id="client-area"/> </center>
> </BorderPane> If I could use a BorderPane directly, I would not have to
> create a new class to add some more ui elements to my window.
>
> I will explore further. In the meantime any help/hints are very welcome!
>
> Thanks,
> Christoph
Re: How to create a simple custom window with efx.window.root.fxml [message #1708437 is a reply to message #1708433] Wed, 16 September 2015 13:17 Go to previous messageGo to next message
Thomas Schindl is currently offline Thomas SchindlFriend
Messages: 6651
Registered: July 2009
Senior Member
To keep the native window decorations you need to set an explicit
"efx.window.stagestyle"

Tom

On 16.09.15 15:09, Tom Schindl wrote:
> Use NativeDecoratedTrimmedWindow instead of DefaultTrimmedWindowPane
> this should have native window but still allows you to customize the
> window content?
>
> Tom
>
> On 16.09.15 14:51, Christoph Keimel wrote:
>> Hi Tom,
>>
>> I would like to create an e4 Application with 2 menu bars that are
>> placed on top of one another. The top menu bar (Main menu) will be
>> populated by the menus and menu items defined in the application model.
>> The lower (secondary) menu bar will be populated by code (legacy stuff).
>>
>> My first approach to this was to use a tool control in a window trim to
>> load the secondary menu bar. That looks pretty good but doesn't get me
>> very far, because I need this slot for the tool bar (adding a second
>> window trim - top for the tool bar will overwrite the first one).
>>
>> My second approach was to use efx.window.root.fxml to get control over
>> the window. I looked at the compensator example and was able to copy
>> this approach using DefaultTrimmedWindowPane. Unfortunately (at least
>> for me ;)) DefaultTrimmedWindowPane is styled to look very different
>> from a standard JavaFX frame. This is cool, but my customers would
>> rather have a "normal" stage which just has a second MenuBar below the
>> first.
>>
>> I guess I need to implement my own Frame (or TrimmedWindow). What I
>> don't understand here is what to do with all the methods in Frame
>> (except setClientArea). setTitle, setResizable, etc. are methods I would
>> typically forward to the stage, or not? If so, can I inject the stage or
>> do I need to create it?
>>
>> What do I gain from having to use a Frame or TrimmedWindow? Since
>> efx.window.root.fxml accepts an fxml, I would probably be perfectly
>> happy with something like this:
>> <BorderPane xmlns="http://javafx.com/javafx/8.0.40"
>> xmlns:fx="http://javafx.com/fxml/1">
>> <top>
>> <VBox maxWidth="1.7976931348623157E308">
>> <children>
>> <Pane id="menu-bar-area" maxWidth="1.7976931348623157E308" />
>> <Pane fx:id="secondaryMenuBar" maxWidth="1.7976931348623157E308" />
>> </children>
>> </VBox>
>> </top>
>> <center>
>> <FillLayoutPane id="client-area"/> </center>
>> </BorderPane> If I could use a BorderPane directly, I would not have to
>> create a new class to add some more ui elements to my window.
>>
>> I will explore further. In the meantime any help/hints are very welcome!
>>
>> Thanks,
>> Christoph
>
Re: How to create a simple custom window with efx.window.root.fxml [message #1708438 is a reply to message #1708433] Wed, 16 September 2015 13:25 Go to previous messageGo to next message
Thomas Schindl is currently offline Thomas SchindlFriend
Messages: 6651
Registered: July 2009
Senior Member
Ok the NativeDecoratedTrimmedWindow is not as flexible as the
DefaultTrimmedWindowPane, we'd have to make it a bit clever so I guess
rolling you custom implementation of TrimmedWindow is the easiest
solution for now. Please file a feature request so that we can make the
NativeDecoratedTrimmedWindow more customizable.

Tom

On 16.09.15 15:09, Tom Schindl wrote:
> Use NativeDecoratedTrimmedWindow instead of DefaultTrimmedWindowPane
> this should have native window but still allows you to customize the
> window content?
>
> Tom
>
> On 16.09.15 14:51, Christoph Keimel wrote:
>> Hi Tom,
>>
>> I would like to create an e4 Application with 2 menu bars that are
>> placed on top of one another. The top menu bar (Main menu) will be
>> populated by the menus and menu items defined in the application model.
>> The lower (secondary) menu bar will be populated by code (legacy stuff).
>>
>> My first approach to this was to use a tool control in a window trim to
>> load the secondary menu bar. That looks pretty good but doesn't get me
>> very far, because I need this slot for the tool bar (adding a second
>> window trim - top for the tool bar will overwrite the first one).
>>
>> My second approach was to use efx.window.root.fxml to get control over
>> the window. I looked at the compensator example and was able to copy
>> this approach using DefaultTrimmedWindowPane. Unfortunately (at least
>> for me ;)) DefaultTrimmedWindowPane is styled to look very different
>> from a standard JavaFX frame. This is cool, but my customers would
>> rather have a "normal" stage which just has a second MenuBar below the
>> first.
>>
>> I guess I need to implement my own Frame (or TrimmedWindow). What I
>> don't understand here is what to do with all the methods in Frame
>> (except setClientArea). setTitle, setResizable, etc. are methods I would
>> typically forward to the stage, or not? If so, can I inject the stage or
>> do I need to create it?
>>
>> What do I gain from having to use a Frame or TrimmedWindow? Since
>> efx.window.root.fxml accepts an fxml, I would probably be perfectly
>> happy with something like this:
>> <BorderPane xmlns="http://javafx.com/javafx/8.0.40"
>> xmlns:fx="http://javafx.com/fxml/1">
>> <top>
>> <VBox maxWidth="1.7976931348623157E308">
>> <children>
>> <Pane id="menu-bar-area" maxWidth="1.7976931348623157E308" />
>> <Pane fx:id="secondaryMenuBar" maxWidth="1.7976931348623157E308" />
>> </children>
>> </VBox>
>> </top>
>> <center>
>> <FillLayoutPane id="client-area"/> </center>
>> </BorderPane> If I could use a BorderPane directly, I would not have to
>> create a new class to add some more ui elements to my window.
>>
>> I will explore further. In the meantime any help/hints are very welcome!
>>
>> Thanks,
>> Christoph
>
Re: How to create a simple custom window with efx.window.root.fxml [message #1708524 is a reply to message #1708438] Thu, 17 September 2015 09:59 Go to previous messageGo to next message
Christoph Keimel is currently offline Christoph KeimelFriend
Messages: 482
Registered: December 2010
Location: Germany
Senior Member
Hi Tom

I have not quite understood how that would work. It does seem a bit complicated to me as my aim is not to be in control of the whole design but just to introduce some constant ui elements outside of the application model.

I have tried to find a simpler solution for my use case that does not require me to implement any interfaces. Please have a look at Bug 477679 and tell me what you think of this approach.

Christoph

Thomas Schindl wrote on Wed, 16 September 2015 15:25
Ok the NativeDecoratedTrimmedWindow is not as flexible as the
DefaultTrimmedWindowPane, we'd have to make it a bit clever so I guess
rolling you custom implementation of TrimmedWindow is the easiest
solution for now. Please file a feature request so that we can make the
NativeDecoratedTrimmedWindow more customizable.

Tom

Re: How to create a simple custom window with efx.window.root.fxml [message #1708530 is a reply to message #1708524] Thu, 17 September 2015 10:18 Go to previous messageGo to next message
Thomas Schindl is currently offline Thomas SchindlFriend
Messages: 6651
Registered: July 2009
Senior Member
Hi,

I've merged the change but I think it is not possible to solve all
problems people might have because the only layout is supports is

------------------------|
| menu |
| ----------------------|
| custom area |
||---------------------||
|| trim ||
||---------------------||
|| | | ||
||trim | center | trim||
|| | | ||
||---------------------||
|| trim ||
||---------------------||
-------------------------

If you look closely to the DefaultTrimmedWindow it allows you to build
completely custom layouts where you reposition the trims in completely
free way.

I merged your current solution because I think it solves the 95% case
but still I'd like people to have the same flexibility they have with
DefaultTrimmedWindow with the native decorated one. What do you think?

Tom

On 17.09.15 11:59, Christoph Keimel wrote:
> Hi Tom
>
> I have not quite understood how that would work. It does seem a bit
> complicated to me as my aim is not to be in control of the whole design
> but just to introduce some constant ui elements outside of the
> application model.
> I have tried to find a simpler solution for my use case that does not
> require me to implement any interfaces. Please have a look at
> https://bugs.eclipse.org/bugs/show_bug.cgi?id=477679 and tell me what
> you think of this approach.
>
> Christoph
>
> Thomas Schindl wrote on Wed, 16 September 2015 15:25
>> Ok the NativeDecoratedTrimmedWindow is not as flexible as the
>> DefaultTrimmedWindowPane, we'd have to make it a bit clever so I guess
>> rolling you custom implementation of TrimmedWindow is the easiest
>> solution for now. Please file a feature request so that we can make the
>> NativeDecoratedTrimmedWindow more customizable.
>>
>> Tom
>
>
Re: How to create a simple custom window with efx.window.root.fxml [message #1708550 is a reply to message #1708530] Thu, 17 September 2015 12:06 Go to previous messageGo to next message
Christoph Keimel is currently offline Christoph KeimelFriend
Messages: 482
Registered: December 2010
Location: Germany
Senior Member
Hi Tom

Yeah, with this solution you can only determine the location of the client-area. The trims will always be at the borders of this client-area. In my case I only want to fiddle with the menu, so that is ok. But let's consider this use case: You want your client-area to be deep in the scene graph and you have created lots of stuff around it. You would now probably want your trims to be at the outside of the whole construct and not just on the outside of the client-area. So I think you are correct with your assumption.

We could enable trim-location-flexibility by doing the id lookups directly in WWindowImpl, much like I proposed to do it in WWindowImpl#setMainMenu (i.e. rootPane.lookup("#top-trim-area") in WWindowImpl#setTopTrim). An advantage of this approach is that I think it would be easier to understand, because all you need to know when you create the FXML are the ids you need to set. The rest of the magic happens in the FXML controller and is up to the developer. You don't need to know about Frame, TrimmedWindow, DefaultTrimmedWindow, etc. If you want you can do the layout in SceneBuilder without being forced to import any libraries, which is nice if you have separated FXML designers and ui coders.

Or am I missing something?

Christoph
Re: How to create a simple custom window with efx.window.root.fxml [message #1708663 is a reply to message #1708550] Fri, 18 September 2015 13:20 Go to previous messageGo to next message
Thomas Schindl is currently offline Thomas SchindlFriend
Messages: 6651
Registered: July 2009
Senior Member
The simpler the better - the look up you describe is similar to the how
the TrimmedWindows work.

Tom

On 17.09.15 14:06, Christoph Keimel wrote:
> Hi Tom
>
> Yeah, with this solution you can only determine the location of the
> client-area. The trims will always be at the borders of this
> client-area. In my case I only want to fiddle with the menu, so that is
> ok. But let's consider this use case: You want your client-area to be
> deep in the scene graph and you have created lots of stuff around it.
> You would now probably want your trims to be at the outside of the whole
> construct and not just on the outside of the client-area. So I think you
> are correct with your assumption.
>
> We could enable trim-location-flexibility by doing the id lookups
> directly in WWindowImpl, much like I proposed to do it in
> WWindowImpl#setMainMenu (i.e. rootPane.lookup("#top-trim-area") in
> WWindowImpl#setTopTrim). An advantage of this approach is that I think
> it would be easier to understand, because all you need to know when you
> create the FXML are the ids you need to set. The rest of the magic
> happens in the FXML controller and is up to the developer. You don't
> need to know about Frame, TrimmedWindow, DefaultTrimmedWindow, etc. If
> you want you can do the layout in SceneBuilder without being forced to
> import any libraries, which is nice if you have separated FXML designers
> and ui coders.
>
> Or am I missing something?
>
> Christoph
Re: How to create a simple custom window with efx.window.root.fxml [message #1708956 is a reply to message #1708663] Tue, 22 September 2015 18:47 Go to previous message
Christoph Keimel is currently offline Christoph KeimelFriend
Messages: 482
Registered: December 2010
Location: Germany
Senior Member
I opened Bug 478100 for this enhancement. I plan to work on it when I find the time.
Previous Topic:Tutorial 1 updated for Mars 4.5.0
Next Topic:Unable to display invisible Dialog
Goto Forum:
  


Current Time: Thu Mar 28 20:38:21 GMT 2024

Powered by FUDForum. Page generated in 0.02842 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top