Category Archives: HTML

Tutorial: AJAX calling in Play Framework 2.3.4


Cool AJAX integration with Play 2.3.4

Knoldus

In this tutorial we will discuss about the following topics of AJAX calling in Play Framework 2.3.4:

  1. Generating a Javascript router
    1. Embedded router
    2. Router resource
  2. Use of Javascript router
    1. jQuery Ajax
    2. Success/Error handler for each router
    3. Single Success/Error handler for all routers

View original post 478 more words

Advertisements

Tutorial: Post Update on LinkedIn via Scribe using Scala


LinkedIn via Scribe using Scala & Play.

Knoldus

To post an Update on LinkedIn via your application, that is being built with Play 2.3.x, follow these steps ( this post summarizes the work done step by step).

1) Create a LinkedIn app (if you do not have one already)

Click here – LinkedIn’s Developer Quick Start Guide and create an app. Enter all the details including Site URL. The Site URL could be something like http://www.example.com (but it should be a valid site URL). Also, select the rw_nus setting under the OAuth User Agreement section (otherwise you wont be able to post updates on LinkedIn).

Once you have saved this app, you will get API Key & Secret Key. Take a note of this API Key & Secret Key. We would use them in our code.

2) If you are using Play, then add the API Key, Secret Key & Context URL(Callback URL) in application.conf file.

3) Download a LinkedIn login image from linkedin.png &…

View original post 98 more words

Dribbling with Filter.js: client-side JS filtering of JSON objects


Knoldus

Dribbling Filter.js

Play framework with client-side JS filtering of JSON objects and rendering HTML snippets via jQuery.

Big chunk to display? Interactive filtering? Most importantly it has to be really fast. Isn’t it like dribbling against Netherland! Big ground, lots of hooting and most importantly have to be fast and win
 
UI programming is an exciting ground to play, That’s why i chose reactive platform play framework. But problem was how to dribble at client side. Need an api to provide fast filtering of data. Answer is Filter.js

In this post we are integrating Filter.js with Play Framework for reactive data streaming using Ajax and filtering data on client side using Filter.js magic.

Filter.js is client-side JSON objects filter to show/hide HTML elements. Multiple filter criteria can be specified and used in conjunction with each other.

Mustache.js is a logic-less template syntax. It can be used for HTML, config files…

View original post 162 more words

filter.js – Client side search filtering using JSON and jQuery


I am planning to integrate it with Play framework.

Josh Software - Where Programming is an Art!

Speed for search result filtering is critical. Its fine for site users to wait for some time (maybe a few seconds) to load the search results but after that filtering better be fast otherwise people lose interest.

To give a simple example of how things are not user friendly is if you go to ebay.com or ebay.in. Its frankly appalling! For every click and every selection, the entire page refreshes. Though its good for showing Ad impressions (which I hate) when browsing an e-commerce site, the usability is lost.

On the other hand, have a look at snapdeal.com or groupon.com and it tells a different story. They fire Apis to their server to get json data and render that via Javascript. Usability is excellent. (no wonder they are doing so well!)

We did client-side search filtering in a couple of portals we built and realized that we should generalize this. That…

View original post 439 more words

A simple CRUD application in Play! Framework using Kundera and Cassandra as a Database.


playing-kundera-cassandra: Play 2.3.0, Kundera & Cassandra

Knoldus

playing-kundera-cassandra: Play 2.3.0, Kundera & Cassandra

A simple CRUD application in Play! Framework using Kundera and Cassandra as a Database.

  • Accessing a Cassandra database, using Kundera.
  • Achieving, Futures to use more idiomatic error handling.
  • Accessing JS & CSS libraries by WebJars.
  • Bootswatch-United with Twitter Bootstrap 3.1.1 to improve the look and feel of the application

Instructions :-


  • The Github code for the project is at : playing-kundera-cassandra
  • Clone the project into local system
  • To run the Play framework 2.3.0, you need JDK 6 or later
  • Install Typesafe Activator if you do not have it already. You can get it from here: download
  • Install Cassandra if you do not have it already. Instructions
  • Start Cassandra Server and create schema/tables
