Subscribe / Unsubscribe Enewsletters | Login | Register

Pencil Banner

Jump into Java microframeworks, Part 2: Ninja

Matthew Tyson | Nov. 25, 2015
Build a functional Person application with Ninja.

Look at /src/main/java/view/defaultLayout.ftl.html and you will see the include in Listing 9, below.

Listing 9. Ninja default bootstrap WebJars Include



<link href="/assets/webjars/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

Note that our index.ftl.html page includes defaultLayout.ftl.html, which is where the HTML script and CSS includes happen. I described at the beginning of this article how Freemarker templates (those files ending with ftl.html) are resolved and supplied with data. For the moment, it's enough to remember that index.ftl.html is the template that handles requests to the root / index page.

This include of the Bootstrap CSS resolves to the previously mentioned AssetController, specifically, to the AssetController.serveWebJars() method. Check the pom.xml file to verify that the bootstrap dependency is included via Maven, as shown in Listing 10.

Listing 10. A Maven WebJar include in pom.xml


<dependency>
	<groupId>org.webjars</groupId>
	<artifactId>bootstrap</artifactId>
	<version>3.3.4</version>
</dependency>

Notice that jQuery is also included, in both the POM and in the default.ftl.html header. If we wanted to upgrade jQuery, we could just increment the version number in both locations. Similarly, if we wanted to add a different framework, like Angular or Backbone, we could look it up at at WebJars.org and add it to the POM and the header.

The include URL for Ninja WebJars found in the HTML file (shown in Listing 9) is different from what you'll find at WebJars.org, since with Ninja it goes through the asset controller routing. Whereas the official URL begins with META-INF/resources/webjars, ours begins with the AssetController mapping of /assets/webjars.

Resolving dependencies directly

Now let's try using Ninja's support for including dependencies directly. Start by creating a new /js folder under the /assets directory. Add a file called app.js there, and also cut-and-paste in the serializeObject jQuery plugin. Include both of these files as shown in Listing 11.

Listing 11. Including direct static assets



    <script type="text/javascript" src="/assets/js/serializeObject.js"></script>

    <script type="text/javascript" src="/assets/js/app.js"></script>

Now update index.ftl.html with the code in Listing 12. This adds a form to create a Person.

Listing 12. Add the Create Person form



     <form id="personForm">

  First name: <input type="text" name="firstName"><br>

  Last name: <input type="text" name="lastName"><br>	

  <button id="addPersonButton">Add</button>

</form> 

All that remains is to wire up the new form with jQuery. Go to app.js and add the code from Listing 13.

Listing 13. JavaScript for creating a Person



App = {

		startup: function(){

			$("#addPersonButton").click(App.addPerson);

		},

		addPerson: function(){

			var person = $('#personForm').serializeObject();

			$.ajax({

		        url: '/person',

		        type: 'POST',

		        contentType: 'application/json',

		        data: JSON.stringify(person),

		        dataType: 'json'

		    });

			return false;

		}

}

$( document ).ready(function() {

   App.startup();

});

 

Previous Page  1  2  3  4  5  6  7  8  Next Page 

Sign up for CIO Asia eNewsletters.