First steps with AngularFaces

Requirements

You find the requirements in a dedicated chapter. Cutting a long story short: You need Java 6 and JSF 2.2.

Template projects

Using a template project is always a good approach to learning a new framework. There's a simple demo project on my GitHub repository, combining AngularFaces with BootsFaces and PrimeFaces. In most cases that's a good foundation to build on:

  • AngularFaces simplifies the JSF programming model und makes it possible to use AngularJS in a JSF application.
  • BootsFaces brings the elegant layout of Twitter Bootstrap to the JSF world. Of course you don't need BootsFaces to use Bootstrap. But it makes many things simpler, offers more expressive markup language and give you one or two dozen components which are optimized both for JSF and Bootstrap.
  • For everything else I recommend PrimeFaces. In particular, PrimeFaces offers a wealth of advanced widgets that haven't a AngularFaces or BootsFaces counterpart. Nor do we want to offer such widgets: Both AngularFaces and BootsFaces are meant to be used with PrimeFaces (version 5.0+). You can safely use all three frameworks together in the same application. There's hardly any risk to run into incompatibilities, let alone a maintainance hell.
  • OmniFaces is another good match to AngularFaces and BootsFaces (even though it didn't make it into the template project). A component I'm particularly fond of is the CombinedResourceHandler. Both AngularFaces and BootsFaces load many small Javascript and CSS files. The CombinedResourceHandler improves page load time considerably by combining these files into a single file, which is loaded much faster. Today, that is: if you use SPDY or HTTP/2, new rules apply. Chances are you shouldn't use CombinedResourceHandler after migrating to HTTP/2.

In case you don't want to use PrimeFaces or BootsFaces, simply remove the entries from the pom.xml.

Another interesting demo showing quite a few advanced features is the car dealer demo, the sources of which are available on GitHub. There's a caveat: I frequently use the project for experiments. Please don't expect the most commendable code. On the plus side, you'll find examples how to use a PrimeFaces DataTable or an AngularJS ngTable in an AngularFaces application. Another advanced feature is sending AngularJS model data to the server from an AngularJS controller.

In case you're fond of games, there's the Tetris demo. It's a slightly more advances demo of AngularFaces. On the one hand it consists of a lot of Javascript code, on the other hand there's also a server-side database access with JPA. Enjoy the live demo at http://angularfaces.net/tetris/!

Let's go!

You can grab a precompiled release of AngularFaces from MavenCentral or jCenter. Alternatively, you can build AngularFaces from source. By now AngularFaces is mature enough, so I recommend the first option.

In any case you have to add a context parameter to the web.xml. AngularFaces is a friendly framework: if you forget to set the parameter, AngularFaces reminds you when starting the server.

Your first AngularFaces program

Users of Maven and Gradle are already familiar with Maven's default project layout.

Please create these folders:

  • src/main/java Put your Java source code files here.
  • src/main/resources Files in this folder aren't compiled, but they are included in the class path nonetheless. For instance, the language files for the automatic translation feature of AngularFaces belong here.
  • src/main/webappsThis folder contains the XHTML files and the AngularJS controllers.

Our example uses these files:

If you use CDI, please replace @ManagedBean by @Named and make sure you import the new Viewscope javax.faces.view.

This simple example doesn't need an AngularJS-Controller. But if it had one, it'd look like this:

Wrapping it up

That's it! Your first AngularFaces application is up and running. Granted, it doesn't use AngularJS yet, but it demonstrates several other interesting features of AngularFaces:

  • The program uses both BootsFaces and PrimeFaces along with AngularFaces. That's the reason why the pom.xml is more verbose than the minimal pom.xml given above.
  • Labels and error messages are - if you wish so - generated automatically. So the form concentrates on the really interesting information: the three input fields.
  • In most cases you can omit the prefixes h: und b:. (Too bad your IDE doesn't know about this...)

Now it's up to you. Experiment with the program, browse through the other chapters of the tutorial, and most of all:

Enjoy!








First steps with AngularFaces

Requirements

You find the requirements in a dedicated chapter. Cutting a long story short: You need Java 6 and JSF 2.2.

Template projects

Using a template project is always a good approach to learning a new framework. There's a simple demo project on my GitHub repository, combining AngularFaces with BootsFaces and PrimeFaces. In most cases that's a good foundation to build on:

  • AngularFaces simplifies the JSF programming model und makes it possible to use AngularJS in a JSF application.
  • BootsFaces brings the elegant layout of Twitter Bootstrap to the JSF world. Of course you don't need BootsFaces to use Bootstrap. But it makes many things simpler, offers more expressive markup language and give you one or two dozen components which are optimized both for JSF and Bootstrap.
  • For everything else I recommend PrimeFaces. In particular, PrimeFaces offers a wealth of advanced widgets that haven't a AngularFaces or BootsFaces counterpart. Nor do we want to offer such widgets: Both AngularFaces and BootsFaces are meant to be used with PrimeFaces (version 5.0+). You can safely use all three frameworks together in the same application. There's hardly any risk to run into incompatibilities, let alone a maintainance hell.
  • OmniFaces is another good match to AngularFaces and BootsFaces (even though it didn't make it into the template project). A component I'm particularly fond of is the CombinedResourceHandler. Both AngularFaces and BootsFaces load many small Javascript and CSS files. The CombinedResourceHandler improves page load time considerably by combining these files into a single file, which is loaded much faster. Today, that is: if you use SPDY or HTTP/2, new rules apply. Chances are you shouldn't use CombinedResourceHandler after migrating to HTTP/2.

In case you don't want to use PrimeFaces or BootsFaces, simply remove the entries from the pom.xml.

Another interesting demo showing quite a few advanced features is the car dealer demo, the sources of which are available on GitHub. There's a caveat: I frequently use the project for experiments. Please don't expect the most commendable code. On the plus side, you'll find examples how to use a PrimeFaces DataTable or an AngularJS ngTable in an AngularFaces application. Another advanced feature is sending AngularJS model data to the server from an AngularJS controller.

In case you're fond of games, there's the Tetris demo. It's a slightly more advances demo of AngularFaces. On the one hand it consists of a lot of Javascript code, on the other hand there's also a server-side database access with JPA. Enjoy the live demo at http://angularfaces.net/tetris/!

Let's go!

You can grab a precompiled release of AngularFaces from MavenCentral or jCenter. Alternatively, you can build AngularFaces from source. By now AngularFaces is mature enough, so I recommend the first option.

In any case you have to add a context parameter to the web.xml. AngularFaces is a friendly framework: if you forget to set the parameter, AngularFaces reminds you when starting the server.

Your first AngularFaces program

Users of Maven and Gradle are already familiar with Maven's default project layout.

Please create these folders:

  • src/main/java Put your Java source code files here.
  • src/main/resources Files in this folder aren't compiled, but they are included in the class path nonetheless. For instance, the language files for the automatic translation feature of AngularFaces belong here.
  • src/main/webappsThis folder contains the XHTML files and the AngularJS controllers.

Our example uses these files:

If you use CDI, please replace @ManagedBean by @Named and make sure you import the new Viewscope javax.faces.view.

This simple example doesn't need an AngularJS-Controller. But if it had one, it'd look like this:

Wrapping it up

That's it! Your first AngularFaces application is up and running. Granted, it doesn't use AngularJS yet, but it demonstrates several other interesting features of AngularFaces:

  • The program uses both BootsFaces and PrimeFaces along with AngularFaces. That's the reason why the pom.xml is more verbose than the minimal pom.xml given above.
  • Labels and error messages are - if you wish so - generated automatically. So the form concentrates on the really interesting information: the three input fields.
  • In most cases you can omit the prefixes h: und b:. (Too bad your IDE doesn't know about this...)

Now it's up to you. Experiment with the program, browse through the other chapters of the tutorial, and most of all:

Enjoy!








A página ainda não foi traduzido para o Português. Por favor, leia a tradução em Inglês. Pedimos desculpas por qualquer inconveniente.

First steps with AngularFaces

Requirements

You find the requirements in a dedicated chapter. Cutting a long story short: You need Java 6 and JSF 2.2.

Template projects

Using a template project is always a good approach to learning a new framework. There's a simple demo project on my GitHub repository, combining AngularFaces with BootsFaces and PrimeFaces. In most cases that's a good foundation to build on:

  • AngularFaces simplifies the JSF programming model und makes it possible to use AngularJS in a JSF application.
  • BootsFaces brings the elegant layout of Twitter Bootstrap to the JSF world. Of course you don't need BootsFaces to use Bootstrap. But it makes many things simpler, offers more expressive markup language and give you one or two dozen components which are optimized both for JSF and Bootstrap.
  • For everything else I recommend PrimeFaces. In particular, PrimeFaces offers a wealth of advanced widgets that haven't a AngularFaces or BootsFaces counterpart. Nor do we want to offer such widgets: Both AngularFaces and BootsFaces are meant to be used with PrimeFaces (version 5.0+). You can safely use all three frameworks together in the same application. There's hardly any risk to run into incompatibilities, let alone a maintainance hell.
  • OmniFaces is another good match to AngularFaces and BootsFaces (even though it didn't make it into the template project). A component I'm particularly fond of is the CombinedResourceHandler. Both AngularFaces and BootsFaces load many small Javascript and CSS files. The CombinedResourceHandler improves page load time considerably by combining these files into a single file, which is loaded much faster. Today, that is: if you use SPDY or HTTP/2, new rules apply. Chances are you shouldn't use CombinedResourceHandler after migrating to HTTP/2.

In case you don't want to use PrimeFaces or BootsFaces, simply remove the entries from the pom.xml.

Another interesting demo showing quite a few advanced features is the car dealer demo, the sources of which are available on GitHub. There's a caveat: I frequently use the project for experiments. Please don't expect the most commendable code. On the plus side, you'll find examples how to use a PrimeFaces DataTable or an AngularJS ngTable in an AngularFaces application. Another advanced feature is sending AngularJS model data to the server from an AngularJS controller.

In case you're fond of games, there's the Tetris demo. It's a slightly more advances demo of AngularFaces. On the one hand it consists of a lot of Javascript code, on the other hand there's also a server-side database access with JPA. Enjoy the live demo at http://angularfaces.net/tetris/!

Let's go!

You can grab a precompiled release of AngularFaces from MavenCentral or jCenter. Alternatively, you can build AngularFaces from source. By now AngularFaces is mature enough, so I recommend the first option.

In any case you have to add a context parameter to the web.xml. AngularFaces is a friendly framework: if you forget to set the parameter, AngularFaces reminds you when starting the server.

Your first AngularFaces program

Users of Maven and Gradle are already familiar with Maven's default project layout.

Please create these folders:

  • src/main/java Put your Java source code files here.
  • src/main/resources Files in this folder aren't compiled, but they are included in the class path nonetheless. For instance, the language files for the automatic translation feature of AngularFaces belong here.
  • src/main/webappsThis folder contains the XHTML files and the AngularJS controllers.

Our example uses these files:

If you use CDI, please replace @ManagedBean by @Named and make sure you import the new Viewscope javax.faces.view.

This simple example doesn't need an AngularJS-Controller. But if it had one, it'd look like this:

Wrapping it up

That's it! Your first AngularFaces application is up and running. Granted, it doesn't use AngularJS yet, but it demonstrates several other interesting features of AngularFaces:

  • The program uses both BootsFaces and PrimeFaces along with AngularFaces. That's the reason why the pom.xml is more verbose than the minimal pom.xml given above.
  • Labels and error messages are - if you wish so - generated automatically. So the form concentrates on the really interesting information: the three input fields.
  • In most cases you can omit the prefixes h: und b:. (Too bad your IDE doesn't know about this...)

Now it's up to you. Experiment with the program, browse through the other chapters of the tutorial, and most of all:

Enjoy!








Erste Schritte mit AngularFaces

Mindestanforderungen

Die Mindestanforderungen sind in einem eigenen Kapitel beschrieben. Um es kurz zu machen: Sie brauchen Java 6 und JSF 2.2.

Projektschablonen

Am einfachsten ist es, mit einer der Projektschablonen zu beginnnen. Auf dem AngularFaces GitHub Repositoy liegt ein einfaches Demo-Projekt, das AngularFaces mit BootsFaces und PrimeFaces kombiniert. In den meisten Fällen ist das eine gute Basis:

  • AngularFaces vereinfacht die JSF-Programmierung und ermöglicht es Ihnen, AngularJS in JSF-Anwendungen zu verwenden.
  • BootsFaces bringt das elegante Layout von Twitter Bootstrap in die JSF-Welt. Natürlich brauchen Sie BootsFaces nicht, um Bootstrap zu verwenden. BootsFaces macht aber vieles einfacher und liefert eine Handvoll Komponenten, die für sowohl für Bootstrap als auch für JSF optimiert sind.
  • Für alles andere empfehle ich PrimeFaces. Sowohl AngularFaces als auch BootsFaces sind dafür gedacht, mit PrimeFaces (ab Version 5.0) verwendet zu werden. Sie können also ruhig alle drei Frameworks zusammen verwenden. Die Gefahr, dass Sie in wechselseitige Inkompatiblitäten laufen, ist gering.
  • OmniFaces passt ebenfalls gut zu AngularFaces und BootsFaces, auch wenn es nicht in der Projektschablone gehört. Insbesondere lohnt es sich, den CombinedResourceHandler zu verwenden. AngularFaces und BootsFaces laden viele kleine Javascript- und CSS-Dateien. Der CombinedResourceHandler beschleunigt das Laden der Seite erheblich. Zumindest heute (22.03.2015) noch: falls Sie SPDY oder HTTP/2 einsetzen, bremst der CombinedResourceHandler ihre Seite möglicherweise aus.

Falls Sie dennoch auf BootsFaces oder PrimeFaces verzichten wollen, entfernen Sie einfach die entsprechenden Einträge in der pom.xml.

Ein weiteres interessantes Demo ist das Autohändler-Demo, dessen Quelltexte auf GitHub liegen. Ich verwende dieses Projekt oft zum Experimentieren. Erwarten Sie als bitte keinen vorbildlichen Quelltext. Dafür finden Sie dort aber Beispiele, wie Sie eine PrimeFaces-Datatable oder die AngularJS-Komponente ngTable in AngularFaces verwenden können, oder wie Sie Daten aus Javascript heraus zum Server schicken können.

Für etwas verspieltere Naturen gibt es noch das Tetris Demoprojekt. Es handelt sich dabei um eine etwas weitergehende Demostration der Möglichkeiten von AngularFaces. Es enthält eine Menge Javascript-Code, aber auch einen Datenbankzugriff auf der Serverseite. Viel Spaß mit der Live-Demo auf http://angularfaces.net/tetris/!

Los geht's!

Sie haben die Wahl, eine fertige AngularFaces-Version von MavenCentral oder jCenter zu beziehen, oder sich die aktuelle Entwicklerversion aus den GitHub-Quelltexten selber zu bauen. Mittlerweile ist AngularFaces so ausgereift, dass ich immer die erste Variante empfehle.

In jedem Fall müssen Sie in der web.xml noch einen Kontextparameter hinzufügen, damit AngularFaces läuft. Wenn Sie den Kontextparameter vergessen, erinnert AngularFaces Sie beim Hochfahren des Servers daran.

Ihr erstes AngularFaces-Programm

Wenn Sie Maven oder Gradle verwenden, sind Sie wahrscheinlich schon mit der Standard-Projektstruktur von Maven vertraut.

Wichtig sind dabei diese Ordner:

  • src/main/java Hier kommen Ihre Java-Quelltexte hin.
  • src/main/resources Hier kommen Dateien hin, die nicht kompiliert werden müssen, aber trotzdem in den Klassenpfad aufgenommen werden sollen. Dazu gehören zum Beispiel die Sprachdateien für die in AngularFaces eingebaute automatische Übersetzung.
  • src/main/webappsHier kommen die XHTML- und die AngularJS-Controller hin.

In unserem Beispiel verwenden wir diese Dateien:

Falls Sie CDI verwenden, ersetzen Sie bitte @ManagedBean duch @Named und importieren den neuen Viewscope javax.faces.view.

Dieses Beispiel braucht keinen AngularJS-Controller. Aber wenn es einen AngularJS-Controller hätte, sähe es so aus:

Fazit

Das war's! Ihr erstes AngularFaces-Programm läuft schon. Es verwendet zwar noch kein AngularJS, dafür zeigt es einige andere Features von AngularFaces:

  • Neben AngularFaces wird auch BootsFaces und PrimeFaces verwendet. Deswegen ist die pom.xml deutlich länger als die weiter oben angegebene pom.xml.
  • Labels und Fehlermeldungen werden auf Wunsch automatisch generiert. Deswegen besteht die Maskendefinition nur aus den wirklich wichtigen Informationen: den drei Eingabefeldern.
  • Die Präfixe h: und b: können Sie bei AngularFaces in den meisten Fällen weglassen. (Leider weiss Ihre IDE nichts davon...)

Jetzt sind Sie an der Reihe: experimentieren Sie mit dem Programm, und stöbern Sie in den übrigen Kapiteln dieses Tutorials. Mir bleibt an dieser Stelle nur noch Eines zu sagen:

Viel Spaß mit AngularFaces!