Did AngularJS Borrow Some Concepts from JSF?

Since Appery.io added support for Bootstrap and AngularJS, I have been using these frameworks a lot. Many years ago I have been using and teaching JSF and RichFaces frameworks. Surprisingly (or not), I see some concept similarities between AnguarJS and JSF. Obviously AngularJS and JSF are very different frameworks, but they do share some concepts. Let’s look at a simple example.

This is how AngularJS page looks:

<html>
<body ng-app="myApp1">
   <div ng-controller="myController">
      <p>Name:<input type="text" ng-model="name"/></p>
      <p>Echo: {{echo}}</p>
      <p>Count: {{count}}</p>
      <p>
         <button ng-click="countAction()">Submit</button>
      </p>
   </div>
</body>
</html>

and this is how JSF page looks:

<html>
<body>
   <h:form>
      <p>Name:<h:inputText value="#{echoBean.name}"/></p>
      <p>Echo: #{echoBean.echo}</p> 
      <p>Count: #{echoBean.count}</p>
      <p><h:commandButton value="Submit" actionListner="#{echoBean.countListner}"/>
   </h:form>
</body>
</html>
  • AngularJS defines the name model via the ng-model directive. The directive extends the functionality of HTML input element.
  • JSF defines the name model via the managed bean. <h:inputText> component extends the functionality of HTML input element.
  • {{echo}} and {{count}} are displayed using expressions and are bound (binding) to AngularJS scope. Both variables are set in AngularJS controller (similar to JSF managed bean)
  • #{echoBean.echo} and #{echoBean.count} are displayed using expressions and are bound (binding) to a managed bean inside JSF scope. Both variables are defined in JSF managed bean (similar to AngularJS controller)
  • ng-click references a function (defined in scope) to count the length of the input
  • actionListener references a function (defined in managed bean) to count the length of the input
  • AngularJS provides directives to extend HTML markup, JSF provides UI components to extend  HTML markup.

As you can see some of the concepts are rather similar even though the syntax is different. Both frameworks define a view (page) that is bound to an object in a scope.

Obviously these are very high level similarities and you can probably argue that many other frameworks share the same concepts. One important difference between the frameworks is that AngularJS is a client-side framework while JSF is a server-side framework.

var myApp = angular.module('myApp1', []);

myApp.controller('myController', ['$scope', function ($scope) {

    $scope.countAction = function () {
        $scope.echo = $scope.name;
        $scope.count = $scope.name.length;
    };
}]);
@ManagedBean(name="echoBean")
@RequestScoped
public class EchoBean {
   private String name; 
   private Integer count;
 
   public void countListener (ActionEvent event){ 
      count = name.length(); }
   }
   // getters and setters
}

You can try the AngularJS example here: https://jsfiddle.net/maxkatz/wbpp331b/

RichFaces 4.1 M3 – New Components, Mobile Support, and Better Performance

The RichFaces team has been doing an amazing job on RichFaces 4.1 and today released Milestone 3. Many components in 4.1 have been optimized for mobile. You can see the Milestone 3 components showcase deployed to OpenShift – Red Hat’s PaaS. It uses device detection and will show the mobile optimized version if you access from a mobile device.

Staying on mobile topic, if you want to build HTML5 and native mobile apps using cloud services, try Tiggr Mobile Apps Builder.

New components

In the showcase, you will find a number of new components:

rich:editor, rich:orderingList, and rich:pickList are components from RichFaces 3.3 that didn’t make into 4.0, so this very good. The new component is rich:notifyMesssage. It’s a very cool component, it allows showing messages in a floating box. Try it.

Better performance

With mobile support, resource handling has been improved. The goal is to reduce the number of requests as well as reduce the size of JavaScript, and CSS sent to the browser. Performance improvements will not limited to mobile, but will also give a standard Web app a boost in performance.

You can read more what’s new in RichFaces 4.1 M3 from Brian Leathem: http://blog.bleathem.ca/2011/10/richfaces-410m3-release-announcement.html

What You Need To Build Cool Enterprise Applications With JSF [Slides]

Slides from my JavaOne 2011 conference talk in San Francisco.

JSF/RichFaces Workshop, Plus 1-Day Conference In Vienna, Austria, Sept 7-9

I will be in Vienna, Austria, September 7-9 teaching a 2-day JSF, RichFaces workshop, plus presenting 2 sessions at 1-day conference. The workshop and the conference are co-sponsored by Objective and UNIQA.

The first two days are dedicated to hands-on JSF and RichFaces workshop. This is a great opportunity to learn everything you need to build rich enterprise applications with JSF and RichFaces.

The third day will be run in a conference format where a number of speakers will present on various technologies. You can find the schedule here.

Day 1 & 2 – JSF/RichFaces Workshop

Day 1: JSF

This is a hands-on workshop (no slides!), we will spend most of the time building a JSF application.

  • JSF UI components
  • JSF Core components
  • Managed beans and configuration
  • Navigation
  • Conversation and validation
  • Events (value change, action)
  • JSF life cycle

Day 2: RichFaces

