Play Framework + 52 framework – My first steps

It’s time to at least try the play framework. Versions 1.2.x are still up to date but I have directly dealt with the 2.0 .

On the mac simply install brew if not already done. The instructions are simple and are described here:

then open a terminal and type the following command to install play:

brew install play

then create a new app:

play new MyApp

once created run it to see if everything is ok:

cd MyApp

play run

your app should be running at localhost:9000

now what if you would like to include some HTML5 framework such as 52framework.

Play defines defaults CSS and Javascript folder but I just want to leave the html5 framework structure just as downloaded, with its js and css folder.

I need to copy all this in the public folder of my play app, now I have public/js, public/images, public/css subfolders.

Thanks to the wiki there is an easy way to reference those new public folders.

Add :

GET  /assets/*file     ”/public/”, file)

to the routes file. Then I have copied a sample 52 framework page in a scala.html file and changed the css and js reference such as :

<title>52framework – The framework from the future, HTML5, CSS3, and more!</title>

<script type=”text/javascript” src=”“javascripts/modernizr-1.7.min.js”)”></script>
<link rel=”stylesheet” type=”text/css” href=”“css/reset.css”)” media=”screen” title=” Reset Stylesheet” />

<!– in the CSS3 stylesheet you will find examples of some great new features CSS has to offer –>
<link rel=”stylesheet” type=”text/css” href=”“css/css3.css”)” media=”screen” />

<!– general stylesheet contains some default styles, you do not need this, but it helps you keep a uniform style –>
<link rel=”stylesheet” type=”text/css” href=”“css/general.css”)” media=”screen” />

<!– grid’s will help you keep your website appealing to your users, view website for documentation –>
<link rel=”stylesheet” type=”text/css” href=”“css/grid.css”)” media=”screen” />

now I have this html5 framework fully integrated to play.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: