diff --git a/lychee.toml b/lychee.toml index e375faa6..2a097026 100644 --- a/lychee.toml +++ b/lychee.toml @@ -20,5 +20,10 @@ exclude = [ 'file://.*', 'chrome://.*', 'wss?://*', + 'http://localhost:8080/', + 'https://swingset3.dev.java.net/', + 'https://raw.githubusercontent.com/leaningtech/cheerpj-example-applet/main', + 'https://raw.githubusercontent.com/leaningtech/cheerpj-example-swingset3/main', + 'https://swingset3.dev.java.net/', 'https://my.url.com/' ] diff --git a/src/content/docs/cheerpj3/13-examples/01-applet.mdx b/src/content/docs/cheerpj3/13-examples/01-applet.mdx index d7c80240..f132f7d4 100644 --- a/src/content/docs/cheerpj3/13-examples/01-applet.mdx +++ b/src/content/docs/cheerpj3/13-examples/01-applet.mdx @@ -1,5 +1,6 @@ --- title: Pitch applet +description: Running an applet with CheerpJ --- import LinkButton from "@/components/LinkButton.astro"; diff --git a/src/content/docs/cheerpj3/13-examples/02-jnlp.mdx b/src/content/docs/cheerpj3/13-examples/02-jnlp.mdx new file mode 100644 index 00000000..daa5aaa1 --- /dev/null +++ b/src/content/docs/cheerpj3/13-examples/02-jnlp.mdx @@ -0,0 +1,363 @@ +--- +title: JNLP apps +description: Run a working example of a JNLP application or applet +--- + +This tutorial will take you step by step on how to run a working example of an JNLP (also known as JWS app) in the browser using CheerpJ. + +This tutorial is divided in two parts: + +- [Application example (SwingSet3)](#jnlp-application-swingset3) +- [Applet example (Pitch)](#jnlp-applet-pitch) + +## Prerequisites + +For either application or applet, you will need: + +- The application `.jnlp` file (given below) +- Node.js (>= 18) +- A simple http-server to host your page locally +- A text editor to create and edit an HTML file +- A modern browser like Chrome, Firefox or Safari. + +If you already have a JNLP app and you want to go straight to run it in the browser with CheerpJ, we recommend taking a look at our [JNLP quickstart] tutorial. + +[JNLP quickstart]: /cheerpj3/getting-started/JNLP + +## JNLP application: SwingSet3 + +### 1. The `.jnlp` file + +We are going to start by looking at the JNLP file. Below, there is an example of an JNLP file for the known demo application SwingSet3. There are three essential elements highlighted: + +- **The code base:** Found as `` Indicates where the application files will be downloaded from. +- **The JAR files:** Given by the `` tag in the `` section. +- **The class name:** Given by `main-class` under the `` tag. This tag also indicates that the app is a standalone application. + +```xml {3, 15-19, 21 } title="SwingSet3.jnlp" + + + + + SwingSet3 + Oracle America, Inc. + + Demo to showcase features of the Swing UI toolkit in Java 6 + + + + + + + + + + + + + + +``` + +### 2. Download the application files + +Download the application JAR files by manually building their full URL and pasting it in the browser navigation bar. This is done by concatenating the `codebase` URL and the `jar` URL. +For example: + +``` +https://raw.githubusercontent.com/leaningtech/cheerpj-example-swingset3/main/SwingSet3.jar + +``` + +Do this for all the JARs in the JNLP. + +### 3. Create a project directory + +Create a directory where all the files will live. You can choose any name, such as `cheerpj-example-swingset3`: + +```bash +mkdir cheerpj-example-swingset3 +``` + +Now create the application structure as shown in the JNLP file. For this example there is a subdirectory called `lib`. + +```sh +cd cheerpj-example-swingset3 +mkdir lib +``` + +Now allocate the application JARs inside this directory following the JNLP directory structure. +For this app it will be something like this: + +``` +└──cheerpj-example-swingset3 + ├── SwingSet3.jar + └── lib + ├── AnimatedTransitions.jar + ├── AppFramework.jar + ├── Filters.jar + ├── MultipleGradientPaint.jar + ├── TimingFramework.jar + ├── javaws.jar + ├── swing-layout-1.0.jar + ├── swing-worker.jar + └── swingx.jar +``` + +### 4. Create an HTML file + +Inside our project directory `cheerpj-example-swingset3` we will create a basic HTML file called `index.html` like the following: + +```html {7, 22-26} title="index.html" + + + + + + SwingSet3 (CheerpJ) + + + + +
+ + + +``` + +#### What is going on? + +- The CheerpJ runtime environment is being integrated at: + +```html + +``` + +- [`cheerpjInit()`] initializes the CheerpJ runtime environment +- [`cheerpjCreateDisplay()`] creates a graphical environment to contain all Java windows. +- [`cheerpjRunJar()`] executes the application. +- `/app/` is a virtual filesystem mount point that references the root of the web server this page is loaded from. + +> For this example we are using [`cheerpjRunJar()`] as the class name is included in the manifest. When this is not the case you can use [`cheerpjRunMain()`] with the main-class name indicated in the JNLP. + +### 5. Host your page locally + +To view the example, we need to host the files on a web server. [Vite](https://vitejs.dev/) is a convenient tool for this, as it automatically reloads the page when the files change. + +```sh +npx vite +``` + +Alternatively you can also use the http-server utility: + +```sh +npm install http-server +http-server -p 8080 +``` + +Visit the address indicated by your http-server in the browser. For example, `http://localhost:8080`. + +### The result + +You should be able to see the application running in the browser: + + + +### Source code and credits + +- [View full source code fort this example on GitHub](https://github.com/leaningtech/cheerpj-example-swingset3) +- SwingSet3 is a demo application by Oracle America, Inc. + +## JNLP applet: Pitch + +We will use the Pitch applet from NASA's [Beginner's Guide to Aeronautics](https://www.grc.nasa.gov/WWW/K-12/airplane/). This applet shows an interactive animation of an aircraft's pitch motion. [See more](https://www1.grc.nasa.gov/beginners-guide-to-aeronautics/aircraft-rotations/). + +### 1. The `.jnlp` file + +We are going to start by looking at the JNLP file. Below, there is an JNLP example for Pitch applet. There are three essential elements highlighted: + +- **The code base:** Found as `` Indicates where the application files will be downloaded from. +- **The JAR files:** Given by the `` tag in the `` section. +- **The class name:** Given by `main-class` under the `` tag. This tag also indicates that the app is an applet. + +```xml title= "PitchApplet.jnlp" {5, 21, 23} + + + + + Pitch + NASA Glenn Research Center + + Pitch motion simulator + Beginner's Guide to Aeronautics - Pitch motion simulator written in Java + + + + + + + + + + + +``` + +### 3. Download the applet file + +Download the applet JAR files by manually building the full URL and pasting it in the browser navigation bar. This is done by concatenating the `codebase` URL and the `jar` URL. +For example: + +``` +https://raw.githubusercontent.com/leaningtech/cheerpj-example-applet/main/Pitch.jar + +``` + +### 3. Create a project directory + +Create a directory where all the files will live. You can choose any name, such as `cheerpj-example-applet`: + +```bash +mkdir cheerpj-example-applet +``` + +Now allocate the application JAR inside this directory following the JNLP directory structure. +For this app it will be something like this: + +``` +└──cheerpj-example-applet + ├── Pitch.jar +``` + +### 4. Create an HTML file + +Inside the project directory, create an HTML file called `index.html` like the following: + +```html {6, 26-33, 49-51} title="index.html" + + + + + Pitch applet (CheerpJ) + + + + + +
+

Applet example with CheerpJ

+
+ + Your browser cannot handle the applet tag! + +
+
+ The applet shown in this example belongs to the NASA's + Beginner's Guide to Aeronautics + and it is available at their + GitHub repository. +
+
+ Applet is running with + CheerpJ by + ©Leaning Technologies +
+
+ + + +``` + +### What is happening? + +- The CheerpJ runtime environment is being integrated at: + +```html + +``` + +- The `` tag contains the applet `.jar` location, size and class name. This tag prevents conflicts with native java, the classic `` tag can also be used. +- [`cheerpjInit()`] initializes the CheerpJ runtime environment. + +### 5. Host your page locally + +To view the example, we need to host the files on a web server. [Vite](https://vitejs.dev/) is a convenient tool for this, as it automatically reloads the page when the files change. + +```sh +npx vite +``` + +Alternatively you can also use the http-server utility: + +```sh +npm install http-server +http-server -p 8080 +``` + +Visit the address indicated by your http-server in the browser. For example, `http://localhost:8080`. + +### The result + +You should be able to see the applet running in the browser: + + + +### Source code and credits + +- [Find the full source code for this example in GitHub](https://github.com/leaningtech/cheerpj-example-applet) + +- 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). + +## Further reading + +To continue learning about CheerpJ, visit the [reference](/cheerpj3/reference). + +[`cheerpjRunJar()`]: /cheerpj3/reference/cheerpjRunJar +[`cheerpjRunMain()`]: /cheerpj3/reference/cheerpjRunMain +[`cheerpjInit()`]: /cheerpj3/reference/cheerpjInit +[`cheerpjCreateDisplay()`]: /cheerpj3/reference/cheerpjCreateDisplay diff --git a/src/pages/blog/blog-doodle.png b/src/pages/blog/blog-doodle.png new file mode 100644 index 00000000..b7452a74 Binary files /dev/null and b/src/pages/blog/blog-doodle.png differ diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index 7f2688a6..81859ba0 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -1,8 +1,10 @@ --- import { getCollection } from "astro:content"; +import { Image } from "astro:assets"; import BlogPostCard from "../../components/BlogPostCard.astro"; import Shell from "../../layouts/Shell.astro"; import Footer from "../../components/Footer.astro"; +import BlogDoodle from "./blog-doodle.png"; const [post1, post2, ...restPosts] = (await getCollection("blog")).sort( (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(), @@ -15,11 +17,12 @@ const [post1, post2, ...restPosts] = (await getCollection("blog")).sort( >
-