Add pages

nerotvlive

Guide to add pages

It's possible for plugin developers to add a page to the panel. The API is currently in early stages. This guide aims to simply explain how to add a page to NPanel - it does not explain how to use spark, the web framework used by it, 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 NPanel 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 NPanel header. It also initialises the hamburger menu used by the CSS framework I use.

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

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 NPanel to access a template, you must put it on the filesystem somewhere, or be within the NPanel 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 NPanel useful.

Adding functionality

In order to add functionality to a NPanel 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.