Category Archives: AngularJS

UI Survey 2017: Java vs. JavaScript

Recently, I’ve seen a number of surveys covering the popularity of Java and Java UI frameworks. Most surveys show that either Spring or Java EE is more popular. However, they don’t answer two important questions: is Java becoming more or less important? Currently, I’m mostly interested in UI frameworks, so the next logical question is: what is the market share of Java UI frameworks compared to JavaScript UI frameworks?

To my disappointment, I didn’t find a clear answer, neither by researching the internet nor by asking the question on Twitter. So I’ve started to gather information myself. That wasn’t easy, so most of the article is based on indirect hints and educated guesses.

Oops!

My first surprise was when I learned about ng2-bootstrap in December 2016. At the time, Angular2 itself was still brand-new. So it won’t surprise anyone that the third-party libraries had a hard time catching up. In other words: At the time, ng2-bootstrap was a promising library, but it still had a long way to go. Compared to BootsFaces, it’s still a tiny library. In early April 2017, it consists of merely 17 components, as opposed to the 74 components of BootsFaces.

Nonetheless, ng2-bootstrap had been downloaded 70.000 times in December, give or take a few. In early April 2017, the download counter even shows 204.000 downloads per month. Compare this to 2.000+ downloads of BootsFaces per month. Oops! Such an unfinished library is 100 times more popular than the fire-proven BootsFaces?

Of course, BootsFaces is one of the smaller JSF frameworks, but even the so, ng2-bootstrap seems to be more popular than all JSF component libraries together. My curiosity was piqued.

Trendscouting

Another indicator of the popularity of a framework is Google Trends. I’ve compared the number of search requests of JSF and Spring MVC:

Comparing the Google Trends of JSF and Spring MVC
Datasource: Google Trends (www.google.com/trends)

Both frameworks seem to be roughly equally popular. JSF used to be much more popular in the past, but it has lost a lot of popularity in recent years.

Actually, the dwindling number of search requests may have a different reason. In 2004, there were three times as many search requests to JavaScript than today. But it’s unlikely JavaScript is used less today. It’s much more likely that developers ask other questions today. Or maybe they simply ask less question because they’ve learned how to work with JavaScript. The same may hold true for JSF. I’m even told JSF is gaining traction again.

Adding Angular and React to the equation

However, adding AngularJS and React.js to the trends analysis changes the image radically. There are 10 times as many search requests for React.js and 20 times as many search requests for AngularJS:

Comparing the Google Trends of Angular, React.js, JSF, and Spring MVC
Datasource: Google Trends (www.google.com/trends)

Again, that might simply mean that there are twenty times as many problems with Angular than with JSF. Plus, the search may be biased by my selection of search keywords. For instance, both Angular and JSF are “topics” of Google Trends, while React.js is categorized as a “JavaScript library”. Spring MVC is merely a search term. So it’s hard to say whether “Spring” or “Spring MVC” is the better keyword to find out about the UI framework of Spring.

Be that as it may, the trends are impressive. Plus, I’m working with Angular2+ on a daily basis. It’s a good framework, not a source of problems. Still, the huge quantity of Google searches may simply mean the developers are still learning how to use Angular. But I believe the trend also indicates that Angular and React.js are more popular than Spring MVC and JSF.

What about other frameworks?

I know that there are countless other UI frameworks, both in the Java realm and the JavaScript universe. I’ve limited my research to these four frameworks because they seem to be the most popular ones. I’ve entered quite a few other frameworks in the search bar. That didn’t change the results significantly, so I didn’t include them in the charts.

Trends of programming languages

Another indicator is the popularity of JavaScript and TypeScript. In many rankings, JavaScript, Java, and C are the most popular languages. Even if the Tiobe index indicates that JavaScript and TypeScript are much less popular than Java: Java is a general purpose language, while JavaScript and TypeScript are still being used almost exclusively in the browser. It’s possible to write server or desktop applications using JavaScript, but if I’m not mistaken, that’s still a small niche.

The last indicator is the strategy of PrimeFaces. Recently, they spend a lot of time developing the JavaScript offsprings of their JSF framework. I gather that has something to do with market shares.

Wrapping it up

