We looked at the web development corner and saw the big 3 technologies; HTML, Javascript and CSS all loosing interest. Frameworks, on the other hand, are gaining more and more attention from the community. These days there is one framework that stands out from the rest: AngularJS.
For one of our projects we wanted to create some nice charts. Feels like something you often want but do not do because it takes to much time. This time we really needed it. I had prior experience with Highcharts, which is also a nice library. But this time we wanted more control. We had a look at D3.js library, a very nice library but so many options and a lot to do yourself. Than we found c3.js, check the blog post by Roberto: Creating charts with C3.js. Since I do a lot with AngularJS, I wanted to integrate these c3.js charts with AngularJS. I wrote another blogpost on that: Using C3js with AngularJS. Through twitter Abdullah Diaa mentioned that it would be great to have directives for these charts. That is were we start in this blogpost. I am going to describe the first version of a directive I have created to make it even easier to create these chart using AngularJS.
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 »
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.
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.
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.
At Devoxx 2012 I attended the AngularJS presentation by Igor Minar and Misko Hevery. I was very enthusiastic about the capabilities of this front-end framework. Therefore I started experimenting with it. I created a sample for the Axon Framework, read more about it here. After my experiments I felt confident enough to start using it in real projects. One of them was adding management reporting using the HighCharts library.
The next step was a bigger project, writing an Elasticsearch plugin to query your Elasticsearch instance. This project has to integrate with a javascript library to interact with Elasticsearch. The layout and other front-end components were implemented using Twitter Bootstrap. Therefore I also used another AngularJS plugin to integrate with Bootstrap.
In this blog post I’ll give you some lessons learned with respect to AngularJS.
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.
