On Mon, 28 Oct 2024 05:39:45 GMT, Michael Strauß <mstra...@openjdk.org> wrote:

>> This PR is a new take on a highly requested feature: JavaFX controls in the 
>> header bar (see also #594 for an earlier iteration).
>> 
>> This is a feature with many possible ways to skin the cat, and it has taken 
>> quite a bit of effort to come up with a good user model. In contrast to the 
>> previous iteration, the focus has shifted from providing an entirely 
>> undecorated window to providing a window with a user-configurable header bar.
>> 
>> The customizable header bar is a new layout container: 
>> `javafx.scene.layout.HeaderBar`. It has three areas that accept child nodes: 
>> leading, center, and trailing.  `HeaderBar` also automatically adjusts for 
>> the placement of the default window buttons (minimize, maximize, close) on 
>> the left or right side of the window.
>> 
>> The customizable header bar is combined with a new `EXTENDED` stage style, 
>> which extends the client area into the header bar area. The new extended 
>> stage style is supported on Windows, macOS, and Linux. For platforms that 
>> don't support this stage style, it automatically downgrades to `DECORATED`.
>> 
>> This is how it looks like on each of the three operating systems:
>> 
>> ![extendedwindow](https://github.com/user-attachments/assets/9d798af6-09f4-4337-8210-6eae91079d3a)
>> 
>> The window buttons (minimize, maximize, close) are provided by JavaFX, not 
>> by the application developer. This makes it easier to get basic window 
>> functionality without recreating the entirety of the window controls for all 
>> platforms.
>> 
>> ## Usage
>> This is a minimal example that uses a custom header bar with a `TextField` 
>> in the center area. `HeaderBar` is usually placed in the top area of a 
>> `BorderPane` root container:
>> 
>> public class MyApp extends Application {
>>     @Override
>>     public void start(Stage stage) {
>>         var headerBar = new HeaderBar();
>>         headerBar.setCenter(new TextField());
>> 
>>         var root = new BorderPane();
>>         root.setTop(headerBar);
>> 
>>         stage.setScene(new Scene(root));
>>         stage.initStyle(StageStyle.EXTENDED);
>>         stage.show();
>>     }
>> }
>> 
>> To learn more about the details of the API, refer to the documentation of 
>> `StageStyle.EXTENDED` and `HeaderBar`.
>> 
>> ## Platform integration
>> The implementation varies per platform, and ranges from pretty easy to quite 
>> involved:
>> 1. **macOS**: The window buttons are provided by macOS, we just leave an 
>> empty area where the window buttons will appear. The client area is extended 
>> to cover the entire window by setting the `NSW...
>
> Michael Strauß has updated the pull request incrementally with two additional 
> commits since the last revision:
> 
>  - remove unused code
>  - small code changes

Setting the Stage background to a darker color will make the window controls 
overlay to change the contrast:


    @Override
    public void start(Stage stage) {
        stage.setTitle("Extended");
        var headerBar = new HeaderBar();

        Label lbl = new Label();
        lbl.textProperty().bind(stage.titleProperty());
        headerBar.setCenter(lbl);
        headerBar.setAlignment(lbl, Pos.CENTER);

        var root = new BorderPane();
        root.setTop(headerBar);
        root.setBackground(null);

        stage.setScene(new Scene(root, 300, 300, Color.DARKBLUE));
        stage.initStyle(StageStyle.EXTENDED);
        stage.show();
    }



![image](https://github.com/user-attachments/assets/93d21b36-d0d1-4b00-9306-c5e23de391a9)

But, I have to set the container color to transparent, or else it will be like 
this:

![image](https://github.com/user-attachments/assets/0b4867dc-a8bb-43aa-9bdf-17fc2b543af1)

Also, If the HeaderBar has a different color:


    @Override
    public void start(Stage stage) {
        stage.setTitle("Extended");
        var headerBar = new HeaderBar();
        headerBar.setStyle("-fx-background-color: -fx-background; 
-fx-pref-height: 37");

        Label lbl = new Label();
        lbl.textProperty().bind(stage.titleProperty());
        headerBar.setCenter(lbl);
        headerBar.setAlignment(lbl, Pos.CENTER);

        var root = new BorderPane();
        root.setTop(headerBar);
        root.setBackground(null);

        stage.setScene(new Scene(root, 300, 300, Color.DARKBLUE));
        stage.initStyle(StageStyle.EXTENDED);
        stage.show();
    }



![image](https://github.com/user-attachments/assets/f2eea2f4-d9e8-4738-87af-4168103dae6f)

The current behavior is do adapt to Scene background.

As it does not fit all scenarios, I would not adapt it at all, and provide a 
way to developers to CSS style the Window Controls overlay.

-------------

PR Comment: https://git.openjdk.org/jfx/pull/1605#issuecomment-2441027063

Reply via email to