For some reason, it’s hard to find information about the market share of Java and JavaScript UI libraries. Such surveys are sparse, and most of them concentrate either on Java or JavaScript. So much of this article is speculation. Nonetheless, I’m under the impression that the JavaScript UI market is five to ten times larger than the Java UI market.

Come to think of it, that’s not surprising. Java UIs are almost always used with Java back-ends. Client-side web application can be used with any back-end. That includes .NET, SAP, databases with REST APIs and even PHP. Plus, JavaScript is the language of choice for web designers.

However, I’m surprised that Angular seems to be so popular in the JavaScript world. Angular specifically targets enterprise applications, and that’s only a small fraction of the JavaScript applications. I reckon much of the rise of Angular and – to a lesser extent – React.js is at the expense of traditional server-side web frameworks.

By the way, that doesn’t affect my commitment for BootsFaces. Even if the estimated community of roughly 10.000 developers is small in comparison, that’s still the population of the village I’m living in. And it’s a lot of fun to help so many developers!

Dig deeper

Java Web Frameworks Index February 2017 by RebelLabs
Spring MVC vs. JSF
Spring MVC vs. JSF vs. Angular vs. React
License of the Google Trends screenshots

AngularBeans: A Fresh New Take on AngularJS and JavaEE

I’m proud to have convinced Bessem Hmidi to present his AngularBeans framework at BeyondJava.net. AngularBeans is a fresh, new approach integrating AngularJS with a JavaEE backend and has stirred some attraction in the JavaEE world recently.
Bessem works at “Business & Decision” as a Technical Architect. He is also founder and leader of the “Esprit Tunisian Java user Group” and was a part of the Research & Development program at ESPRIT (Tunisian school of engineering). Bringing over 9 years of working with Java related technologies especially Java EE, he is also a professional course instructor, an educator and an international speaker. Plus, he’s founder of the Tunis conference JUG Day.

Introduction

The Java ecosystem doesn’t lack of web frameworks. There’s a framework for every taste. No matter if you prefer an action based, component driven, request driven… there’s a framework for everyone.
But at a closer look on what happened those few last years in web development, we will be driven to accept the evidence: it’s the era of single page applications, of client side rendering and of the real-time web. Users have become much more demanding. They don’t put up with a single black-and-white terminal screen any more. They’re familiar with highly responsive, interactive user interfaces which are both more fun and more efficient to use.
Those needs are the sources of countless modern client side JavaScript frameworks such as Ember.js, react.js, meteor.js and of course AngularJS. They all consider the server a “pure” service provider, only responsible for processing and providing data, as opposed to the the classic “dynamic views generator” server. Most – maybe even most – developers consider server-side rendering a thing of the past. From a technical point of view, server-side rendering was inevitable in earlier times, but nowadays browser technology has evolved to a point that allows us to shift both rendering and business logic to the client side1.
Continue reading

  1. Footnote: there are exceptions. Client-side rendering is bad when you’re concerned about you mobile device’s battery life

Single-Page Applications With BootsFaces

Singe-page applications have become tremendously popular in the last couple of years. They are fast, they are responsive and they can save network bandwidth. The first SPAs that caught the attention of the community were based on JavaScript. So nowadays everybody seems to believe you can’t write an SPA with JSF.

But you can. It’s not even difficult. And it pays: the application becomes much more responsive. This article shows two approaches how to do it with BootsFaces. I’m sure you can do the same with other JSF frameworks like PrimeFaces, too, but I didn’t test it yet.

Currently, there are at least two approaches. You can exploit BootsFaces AJAX to do your navigation, or you can add AngularJS to the equation. The latter approach requires you to learn both Angular and JSF, but it may be useful because it allows you to use client-side AngularJS components.
Continue reading

Getting Started With AngularJS 2.0: Forms (Part I)

Let’s continue our journey into the universe of Angular2 with exploring forms. Actually, that’s something odd: many articles and tutorials on Angular2 spend a lot of time explaining that the old two-way-binding of AngularJS 1.x has been replaced by something different, something superior.

Putting it in a nutshell

Forget about that. You can learn about the subtleties of Angular2 later. From a beginners view of point, good old two-way-binding is still there. It even has become more simple.

