New hello-world design

README.md

@@ -2,77 +2,54 @@
 
 ![CI Build](https://github.com/JPro-one/HelloJPro/actions/workflows/main.yml/badge.svg)
 
-This project, is a hello-world for [jpro, which enables javafx in the web.](https://www.jpro.one/)
+A hello-world for [JPro](https://www.jpro.one/), which runs JavaFX applications in the web browser.
 
-[Here you can see this program running.](https://demos.jpro.one/helloworld.html)
+[See it running online.](https://demos.jpro.one/helloworld.html)
 
-More about JPRO: 
- * Website: [jpro.one](https://www.jpro.one/)
- * Twitter: [@jpro_one](https://twitter.com/jpro_one)
- * Ticket System: [JPro-tickets](https://github.com/JPro-one/JPro-tickets)
-
-# How to start #
+## Getting started
 
-## Web Browser ##
-
-### Start jpro in foreground (development mode) ###
+Run the app in development mode:
 
 ```shell
 ./gradlew jproRun
 ```
 
-### Start jpro in background (server mode) ###
-
-```shell
-./gradlew jproRestart
-```
-
-### Open jpro app in Web Browser ###
-
-> http://localhost:8080/index.html
-
-### Show all jpro apps in Browser ####
-
-> http://localhost:8080/test/default
-
-### Open jpro app in fullscreen ####
+Then open http://localhost:8080/index.html in your browser.
 
-> http://localhost:8080/test/fullscreen/app-name
+Start editing the page in `src/main/resources/one/jpro/hellojpro/fxml/HelloJPro.fxml`.
+Its styles live in `src/main/resources/one/jpro/hellojpro/css/HelloJPro.css`,
+and its logic in `src/main/java/one/jpro/hellojpro/HelloJProController.java`.
 
+While developing, [CSSFX](https://github.com/McFoggy/cssfx) reloads the CSS in the running app
+as soon as you save it (it is switched off in a `jproRelease` build).
 
-# Deployment:
+To run it as a desktop app instead:
 
-### Step `1`. Prepare your server
-
-To run jpro on linux, the server must be configured correctly.
-
-Checkout the following chapters to configure your server correctly for jpro:
+```shell
+./gradlew run
+```
 
-[DEPLOYING JPRO](https://www.jpro.one/?page=docs/current/2.6/DEPLOYING_JPRO)
-
-[PREPARING LINUX FOR JPRO](https://www.jpro.one/?page=docs/current/2.7/PREPARING_LINUX_FOR_JPRO)
+To keep the server running in the background, use `./gradlew jproRestart` and stop it with `./gradlew jproStop`.
 
-### Step `2`. Create the binary
+## Deployment
 
-Create a zip which contains the application with the following command:
+Create a release zip:
 
 ```shell
 ./gradlew jproRelease
 ```
-The path of the zip-file is the following: `build/distributions/HelloJPro-jpro.zip`
-
-Now copy this file to your Server and unzip it.
-
-### Step `3`. Run jpro
 
-In the unzipped folder you can find a start-script: `bin/start.sh`
-
-By running `./bin/start.sh` you start the JPRO Server on your server. 
-
-The JPRO Server is now ready to server your URLs entered in your browser.
+It is written to `build/distributions/HelloJPro-jpro.zip`.
+Copy it to your server, unzip it, and start the JPro server from the unzipped folder:
 
 ```shell
 ./bin/start.sh
 ```
 
+Linux servers need some preparation first. See the Deployment chapter in the [JPro docs](https://www.jpro.one/docs/).
+
+## More about JPro
 
+ * Website: [jpro.one](https://www.jpro.one/)
+ * Twitter: [@jpro_one](https://twitter.com/jpro_one)
+ * Ticket System: [JPro-tickets](https://github.com/JPro-one/JPro-tickets)

build.gradle

@@ -13,20 +13,28 @@ java {
 
 repositories {
     mavenCentral()
+    // JPro Platform: SimpleFX (needed by the routing library) and snapshot builds
+    maven {
+        url "https://sandec.jfrog.io/artifactory/repo"
+    }
 }
 
 dependencies {
     implementation 'one.jpro:jpro-webapi:$jproVersion'
+    implementation "fr.brouillard.oss:cssfx:$cssfxVersion"
+    implementation "one.jpro.platform:jpro-routing-core:$jproPlatformVersion"
+    implementation "one.jpro.platform:jpro-flexbox:$jproPlatformVersion"
+    implementation "one.jpro.platform:jpro-css-grid:$jproCssGridVersion"
 }
 
 javafx {
     version = "$javafxVersion"
-    modules = ['javafx.graphics', 'javafx.controls', 'javafx.fxml', 'javafx.media', 'javafx.web']
+    modules = ['javafx.controls', 'javafx.fxml']
 }
 
 application {
     // Define the main class for the application.
-    mainClass = 'one.jpro.hellojpro.HelloJProFXML'
+    mainClass = 'one.jpro.hellojpro.HelloJPro'
 }
 
 jpro {

gradle.properties

@@ -2,3 +2,7 @@ projectVersion = 1.0-SNAPSHOT
 jproVersion = 2026.3.1
 javafxPluginVersion = 0.1.0
 javafxVersion = 25.0.2
+cssfxVersion = 11.5.1
+jproPlatformVersion = 0.7.3
+# jpro-css-grid is not in a Platform release yet
+jproCssGridVersion = 0.7.4-SNAPSHOT

src/main/java/module-info.java

@@ -7,6 +7,10 @@
     requires javafx.controls;
     requires javafx.fxml;
     requires jpro.webapi;
+    requires fr.brouillard.oss.cssfx;
+    requires one.jpro.platform.routing.core;
+    requires jpro.platform.jpro.flexbox;
+    requires one.jpro.platform.cssgrid;
 
     exports one.jpro.hellojpro;
     opens one.jpro.hellojpro to javafx.fxml;

src/main/java/one/jpro/hellojpro/HelloJPro.java

@@ -1,28 +1,53 @@
 package one.jpro.hellojpro;
 
-import javafx.application.Application;
-import javafx.geometry.Pos;
+import com.jpro.webapi.JProApplication;
+import com.jpro.webapi.WebAPI;
+import fr.brouillard.oss.cssfx.CSSFX;
+import javafx.fxml.FXMLLoader;
+import javafx.scene.Parent;
 import javafx.scene.Scene;
-import javafx.scene.control.Label;
-import javafx.scene.text.Font;
 import javafx.stage.Stage;
 
+import java.io.IOException;
+
 /**
  * Hello JPro application.
  *
  * @author Florian Kirmaier
  */
-public class HelloJPro extends Application {
+public class HelloJPro extends JProApplication {
 
     @Override
-    public void start(Stage stage) {
-        Label label = new Label("Hello JPro!");
-        label.setFont(new Font(50));
-        label.setAlignment(Pos.CENTER);
-        stage.setScene(new Scene(label));
+    public void start(Stage stage) throws IOException {
+        // load user interface as FXML file
+        FXMLLoader loader = new FXMLLoader(getClass().getResource("/one/jpro/hellojpro/fxml/HelloJPro.fxml"));
+        Parent root = loader.load();
+
+        Scene scene = new Scene(root, 1280, 768);
+
+        if (isDevelopment()) {
+            // CSSFX reloads the CSS as soon as you save it
+            Runnable stopCssfx = CSSFX.start(scene);
+            if (WebAPI.isBrowser()) {
+                getWebAPI().addInstanceCloseListener(stopCssfx::run);
+            }
+        }
+
+        stage.setTitle("Hello JPro!");
+        stage.setScene(scene);
+
+        // open JavaFX window
         stage.show();
     }
 
+    /**
+     * True on desktop and when started with {@code jproRun},
+     * false in a {@code jproRelease} build.
+     */
+    private static boolean isDevelopment() {
+        return !WebAPI.isBrowser() || "dev".equals(System.getProperty("jpro.mode"));
+    }
+
     /**
      * Application entry point.
      *

src/main/java/one/jpro/hellojpro/HelloJProController.java

@@ -0,0 +1,52 @@
+package one.jpro.hellojpro;
+
+import javafx.css.PseudoClass;
+import javafx.fxml.FXML;
+import javafx.scene.Node;
+import javafx.scene.layout.StackPane;
+import one.jpro.platform.routing.LinkUtil;
+
+/**
+ * Controller for HelloJPro.fxml.
+ *
+ * @author Florian Kirmaier
+ */
+public class HelloJProController {
+
+    /** Below this width (e.g. on phones) the panels and buttons stack vertically. */
+    private static final double COMPACT_WIDTH = 720;
+    private static final PseudoClass COMPACT = PseudoClass.getPseudoClass("compact");
+    /** Switches the colors to the dark theme defined in HelloJPro.css. */
+    private static final PseudoClass DARK = PseudoClass.getPseudoClass("dark");
+
+    @FXML
+    private StackPane page;
+    @FXML
+    private Node logoLink;
+    @FXML
+    private Node githubLink;
+    @FXML
+    private Node docsLink;
+    @FXML
+    private Node examplesLink;
+    @FXML
+    private Node platformLink;
+
+    @FXML
+    private void initialize() {
+        // In the browser these become real links; on desktop they open the system browser
+        LinkUtil.setExternalLink(logoLink, "https://www.jpro.one/");
+        LinkUtil.setExternalLink(githubLink, "https://github.com/JPro-one/HelloJPro");
+        LinkUtil.setExternalLink(docsLink, "https://www.jpro.one/docs/");
+        LinkUtil.setExternalLink(examplesLink, "https://www.jpro.one/showcase");
+        LinkUtil.setExternalLink(platformLink, "https://www.jpro.one/platform");
+
+        page.widthProperty().addListener((obs, oldWidth, width) ->
+                page.pseudoClassStateChanged(COMPACT, width.doubleValue() < COMPACT_WIDTH));
+    }
+
+    @FXML
+    private void toggleTheme() {
+        page.pseudoClassStateChanged(DARK, !page.getPseudoClassStates().contains(DARK));
+    }
+}