Page tree
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