Tutorial #2: Using WebJars, jQuery, Bootstrap & Bootswatch with Play application


We have already discussed about the Play development environment in Tutorial #1.

So, In this blog we would set up the WebJars, jQuery, Bootstrap & Bootswatch with Play Framework which would drive us through rest of the tutorial series. We would be running this blog as a series and we would be looking at various aspects of play with this blog.

In this tutorial we will discuss about the following topics:

  • WebJars : A client-side web libraries (e.g. jQuery & Bootstrap) packaged into JAR files.
  • Bootstrap : The most popular HTML, CSS, and JS framework
  • BootswatchFree themes for Bootstrap

WebJars work with most JVM-based containers and web frameworks. Using a WebJar requires:

  1. The WebJar needs to be a dependency of your application
  2. The WebJar needs to be in your application’s running CLASSPATH
  3. Your container, web framework, or application needs to serve static assets from Jar files

Instructions for Play 2.3 (Sample Source)

WebJars can be added as dependencies to an app by simply adding them to the build.sbt file. There is also a helper library named webjars-play that makes it easy to reference WebJar assets. Here is an example build.sbt file with webjars-play and the bootstrap WebJar as dependencies:

build.sbt


libraryDependencies ++= Seq(
"org.webjars"    %%   "webjars-play"          % "2.3.0-2",
"org.webjars"    %    "bootstrap"             % "3.1.1-2",
"org.webjars"    %    "bootswatch-cerulean"   % "3.3.1+2",
"org.webjars"    %    "html5shiv"             % "3.7.0",
"org.webjars"    %    "respond"               % "1.4.2"
)

In Play 2.3 WebJars are automatically available as static assets. If you have a route like:

GET /assets/*file controllers.Assets.at(path="/public", file)

Then a WebJar file like `bootstrap.css` is available at:

/assets/lib/bootstrap/css/bootstrap.css

The webjars-play helper library has a wrapper around the Play Static Asset Controller that can locate and serve WebJar assets. A new route to WebJarAssets needs to be added to the conf/routes file:

conf/routes

GET   /webjars/*file   controllers.WebJarAssets.at(file)

To use Play 2’s reverse routing to resolve the URL to an asset you can do the following in a template:

<link rel="stylesheet" media="screen" href="@routes.WebJarAssets.at(WebJarAssets.locate("bootswatch-cerulean", "bootstrap.min.css"))">
<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">

<script src="@routes.WebJarAssets.at(WebJarAssets.locate("jquery.min.js"))"></script>
<script src="@routes.WebJarAssets.at(WebJarAssets.locate("bootswatch-cerulean", "bootstrap.min.js"))"></script>
<script src="@routes.Assets.at("javascripts/app.js")" type="text/javascript"></script>

Bootstrap : Bootstrap WebJar here

Bootswatch : Bootswatch full distribution as WebJars here

Screenshot from 2015-03-23 00:51:00

Now we know about client-side web libraries and these libraries are free for use. So we will use these libraries for the up coming  tutorials. We would look at how we can make it more usable and readable, then we would be adding next tutorials related to Play Framework. If you have any question then feel free to comment on the same 🙂 Stay tuned.

Advertisements

About Anand Kumar Singh

Hi, I’m Anand Singh and I specialize in Computer Software. I’m passionate about what I do, and I love to help people. Nothing is more fulfilling than being part of a team with similar interests, and an organization that values its employees. I'm Lead Software Engineer at Sapient. Having 5+ years of experience in Java, Grails/Groovy and Scala language. Anand also knows about Javascript, jQuery, CSS and other UI design technologies. Certified developer in: * Principles of Reactive Programming – Coursera * Functional Programming Principles in Scala – Coursera * Functional Program Design in Scala – Coursera * Introduction to Big Data with Apache Spark – edX * Oracle Certified Associate (OCA) * Sun Certified Java Programmer (SCJP) I'm passionate to work with upcoming technologies and bleeding platforms providing the new way to programming & development. He is actively involved in development & maintenance of several software projects. He has been enjoying Scala for more than a year now. Anand completed his MCA from IGNOU. As a Developer, I'm continuing my journey by actively collaborating with other Developers in my field. I'm actively contributing on the TechMonad & Playing Scala platform. I likes to spend his free time in Cooking, watching Discovery for new Technology and visiting new places with friends.
This entry was posted in Akka, Bootstrap, Bootswatch, JavaScript, jQuery, Play Framework, Scala, Web, WebJars and tagged , , , , , , , , , , . Bookmark the permalink.

5 Responses to Tutorial #2: Using WebJars, jQuery, Bootstrap & Bootswatch with Play application

  1. Pingback: Tutorial #1: Getting started with Play Framework 2.3.4 | Knoldus

  2. Pingback: Tutorial #2: Using WebJars, jQuery, Bootstrap & Bootswatch with Play application | knoldermanish

  3. Pingback: Tutorial #3: Getting started with HTTP Programming in Play Framework | Knoldus

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