Tuesday, December 18, 2012

Playing around with Play framework

I did a presentation on the Play framework using Scala for the Miami Java User Group (JVM).  Below is the presentation along with the code to create a small application.

The first thing that you need to do is to download/install Scala and Play into your computer.

To create the application, go into your terminal console and do the following:
  1. play new foobar 
  2. Keep the same name of the application 
  3. Select the Scala template (1) 
  4. Change the directory to the foobar directory
  5. type "play run" 
  6. Go into http://localhost:9000 
You should be able to view the "Welcome" page for Play.

The structure is very similar to Ruby on Rails.
  • app: is the directory for all classes in the application 
    • controllers: all the controllers/actions for the applications 
    • models: domain objects 
    • views: the scala html pages 
  • conf: has all the properties files including the routes 
  • logs: the logs of the project 
  • project: build classes 
  • public: CSS and others 
  • target: compiled classes 

Looking at the conf/routes we can see the following: This says that the moment that the application goes to the "/" it will call the controller Application and invoke the "index" method.
The controller has the following code: The index method calls an Action and sends an OK, which is nothing but a HTTP 200 code, and calls the page views.html.index with the string parameter: "Your new application is ready".

If you look at the apps/views/index.scala.html you will see the following:
The message that was passed by the Application controller is stored in the message: String. The application calls a main html page and passes two parameters: "Welcome to Play 2.0" and "message".

If you look at the app/views/main.scala.html you can see that the first parameter is the "title" and the second parameter is the HTML content:
Remove the "@play20.welcome(message) so that the page looks like this: Render the page again, and you will see only the parameter passed by the controller. Lets go to the controller and edit the text by changing it to "Playing around".
Go back to the web browser and refresh the page. As you can see, the application renders automatically. The one thing that I like about the Scala programming language is that it is statically typed, so I can check in my editor. Lets configure the application as an Eclipse project.

Go to the console application and type control "D" or control "C" to stop the application. Now, type "play". You should see the play console. By typing "eclipsify" the play application will be ready to be imported as a project for Eclipse. Just go into Eclipse and import the project (file, import, select foobar directory). Once you are done type "run" to start the application.

As I mentioned, the conf/routes has the configuration for all the routes. If we add a route:
And go to http://localhost:9000/foo
You should see the same as if you go to http://localhost:9000.
Lets create an application that create a bar. The first thing we need to do is to create a model object named bar. Create a model by creating a Scala class in apps/models/Bar
The object will have only an id and a name. Now, we need to create a way to persist to a database. For Play the DB of choice is H2. It is a memory database and it is easy to work for development. To enable the database go to conf/application.conf and uncomment two fields:
Now that we have the drivers and the database, we need to create a script to create the database. Create a file for the DB schema inside conf/evolutions/default/1.sql
Refresh the page and you should be prompted to load up this script (or evolution). Just click on "apply this script now!"

Now, lets go back to the Bar model class and add the following:
This section will be the domain, which simply creates the bar and inserts it into the database. As you can see, we use the anorm API to map the SQL. This is not an ORM but more like a MyBatis (an SQL mapper).

Now, lets go to the Application controller and add the two things: the controller and the view. The first thing we need is to intercept the HTML form and add the action for the controller. Here we add the action and send a message depending on the type of transaction (error or success). We need to create the view form, but first we need to add the route to the controller.
Now, lets create the form view in the views/index.scala.html: You should be able to see the form in the application. Lets try to add a "test" bar. You shouldn't have any errors.

Now, we need to displays all the bars added. To do this, lets first modify our domain/model Bar object and controller. Using the allBars, we will be able to get all of the records from the bar table. For the controller, we will add the following: Now, we need to add the route in the conf/routes: If we go to http://localhost:9000/bars

You should be able to see something like this: We will want to render this URL and get all the JSON objects and put them into the index page asynchronously via CoffeeScript. First, lets create a folder app/assets/javascripts/index.coffee Here, the application will go to bars URL and fetch all the records, then it will iterate through the records, and append a list of all the bar names. Lets add the JavaScript header and bars into the index.scala.html

Now, lets add the JavaScript into the app/views/index.scala.html
You should be able to notice two things. You should be able to see all the inserted bars, and when you upload a bar, it should render automatically.

No comments:

Post a Comment