How to implement a Session Timeout in Play Framework 2



If you follow the Play Framework 2 guide for implementing authentication: http://www.playframework.com/documentation/2.2.2/JavaGuide4 – you will notice that there is no session timeout in Play Framework 2. It was there in Play Framework 1, but Play Framework 2 follows a different approach.
I you want to implement your own session timeout, then follow the guide for setting up authentication, by extending the Security.Authenticator, and store a timestamp in the session and keep extending it every time a request is made.
Here is how I did it:
public class Secured extends Security.Authenticator {
    public static final String UNAUTHENTICATED = "unauthenticated";
    public static User getLoggedInUser() {
        if (session("userId") == null)
            return null;
        return User.findById(Long.parseLong(session("userId")));
    }
    public static String getLoggedInUsername() {
        if (session("userId") == null)
            return null;
        return User.findById(Long.parseLong(session("userId"))).getUsername();
    }
    @Override
    public String getUsername(Http.Context ctx) {
        // see if user is logged in
        if (session("userId") == null)
            return null;
        // see if the session is expired
        String previousTick = session("userTime");
        if (previousTick != null && !previousTick.equals("")) {
            long previousT = Long.valueOf(previousTick);
            long currentT = new Date().getTime();
            long timeout = Long.valueOf(Play.application().configuration().getString("sessionTimeout")) * 1000 * 60;
            if ((currentT - previousT) > timeout) {
                // session expired
                session().clear();
                return null;
            }
        }
        // update time in session
        String tickString = Long.toString(new Date().getTime());
        session("userTime", tickString);
        return User.findById(Long.parseLong(session("userId"))).getUsername();
    }
}
Then just add a sessionTimeout=15 (in Minutes) to your conf file.

Navigation and Navigation bar

Why Website Navigation?
  • Websites are rarely single pages
  • Need to provide visitors an intuitive means of getting around your website
  • Several commonly used navigation patterns used on websites
Information Architecture
  • Structure of a system with respect to the way the information is:
    • Organized
    • Labeled
    • Navigation methods provided to access the information
  • Need to consider when designing websites
  • Dictates the provisioning of navigation on websites
Website hierarchy


Navigation bars
  • Users often expect it at the top of the website
  • Contains links to various pages within your website
  • Dos and Don'ts
    • Dos  : Use simple, user-friendly terms
    • Dos  : Standardize navigation
    • Dos  : Provide indication of the location within the navigation hierarchy
    • Dos  : Use standard web conventions:
      • Clicking on a logo takes you back to homepage
    • Don'ts : Have too many items
    • Don'ts : Use generic labels
Breadcrumbs


  • Secondary navigation
    • Usually placed below the primary navigation and above the content
  • Indicator of the current page's location within a navigational hierarchy
    • Path based: set of steps
    • Location based: hierarchy
    • Attribute based: set of choices
Other Navigation Aids
  • Tab
  • Pills
  • Pagination
  • Dropdowns
  • Accordion
  • Tags/Tag clouds
  • Scrollspy
  • Affix

Bootstrap Grid System

Viewport

<meta name="viewport" content="width=device=width,initial-scale=1">
The viewport meta tag : 

  • Ensures that the screen width is set to the device width and the content is rendered with this width in mind
  • Designing the websites to be responsive to the size of the viewport
    • Bootstrap grid system
Bootstrap grid

Designed to be:
  • Responsive
  • Mobile first
  • Fluid


- Bootstrap makes available four classes

  • xs for extra small
  • sm for small
  • md for medium
  • lg for large screen sizes
- Each row in Bootstrap grid system is divided into 12 columns
- Use the classes .col-xs-*, .col-sm-*, .col-md-*, .col-lg-* for defining the layouts for the - various screen sizes
- Specify how many columns each piece of content will occupy within a row, all adding up to 12 or multiple thereof.

Bootstrap grid detail


Using column classes



Using column push and pull


Column offsets


Nesting columns



Responsive Design

Why Responsive Design?
  • Users increasingly accessing websites from a variety of devices of different screen sizes
  • One size fits all no longer a possibility!
  • Adapt to the user's "viewport"
    • Build it into the core of the site
Another term you will often hear people talking about in the context of responsive design is Mobile First. What exactly is Mobile First design? Traditionally, when people were designing their websites for both larger screen windowed devices like laptops and desktops and smaller screens, they would often do the layout for the larger screens first, and then try to adapt their content to be appropriately displayed on the smaller screen. So in this diagram here that you see the traditional approach would have been first to design for a laptop and then adapt .


Increasingly, people are adopting the mobile first approach. What this means is that you first design your website with the mobile screen size in mind. First, do all your layout for the mobile screen size, and then start adapting your website design for larger screen sizes. So as your screen size expands the content will automatically flow and then adjust itself to occupy the larger width of the screen that becomes available on larger screen devices.

In order to achieve mobile first design, there are three things that need to come together:
  • First, your front end UI framework should be able to support a grid based system. This has been increasingly been opted by most front end UI frameworks. So look at anyone of the front end frameworks that is in use, and you will see that they will have some kind of support for a grid-based system.
  • The second aspect is to have fluid images, or what we call responsive images, so you can make your website images automatically adapt to the size of the screen. So this again has to be built-in. Bootstrap has good support for fluid images or responsive images already available within the Bootstrap CSS classes.
  • The third kind of support that is required is what we call media queries.
    • CSS technology to apply some styles based on the size of the viewport
      • e.g.,
        @media screen and(min-width: 600px){
              /* CSS styles customized for desktop */
        }



Getting Started with Bootstrap (Part 2)


Bootstrap Container class
<div class="container">... </div>
  • Container for all the content of the site
  • Fixed width (width depends on screen size)
  • Use as the outermost div to wrap all the site content for the grid to work correctly
  • .container-fluid class allows full width container
Bootstrap Rows
<div class="row"> ... </div>
  • Divide the page into multiple rows
  • Rows act as horizontal grouping for columns
  • Rows must be inside containers
Jumbotron
<div class="jumbotron">...</div>
  • Lightweight, flexible component for showcasing key content, e.g., company name, logo and key information.
  • Can be used outside a container to span the entire screen width
    • Use a container inside if you wish to contain the content within a fixed width

Getting Started with Bootstrap (Part 1)

Getting Bootstrap

Compiled Bootstrap source
  • Bootstrap files
  • Minified files available
  • Need to include these files
    within your project













Using bootstrap
Include these lines in the <head> of your html code 
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
Include the CSS files in the <head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
Include the Javascript files at the bottom of the <body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Using Bootstrap CDN
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"><script>