Scribd
Upload
55 views1 page

Primefaces Exercises: Ajax

The document provides instructions for four PrimeFaces exercises using Ajax with no page reloads. The exercises are: 1) Display and update the current time with a button click. 2) Show the sum of two spinner numbers with a button click. 3) Automatically update the sum when either spinner changes. 4) Add a delay to the time update and display a loading message.

Uploaded by

Marouane Amhidi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
55 views1 page

Primefaces Exercises: Ajax

The document provides instructions for four PrimeFaces exercises using Ajax with no page reloads. The exercises are: 1) Display and update the current time with a button click. 2) Show the sum of two spinner numbers with a button click. 3) Automatically update the sum when either spinner changes. 4) Add a delay to the time update and display a loading message.

Uploaded by

Marouane Amhidi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

PrimeFaces Exercises: Ajax

Make a new PrimeFaces project. Do all exercises with Ajax, with no page reloads or
switching of pages.

1. Display the current time (i.e., the output of new Date()) in the page. Make a button
that, when pressed, updates the time.

2. Make two spinners to collect numbers. Make a button that, when pressed, shows the
sum of the numbers. This problem is simplest if you show the original sum (e.g., 0)
when the page is first loaded.

3. Make a variation of the previous problem: remove the push button, and instead
update the sum whenever either spinner changes value.

The core of this problem is simple, but what makes it tricky is that the simplest usage
of p:ajax just sends one spinner value at a time (the one that the user changed). So,
you have two choices:
• Send both spinner values when you change either one.
• Make the bean session scoped, so that it works fine to only send the spinner value
that actually changed. But, now you have the tricky problem that the same underly-
ing bean class was a request-scoped bean in the previous problem. Furthermore,
you need two separate bean instances, so that interacting with the previous problem
won’t affect this problem, and vice versa. The right way to do this is to use faces-
config.xml and declare the same bean class twice, once with request scope and once
with session scope. If you were in the earlier “core” JSF class, we discussed this in
the lecture on explicit page navigation and faces-config. But, if you weren’t in that
class or don’t know how to declare beans in faces-config, just make a new class that
extends your class of problem 2, and make the subclass session scoped.

4. Make a variation of the first problem, but use a version of the action controller (or
getTime method) that takes one or two seconds to execute. Display a temporary mes-
sage and an animated GIF in the page while you are waiting for the results. Feel free
to steal ajax-loader.gif from the WebContent/resources/images folder of my “prime-
faces-ajax” project, or make your own animated GIF at http://ajaxload.info/.

Customized Java EE training at your location: JSF 2, PrimeFaces, Hadoop, general Java programming, Java 8 lambdas/streams, jQuery, Android, Spring MVC, GWT, REST, etc.
For sample tutorials and public courses, see http://www.coreservlets.com/. To inquire about onsite courses, email [email protected].

You might also like