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:
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:
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?
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:
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:
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”.
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.
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.
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”.
The include line for the library is actually:
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>
…and you should see the final result as shown in the beginning of this post.
That’s all for part 2. In part 3 I intend to so some database CRUD stuff – keep an eye for that!