5. Draw your own title bar - fakeivchenko/lwjwae GitHub Wiki

WindowParameters describes the window: its size, its limits, its title bar, and more. In this step, the window gets a fixed starting size and a title bar that the page draws.

1. In Main.java, build the parameters of the window:

   public static void main(String[] args) {
     Application.launch(
         WindowParameters.builder()
             .title("Notes")
             .size(720, 520)
             .minimumSize(480, 360)
             .decorated(false)
             .resource("app/index.html")
             .build(),
         Main::setUp);
   }

   decorated(false) removes the title bar of the system. The window keeps its shadow, its resize edges, and its rounded corners where the platform has them.

2. In index.html, add a header at the start of body:

     <body>
       <header data-lwjwae-drag>
         <span>Notes</span>
         <button onclick="lwjwae.window.minimize()">&#x2013;</button>
         <button onclick="lwjwae.window.toggleMaximize()">&#x25a1;</button>
         <button id="close" onclick="lwjwae.window.close()">&#x2715;</button>
       </header>

   The data-lwjwae-drag attribute marks where the user can grab the window. A drag there moves the window, and a double click maximizes it, the way that a title bar does. The buttons keep their clicks.

3. In style.css, style the header:

   header {
     display: flex;
     align-items: center;
     height: 40px;
     padding-left: 1rem;
     background: #1e293b;
     color: white;
   }
   
   header span {
     flex: 1;
   }
   
   header button {
     width: 46px;
     height: 40px;
     border: 0;
     background: transparent;
     color: white;
     font-size: 1rem;
   }
   
   header button:hover {
     background: #334155;
   }
   
   header #close:hover {
     background: #dc2626;
   }

4. Run the application. The page now draws the whole window:

   

---

Previous: Send events from Java to the page · Next: Export notes through a native dialog