Posts

Showing posts from 2014

Bootstrap 3 Forms Tutorial

Image
Forms are essential for web applications, one can see them while logging in an application, editing a profile or registering for an account. Bootstrap greatly simplifies form styling by providing special style classes and providing automatic styling of form controls. To learn how to style forms and form controls we’ll discuss a registration form shown below.

The code for this form as well as live demo could be seen on Bootsnipp. First things first, let’s review a basic form template.

A form is placed in a .container for proper formatting. Then, in line 3 an HTML form tag is seen with a class .form-horizontal and a role form. The former is used to produce a form with labels, such as “Password” in the above image, that are on the same line as inputs, the latter is to describe meaning of the element, for example, an anchor tag can be styled to look like a button, in this case a role attribute tells that the anchor is used for playing a button’s role. After that, in line three and seven the…

REST: Uniform interface

In the previous post REST architecture style was discussed, one of the pillars of which is the uniform interface which is the topic of the current post. While REST is not limited by a particular protocol, HTTP is the protocol which is used to implement RESTful applications  in day-to-day life, so the discussion below will be based on HTTP. What the REST puts a constraint on is the interface, in other words, interaction and implementation details are guided by a set of rules.
The constraints on the service interface in order to be called REST as described in the Dr. Roy Fielding’s thesis are: identification of resources; manipulation of resources through representations; self-descriptive messages; hypermedia as the engine of application state.
World Wide Web widely uses three technologies - hypermedia, HTTP and URI - which can be be adopted for creation of Web services or APIs in modern jargon. Not every service or API  that relies on HTTP protocol can be called RESTFul, another term mean…

What is REST?

REST stands for REpresentational State Transfer, a term coined by Dr. Roy Fielding in his seminal work Architectural Styles and the Design of Network-based Software Architectures. In a nutshell, it is an architectural style for building applications for the Web.
Firstly, REST is based on a Client-Server style which is widespread in network-based systems, and one of its main virtues is separation of concerns that can lead to the simplification of the server component’s implementation. Secondly, the server side of an application built using REST style is stateless, while all the state is maintained by a client and sent to the server when necessary. For example, if a customer browses a store data, the information may be paginated and when the customer presses the “next” button, client informs the server what page number it wants to see in contrast to the situation when the server stores the context information of its interaction with a client. The upside of such an approach could be impro…

Understanding Bootstrap 3 Grids

Image
In a previous post Twitter Bootstrap essentials were discussed. Today we'll survey an important part of the framework called grid.

Bootstrap grid is a structure which allows one to create page layouts. Grids can contain up to 12 columns in each row, if you place more than that, additional columns will be wrapped onto the next line. Moreover, each column can have a width of more than one, but the sum should be equal to 12 as is shown on the image below. For example, you could have 12 columns of width 1 or 6 columns of width 2 or 2 columns of width 6 or even 3 columns of widths 3, 6 and 3. It is important that the sum should be equal to 12.
A snippet of code showing a basic grid structure is shown below. The grid, as well as all site content, should be wrapped in a divwith a .container or .container-fluid class. Then everything that is to be placed into a grid should be divided into rows an the content of rows should be subdivided into columns. The only possible children of divs …

Getting started with Bootstrap 3

Image
Twitter Bootstrap is an extremely popular front-end framework designed to build websites and web applications. In fact, it is a collection of tools leveraging HTML, CSS and some optional Javascript extensions like dialogs or tooltips and is used to facilitate user interface creation. Its documentation can be found here.  The simplest way to start working with Bootstrap is to use a content delivery network or CDN which delivers all the necessary files via the Internet. To use it all that is necessary to do is to add a couple of links to your HTML file as will be discussed later. A code snippet adapted from Bootstrap Getting started guide is shown below.

It is an HTML file. In this template the <!DOCTYPE html> declaration informs the browser that this page is authored using HTML5. The meta tag <meta charset="utf-8"> is used to instruct the browser to use utf-8 encoding. Then the X-UA-Compatible meta tag has something to do with Internet Explorer and in particular if …

How to run Glassfish 4 Web Application on OpenShift PaaS

There are a few options to publish a Glassfish 4 application in the cloud. One of them is OpenShift Platform-as-a-Service (PaaS), and although it doesn't offer a Glassfish cartridge, it provides a Do It Yourself (DIY) cartridge or application type which could be used to deploy a Glassfish web application.

 If you choose to work with Glassfish application server rather than JBoss or WildFly which are offered by the platform, you workflow will be a little bit different. When working with the Red Hat products, supported by the PaaS, one can publish an application in similar way to publishing to a local application server, particularly when using tools like JBoss Developer Studio. In the case of Glassfish a DIY application containing a Glassfish distribution should be created and then published to OpenShift and a war-file containing your application should be placed in the autodeploy folder of the Glassfish. In fact, you are publishing not your app but a DIY application, which is you…

JavaScript Module pattern for Java Developers -- Part 1

Lately I have spent some time figuring out what a JavaScript Module pattern is as well as its purpose. After that I decided to write down the nitty-gritty.

Let's take a simple example of a Java BankAccount class. It has two private fields to store the owner of an account and its balance. In some real-world application a reference to a more elaborate data type such as a Client class which holds some other useful data can be used instead of name and BigDecimal class should be used for precision purposes. However for our discussion a simple String and double would suffice.

This class has two private fields to store its data. It is important that the balance field is hidden from the outside world in order two prevent incorrect manipulation of the account. This is done using a private keyword. However, the account should be manipulated somehow, so the class exposes three public methods to work with balance, which allow to increase and decrease the deposited sum in the correct way as w…