Merge pull request #181 from leaningtech/tutorials

tutorials
leaningtech · Jan 30, 2024 · 127629c · 127629c
2 parents 6c45939 + b4ae2b1
commit 127629c
Show file tree

Hide file tree

Showing 28 changed files with 223 additions and 0 deletions.
diff --git a/examples/FoilSim-Applet/FoilSim.jar b/examples/FoilSim-Applet/FoilSim.jar
diff --git a/examples/FoilSim-Applet/README.md b/examples/FoilSim-Applet/README.md
@@ -0,0 +1,9 @@
+# CheerpJ example: FoilSim Applet
+
+This example shows how to use CheerpJ to run a Java applet in the browser.
+
+Find the step-by-step on our [documentation website](https://labs.leaningtech.com/cheerpj3/examples/applet).
+
+
+## Credits
+The applet used for this tutorial belongs to the NASA's [Beginner's Guide to Aeronautics](https://www.grc.nasa.gov/WWW/K-12/airplane/) and it is available at their [GitHub repository](https://github.com/nasa/BGA/tree/main).
diff --git a/examples/FoilSim-Applet/index.html b/examples/FoilSim-Applet/index.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <title>FoilSim applet (CheerpJ)</title>
+  <script src="https://cjrtnc.leaningtech.com/3.0rc2/cj3loader.js"></script>
+</head>
+<style>
+  div {
+    max-width: 1000px;
+    margin: auto;
+    text-align: center;
+  }
+  h1 {
+    margin-bottom: 50px;
+  }
+  h5 {
+    margin-top: 20px;
+  }
+</style>
+
+<body>
+  <div>
+    <h1>Applet example with CheerpJ</h1>
+    <div>
+      <cheerpj-applet archive="FoilSim.jar" code="Foil.class" height="450" width="950">
+        Your browser cannot handle the applet tag!
+      </cheerpj-applet>
+    </div>
+    <h5>
+      The applet shown in this example belongs to the NASA's <a
+        href="https://www.grc.nasa.gov/WWW/K-12/airplane/">Beginner's Guide to Aeronautics</a> and it is available at
+      their <a href="https://github.com/nasa/BGA/tree/main">GitHub repository</a>.
+    </h5>
+    <h5>Applet is running with <a href="https://labs.leaningtech.com/cheerpj3">CheerpJ</a> by <a
+        href="https://leaningtech.com/">©Leaning Technologies</a></h5>
+  </div>
+  <script type="module">
+    await cheerpjInit();
+  </script>
+</body>
+
+</html>
diff --git a/examples/Pitch-Applet/Pitch.jar b/examples/Pitch-Applet/Pitch.jar
diff --git a/examples/Pitch-Applet/README.md b/examples/Pitch-Applet/README.md
@@ -0,0 +1,10 @@
+# CheerpJ example: Pitch Applet
+
+This example shows how to use CheerpJ to run a Java applet in the browser.
+
+Find the step-by-step on our [documentation website](https://labs.leaningtech.com/cheerpj3/examples/applet).
+
+The JNLP version of this tutorial is [available here](https://labs.leaningtech.com/cheerpj3/examples/jnlp#jnlp-applet-pitch).
+
+## Credits
+The applet used for this tutorial belongs to the NASA's [Beginner's Guide to Aeronautics](https://www.grc.nasa.gov/WWW/K-12/airplane/) and it is available at their [GitHub repository](https://github.com/nasa/BGA/tree/main).
diff --git a/examples/Pitch-Applet/index.html b/examples/Pitch-Applet/index.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <title>Pitch applet (CheerpJ)</title>
+  <script src="https://cjrtnc.leaningtech.com/3.0rc1/cj3loader.js"></script>
+</head>
+<style>
+  div {
+    max-width: 500px;
+    margin: auto;
+    text-align: center;
+  }
+  h1 {
+    margin-bottom: 50px;
+  }
+  h5 {
+    margin-top: 20px;
+  }
+</style>
+
+<body>
+  <div>
+    <h1>Applet example with CheerpJ</h1>
+    <div>
+      <cheerpj-applet archive="Pitch.jar" code="Pitchview" height="300" width="500">
+        Your browser cannot handle the applet tag!
+      </cheerpj-applet>
+    </div>
+    <h5>
+      The applet shown in this example belongs to the NASA's <a
+        href="https://www.grc.nasa.gov/WWW/K-12/airplane/">Beginner's Guide to Aeronautics</a> and it is available at
+      their <a href="https://github.com/nasa/BGA/tree/main">GitHub repository</a>.
+    </h5>
+    <h5>Applet is running with <a href="https://labs.leaningtech.com/cheerpj3">CheerpJ</a> by <a
+        href="https://leaningtech.com/">©Leaning Technologies</a></h5>
+  </div>
+  <script type="module">
+    await cheerpjInit();
+  </script>
+</body>
+
+</html>
diff --git a/examples/README.md b/examples/README.md
@@ -0,0 +1,15 @@
+# CheerpJ tutorials
+
+This repository holds a collection of the CheerpJ examples available on [our documentation website](https://labs.leaningtech.com/cheerpj3/examples). These examples will help you to put hands-on simple projects with CheerpJ and run a variety of Java applets and applications in the browser, including those that require networking. 
+
+
+
+| Tutorial      | Description |
+| ----------- | ----------- |
+| [FoilSim Applet](https://labs.leaningtech.com/cheerpj3/examples/applet) | How to run a Java applet in the browser. |
+| [Pitch Applet](https://labs.leaningtech.com/cheerpj3/examples/jnlp#jnlp-applet-pitch)   | How to run a JNLP applet in the browser.      |
+| [Server-Client](https://labs.leaningtech.com/cheerpj3/examples/serverclient)   | How to run two Java applications that communicate with each other (tab-to-tab).|
+| [Swing-Browser](https://labs.leaningtech.com/cheerpj3/examples/java-browser)   | How to run a Java application in the browser with an internet connection.      |
+| [SwingSet3](https://labs.leaningtech.com/cheerpj3/examples/swingset3)   | How to run a Swing application in the browser.       |
+
+We have a vibrant [Discord community](https://discord.com/invite/qBMHpK9Kqv) where you can ask questions, share your projects, and get community support.
diff --git a/examples/Server-Client/Client/Client.jar b/examples/Server-Client/Client/Client.jar
diff --git a/examples/Server-Client/Client/client.html b/examples/Server-Client/Client/client.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Client</title>
+    <script src="https://cjrtnc.leaningtech.com/3.0rc2/cj3loader.js"></script>
+  </head>
+  <body>
+    <input type="text" id="ip"></input>
+    <script>
+      async function start(ip) {
+        await cheerpjInit({
+          tailscaleAuthKey: "PasteYourKeyHere",
+        });
+        cheerpjCreateDisplay(800, 600);
+        await cheerpjRunJar("/app/Client.jar", ip);
+      };
+      let el = document.querySelector("#ip");
+      el.addEventListener("keydown", (e) => {
+        if (e.key == "Enter") {
+          start(el.value);
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/examples/Server-Client/README.md b/examples/Server-Client/README.md
@@ -0,0 +1,8 @@
+# CheerpJ networking example: Server-Client communication
+
+This example shows how to use CheerpJ to run two Java applications that communicate with each other.
+
+Find the step-by-step tutorial on our [documentation website](https://labs.leaningtech.com/cheerpj3/examples/serverclient).
+
+## Credits
+The Java applications used in this networking tutorial belong to [TechVidvan](https://techvidvan.com/tutorials/). You can find their tutorial with the source code [here](https://techvidvan.com/tutorials/java-chat-application/). Some minor edits have been made to adapt to this tutorial.
diff --git a/examples/Server-Client/Server/.DS_Store b/examples/Server-Client/Server/.DS_Store
diff --git a/examples/Server-Client/Server/Server.jar b/examples/Server-Client/Server/Server.jar
diff --git a/examples/Server-Client/Server/server.html b/examples/Server-Client/Server/server.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Server</title>
+    <script src="https://cjrtnc.leaningtech.com/3.0rc2/cj3loader.js"></script>
+  </head>
+  <body>
+    <input type="text" id="ip"></input>
+    <script>
+      (async function () {
+        await cheerpjInit({
+          tailscaleAuthKey: "PasteYourKeyHere",
+          tailscaleIpCb: (ip) => {
+            let el = document.querySelector("#ip");
+            el.value = ip;
+          },
+        });
+        cheerpjCreateDisplay(800, 600);
+        await cheerpjRunJar("/app/Server.jar");
+      })();
+    </script>
+  </body>
+</html>
diff --git a/examples/Swing-Browser/README.md b/examples/Swing-Browser/README.md
@@ -0,0 +1,5 @@
+# CheerpJ networking example: Swing Browser
+
+This example shows how to use CheerpJ to run a Java application in the browser with an internet connection.
+
+Find the step-by-step tutorial on our [documentation website](https://labs.leaningtech.com/cheerpj3/examples/java-browser).
diff --git a/examples/Swing-Browser/SwingHTMLBrowser.jar b/examples/Swing-Browser/SwingHTMLBrowser.jar
diff --git a/examples/Swing-Browser/browser.html b/examples/Swing-Browser/browser.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Browser</title>
+    <script src="https://cjrtnc.leaningtech.com/3.0rc2/cj3loader.js"></script>
+  </head>
+  <body>
+    <script>
+      (async function () {
+        await cheerpjInit({
+        tailscaleAuthKey:"PasteYourKeyHere",
+
+      });
+        cheerpjCreateDisplay(800, 600);
+        await cheerpjRunJar("/app/SwingHTMLBrowser.jar");
+      })();
+    </script>
+  </body>
+</html>
diff --git a/examples/SwingSet3/README.md b/examples/SwingSet3/README.md
@@ -0,0 +1,9 @@
+# CheerpJ example: SwingSet3
+
+This example shows how to use CheerpJ to run a Swing application in the browser.
+
+You can find the full tutorial on our [documentation page](/cheerpj3/examples/swingset3).
+
+The JNLP version of this tutorial is [available here](https://labs.leaningtech.com/cheerpj3/examples/jnlp#jnlp-application-swingset3).
+
+
diff --git a/examples/SwingSet3/SwingSet3.jar b/examples/SwingSet3/SwingSet3.jar
diff --git a/examples/SwingSet3/index.html b/examples/SwingSet3/index.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/examples/SwingSet3/lib/AnimatedTransitions.jar b/examples/SwingSet3/lib/AnimatedTransitions.jar
diff --git a/examples/SwingSet3/lib/AppFramework.jar b/examples/SwingSet3/lib/AppFramework.jar
diff --git a/examples/SwingSet3/lib/Filters.jar b/examples/SwingSet3/lib/Filters.jar
diff --git a/examples/SwingSet3/lib/MultipleGradientPaint.jar b/examples/SwingSet3/lib/MultipleGradientPaint.jar
diff --git a/examples/SwingSet3/lib/TimingFramework.jar b/examples/SwingSet3/lib/TimingFramework.jar
diff --git a/examples/SwingSet3/lib/javaws.jar b/examples/SwingSet3/lib/javaws.jar
diff --git a/examples/SwingSet3/lib/swing-layout-1.0.jar b/examples/SwingSet3/lib/swing-layout-1.0.jar
diff --git a/examples/SwingSet3/lib/swing-worker.jar b/examples/SwingSet3/lib/swing-worker.jar
diff --git a/examples/SwingSet3/lib/swingx.jar b/examples/SwingSet3/lib/swingx.jar