Putting it in a nutshell, you simply use the new, slightly controversial syntax <input [(ng-model)]="someProperty" /> to bind an input field directly to a property called someProperty of your controller. Initially, the input field is populated with the value someProperty, and when the user starts to type in the input field, every key stroke immediately changes the variable someProperty.
Continue reading

Newsflash: How to Migrate an AngularJS 1.x Application to Angular 2

Do you remember how disturbing the initial announcement of Angular2 was? As far as I remember, it was at ngEurope, roughly 12 months ago. At the time, the Angular team said there wasn’t a migration plan. I guess they should have added the word “yet”. Most developers and project managers understood there wouldn’t be a migration plan at all. Many of them saw the future of their AngularJS projects in tatters.

Well, that was premature. It’s far from being impossible to migrate from AngularJS 1.x to Angular2. Quite the contrary, there’s even a project dedicated to make the migration as smooth and easy as possible. Or, as Pascal Precht and Misko Hevery put it, boring.

Today I’ve stumbled upon an in-depth analysis of how to use the project, which is called – guess what – ngUpgrade. Read the full story written by Pascal Precht. It’s a great read, and I’m sure it’ll be useful to many Angular 1.x project teams. Highly recommended!

By the way, that’s not the only great news for those of us working for major companies: According to Brian Green’s announcement at the AngularConnect 2015 conference in London, Angular2 is going to support Internet Explorer 9 and 10 (at 53’40”).

Newsflash: Angular2 Release Date Projection

Nobody knows when Angular2 is going to be released. Chances are this includes the Angular team (although they don’t tell us). So people start to try to look into the crystal ball. One thing is that the API feels mature. Granted, it still happens to break more often than is to my liking, but the basic design decisions seem to have been done. Another indicator for the progress is the documentation site. The developer guide is still incomplete, but it’s growing by the day.

Another indicator is the progress on the open tickets. Currently, each day 2.2% of the open tickets are solved. Judging by this measure, the release date of Angular2 isn’t far away. Actually, the Angular 2 Beta Burndown Chart indicated Angular2 is going to be released in 2015.

Personally, I think that’s nonsense – there’s more to releasing software than just closing tickets on the bug tracker – but it’s a good idea. Plus, it’s fun, and it looks great.

There’s only one thing that’s odd: the burndown chart isn’t an Angular application. Let alone an Angular2 application. 🙂

Update Nov 9, 2015:
My article and my tweet about it started a funny discussion, which lead to an full-blown Angular2 implementation of the Angular2 Release Date Projection tool. Sometimes it’s fun to be a catalyst :).

Update Nov 17, 2015:
In the meantime, the release projection has been migrated to Angular2. It’s really fun to be a catalyst!

Getting Started with Angular 2: Your First Application

Since I started my Angular 2.0 series, Angular 2 has evolved considerably. Version numbers went up from 2.0.0-alpha.36 to 2.0.0-alpha.45. Plus, they’ve added quite a lot of content to the documentation pages. So I wasn’t surprised it took me two evenings to update my AngularJS 2.0 chess demo to the actual version. However, this turned out not to be Angular’s fault: the library responsible to deal with Angular’s module system, System.js, introduced one or two breaking changes. The good news being: the API of Angular 2 is pretty stable, stable enough to continue with a couple of hands-on articles.

Update Oct 06, 2016: As it turns out, the API of Angular2 wasn’t quite as stable as I expected it to be when writing this article. I’m going to update the article soon. In particular, the @View decorator isn’t used anymore, because it was more or less identical to @Component. Plus, the bootstrap code has changed considerably. I suggest you download the Angular-CLI and use it to create skeletons of your applications and your modules. If you prefer Ionic, you can also use the ionic-cli. I’ll describe this in more detail soon. Stay tuned!

Today, I’d like to make you familiar with the basic concepts of Angular 2. Let’s write your first application together. Or rather – well, writing a simple demo application is something virtually every tutorial does. Let’s tackle Angular 2 from a different Angle. I’ve uploaded a slightly simplified version of my Angular 2 chess program on GitHub. So you can start with a real-world application. I won’t explain every feature of the chess program – that’d be an entire book, not a blog entry. This article simply gives you a head start to grasp the look and feel of an Angular 2 application, and to play with it.

