User Interface

The way the application looks and responds is one of the most important considerations when building a website. Website should be pleasant to view, easy to traverse and interact with, and morph to fit on multiple screen sizes.

A fast and proven way to provide a great user interface is to utilize a front-end cascading stylesheets (CSS) library in combination with a JavaScript library (jQuery). At LineDrop, we use Bootstrap’s open-source and licensed themes to meet our needs.

jQuery

jQuery is a JavaScript library which simplifies syntax and provides powerful support for user interface scripting, asynchronous requests, and CSS. Bootstrap library depends on jQuery.

Referencing CDN

The preferred method for including jQuery in the project is to link to the content delivery network (CDN). For example:

Please see the latest version at http://code.jquery.com/

Adding to Assets

As an alternative to referencing CDN, you can download the jQuery library and add it to the project assets.

Open Google Chrome, and browse to https://jquery.com/download/ and click on the latest production build download link. For example, Download the compressed, production jQuery 3.4.1.

In Chrome’s top menu, select File - Save Page As… and save the file to the Desktop.

With IntelliJ open, drag the file into the public/javascripts directory of the project.

Add a reference to jQuery to the home template below the title tag. For example:

Bootstrap

Bootstrap is a front-end library that will make your application look great on desktop, phone, and tablet displays. In this guide, we will use the open source library; however, for your commercial project, we recommend purchasing a license to themed kit at https://themes.getbootstrap.com/.

If you are just getting started with building user interfaces, the best way to have your application look great is to find the design that you like and copy the HTML of the page. Paste the html into the view and modify it to work with your code. Here is the list of open source Bootstrap templates used in this guide:

Bootstrap depends on jQuery, please make sure to reference jQuery in the file.

Referencing CDN

The preferred method for including Bootstrap is to link to the content delivery network (CDN). For example:

Please see the latest version at Download Bootstrap.

Adding to Assets

As an alternative to referencing CDN, you can download the Bootstrap libraries and add them to the project assets.

Open Google Chrome, and browse to Download Bootstrap.

Scroll down to Compiled CSS and JS and click Download.

Unzip the downloaded archive.

With IntelliJ open, drag the bootstrap directory into the public directory of the project.

Add a reference to Bootstrap CSS and JS to the home template below the jQuery reference. For example:

Homepage Design

As a quick introduction to the front-end design, let’s use Bootstrap’s Cover Template to style the home page. To create examples for this guide, we copied the Cover Template HTML and then slightly modified it to work with the Play/Scala Web App.

Home Template

Repeating view elements such as header and footer HTML, references to stylesheets, jQuery, JavaScript functions, Google Analytics plug-ins, et cetera can be stored in Play Framework’s view templates. The same template may be used by multiple views.

Home template view will contain the header, footer, and external references for the index view.

Ctrl-click views and select New - HTML File.

Enter home_template.scala.html in the name field.

Double-click HTML 5 file.

If prompted, click Add to add the file to version control.

Browse to the project repository to view the file:

Example: LineDrop Play/Scala Web Application - Home Template

Copy the contents of the file and paste them into home_template.scala.html.

Copyright jQuery

An additional script named copyright.js is referenced in the template. Copyright.js writes a copyright notice including the year and the company name to the copyright element of the view. Add the copyright script:

Expand the public directory and ctrl-click on javascripts.

Select New - File. Name the file copyright.js. Add to Git when prompted.

Browse to the project repository to view the file:

Example: LineDrop Play/Scala Web Application - Copyright jQuery

Copy the file contents and paste into the new file.

Index View

The home page of the application is defined by the index.html file.

Browse to the project repository to view the file:

Example: LineDrop Play/Scala Web Application - Index View

Copy the contents of the file, open views/index.html file and paste the contents, replacing the original.

Index jQuery

An additional script named index.js is referenced in the file. Index.js script enables user interactions with the view. We will cover the function of index.js in depth later in the guide.

Add a new file by expanding the public directory and ctrl-clicking on javascripts.

Select New - File. Name the file index.js. Add to Git if prompted.

Leave index.js empty for now.

Background Image

The index view has a reference to a background image inside the style tag. Let’s add an image to the project assets to be displayed on the home page.

Browse to https://unsplash.com, click on Wallpapers, select the image you like. For example: https://unsplash.com/photos/c6M7AoevSXE.

Click the Download free button to download the file. Rename the file to home_background.jpg.

With the IntelliJ open, drag and drop home_background.jpg into the public/images directory. Add to Git if prompted.

Home Controller

Before we can test the design, we need to update the Home Controller to generate a CSRF token and pass it to the index view. To learn about CSRF filters please visit Play Framework - Scala Csrf - 2.8.x.

Expand app - controllers and open HomeController.

Add an import statement below import play.api.mvc._

Inside the index() method definition, update the action to:

Example: LineDrop Play/Scala Web Application - Home Controller

Test

Using the Terminal, browse to the project directory. Tip: you can type the beginning of the word and press the Tab key to fill in the rest.

cd ~/play-scala-web-app/play-scala-web-app

Run the project.

sbt run

Open Google Chrome and point to http://localhost:9000.

Ctrl-click anywhere on the page and select Inspect to view the final HTML rendering of the view inside of the template. Click the device icon to the left of the Elements tab to see what the page will look like when viewed on different devices.

...

The view includes a link to the Sign In page, a sign up feature, and a copyright notice. We will cover those functions later in the guide.

As you can see, using an existing front-end library greatly simplifies the design effort for the user interface. Pick a library, open source or licensed, choose a design that best fits the view that you are creating, copy and paste template HTML and modify it for your needs.

Review

As you follow the guide, your application will handle both GET and POST requests, pull data from the database, compute models, use utilities to streamline the codebase, and enhance the user interface with Bootstrap, AJAX, and JQuery. However, the fundamentals of the web application are just a few simple steps. Here is what happened when you tested the index page:

  1. Browser invoked the server and requested the root of the URL: http://localhost:9000.
  2. Server passed the request to the application.
  3. Application looked up the request route mapping defined in conf/routes.
  4. Controller, defined in app/controllers/HomeController, presented the index view.
  5. Index view invoked the home template and passed title, description, and content.
  6. Home template was rendered in the browser referencing the scripts and front-end libraries.
...

Commit and Push Changes

Select VCS - Commit from the top menu.

Review the files and directories and enter the commit message.

Click the dropdown arrow on the Commit button and select Commit and Push.

Click Push to confirm.


Next: Utilities