• Looking for a car?
  • Want to sell your car?




    • What kind of car are you looking for?
    Brand Type Price
    Mileage Fuel Color
    year

    Tell us which car you want to sell:
    brand
    type
    price
    mileage
    color
    year
    fuel
    Who are you?
    last name
    first name
    date of birth
    Please confirm you are a human by answering this simple question:

What do you see here?

The first tab is a pure AngularJS view that communicates with the back-end via <ngsync>.

If the check box "update immediately" is set, the view communicates with the server using the Javascript API of ngsync.

update immediately

If "update immediately" is not set, an AngularFaces button is shown. In this case it suffices to define (and to click) the button to synchronize the AngularJS model (just the way you're used to from other JSF applications).

Brand and type aren't independent fields. Choosing a brand limits the list of types. Which type matches which brand is calculated on the server. However, this is one of the tasks you need client support for: when the user changes the brand, AngularJS clears the type. If it doesn't, the back-end logic detects the mismatch and sets the brand back to the original value (because setBrand is called first and setType is called second).

If we were to omit the settings above, the first tab didn't contain native JSF code. In such a case you have to load the JSF Javascript library manually:

<h:outputScript library="javax.faces" name="jsf.js" />

The second tab is a pure Mojarra or MyFaces view that doesn't use <ngsync>. Instead, it uses several AngularJS mustaches.

This is a HTML5 JSF approach. The JSF page uses almost exclusively the new HTML5 friendly markup, but it doesn't use fancy stuff like ngsync. It only uses <translate> to support forein languages and brings the JSR303 bean validation to the client.

Note that this view can't use AJAX because it's based on Mojarra (or MyFaces). AJAX doesn't recover the way the basic JSF libraries manipulate the DOM tree. AngularJS relies on jQuery to manipulate the DOM, but the basic JSF libraries don't require (and consequently don't use) jQuery. If you need AJAX, use PrimeFaces 5+.

Depending on which browser you use, the birth date field may be difficult on non-english computers. Google Chrome, for instance, distinguishes between the preferred page language and the language used to display the browser. Unfortunately, the data picker uses the latter locale, whereas JSF expects the former. A - say - French browser may run into difficulty when displaying an English JSF application.

You also have to specify a date converter the date field (such as the birthday). AngularFaces can't add it automatically yet.