Integrate executable Java code in your blog posts

While developing the Foojay Quickstart Java Tutorial, I was looking for an easy way to integrate runnable Java code examples into the Foojay pages and blogs. That's when I discovered jdoodle.com. I started by using their online editor, but with this blog I want to show you an even easier method to integrate runnable code here on Foojay.

Integration examples

Single file code

To integrate "plain" Java code in your post or page, use the following syntax and add it as "Custom HTML" widget:

<div data-pym-src='https://www.jdoodle.com/plugin' 
   data-language="java" 
   data-version-index="4">
     // This is the place to put the code
</div>
<script src="https://www.jdoodle.com/assets/jdoodle-pym.min.js" type="text/javascript"></script>

For example, this "Custom HTML":

<div data-pym-src='https://www.jdoodle.com/plugin' 
   data-language="java" 
   data-version-index="4">
public class MainArguments {
    public static void main (String[] args) {
        System.out.println("Number of arguments: " + args.length);
        if (args.length > 0) {
            System.out.println("First argument: " + args[0]);
        }
        for (int i = 0; i < args.length; i++) {
            System.out.println("Argument " + (i + 1) + ": " + args[i]);
        }
    }
}
</div>
<script src="https://www.jdoodle.com/assets/jdoodle-pym.min.js" type="text/javascript"></script>

Will produce the following output. Hit the "Execute" button to run the code.

As you can see, the reader of your Foojay post can modify the code, execute it, and even add CommandLine Arguments to change the behavior of the code as you can see in this screenshot:

Code with external data files

In one of the more advanced tutorial steps, I wanted to read data from a text file. This can also be done with JDoodle, but needs a slightly different "Custom HTML" block that looks like this:

<div data-pym-src="https://www.jdoodle.com/plugin" 
   data-version-index="4"
   data-language="java" 
   data-client-id="34d6e81ae45d88cdb9fb98fed1415b81" 
   data-has-files="true">
   <div data-type="file" data-file-name="testdata.csv">
        // This is the place to put the text data
   </div>
   <div data-type="script"><xmp>
        // This is the place to put the code
   </xmp></div>
</div>
<script src="https://www.jdoodle.com/assets/jdoodle-pym.min.js" type="text/javascript"></script>

The data-client-id is important here to allow the use of external files, but is only valid when used on the Foojay website! Create your own account on the JDoodle site if you want to use this functionality on another website.

This is a simple example to read data from a CSV file:

<div data-pym-src="https://www.jdoodle.com/plugin" 
   data-version-index="4"
   data-language="java" 
   data-client-id="34d6e81ae45d88cdb9fb98fed1415b81" 
   data-has-files="true">
   <div data-type="file" data-file-name="testdata.csv">
1,Ada,Gomez,40,Mabvob Pike,Radafso,LA,60500
2,Bernard,Jordan,28,Dotcu Court,Cewbufbim,MS,17422
   </div>
   <div data-type="script"><xmp>
import java.io.File;
import java.io.FileNotFoundException;
import java.util.Scanner;

public class ReadTextFile {
    public static void main (String[] args) {
        File file = new File("/uploads/testdata.csv");
        try (Scanner scanner = new Scanner(file)) {
            while (scanner.hasNextLine()) {
                System.out.println(scanner.nextLine());
            }
        } catch (FileNotFoundException ex) {
            System.err.println("Could not find the file to be loaded");
        }
    }
}
   </xmp></div>
</div>
<script src="https://www.jdoodle.com/assets/jdoodle-pym.min.js" type="text/javascript"></script>

A full example with this approach can be found in the tutorial: "Reading a Text File".

Conclusion

JDoodle allows to experiment with code in the browser and provides many other easy tools. Thanks to JDoodle you can now also add executable code to your Foojay content!

In a next post that will be published soon, we'll talk with the creator of JDoodle, Gokul Chandrasekaran.