We will cover the new RichFaces 4 and demonstrate advanced features, tags, customization and richness it adds on top of JSF 2. We will spend most of the time running and building examples (no slides!)

  • JSF Ajax features concepts
    • Sending an Ajax request
    • Partial view rendering
    • Partial view processing
  • RichFaces a4j:* tag library
  • RichFaces rich:* tag library
  • RichFaces client validation
  • RichFaces Skins

Day 3: 1-Day Conference

Last day is a conference format with the following sessions:

  • RichFaces 4 (Max Katz, Exadel)
  • Integration of JSF 2 applications in Portlet 2.0 Portals (Thomas Kestler, Objective)
  • RichFaces 4 rolling to Mobile Era (Lukáš Fry?, Red Hat)
  • Building Mobile Web and Native Apps in the Cloud (Max Katz, Exadel)
  • What is ADF, how to build its first application, advantages and disadvantages, integration
  • with EJB/JPA2.0 (Thomas Kestler, Objective)
  • Testing JSF with Arquillian and Selenium (Lukáš Fry?, Red Hat)
  • JSF Experience Report (Herbert Dowalil, UNIQA)

You can see the full schedule here.

Cost

Conference only € 99, – per participant
Workshop only € 199, – per participant
Workshop and conference € 249, – per participant

Don’t wait, register today!

How to hightlight a field in JSF when validation fails

Highlighting an input field that failed validation (or conversation) is a common UI practice today. This sort of functionality is not available in JSF (nor RichFaces) out of the box (Seam does have it). I got an email from RichFaces 4 workshop attendee from CONFESS_2011 conference asking how to do it and I thought it’s a good idea to make it blog post. It turns out, implementing such functionality is pretty simple. All we need to do is check if a particular field (component) is valid and then render or not render a style for the input field.

Let’s start with the Java bean:

@ManagedBean
@RequestScoped
public class Bean implements Serializable {

   private String text; // getter and setter

   public boolean isInputValid (){
      FacesContext context = FacesContext.getCurrentInstance();
      UIInput input = (UIInput)context.getViewRoot().findComponent(":form:input");
      return input.isValid();
   }
}

Inside isInputValid, we are searching for a particular component and checking whether it’s valid or not.

JSF page:



.inputInvalid {
   border: 2px solid red;
}



   
      
         
	 
	    
		
	    
	    
	 
      
   

Everything important happens here:

styleClass="#{bean.inputValid?'':'inputInvalid'}"

If the component is invalid (validation has failed), then we will render inputInvalid CSS class. Otherwise, nothing is rendered.

This is the result when running the page (before invoking validation):

After validation:

As you can see the solution is pretty simple.

Going to review Core JavaServer Faces book

I’m going to review Core JavaServer Faces (3rd edition) book by David Geary and Cay Horstmann. Looking forward to reading the book.

You can read my other two book reviews: JSF 2.0 Cookbook, and JSF 1.2 Components.

Plain JSF/RichFaces project on JBoss AS

A reader asked me to provide plain JSF and RichFaces template to run on JBoss AS. As JBoss AS already comes with JSF libraries, just delete the two JSF Jars (jsf-api.jar, jsf-impl.jar) and you will be ready to go. Or, follow the steps below to download and import the project. Again, this is just plain JSF/RichFaces project, no Seam, Hibernate, JPA. It’s a good starting point if you want to try RichFaces.

How to import
I tested this on Eclipse 3.5 with JBoss Tools. I will assume that you already have JBoss AS registered in Eclipse.

  1. Download the the template file
  2. In Eclipse, select File/Import
  3. Select General/Existing Project into Workspace, click Next
  4. Check ‘Select archive file:’ option
  5. Click Browser… and point to the downloaded file
  6. Click Finish
  7. Deploy the project to JBoss AS.
  8. Run the application, you should see “Hello, looks like it’s working” message (image below).

Book review: JSF 2.0 Cookbook

Last July, I was asked to review JSF 2.0 Cookbook by Anghel Leonard. I finally found time to finish reading the book and wrote a review. (If you are interested, back in April I reviewed another book from Packt Publishing: JSF 1.2 Components.)

Chapter 1 – Using Standard and Custom Converters in JSF

The chapter covers how to use standard converters and how to build custom converters. The author does a good job covering the standard out-of-the-box converters with a number of examples. The chapter then shows how to create your own custom converter. There are a number of small typos, but that’s not a big deal. Although standard and custom converters are covered in regular JSF books, it’s a topic that many people have difficulties with so I think there is a place for them in a recipe-type book. Two other things I found useful are discussions of RichFaces build-in converters and MyFaces converters.
Continue reading “Book review: JSF 2.0 Cookbook”

My reply to "Top 10 reasons why I don’t like JSF"

Bruno Borges posted Top 10 reasons why I don’t like JSF. Below you will find my replies to his points. A few weeks earlier, I also posted: JVM Web Frameworks Comparison – reply to JSF scoring.

1. Extra step when defining a project’s architecture
People insist on comparing JSF with other frameworks. They should stop doing that. You can compare MyFaces to RichFaces to Tapestry to Vaadin to GWT.

This is true. It makes more sense to compare JSF component frameworks such as RichFaces against other frameworks. And because the component libraries are all based on JSF, you will also be comparing JSF. However, I’m guessing most people already do that, they compare JSF+framework vs framework XYZ.
Continue reading “My reply to "Top 10 reasons why I don’t like JSF"”