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: https://github.com/mxcl/homebrew

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               controllers.Assets.at(path=”/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=”@routes.Assets.at(“javascripts/modernizr-1.7.min.js”)”></script>
<link rel=”stylesheet” type=”text/css” href=”@routes.Assets.at(“css/reset.css”)” media=”screen” title=”html5doctor.com 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=”@routes.Assets.at(“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=”@routes.Assets.at(“css/general.css”)” media=”screen” />

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

now I have this html5 framework fully integrated to play.

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

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

%d bloggers like this: