Getting Started with Play

Well, before we get right on to installing play framework in our computers, let’s talk about what is play framework in the first place and why do we need it?

play-framework-tutorial_0

Well, there are many answers to the above questions, but let me make a brief introduction on play framework.

For starters, a framework is a large body of pre-written code, where we can add our own code to solve problem in a specific domain. There are plenty of frameworks available in today’s software field, where all of them have their own specialty and play framework is one of them.

scala-logo

So, when we are talking about play, it is a web framework based on java/scala used to build web applications. It is also an open source framework (Anyone can use), which is multi threaded and which provides Asynchronous I/O (input/output processing that permits other processing to continue before the transmission has finished).

typesafe_activator

We can build much more complex, responsive web applications using the play framework, though it is very hard to learn. But once you get to know your way in and out of play, you will find it much more convenient and interesting, you must take my word for it.

Let’s Get Started

So, why waste another minute? Let’s build our first “Hello World” web application.

Firstly,

Capture
Java installed

 

Capture1
IntelliJ Installed
Capture2
IntelliJ IDEA Ultimate
Capture3
Installing Scala

 

 

Now you must be wondering, what are all these installations? Well, to build anything (ex: House), we need to set up the proper environment to lay the foundation. So, play also seek a compatible environment to let us build responsive web applications.

The Typesafe Lightbend Activator is a template library that contains all the pre-built templates, which we can build our own project on top of the template that is already been made. This makes our life easy than building everything from the scratch.

Secondly, we must run the activator UI,

Using the file system to run the “activator.bat” file (windows)

  • Go inside the Typesafe Activator file (activator-dist-1.3.12) which you have extracted, which will look something like this.
Capture 4
Activator file

 

  • Click on the “bin” folder.
Capture 4 - Copy
Clicking on bin folder

 

  • Once you are inside the bin folder you might see something like this,
Capture 4.1
Inside the bin folder

 

  • Right-Click on the “bat” file and open it. (If you get any sorts of warnings, just select “continue”)
Capture 4.1 - Copy
Clicking on the activator batch file

 

Or you can use command prompt to run the “bat”.

  • Navigate to the directory containing the “bat”file
  • Run: “activator ui
Capture 5
Running activator using command line

 

Note: If you are a mac or a linux user, you can view the “README” file located in the Typesafe Activator file (activator-dist-1.3.12), Or visit (http://www.lightbend.com/activator/template/hello-play-2_3-scala).

Capture 4 - Copy (2)
Read me file

 

Thirdly, your activator ui will open in a browser and will look something like this,

Capture 6
Activator UI

 

  • Then click on seeds, to as we are going to create a play java seed app, Search for “Play Java Seed” and click on it
Capture 7
Create application

You can rename the file name into a different one, but in this case, I’m naming my file as “HelloWorldPlay-java” and specifying the location into my “Desktop”.

 

  • Then click on the create app and it will show something like this,
Capture 8
Processing the application

And trust me, it will take more than one minute.

 

  • Once, your app finishes being created, you will be able to see the apps dashboard,
Capture 9
The created play project

 

  • You can then click on the “Code” to view the template which was built by the activator.
Capture 10
Auto generated code

It’s always better to use a separate IDE when it comes to coding. As the code is based on java I prefer using IntelliJ IDEA, so ill create an IntelliJ project.

 

  • Once the project has been created, we can open IntelliJ IDEA and import the project, to do that you should click on import projects and select the project which you have saved,
Capture 11
Importing a project

 

  • Once you have imported the project, IDEA will ask you whether to import the project as an SBT project. In that case just select SBT as play projects must be SBT projects, and click on finish,
Capture 12
Importing as a SBT project

 

  • Once your project finishes building in IntelliJ, the project structure will look something like this,
Capture 13
IntelliJ project structure

“app” is the folder that contains all the controllers, filters, services, and views. We can edit them and add components to make our project.

 

  • Now, let’s run the default app. Go back to the browser and click on the run tab,
Capture 14
Running the default project

Once you click on the run tab, slide bar will be opened. Then click on run, and you will get a link of “http://localhost:9000/“. Open a new tab and copy-paste the link.

 

  • You default app will look like this,
Capture 15
Default application

The documentation of the play framework is given in default. Your first play application is successfully created.

 

Fourthly, when re-creating the template into a “Hello World” application,

  • Let’s set back to IDEA, and let’s go inside the home controller.
Capture 16
Home controller

As we can see in the home controller, there is a class that extends to the controller super class, which is used to handle the actions related to the html page. The method “index()” is therefore called in the “routes” file using a GET method.

 

  • The message can be changed from “Your new application is ready.” to “Hello world!“.
Capture 17
Message needs to be displayed

 

  • All set. oh wait, don’t you like to have an custom header also? for that we have to get into views folder and pay a visit to “index.scala.html“,
Capture 18
index.scala.html file

This is the file where main html header string is written, which later pass as an argument to “main.scala.html” file, where the main html page is present.

 

  • As there is an default header, let’s try changing it from “Welcome to Play” to “Hello World“,
Capture 19
Changed header

 

wait what? that’s all?

Now you have to save the files, and re-run or reload the browser. Don’t you find it easy when you just have to reload the web page, instead of compiling every time when you make a small change?

Capture 20
Displaying Hello World!

 

Well, I can say, setting up an play application is bit complicated. But once you understand enough, you will find this, like the simplest way of building an responsive web application.

Written By Binu Senevirathne

2 thoughts on “Getting Started with Play

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s