Trifork Blog

Category ‘Frontend’

Angular Directives, a beginners guide - part 2

July 22nd, 2014 by

Angular logo

In my previous blog post (part 1) about Angular Directives, I provided you with an introduction into what Directives are and how to use them. The short recap is that you can use Directives to add markers to a DOM element and then tell the AngularJS compiler to add behavior or modify that element. In this blog post, I will discuss the two remaining directive types (class and comment).
Read the rest of this entry »

Advanced theming: dynamic SVG backgrounds with SASS, the right way!

May 14th, 2014 by

Theming an application is easy, right? A solution like SASS allows you to define variables like colors and sizes in your CSS and then compile them into your theme/template. However, this doesn't work for images, especially if you want to go further than just using a transparent PNG. For a product or solution to be truly dynamic in colors and styling, you want to be able to use the same variables and apply them to the background images for your icons that you want to have the theme colors. People typically resort to writing a batch script for Photoshop, that does the work for you. Or even have your designer create the images manually. These solutions will require that you put a designer on every project which makes use of your product/solution even for minor color changes, this doesn't sound efficient does it? However, there is a more elegant solution and has something to do with SVG... Lets look at a real usecase below. Read the rest of this entry »

Angular Directives, a beginners guide - part 1

April 17th, 2014 by

What are directives?

AngularJS-largeTo start with Angular Directives we must first know what Google's Angular team defines as directives, so I copied a little piece form their website and I'll comment on that.

"At a high level, directives are markers on a DOM element (such as an attribute, element name, or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children."

Read the rest of this entry »

Internationalization with AngularJS

April 10th, 2014 by


Many web applications need to support multiple languages. The process of building in this support in a piece of software can be split in two parts: Getting it technically ready to support multiple languages/regions, and getting it ready for a particular language/region. The first part is called internationalization, often abbreviated to i18n (18 being the number of characters left out in the abbreviation). The second part is called localization, abbreviated as L10n. In this blog post, we'll see how we can support i18n in an AngularJS-based web application. There is an example project available containing all source code. It's a Maven project based on Tomcat 7 (Servlet API 3.0) and JDK 6, and can be downloaded here. The example builds on a an example case I created as part of a previous blog on AngularJS.

Read the rest of this entry »

Dynamic web forms with AngularJS

April 3rd, 2014 by


When we're building web applications containing data entry forms, it's sometimes a requirement that (part of) the form is dynamic, in the sense that the fields to be included in the form need to be determined at runtime. For instance, this may be required if application managers need to be able to add new data fields quickly through a management console, without support by a programmer.

Read the rest of this entry »

Web forms with Java: AngularJS and other approaches

March 20th, 2014 by


After learning about AngularJS a couple of months ago, I started using it on new Java web projects, and that has been a great pleasure. If you haven't worked with AngularJS yet, you may be wondering what the hype is all about and whether or not it's a thing worthwhile of investing your time in. In this blog, I'd like to put some of the merits of AngularJS in the spotlights, by comparing it to some other approaches for web application programming in the Java world.

Read the rest of this entry »

Twitter Bootstrap, why you should *not* use it

June 4th, 2013 by

We all know Twitter Bootstrap, a great tool for quickly building "sleek and intuitive" web applications. But why are people actually choosing to use Twitter Bootstrap and why? And more importantly, why I think you should *not* use it (in most cases)!

Disclaimer: I am a frontend developer and wrote this blog entry from my point of view, so if you are a backend developer, take this with a pinch of salt and don't be offended ;-)

You hear it all the time: "You should really use Twitter Bootstrap! It's really good and easy to use". Also, I notice that bootstrap enables backend developers to quickly set up a frontend using twitter bootstrap. And suddenly they have to admit that a little frontend development can actually be a lot of fun. However, typically things turn bad once the project progresses...

So what can bootstrap do for you and what makes that people find it useful:

  • Quickly create a layout (fixed, fluid and responsive)
  • Quickly create a form
  • Everything imediatly in the same style
  • Reasonable grid system
  • Tables
  • Buttons

