Interactive SVG with AngularJS – Part 2

When developing mobile web applications with responsive design, SVG are a viable solution for flexible images.
AngularJS in turn enables the wrapping of complex UI logic into custom HTML directives, resulting in clean and maintainable modules.
The combination of these technologies provides a good basis for interactive control and status elements. It is suitable both for building highly complex custom controls, as well as covering simple use cases in a generic manner.

Part 1 of this article explores several methods of employing SVG as flexible images in a cross-browser compatible manner.

Part 2 describes the use of AngularJS to construct custom control and status elements by manipulating SVG images.
Continue reading

Interactive SVG with AngularJS – Part 1

When developing mobile web applications with responsive design, flexible images for interactive control and status elements pose a particular problem.
SVG offer a viable solution: They are much smaller than bitmaps of comparable size, and can be manipulated through their DOM API.
AngularJS in turn is well suited to wrap complex UI element logic in custom HTML directives, resulting in clean and maintainable modules.
Combining the two sounds attractive, but involves a couple of stumbling blocks to avoid.

Part 1 of this article explores several methods of employing SVG as flexible images in a cross-browser compatible manner.

Part 2 describes the use of AngularJS to construct custom control and status elements by manipulating SVG images.

Continue reading

Maintainable Rich Web Applications with AngularJS – Part 2

In the last post we used a demo application to discuss the development of maintainable Rich Web Applications with AngularJS. We introduced the most important concepts: The Model View Controller pattern and its application, the extension of HTML using directives and the routing concept to define the navigation between views.

This post explains how to integrate AngularJS into a build process based on Maven and shows how to develop automated unit tests and end-to-end tests for AngularJS applications.

Continue reading

Maintainable Rich Web Applications with AngularJS – Part 1

Compared to Thin Web Applications, Rich Web Applications imply a higher grade of client-side functionality and complexity as opposed to the server-side. The user interface of a typical Thin Client architecture is server-generated (per page), while rich clients are complete applications running in a web browser. This allows for user interfaces that are more user-friendly, more performant and offline-enabled. Such characteristics, offline capability in particular, are especially important for mobile applications.

HTML5 has established itself as an alternative to solutions like Flash, Java Applets and Silverlight. Compared to proprietary products it offers an open and platform-independent technology standard. Here, HTML and CSS describe the static structure as well as the design of the user interface, while the client-side dynamics is implemented using new HTML5-APIs and JavaScript.

The development of Rich Web Clients using HTML and JavaScript is complicated by maintainability problems though, as the combination of HTML and JavaScript alone offers no possibility to modularize and test the client in a clean fashion. AngularJS considers itself to be an HTML extension dealing with this problem in order to enable the development of maintainable JavaScript-/HTML based Rich Web Applications.

This blog post series introduces the JavaScript framework AngularJS. This first post explains the essential concepts of AngularJS, like the application of the Model View Controller pattern, the extension of HTML by so-called directives as well as the routing concept. In the second post, we will show the integration of unit and end-to-end tests as well as embedding those into a Maven build process.
Continue reading

Developing a cross-platform application for mobiles and desktops with Aerogear

is a collection of examples, tutorials and best practices to develop mobile clients integrated with JBoss middleware. It aims at providing solutions for mobile clients to deal with typical requirements in enterprise applications, such as security and availability. Such mobile applications range from native clients (e.g. Android, iOS) via hybrid apps (with native and web components) to pure web apps (providing the highest portability but generally being less adapted to the target environment). In this post, we focus on a web-based mobile client and demonstrate how to develop a simple blog application where users can create and comment on blog posts.

Continue reading

Mavenizing Javascript Projects

Installing an automatic build process for your projects is very common today and best practice. In the java world Maven is a very popular build tool and has proven its matureness over the years. In this blog post we will show you the benefits of a Maven build and how we can utilize them for javascript projects. Finally we present two maven archetypes for creating ready to go fully mavenized javascript projects for your first steps.

Continue reading

Enhance your web application with these two jQuery plugins

In one of our last projects, we built a platform independent desktop client completely based HTML5 for the UI. HTML 5 provides a powerful way to build UI. Coupled with JQuery and H-UBU, we have developed a pretty exciting UI. One of the issues faced during this development was the management of the user interactions:

  • How to report info or error to the user without breaking the interaction flow using the jquery-toastmessage-plugin
  • How to explain to the user, he has to wait a couple of seconds while hard work is done in the background without too much frustration using the jquery-waitingpopup-plugin

Continue reading