Pages

Guide to add pages

As of JPanel Beta 5, it is now possible for plugin developers to add a page to JPanel. The API is currently in early stages, however I will not be changing anything within the API, just extending it. I've yet to implement a way for plugins to provide their own resources other than template files, for instance - this will come in the next update.

This guide aims to simply explain how to add a page to JPanel - it does not explain how to use spark, the web framework used by JPanel, nor does it explain the Materialize css framework. To find out more about them, visit the following pages:

For templating, I utilise the handlebars html templating language, which allows the server to generate html pages. A quick guide on generating a page with this method will feature in this article, but you can find out more about handlebars here https://jknack.github.io/handlebars.java/

A really simple page

A basic template file for JPanel looks like the following:

<!DOCTYPE html>
<html>
<head>
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
    <link rel="stylesheet" href="/term.css">
    <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
    {{#if dark}}
    <link rel="stylesheet" href="/dark.css">
    {{/if}}
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <style>
        body {
            display: flex;
            min-height: 100vh;
            flex-direction: column;
        }
        main {
            flex: 1 0 auto;
        }
        .container {
            width: 100% !important;
        }
        
    </style>
</head>

<body>
{{{ header }}}

<main>
    <div class="container">
        <!-- Page Content goes here -->
        <div class="row">
            <h1>This is a test page</h1>
        </div>
    </div>
</main>


<footer class="page-footer">
    <div class="footer-copyright">
        <div class="container">
            <a class="grey-text text-lighten-4 right" href="#!">Server Version: {{version}}</a>
        </div>
    </div>
</footer>

<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>


<script>
    $(document).ready(function () {
        $(".button-collapse").sideNav();
    });
</script>


</body>
</html>

This template will define a HTML page with very little content, a footer, and the JPanel header. It also initialises the hamburger menu used by the CSS framework I use.

Adding the following html as a page to JPanel is very simple. It can be achieved with the following code:

public class MainClass extends JavaPlugin {

    public void onEnable() {
        // extract the resource from the jar file
        saveResource("test.hbs", true);

        new TestGetter("/test", new File(getDataFolder() + "/test.hbs"), this);
        PanelNavigation.getInstance().registerExternalPath("/test", "Test Path");
    }

    private class TestGetter extends GetterBase{
        public TestGetter(String s, File s1, MainClass mainClass) {
            super(s, s1, mainClass);
        }
    }
}

The code should be self explanatory. One line of note is saveResource("test.hbs", true); - In order for JPanel to access a template, you must put it on the filesystem somewhere, or be within the JPanel jar. For this example, we extract a file called test.hbs to the dedicated folder for the plugin. The TestGetter class is an extension of the GetterBase, and this allows you to make pages in JPanel useful.

Adding functionality

In order to add functionality to a JPanel page, there are two ways of doing this. The easiest is to override the getPage method in the GetterBase. An example of this shown below:

    @Override
    protected ModelAndView getPage(Request request, Response response) {
        List<Map> names = new ArrayList<>();

        for (Player p : getPlugin().getServer().getOnlinePlayers()) {
            Map playerMap = new HashMap();
            playerMap.put("name", p.getName());
            playerMap.put("health", p.getHealth());
            names.add(playerMap);
        }

        getTemplateMap().put("players", names);
        return super.getPage(request, response);
    }

The key pieces of code here is the getTemplateMap() getter - this allows you to add and remove entries from the java Map that is used when rendering to a template. In the example, a list of players is added to the template map. In the handlebars template for this page, the map can be looped through with handlebars, using the "#each players" notation.

If you need any help with implementing this in a plugin, leave a comment or use the tickets.

Comments

Posts Quoted:
Reply
Clear All Quotes