[default@unknown] create keyspace EmployeeExample;
395c9500-bf8d-3985-95a2-ddc055090131
[default@unknown] use EmployeeExample;
Authenticated to keyspace: EmployeeExample
[default@EmployeeExample] create column family employees with comparator=UTF8Type and default_validation_class=UTF8Type and key_validation_class=UTF8Type;
840d66b1-a54a-329e-9a43-dc9f373e9386
  • Execute activator clean compile to…

View original post 90 more words

playing-reactive-mongo: Classic CRUD application in Play Framework 2.3.0 with ReactiveMongo, WebJars and Bootswatch-United


Knoldus

Play 2.3.0 application with ReactiveMongo – reactive, asynchronous and non-blocking Scala driver for MongoDB.

This is a classic CRUD application, backed by a MongoDB database. It demonstrates:

  • Achieving, Futures to use more idiomatic error handling.
  • Accessing a MongoDB database, using ReactiveMongo.
  • Achieving, table pagination and sorting functionality.
  • Replaced the embedded JS & CSS libraries with WebJars.
  • Play and Scala-based template engine implementation
  • Bootswatch-United with Twitter Bootstrap 3.1.1 to improve the look and feel of the application

Instructions :-


  • The Github code for the project is at : playing-reactive-mongo
  • Clone the project into local system
  • To run the Play framework 2.3.0, you need JDK 6 or later
  • Install Typesafe Activator if you do not have it already. You can get it from here: download
  • Execute activator clean compile to build the product
  • Execute activator run to execute the product
  • playing-reactive-mongo should now be accessible at localhost:9000

References :-


View original post 68 more words

Automated UI testing in a Play Scala Application using FluentLenium


This is best implementation for testing application in Play Framework.

Knoldus

In this blog I am going to demonstrate how to do automated testing of UI of a Play Scala application using FluentLenium.

FluentLenium is a framework that helps to write Selenium tests. FluentLenium provides us a fluent interface to the Selenium Web Driver. FluentLenium allows us use the assertion framework we like, either jUnit assertions or Fest-assert.

To start building testcases using FluentLenium follow the below steps:

1) Add following dependencies in build.sbt file.

2) Make an object of the page which is to be tested. For example :-

In test folder add a file IndexPage.scala of index.scala.html page & add following code to it:

This will create an Object of the Index page which can be used anywhere while making the testcases for the Application.

3) Now we can write testcases to test UI of Application. For example :-

In IntegrationTest.scala  remove anything that is written previously & add following code…

View original post 40 more words

Play Framework 2.2 with WebJars client-side web libraries


WebJars are client-side web libraries (e.g. jQuery & Bootstrap) packaged into JAR (Java Archive) files.

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.

Do the following steps to implement WebJars client-side web libraries with Play Framework:

  1. Add following entry into build.sbt file.
"org.webjars" %% "webjars-play" % "2.2.2-1",
"org.webjars" % "bootstrap" % "3.1.0",
"org.webjars" % "bootswatch-yeti" % "3.1.1",
"org.webjars" % "html5shiv" % "3.7.0",
"org.webjars" % "respond" % "1.4.2"

2. Add following entry into  conf/routes file.

# Map the webjar static assets to the /webjars URL
GET     /webjars/*file                    controllers.WebJarAssets.at(file)

3. Add following entry into app/views/main.scala.html file.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" media="screen" href="@routes.WebJarAssets.at(WebJarAssets.locate("bootswatch-yeti", "bootstrap.min.css"))">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="@routes.WebJarAssets.at(WebJarAssets.locate("html5shiv.js"))"></script>
  <script src="@routes.WebJarAssets.at(WebJarAssets.locate("respond.min.js"))"></script>
<![endif]-->

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="@routes.WebJarAssets.at(WebJarAssets.locate("jquery.min.js"))"></script>
        
<!-- Latest compiled and minified JavaScript -->
<script src="@routes.WebJarAssets.at(WebJarAssets.locate("bootswatch-yeti", "bootstrap.min.js"))"></script>

Check the application and the code base on bellow links:

The live application is currently hosted at : http://employee-self-service.herokuapp.com/
The Github code for the project is at : https://github.com/knoldus/Employee-Self-Service

This is the fourth edition of this application. If you have any changes then feel free to send in pull requests and we would do the merges 🙂 Stay tuned.

For more information about WebJars visit the website: http://www.webjars.org