2. Open a window - fakeivchenko/lwjwae GitHub Wiki

1. In src/main/resources/app/index.html, write the page:

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="utf-8">
       <title>Notes</title>
       <link rel="stylesheet" href="style.css">
     </head>
     <body>
       <main>
         <h1>Notes</h1>
         <textarea id="note" placeholder="Write a note"></textarea>
         <button id="save">Save</button>
         <p id="status"></p>
       </main>
     </body>
   </html>

2. In src/main/resources/app/style.css, add the styles:

   body {
     margin: 0;
     background: #f8fafc;
     color: #0f172a;
     font-family: system-ui, sans-serif;
   }
   
   main {
     display: grid;
     gap: 0.75rem;
     max-width: 36rem;
     margin: 0 auto;
     padding: 2rem 1.5rem;
   }
   
   h1 {
     margin: 0;
     font-size: 1.75rem;
   }
   
   textarea {
     min-height: 6rem;
     padding: 0.75rem;
     border: 1px solid #cbd5e1;
     border-radius: 8px;
     font: inherit;
     resize: vertical;
   }
   
   main button {
     justify-self: start;
     padding: 0.5rem 1.25rem;
     border: 0;
     border-radius: 8px;
     background: #2563eb;
     color: white;
     font: inherit;
     cursor: pointer;
   }
   
   #status {
     margin: 0;
     color: #15803d;
   }
   
   ul {
     margin: 0;
     padding-left: 1.25rem;
   }

3. In src/main/java/com/example/notes/Main.java, open a window on the page:

   package com.example.notes;
   
   import dev.ivchenko.lwjwae.Application;
   
   public class Main {
     public static void main(String[] args) {
       Application.launch("Notes", "app/index.html");
     }
   }

   Application.launch picks the backend for the current platform, opens a window titled Notes, and loads app/index.html from the resources of the application. The call returns when the user closes the window.

4. Run the application:

   ./gradlew run

   A window opens with the page:

   

The page loads from the classpath under its own address, app://local/app/index.html, or http://app.localhost/app/index.html on Windows. Relative links, stylesheets, and fetch calls work the way that they do on a web server.

---

Previous: Set up the project · Next: Call Java from the page