Posts on this Category



Tutorial: Implementing Infinite Scroll with AngularJS and ngInfiniteScroll

Over the past few years the infinite scroll has became very popular across the web, developers are increasingly choosing to use infinite scroll over the conventional paginator. The advantage is that it doesn’t require the user to manually go to the next page when he reaches the end of the page, it automatically loads and display more data without the user intervention.

In this tutorial I’m going to show how to implement infinite scroll using ngInfiniteScroll for AngularJS.

First create the js and html file:

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
angular.module('infiniteScrollTutorial', ['infinite-scroll'])
        .controller('infiniteScrollController', function ($scope, $http) {
            $scope.users =
                    [{
                            "id": 1,
                            "first_name": "Kimberly",
                            "last_name": "Grant",
                            "email": "kgrant0@ebay.co.uk",
                            "country": "Bolivia",
                            "ip_address": "93.77.148.179"
                        }, {
                            "id": 2,
                            "first_name": "Elizabeth",
                            "last_name": "Lewis",
                            "email": "elewis1@so-net.ne.jp",
                            "country": "Indonesia",
                            "ip_address": "39.187.159.25"
                        },
                        .
                        .
                        .
 
                        {
                            "id": 100,
                            "first_name": "Shawn",
                            "last_name": "Ellis",
                            "email": "sellis2r@diigo.com",
                            "country": "Portugal",
                            "ip_address": "121.250.152.235"
                        }];
});

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html ng-app="infiniteScrollTutorial">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
        <script src="https://raw.githubusercontent.com/BinaryMuse/ngInfiniteScroll/1.0.0/build/ng-infinite-scroll.min.js"></script>
        <script src="app/resources/js/app.js" type="text/javascript"></script>
        <style>
            .userContainer{
                width:500px;
                height:110px;
                background: #f9f9f9;
                padding: 5px;
                font-family: verdana;
                margin-bottom: 7px;
                box-shadow: 0px 0px 2px 1px;
            }
            .userContainer p{
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <div ng-controller="infiniteScrollController">
            <div >
                <div ng-repeat="user in users" class="userContainer">
                    <h4>{{user.first_name}} {{user.last_name}}</h4>
                    <p>
                        <b>Email:</b> {{user.email}}  -   
                        <b>Country:</b> {{user.country}}  -  
                        <b>IP:</b> {{user.ip_address}} 
                    </p>
                </div>
            </div>
        </div>
    </body>
</html>

Nothing special for now, except that I’ve already added the dependency ‘infinite-scroll’ in the angular module declaration, besides that we just have a regular ng-repeat iterating over a JSON (you should make this JSON as big as you can, it will be easier for you to see the results, you can use mockaroo to gerenate some JSON data).

Now let’s change the code a little bit to make the infinite scroll work, we’re going to add the attribute ‘infinite-scroll’ in the div above the one with the ng-repeat, after the modification it should look like this:

1
2
3
4
5
6
7
8
9
10
<div infinite-scroll="getMoreData()">
    <div ng-repeat="user in data" class="userContainer">
        <h4>{{user.first_name}} {{user.last_name}}</h4>
        <p>
            <b>Email:</b> {{user.email}}  -   
            <b>Country:</b> {{user.country}}  -  
            <b>IP:</b> {{user.ip_address}} 
        </p>
    </div>
</div>

Note that the new attribute is referencing the function getMoreData(), which will be called every time the bottom of the element approaches the bottom of the browser window, in this function we’ll have to write the code to get more data, also note the I’m not using the variable ‘users’ anymore in the ng-repeat, instead I’m using the auxiliary variable ‘data’.

Let’s take a look at the getMoreData() code, add this bellow the JSON in your app.js:

1
2
3
4
$scope.data = $scope.users.slice(0, 5);
$scope.getMoreData = function () {
    $scope.data = $scope.users.slice(0, $scope.data.length + 5);
}

I’m initializing the $scope.data with the 5 first elements of the $scope.users, and the function getMoreData is just adding five more elements every time it gets called.

Now if you run you application you’ll see the following result:

AngularJS infinite Scroll
AngularJS infinite Scroll

That’s it! At first it’ll have only 5 elements loaded and as you scroll down it will start loading more.

Related Posts:
Tutorial: Basic DataTable (sorting, filtering and pagination) with AngularJS and ng-Table
Tutorial: Creating Reusable Code with AngularJS Directives

Example of ServletContextListener Implementation

According to Oracle official documenentation, the ServletContextListener Interface is responsible for receiving notifications about the ServletContext lifecycle changes, more specifically its initialization and destruction. This can be really helpful for developers in some specific situations, like for example when we need to execute a block of code right before the application starts or shut down.

In this short tutorial I’m going give a really simple example of a ServletContextListener Implementation.

With our Java Web project created let’s create a Java class that implements the ServletContextListener interface, it should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package tech.fourDev.servletContextListenerSample;
 
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
 
public class ServletContextListenerSample implements ServletContextListener{
 
    @Override
    public void contextInitialized(ServletContextEvent sce) {
        System.out.println("INITIALIZED");
    }
 
    @Override
    public void contextDestroyed(ServletContextEvent sce) {
        System.out.println("DESTROYED");
    }   
}

This is our listener, you can see that I’ve already implemented the contextInitialized and contextDestroyed methods, as the name suggests the first one will be called when the ServletContext starts and the other one when it gets destroyed.

There is just one more thing to be done before you can run your application, you need to register this listener in your web.xml:

1
2
3
<listener>
    <listener-class>tech.fourDev.servletContextListenerSample.ServletContextListenerSample</listener-class>
</listener>

Perfect! Now if you run your application you’ll see the word “INITIALIZED” printed when you deploy your project and the word “DESTROYED” when you undeploy or redeploy it.

Tutorial: Basic DataTable (sorting, filtering and pagination) with AngularJS and ng-Table

In this tutorial I’m going to show you how to create a simple DataTable with some basic features, which are sorting, filtering and pagination. To accomplish this I’m going to use AngularJS with the module ng-Table.

First we need to create our project, after doing it, no matter your folder structure, you should have a html file to host your table (I’m going to use index.html) and also a js file to put your angular code (app.js).

Initially they should look like this:

Index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html ng-app="ngTableTutorial">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">
        <script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
        <link href="app/resources/css/style.css" rel="stylesheet" type="text/css"/>
        <script src="app/resources/js/app.js" type="text/javascript"></script>
    </head>
    <body>
        <div ng-controller="tableController">
 
        </div>
    </body>
</html>

app.js

1
2
3
4
5
angular.module('ngTableTutorial', ['ngTable'])
        .controller('tableController', function ($scope, $filter, ngTableParams) {
 
            });
        });