Curious? Clone the repository at https://github.com/stephanrauh/ExploringAngular.git and open the subfolder /Blog01. That’s a full-blown, running Angular 2 application. Let’s examine it step by step.

Update Oct 06, 2016: Note that the URL points to a version running on Angular 2 Alpha 46. I’ll update it when time allows. In the meantime, you can use the Angular 2 Final version as a reference. However, it’s the complete, finished program, so you may want to look at both versions until I’ve updated this article. The other difference is that the newer version requires the Angular CLI.
Continue reading

Newsflash: Angular 2 Survey Results

Granted, I can hardly call the news of this newsflash “new”: it has been published Sept 01, 2015. But it’s very interesting nonetheless. The AngularJS team’s blog has the results of a survey asking developers what they expect of Angular 2. Each survey result is spiced with an in-depth analysis, many of which provide additional information about Angular 2. Highly recommended.

Read the survey results at http://angularjs.blogspot.de/2015/09/angular-2-survey-results.html.

Getting Started with AngularJS 2.0: Tools and Compiler

Update Aug 4, 2016

Recently, this article received a couple of harsh comments calling it “useless”. So I should point out that I’ve published this article some time ago when Angular2 was still being developed. At the time, it wasn’t even an alpha version. So expect an introductory-level article which may even be partially outdated. If so, please leave a comment so I can correct it. It’s a popular article, so your comment is going to help a lot of developers. Thanks!

Update Oct 06, 2016

Currently, I’m evaluating a couple of tools that weren’t available to me when I wrote the first version of the article: Webstorm, IntelliJ, angular-cli and ionic-cli. I’ll cover them in an article soon, and update this blog entry subsequently. Until then, keep in mind that I wrote the article when Angular2 was still an alpha version, so don’t be disappointed if parts of the article are outdated.

Live in the early days of AngularJS 2.0

Probably it’s still a bit early to investigate AngularJS 2 thoroughly. The release date of AngularJS 2 is still open, documentation is scarce and I’m told many important APIs are still unfinished. But that’s the fate of an early adopter. On the other hand, it’s already possible to work with the current Alpha versions, and if I’m not mistaken the fundamental decisions of what AngularJS 2 is going to look like already have been made. So I thought by myself that the time is ripe to explore AngularJS 2. Along the way, I wrote a little chess program consisting of 1500 lines, give or take a few.

Cutting a long story short: AngularJS 2.0 is fun, even today. It’s a big step forward.

Today’s article is not so much about the architecture of AngularJS – BeyondJava.net is going to cover this soon – but concentrates on how to set up an efficient development environment. Coming from a Java developer team, I’ll report many things JavaScript developers are already familiar with. Bear with me.
Continue reading

Newsflash: Angular 1.x and 2.0 Integration Allows Seamless Upgrade

A lot has been complained about the hard cut between AngularJS 1.x and AngularJS 2.0. In the early days of AngularJS 2, the Angular team announced to have started a complete rewrite of AngularJS, without trying to remain compatible. The reaction of the community was harsh: many developers turned away from Angular.

Maybe this has been to early. Today, the Angular team announced to plan a surprisingly tight integration between the two versions. According to their blog, you can

  • mix Angular1 and Angular 2 in the same application
  • write views displaying Angular 1 and Angular 2 components simultaneously
  • inject services between the two branches of the framework
  • and they say even databinding works across Angular 1 and Angular 2.

The Rise of TypeScript?

I’ve made up my mind to start a series of AngularJS 2 articles. As you may or may not know, AngularJS 2 is not being developed in JavaScript, but in TypeScript, a language compiling to JavaScript. While it’s perfectly possible to write an AngularJS 2 application in pure JavaScript, it’s made for TypeScript (and maybe Dart). My bet is that TypeScript is the language of choice if you’re serious about AngularJS 2.

So, starting a series of Angular 2 articles inevitably includes a number of articles about TypeScript. BeyondJava.net already published such an article some time ago, but that was before the release of TypeScript 1.5, so it’s time to deliver an update. During my research I stumbled upon an interesting article: The rise of TypeScript?”. I wasn’t even aware that TypeScript is on the rise, but since I’ve read the article I guess the author can safely omit the question mark. He gives a number of good reasons why TypeScript has an opportunity to lift off.

