Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

.... or "How Hard Can It Be To Find A Webdeveloper?"

.... or "How To Build A Full-stack Webdev in Two Easy Lessons"

.... or "How I Learnt To Stop Worrying And Love Javascript"

(Based on work from Innovation Week September 2017 at KB-Aarhus.)

Where We Are Now



It looks ok, so why is further development so slow and such hard work?

Well look at the code ....

What do we see?

  • A big ball of jsp and servlets
  • No clear separation between business logic and presentation
  • Multiple back ends
    • Database via DAO classes
    • External NAS applications via JMX/JMS
    • Heritrix via REST

So can we learn to make a web frontend like real web-developers?

Let's do it in two stages

Create a Service Layer For the NAS Backend

All communication between the NAS GUI and the backend system should be via a well-defined REST API

  1. Create new webmodule in the existing NAS GUI

  2. Configure its web.xml to scan for classes that expose REST methods

    <servlet>
   <servlet-name>Jersey REST Service</servlet-name>
   <servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
   <init-param>
     <param-name>jersey.config.server.provider.packages</param-name>
     <param-value>dk.netarkivet.common.api</param-value>
   </init-param>
  <load-on-startup>1</load-on-startup>
</servlet>

  3. Implement some methods

    @Path("/status")
public class Status {

    @GET
    @Path("/all")
    @Produces(MediaType.APPLICATION_JSON)
    public JMXStatusEntry[] getAllStatus() {
        String query = "dk.netarkivet.common.logging:*,index=0";
        ArrayList<JMXStatusEntry> entries = new ArrayList<>();

        List<StatusEntry> entries1 = null;
        try {
            entries1 = JMXStatusEntry.queryJMX(query);
        } catch (MalformedObjectNameException e) {
            throw new RuntimeException(e);
        }
        for (StatusEntry entry: entries1) {
            entry.getLogMessage(Locale.getDefault());
            entries.add((JMXStatusEntry) entry);
        }
        return entries.toArray(new JMXStatusEntry[]{});
    }
}
  4. Profit! http://kb-test-adm-001.kb.dk:8078/rest/rest/status/all

Now Just Write a Modern Dynamic Interactive WebGui ...

On advice I started with jQuery.

  1. As before, created a new web-context for the GUI in the existing NAS tomcat - although any web-server will do

  2. Enabling jQuery just means adding some scripts in your html body and some css in your html head

    <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
.
.
.
</head>

<body>
.
.
.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="site.js"></script>
</body>

  3. The html for the Status page now looks like this

    <table id="status_table">
    <thead></thead>
    <tbody></tbody>
</table>

    ... literally, that's the whole thing, because all the action happens in the site.js:

    $(document).ready(function() {
    $('#tabs').tabs({
      load: function( event, ui ) {
          if(event.currentTarget != null && event.currentTarget.firstChild.textContent === "Status") {
              $('#status_table').DataTable( {
                  ajax: {
                      url: '../rest/rest/status/all',
                      dataSrc: ''
                  },
                  columns: [
                      { data: 'physicalLocation' },
                      { data: 'applicationName' },
                      { data: 'logMessage'}
                  ]
              } );
          }
      }
    });

    What matters here is that we are leveraging the entire functionality of the jQuery-UI DataTable plugin to format the JSON we get from the REST service.






  • No labels