I’ve already referenced all the js and css files we’re going to use, and as you can see, I have also defined the angular module and controller. This is our initial project structure, if you run it, since we didn’t added anything yet, you’ll just see a blank page on your browser.

Now let’s get started with our table, the first thing we need is some data display on it, since we’re not using a database for this tutorial, a static JSON will do the job (You can use the website mockaroo to generate some data to test your app). After you get the data you can store it in a variable on your controller, your code should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
angular.module('ngTableTutorial', ['ngTable'])
        .controller('tableController', function ($scope, $filter, ngTableParams) {
 
            $scope.users = [{"id":1,"first_name":"Philip","last_name":"Kim","email":"pkim0@mediafire.com","country":"Indonesia","ip_address":"29.107.35.8"},
                        {"id":2,"first_name":"Judith","last_name":"Austin","email":"jaustin1@mapquest.com","country":"China","ip_address":"173.65.94.30"},
                        {"id":3,"first_name":"Julie","last_name":"Wells","email":"jwells2@illinois.edu","country":"Finland","ip_address":"9.100.80.145"},
                        {"id":4,"first_name":"Gloria","last_name":"Greene","email":"ggreene3@blogs.com","country":"Indonesia","ip_address":"69.115.85.157"},
                        .
                        .
                        .
                        {"id":50,"first_name":"Andrea","last_name":"Greene","email":"agreene4@fda.gov","country":"Russia","ip_address":"128.72.13.52"}];
 
            });
        });

With the data available we can now start creating our table on the index.html, the first feature we’re going to implement will be the pagination, although it’s getting old, I’m going to use it anyway for this tutorial, but I strongly recommend you to create a table with infinite scroll, I’ll show you how to do that in another tutorial.

To create the table just put the following code inside your div tag:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table ng-table="usersTable" class="table table-striped">
   <tr ng-repeat="user in data">
       <td data-title="'Id'" >
           {{user.id}}
       </td>
       <td data-title="'First Name'" >
           {{user.first_name}}
       </td>
       <td data-title="'Last Name'" >
           {{user.last_name}}
       </td>    
       <td data-title="'e-mail'" >
           {{user.email}}
       </td>    
       <td data-title="'Country'">
           {{user.country}}
       </td>    
       <td data-title="'IP'" >
           {{user.ip_address}}
       </td>    
   </tr>
