We need to change our main.scala code located at

ReactiveWebStore/app/views/main.scala.html in order to import a new JavaScript function:

@(title: String)(content: Html)(implicit flash: Flash)





@alert(alertType: String) = {

@flash.get(alertType).map { message =>








Finally, we need to change our product view in order to add a button to load the price from the controller. Let's change the product_details view at ReactiveWebStore/app/views/product_details.scala.html:

@(id: Option[Long],product:Form[Product])(implicit flash:Flash)

@import play.api.i18n.Messages.Implicits._

@import play.api.Play.current

@main("Product: " + product("name").value.getOrElse("")){ @if(product.hasErrors) {

Sorry! Some information does not look right. Could you review it please and re-submit?


@helper.form(action = if (id.isDefined) routes.ProductController.update(id.get) else routes.ProductController.insert) {

@helper.inputText(product("name"), '_label -> "Product Name") @helper.inputText(product("details"), '_label -> "Product Details")

@helper.inputText(product("price"), '_label -> "Price")



Great! Now we have a button that loads the data from the controller using JQuery. You can realize that the button Load Rnd Price has an onClick property, which calls our JavaScript function.

Now you need to open your console and type $ activator run to compile and run the changes as we did to ReactiveWebStore.

This command will give the following result:

ReactiveWebStore$ activator -Dsbt.task.forcegc=false [info] Loading global plugins from /home/diego/.sbt/0.13/plugins [info] Loading project definition from



[info] Set current project to ReactiveWebStore (in build



[ReactiveWebStore] $ run

--- (Running the application, auto-reloading is enabled) ---

[info] p.c.s.NettyServer - Listening for HTTP on /0:0:0:0:0:0:0:0:9000 (Server started, use Ctrl+D to stop and go back to the console...)

[info] application - ApplicationTimer demo: Starting application at 2016-07-03T02:35:54.479Z.

[info] play.api.Play - Application started (Dev)

So open you browser at http://localhost:9000, and go to the product page to see our need feature integrated and working like a charm. Keep in mind that you need to have ng- microservice working in another console window; otherwise, our application will use static fallbacks.

The new product feature will be shown at http://localhost:9000/product/add as seen in the following screenshot:

So if you click on the Load Rnd Price button, you will see something like this:

If you take a look at the application log in the activator console, you will see something similar to this:


[info] play.api.Play - Application started (Dev)

[info] application - index called. Products: List()

[info] application - blank called.

ODD: 722.8017048639501 EVEN: 863.8229024202085 ODD: 380.5549208988492 EVEN: 947.6312814830953 ODD: 362.2984794191124 ODD: 676.978825910585 ODD: 752.7412673916701 EVEN: 505.3293481709368 EVEN: 849.9768444508936 EVEN: 99.56583617819769

Alright, that's it. We have everything working!


In this chapter, you learned the core principles of reactive application guided by the Reactive Manifesto. You also learned how to create reactive applications using RxScala. We then explained how to call other internal and external web services using the ws library. Then you learned to serialize and deserialize JSON using the Json Library. Moving on, you learned how to create simple microservices using the Play framework support.

In the next chapter, we will continue building our application, and learn how to test our application with JUnit and ScalaTest.


< Prev   CONTENTS   Source   Next >