Let me pick out one interesting aspect of the article: the time is right for a language compiling to JavaScript. How is that possible?
Continue reading

Newsflash: Compiling Java to Javascript

These days I stumbled upon Dukescript, which is a very innovative and ambitious approach to bring Java to various client platforms: traditional desktop applications, iOs devices, Android devices and the browser. Two of these target platforms – the desktop and Android – run Java natively (at least after installing a JRE in the case of desktops). Running Java on iOS is a brain-twister, but RoboVM takes the scare out of it, I’m told. Which leaves the browser, and that piqued my curiosity: Dukescript uses Bck2Brwsr to compile Java to Javascript.
Continue reading

AngularFaces 2.1.4 published

Fork me on GitHubToday I’ve published AngularFaces 2.1.4 on MavenCentral. It should also arrive on JCenter within the next few days. The new version fixes a couple of annoying bugs, so I recommend to update soon.

New, improved documentation

There’s also news from the documentation page of AngularFaces. Currently, it’s moving from www.angularFaces.com to https://www.angularFaces.net. The new documentation page is an AngularFaces application featuring BootsFaces 0.6.5, PrimeFaces 5.1 and Omnifaces 2.1. Among other things, running on a web server makes it possible to show interactive live demos instead of static screenshots.

Continue reading

Scala.js

When I heard about Scala.js a couple of years ago, I thought to myself: “Well, that’s an interesting project, but sure it’s bound to fail”. Only it didn’t. The other day I’ve stumbled over an impressive technology demo. You can write a ray tracer in object-oriented and functional Scala, compile it to Javascript an run it in the browser. Ray tracers are power-hungry, so the good performance shows that Scala.js generates surprisingly good code. I didn’t run benchmarks, but judging from what I’ve seen I believe Scala.js is “good enough” on a modern browser. Native Javascript may be faster, but in many cases you won’t notice the difference.
Continue reading

Newsflash: Google to Support AngularJS 1.x Longer, Dropping AtScript

According to Jaxenter, the AngularJS team reacted to the harsh reaction of the Javascript community on Google’s AngularJS 2.0 plans.

As a consequence, they decided to support AngularJS 1.x longer, giving companies who’ve already invested in AngularJS applications more time to migrate to AngularJS 2.0. Plus, they decided to drop AtScript. Instead, the team decided to merge AtScript with Microsoft’s TypeScript. That’s a pity because AtScript seemed to be an interesting language, but at the same time it’s good news since alternative browser languages start to cannibalize each other’s market share.

Read the full story at Jaxenter.

By the way, the original AngularJS 2.0 plans BeyondJava.net reported about have changed considerably in the meantime. The AngularJS team listened to the feedback of the community and adapted their former, much more radical ideas in order to align better with existing editors, existing tools and older browsers. Read the current state of the discussion at the AngularJS design documents folder.

Final Version of AngularFaces 2.1 Published

Fork me on GitHubAngularFaces 2.1 is more than a bug fix release. It contains a couple of features I deliberately postponed in order to get a thoroughly tested version 2.0 out in times. The list below counts no less than 15 improvements. One of the improvements has nothing to the with code: I put AngularFaces 2.1 under an Apache V2 licence, which is much more liberal than the GPL licence of the previous version.

Examples and code snippets

Pictures say more than words, so let’s start with a couple of screenshots and code snippets. Click the tabs to see the source codes.

ng-table is a great client-side datatable component written in AngularJS. Thus, it’s a natural fit to AngularFaces.

<table ng-table="tableParams" class="table ng-table-responsive">
  <tr ng-repeat="car in $data">
    <td data-title="'Brand'" sortable="'brand'">{{car.brand}}</td>
    <td data-title="'Type'" sortable="'type'">{{car.type}}</td>
    <td data-title="'Year'" sortable="'year'">{{car.year}}</td>
    <td data-title="'Color'" sortable="'color'">{{car.color}}</td>
    <td data-title="'Mileage'" sortable="'mileage'">{{car.mileage}}</td>
    <td data-title="'Price'" sortable="'price'">{{car.price}}</td>
    <td data-title="'Fuel'" sortable="'fuel'">{{car.fuel}}</td>
    <td data-title="'Select'">
      <button class="carFilterButton" jsf:action="#{selectionBean.showDetails()}"
        ng-click="selectionBean.carAsJSon=afToJson(car);">show me!</button>
    </td>
  </tr>