And there are many other useful things that bootstrap offers and allows you to add in no time. Just dive into it, it's more than worth it...

When and what for should you use bootstrap?

  • A backend system without too much commercial purpose
  • A website without fancy design
  • Show (preliminary) functionality to a product owner during a project

So what remains and why should you *not* use bootstrap?

You have to consider that most frontend developers get their thrill from translating a spiffy design to HTML/CSS using client-side scripting when needed. They are typically good at just that thing using their own preferred tools and frameworks and typically less good at modifying existing code bases that they didn't create from scratch.

So when better not?

  • When you are just interested in the grid layout, then there are better and more resource-friendly alternatives
  • If you are only using one or two features, why not build them yourself? (why not reuse?)
  • When dealing with a design of your own, you might end up removing bootstrap specifics or trying desperately to override them

To conclude, there are defintely reasons and scenarios where Twitter Bootstrap can be handy, but make sure that you don't shoot yourself in the foot, because it might cause you more work in the long run. Especially when using bootstrap in a larger project, it might save you time in the beginning, but it might start to bother you and cost you greatly a little further down the road. In those cases, setting up your project correctly yourself from the beginning, is a more recommendable approach.

From the trenches: Rendering Twitter Bootstrap form inputs for Spring-MVC with FreeMarker macros

May 27th, 2013 by

This is the first entry in a new series of what we hope will become a regular appearance on our Trifork blog: “from the trenches”, with blogs that explain in a no-nonsense just-the-tech fashion how we applied certain tools, technologies, libraries and frameworks in our own projects to solve real-world challenges that we faced while building solutions for our clients. We hope that by sharing the solutions we came up with, we can provide you with some examples and ideas that you can apply to your own projects -- with the confidence of knowing that these techniques have proven themselves in real production systems.

We are also open to your suggestions on what technologies you might want us to cover. So don't be shy and just drop us a note if you have any ideas.

In this first blog I’d like to cover how we used FreeMarker to build a small library of macros that make it very easy and effort-free to work with Twitter Bootstrap-based forms in a Spring-MVC application.

TL;DR: we've built a set of FreeMarker form macros for Spring-MVC apps with a Twitter Bootstrap-based frontend that allow one-liners in your form templates to render full Bootstrap-based HTML structures for various input types that include internationalized labels and rendering of binding and validation errors while allowing passing in custom attributes and nested contents. It’s awesome.

Read the rest of this entry »

Introducing a Query tool as an Elasticsearch plugin (part 1)

March 12th, 2013 by


In the past few weeks I have been working with Elasticsearch. I was missing a plugin to look at the data, create queries and evaluate different facets. That was when I decided to start working on a plugin that enables you to do just this.

I have been working on AngularJS together with Twitter Bootstrap, therefore the choice as to which technology to use was not a difficult one. I also used some additional libraries, but I'll tell you more on this later on.

Why did I put the part 1 in the title? I am going to split this information into two parts. This part deals with the setup of the plugin, the libraries I used and the functionality I implemented. Then the next part deals with providing more details about interacting with Elasticsearch; how I use the facets, create the queries, etc. I will also write down some lessons learned with respect to AngularJS in a later blog post.

Now let's move on and have a look at the features:

Read the rest of this entry »

Basic Axon Framework sample using vert.x and angular.js

November 27th, 2012 by

Some people on the Axon Framework mailing list were asking for more basic samples, preferably using something like vert.x. Since I am familiar with Axon as well as vert.x I thought I could help out. Therefore I have created a very basic application based on vert.x using the Axon Framework. The application is all about maintaining a list of TODO items. These items are shared between all connected web browsers. You have to be able to create a new TODO item and you have to be able to mark them as completed.

During my visit of Devoxx I learned about a front-end framework called AngularJS. This is a very nice addition to the vert.x technology stack. Since I always use Bootstrap for my front-end work, the front-end should look familiar to a lot of you. The following images shows the end result of the application. If you want to know how I created the sample, read on.

ScreenShotAxonTodoList Read the rest of this entry »