Chapter 2. Introducing Sample Application TechBuzz

If all concepts were explained with an example, then they would be much easier to understand. That's what we are going to do here!

As you progress through the book, if you could apply the knowledge in building a sample application, then you will get not only theoretical knowledge on PrimeFaces, but also hands-on experience on how to use PrimeFaces in your real projects. So, we will be building a sample application called TechBuzz incrementally throughout this book.

TechBuzz is a knowledge sharing system wherein users can post about what is going on in the field of technology read others' posts, rate others' posts, and so on. You should note that this application is purposely very simple, and indeed many of its features were conceived so that we could highlight a particular piece of PrimeFaces functionality. As our primary focus is on how to use PrimeFaces, we will be discussing more about building the user interface using PrimeFaces, and you...

Understanding the requirements of the TechBuzz application

TechBuzz is a community website where people can share their thoughts, ideas, and experiences on various technology-related topics. The user can post information such as when a new framework is released, upcoming technology training, information on newly published books, and so on. Also users can view others' posts, rate others' posts, view other users' profiles, and search for posts based on keywords or tags.

The TechBuzz system will have role-based access control security, and users with three types of roles: Administrator, Moderator, and Normal. TechBuzz users will be able to perform various actions based on his/her role.

Normal users can perform the following actions:

• New users can register

• Existing users can log in

• View a list of posts from all the users

• View the details of a post

• Add comments to a post

• Rate other user's posts

• Create a new post

• Update his/her own post

• Search posts by text, tag(s)

• View other user's profiles

Moderators can...

Understanding the high-level design of the TechBuzz application

The TechBuzz application will be developed using the MVC (Model View Controller) design pattern. For the Model layer, we will use the Spring framework to provide various business layer services. The View layer will be developed using JSF Facelets and PrimeFaces components. The Controller layer will be implemented using JSF managed beans. The following diagram depicts how each layer will communicate with other layers:

Understanding the TechBuzz data model

The following diagram depicts the database model for the TechBuzz application:

Looking at TechBuzz screenshots

In this section, we will see the sample screenshots of the TechBuzz application which we are going to build incrementally throughout the book.

User authentication

New users can register with the TechBuzz application and then log in to the system. To implement registration and login screens, we can use various PrimeFaces input components, Calendar, and Message components. Also we will learn how to perform form validations as well using the techniques described in the Performing form validations section of Chapter 1, Introduction to PrimeFaces, and Chapter 4, Introducing the PrimeFaces Client Side Validation Framework.

TechBuzz home page

When the user successfully logs in to TechBuzz, the Home page will be displayed with the list of posts posted by all the users, in reverse chronological order in a paginated manner. To implement this, we will use the DataList component along with pagination.

User account screen

Users can view his/her own and other user's account details...

Setting up of the development environment for TechBuzz

In this section, we will go through the development environment setup process to get ready for developing the TechBuzz application. As PrimeFaces is a lightweight UI component framework for JSF-based applications, there are no specific requirements for particular IDEs, web servers, or databases. You can use your favorite IDE, servlet container, and database.

The TechBuzz application will be developed following three-tier architecture. We will be using JSF/PrimeFaces for the presentation tier, Spring for the business tier, and Spring JDBC for the persistence tier.

Time for action – installing the required software

For developing the TechBuzz application, we will be using the following software and tools:

1. JDK: PrimeFaces needs JDK 1.5 or later. We can download and install JDK from http://www.oracle.com/technetwork/java/javase/downloads/index.html.

2. IDE: We will be using Eclipse as the IDE, but if you want to use the NetBeans IDE, IntelliJ IDEA or any other IDEs, you can import and use them without any changes, as TechBuzz is a Maven-based web application. You can download and install the Eclipse IDE from http://www.eclipse.org/downloads/.

3. Application server: PrimeFaces can run on any servlet container such as Apache Tomcat, Jetty, JBoss, Glassfish, and so on. We will be using Apache Tomcat for TechBuzz but you can deploy and run on any of the servlet containers. You can download Apache Tomcat 7.0.39 from http://tomcat.apache.org/download-70.cgi.

4. Database: For the TechBuzz application, we will be using the MySQL database. You can use any other relational...

Summary

In this chapter, we have discussed the functional requirements for the sample application TechBuzz, seen some sample UI screenshots, and prepared the development environment by installing the required software and tools.

In the next chapter, we will look into commonly used PrimeFaces components such as Dialog, Growl, Message, Tooltip, BlockUI, and so on, so that we will be familiar with these components and use them while developing the TechBuzz application.