</table>
<input jsf:value="{{selectionBean.carAsJSon}}" style="display:none" addLabel="false"/>
<prime:messages globalOnly="false" />
var app = angular.module('CarShop', ["angularfaces", 'ngTable', 'ngTableExport']).
controller('CarShopController', function($scope, $filter, ngTableParams) {
  // This initializes the Angular Model with the values of the JSF bean attributes
  initJSFScope($scope);
  $scope.activeSelections=0;
  
  $scope.select = function(car) {
    console.log(car);
    $scope.selectionBean.carAsJSon=car;
    return true;
  }
  
  $scope.showIfSet = function(ngmodel) {
    if (typeof(ngmodel)=='undefined') {
      return "hidden";
    }
    if (null==ngmodel || ngmodel=="") {
      return "hidden";
    }
    $scope.activeSelections++;
    return "";
  }
  
  $scope.filterBoxStyle=function(){
    var width=400+100*$scope.activeSelections;
    return "" + width + "px";
  }
  
    $scope.tableParams = new ngTableParams({
        page: 1,                  // show first page
        count: 10,                // count per page
        sorting: { brand: 'asc' } // initial sorting
    }, {
        total: $scope.carPool.selectedCars.length, // length of data
        getData: function($defer, params) {
          params.settings().counts=[5, 10, 'all']; // todo: that's a hack!
          var rows = $scope.carPool.selectedCars;
          if (params.filter()) rows=$filter('filter')(rows, params.filter());
          if (params.sorting()) rows = $filter('orderBy')(rows, params.orderBy());
          var page = params.page();
          var pageLength = params.count();
          if (pageLength=='all') 
          $defer.resolve(rows);
          else
            $defer.resolve(rows.slice((page - 1) * pageLength, page * pageLength));
        }
    });

})

Many business applications consist of long forms. AngularFaces simplifies writing such forms by adding labels and messages (including internationalization) automatically. If possible, it validates the form on the client, thus reducing the server load.

     <prime:panel header="If you want to buy this car..."
        ng-show="{{doShowDetails()}}" styleClass="{{showDetailsClass()}}">
        <prime:panelGrid columns="3" style="border: 0px;">
          <prime:inputText value="#{carBean.brand}" />
          <prime:inputText value="#{carBean.type}" />
          <prime:inputText value="#{carBean.price}" />
          <prime:inputText value="#{carBean.mileage}" />
          <prime:inputText value="#{carBean.color}" />
          <prime:inputText value="#{carBean.year}" />
          <prime:inputText value="#{carBean.fuel}" />
        </prime:panelGrid>
      </prime:panel>
      <prime:panel
        header="... we need some informations about where to deliver it:"
        ng-show="{{doShowDetails()}}" styleClass="{{showDetailsClass()}}">
        <prime:panelGrid columns="3" style="border: 0px;">
          <prime:inputText value="{{customerBean.lastName}}" />
          <prime:inputText value="{{customerBean.firstName}}" />
          <prime:inputText value="{{customerBean.dateOfBirth}}" />
          <prime:inputText value="{{customerBean.emailAddress}}" />
          <prime:inputText
            value="{{customerBean.iAgreeToTheTermsAndConditions}}" />
        </prime:panelGrid>
      </prime:panel>
      <prime:panel
        header="Please confirm you are a human by answering this simple question:"
        ng-show="{{doShowDetails()}}" styleClass="{{showDetailsClass()}}">
        <prime:panelGrid columns="3" style="border: 0px;">
          <prime:outputLabel for="captchaField"
            value="{{customerBean.captchaQuestion}}" />
          <prime:inputText required="false" id="captchaField"
            value="{{customerBean.captcha}}"
            ng:captcha="{{customerBean.expectedCaptcha}}" />
        </prime:panelGrid>
      </prime:panel>
      <prime:commandButton 
        action="#{customerBean.buy(carBean)}"
        value="Buy this car! (Non-AJAX)" ajax="false"
        styleClass="carFilterButton {{showDetailsClass()}}" ng-disabled="myForm.$invalid"
        style="{{myForm.$invalid?'color:#888':''}}" />
