Ninja Framework Tutorial – PART 2: Adding CSS, Javascript Libraries using WebJars

This a part of a series of tutorials on Ninja Framework. You can click here to see the full set.

Abstract

I’ll guide you on installing JavaScript, CSS external libraries in Ninja without needing to add the actual files into your project directory. In the end of this guide you will install a JavaScript WYSIWYG editor (TinyMCE) in your site:

2015-04-20 20_09_05-Home page

Intro: Something’s Missing…

Let me tell you a story of how I learned about WebJars. Let’s go to the site we’ve set up in the first part of this tutorial. Open it up on Chrome and press F12 to see developer options. As of this writing (not sure if it’s a bug or whatnot), the site itself would look totally fine, but there actually is an error message in the console:

2015-04-20 20_18_00-Home page

 

So What Happened?

You should walk through this with Ninja Framework’s static assets tutorial.

The 404 error is what it is: your site is looking for a file that is not present in your site directory. Here, the file in question is “tiny_mce.js”.

So where is it?

If you search your project for “tiny_mce.js”, it will direct you to “PROJECT_DIR\src\main\java\views\layout\defaultLayout.ftl.html”. You’ll find a line:

<script type="text/javascript" src="/assets/webjars/tinymce-jquery/4.0.16/jscripts/tiny_mce/tiny_mce.js" ></script>

One thing I initially tried was searching the project directory for *.js files. It isn’t there.  So why request for something that you’re not using?

The strange catch? The JavaScript library (TinyMCE – platform independent web based Javascript HTML WYSIWYG editor control) acually exists in your project, but not physically in your project directory. It is actually added to the site as a WebJar.

If you search “dependency” in your “pom.xml” file, you will find that TinyMCE is added as an XML node:

<dependency>
   <groupId>org.webjars</groupId>
   <artifactId>tinymce-jquery</artifactId>
   <version>4.0.16</version>
</dependency>

What is a WebJar and Why Should I Use it?

According to the Ninja Framework site says:

The webjars project (http://www.webjars.org/) started by James Ward is an excellent initiative that unites good old Java dependency management with static web libraries like bootstrap.

Should you use it? You don’t have to. You could simply have downloaded TinyMCE from their website and paste it into your assets folder (“PROJECT_DIR\src\main\java\assets”). You can that access it as so:

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

Isn’t that simpler?

You could do it that way, but it does make your site source code bigger since you bundled it together with your dependencies. If you use a version control system (VCS) like git, you make big commits each time you upgrade your dependencies because you have to override/remove/add a lot of files. Using a dependency management system makes upgrading as simple as changing the version number, and in the case of our TinyMCE example:

<version>4.0.16</version>

becomes

<version>4.1.7</version>

Of course, you should have to change that version number in where you include the libraries, because the version is also part of the directory structure, but that’s it; change 2 lines of code, and you are using the latest version (assuming nothing breaks in your site after the upgrade).

Twitter’s Bower does somewhat the same thing, but instead of XML you modify a json file. Anyways that’s besides the point. Here’s what it says it does:

Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you. Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for.

That’s a layman interpretation of “Explicitly and easily manage the client-side dependencies in JVM-based web applications”.

Again, just bear in mind it both Bower and WebJar only handles client side, frontend dependencies; stuff that only your browser understands: CSS, JavaScript and HTML.

So the WebJar is There… but Where?

It’s odd that in the Ninja documentation it says:

You can reference bootstrap from your html pages via the following url:

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

But how on earth does it know that the WebJar is there? I’ll answer this by looking for TinyMCE.

Go to http://www.webjars.org/ and look for “Classic WebJars”. In the filter type “tinymce” and you’ll see what you’re looking for. Under “Build Tool”, select “Maven”. Under “TinyMCE jQuery”, select version 4.0.16.

2015-04-20 21_10_54-WebJars - Classic WebJars

Ok. I see the Maven XML, but it doesn’t explain how on earth how to find these files. (as obvious as it may seems I took awhile to figure it out) Under the “Files” column in TinyMCE jQuery, you’ll see “80 Files”. Click it and you see the file list. That is how you locate your dependencies.

2015-04-20 21_15_27-WebJars - Classic WebJars

How do you make sense of this list? Replace “META-INF/resources” with “assets”. Also, what you’ll learn, is that the js file we are looking was not called tiny_mce.js in the first place. It’s “tinymce.min.js”.

Gotcha! 😀

The include line for the library is actually:

<script type="text/javascript" src="/assets/webjars/tinymce-jquery/4.0.16/tinymce.min.js"></script>

Once you fix this, you’ll see that 404 error in your console disappear.

Let’s Install TinyMCE!

After this I’m expecting to go figure on your own based on the instructions in TinyMCE’s website. You’ll need to add the includes into “defaultLayout.ftl.html”, make sure it is at the <head> tag, and shift jQuery include on top of that (your browser will tell you if you forget).

Then look for “index.ftl.html” and add

<form method="post">
   <textarea></textarea>
</form>

before

</@layout.myLayout>

…and you should see the final result as shown in the beginning of this post.

 Conclusion

That’s all for part 2. In part 3 I intend to so some database CRUD stuff – keep an eye for that!

Advertisements

One thought on “Ninja Framework Tutorial – PART 2: Adding CSS, Javascript Libraries using WebJars

  1. I try, this but no luck:
    mvn:

    org.webjars
    angular-schema-form
    0.8.8

    Routes:
    router.GET().route(“/assets/webjars/{fileName: .*}”).with(AssetsController.class, “serveWebJars”);
    WebJar files:
    META-INF/resources/webjars/angular-schema-form/0.8.8/bootstrap-decorator.min.js
    META-INF/resources/webjars/angular-schema-form/0.8.8/schema-form.js
    META-INF/resources/webjars/angular-schema-form/0.8.8/schema-form.min.js

    html:

    error:
    GET http://localhost:8080/assets/webjars/angular-schema-form/0.8.8/schema-form.js 404 (Not Found)

    Regards, Tomaž

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s