</table>

This is the table structure with all the available columns of our JSON, if your data has different columns you just have to change their names in the td tag. An important thing to note is that I didn’t use our users variable in the ng-repeat, later I will explain why.

Also note that I’ve already defined the ng-table attribute in the table tag, now we have to declare it on the app.js, copy this code and put it below the $scope.users declaration:

1
2
3
4
5
6
7
8
9
10
$scope.usersTable = new ngTableParams({
                page: 1,
                count: 10
            }, {
                total: $scope.users.length, 
                getData: function ($defer, params) {
                    $scope.data = $scope.users.slice((params.page() - 1) * params.count(), params.page() * params.count());
                    $defer.resolve($scope.data);
                }
            });

All I’m doing is defining the page size and also the initial page, this is done by the ‘count’ and ‘page’ attributes respectively. But the most important thing here is the getData function, it will be called every time you refresh our table, in other words, every time you filter, paginate or sort our data. Since our only feature is pagination for now, the getData function will only be responsible to get from the $scope.users the data displayed on our current page, I’ve used the splice function for that and stored the results in my auxiliary variable $scope.data (I couldn’t use the $scope.users because it would override my initial data).

If you run your project this will be the result:

ng-TableWithPagination
ng-Table with pagination

Now let’s add the sort functionality to the table, in your index.html just add the attribute sortable to the columns. Here is one example:

1
2
3
<td data-title="'Id'" sortable="'id'">
    {{user.id}}
</td>

You also need to change a little bit the getData function:

1
2
3
4
5
getData: function ($defer, params) {
   $scope.data = params.sorting() ? $filter('orderBy')($scope.users, params.orderBy()) : $scope.users;
   $scope.data = $scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count());
   $defer.resolve($scope.data);
}

I just added the first line which is responsible for sorting the data before slicing and returning it.

The last feature we’re going to add is the filter, as we did for the sorting functionality we’re just going to add one more attribute to the columns, the ‘filter’:

1
2
3
<td data-title="'First Name'" sortable="'first_name'" filter="{ 'first_name': 'text' }">
  {{user.first_name}}
</td>

For enable filtering we also have to put the attribute show-filter on the table:

1
<table ng-table="usersTable" show-filter=”true” class="table table-striped">

And lastly, add one more line to the getData function, which will be responsible for filtering our data:

1
2
3
4
5
6
getData: function ($defer, params) {
   $scope.data = params.sorting() ? $filter('orderBy')($scope.users, params.orderBy()) : $scope.users;
   $scope.data = params.filter() ? $filter('filter')($scope.data, params.filter()) : $scope.data;
   $scope.data = $scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count());
   $defer.resolve($scope.data);
}

if you run your project you’ll see the final result:

ng-Table with sort, filter and pagination features
ng-Table with sort, filter and pagination features

That’s it, now we have our datatable with sorting, filtering and pagination.
Hope this tutorial was helpful for you.
Till next time!

Related Posts:
Tutorial: Implementing Infinite Scroll with AngularJS and ngInfiniteScroll
Tutorial: Creating Reusable Code with AngularJS Directives

Tutorial: Creating RESTful Web Services with EJB 3.1

RESTful web services has gained a lot of acceptance across the web, they are basically web services that follows the REST guidelines. In this short tutorial I’m going to create a very simple Hello World application that implements a RESTful Web Service using EJB 3.1.

I’m assuming that you already have your environment setup and also a Java EE project created and ready to use.
So let’s get started, the first step is to create a session bean that looks like this:

1
2
3
4
5
6
7
8
9
10
@Stateless
@Path("/sayHello")
public class HelloWorld {
 
   @GET
   @Produces("text/plain")
   public String sayHello() {
       return "Hello World!!";
   }
}

That’s really a straightforward implementation, we’ve used the annotation @Path to specify the URI path we’re going to use to access this service, we also created an operation accessible via HTTP GET (indicated by the @GET annotation), and lastly we specified the media type that this operation will produce, in this case it’s a plain text, but it could also be a JSON, XML, etc.
After creating the session bean, the second and last step is to register the servlet adaptor in the web.xml:

1
2
3
4
5
<servlet>        
     <servlet-name>ServletAdaptor</servlet-name>        
     <servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>        
     <load-on-startup>1</load-on-startup>    
</servlet>

That’s it! You have already created a RESTful Web Service!!
Now if you deploy you project, you can go to your browser and type http://{projectURL}/sayHello, you’ll see the string “Hello World!!” displayed on the page.

Hope this post was helpful for you,
Till next Time!