var app = angular.module('CarShop', ["angularfaces"]).
controller('CarShopController', function($scope, $filter) {
  // This initializes the Angular Model with the values of the JSF bean attributes
  initJSFScope($scope);
  $scope.doShowDetails = function() {
    if (typeof($scope.customerBean)=="undefined"||
      typeof($scope.customerBean.showDetails)=="undefined") {
      return false;
    }
    return $scope.customerBean.showDetails;
  }
  $scope.showDetailsClass = function() {
    if ($scope.doShowDetails()) 
      return "";
    else
      return "hidden";
  }
  $scope.showFinishedTransactionClass = function() {
    if ($scope.doShowDetails()) 
      return "hidden";
    else
      return "";
  }
  
  $scope.buttonEnabledStyle = function() {
    if ($scope.myForm.$invalid) 
      return "color:#888";
    else
      return "";
  }

});

app.directive('captcha', function() {
  return {
    require : 'ngModel',
    link : function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        if (typeof(viewValue)=="undefined" || viewValue==null) {
          ctrl.$setValidity('captcha', false);
          return viewValue;
        }
        if (viewValue!=attrs["captcha"]) {
          ctrl.$setValidity('captcha', false);
          return viewValue;
        } else {
          ctrl.$setValidity('captcha', true);
          return viewValue;
        }
      });
    }
  };
});

The JSF view below shows how to exchange arbitrary data between client and server using the new <ngsync /> tag.

The form contains seven input fields, so the XHTML code repeats itself. I omitted most of the repetitions. The XHTML code uses the new HTML5 style of JSF 2.2:

    <ngsync value="{{staticOptionBean.brands}}"   direction="serverToClient" once="true" />
    <ngsync value="{{staticOptionBean.colors}}"   direction="serverToClient" once="true" />
    <ngsync value="{{dynamicOptionBean.types}}"   direction="serverToClient" cacheable="true" />
...
    
    <!-- ngsync doesn't transport the entire bean recursively, so we have to list each attributes we want to send -->
    <!-- will be fixed in a future AngularFaces version -->
    <ngsync value="{{filterBean.type}}"     direction="serverToClient" cacheable="true" />
    <ngsync value="{{filterBean.brand}}"    direction="serverToClient" cacheable="true"/>
    <ngsync value="{{filterBean.counter}}"  direction="serverToClient" cacheable="true" />
    <!-- end of ngsync workaround -->
    
    <ngsync value="{{filterBean}}" direction="clientToServer" id="filterSyncID" />
    <ngsync value="{{settingsBean}}" direction="clientToServer" id="settingsID" />
    
    <div class="carFilterBox"> 
      <div style="font-weight:bold;font-size:125%">What kind of car are you looking for?
      </div> 
      <div>
        <table style="border-spacing:10px">
          <tr>
            <td width="150px">Brand</td>
            <td width="110px">Type</td>
            <td width="100px">Price</td>
          </tr>
          <tr>
            <td>
              <select id="filterbrand" ng-model="filterBean.brand" ng-options="brand for brand in staticOptionBean.brands track by brand"
                                    ng-change="filterBean.type=''">
                     <option value="">-- choose brand --</option>
              </select>
            </td>
            ...
          </tr>
          ...
           <tr>
            <td>
              <select ng-model="filterBean.yearText" ng-options="year for year in staticOptionBean.years track by year">
                     <option value="">-- choose year --</option>
                 </select>
            </td>
            <td>
              <button ng-show="activateAJAXButton()" class="carFilterButton" jsf:action="index.jsf">update counter
                <f:ajax render="angular" execute="filterSyncID settingsID"></f:ajax>
              </button>
            </td>
            <td >
              <button id="listCarsID" class="carFilterButton" jsf:outcome="table.jsf" >{{filterBean.counter}} cars</button>
            </td>
          </tr>
        </table>
      </div>
    </div>
var app = angular.module('CarShop', [ "angularfaces" ]).controller(
    'CarShopController', function($scope) {
      // This initializes the Angular Model with the values of the JSF
      // bean attributes
      initJSFScope($scope);
      
      $scope.activateAJAXButton = function() {
        if ($scope.settingsBean.updateImmediately)
          return false;
        else
          return true;
      };
      
      $scope.sendFilterToServer = function(newValue, oldValue) {
        if ($scope.settingsBean.updateImmediately) {
          if (newValue != oldValue) {
            try {
              $scope.afSendNGSyncToServer();
            } catch (e) {
              console.log("Ein Fehler ist aufgetreten: " + e);
            }
          }
        }
      };

      $scope.$watch('filterBean.brand', $scope.sendFilterToServer);
      $scope.$watch('filterBean.type', $scope.sendFilterToServer);
      $scope.$watch('filterBean.price', $scope.sendFilterToServer);
      $scope.$watch('filterBean.mileage', $scope.sendFilterToServer);
      $scope.$watch('filterBean.fuel', $scope.sendFilterToServer);
      $scope.$watch('filterBean.color', $scope.sendFilterToServer);
      $scope.$watch('filterBean.yearText', $scope.sendFilterToServer);
    })

Continue reading

AngularFaces 2.1: Apache License V2, AngularJS 1.3 and much more

Yesterday, I’ve published what I hope to be the last release candidate of AngularFaces on Maven Central. Basically, AngularFaces 2.1 RC5 already is the final version. I only called it a release candidate I did a few last-minute changes. I felt the need to run more tests.

AngularFaces 2.1 offers many new features. Today, I’ll present four of them: the new license, AngularJS 1.3, first-class divs and the new AJAX support contributed by Marco Rinck.
Continue reading

AngularJS: What About Adding ng-type?

I found an interesting search keyword in the visitor statistics: ng-type. Looking at the AngularJS doc, you’ll never find ng-type. Every input field they show uses the plain old HTML attribute type.

Introducing ng-type adds the option to change an input field’s data type dynamically. Why hasn’t ng-type been added to Angular?
Continue reading

AngularJS 2.0: Sneak Preview on Data Binding

The AngularJS team presented a straw-man’s proposal for AngularJS 2.0 syntax one or two weeks ago. According to the proposal, AngularJS 2.0 is going to look substantially different from what we used to consider Angular, and nothing shows this better than the overhauled core of AngularJS: data binding. It’s a fresh new take on AngularJS, or, like Cagatay Civici tweeted, it’s almost like a new framework that just happens to have the same name.

He isn’t the only one to think so. Developers protested against the changes, and soon discovered several issues with the syntax. This article shows the original ideas nonetheless – I consider them interesting, even if they’re likely not to come.

Evolving W3C standards open new opportunities

So they decided to make a new start, dropping compatibility to AngularJS 1.x. And why not? I suppose the Angular team learned a lot about HTML and Javascript along the way, so they now know how to make things better. Who might have envisioned the flexibility of HTML concerning attribute names? Back in 2000, valid HTML attribute names were basically characters, digits, underscores and colons. By 2009, the W3C organization had added a lot of flexibility. Now, almost every Unicode character can be used in attribute names – this even includes Chinese and Devenagari characters (such as क्तु):

<div myAttribute[index] = ""
     ^[myAttribute]     = ""
     seño(ra|rita|r)    = ""
     क्तु                 = ""
     你好               = "">

AngularJS 2.0 makes a lot of use of this flexibility. The team invented a new system of data bindings that’s more logical than the previous system. It uses special characters to distinguish between different types of attributes. We learned from several Scala frameworks that ran havoc that using special characters tends to be a bad thing because special characters don’t do much in the way of explaining their meaning. I hope the AngularJS team has learnt the lesson and uses special characters carefully and sparsely. Changing the data binding syntax and dropping compatibility is a bold decision that may or may not work out. However, the current drafts look fascinating enough.

Update Nov 23, 2014

During the last couple of weeks the AngularJS team dropped the idea of using special characters. There were many obstacles: using special characters may be valid HTML, but that doesn’t mean browsers can deal with them. Even worse, many third-party tools don’t cope with special characters. However, it’s clear that the syntax will change. At the moment, there’s no agreement on the new syntax, so this article sticks with the straw man’s proposal. The details may change, but the ideas remain the same.
Continue reading