ExtJS grid with numbering & checkbox selection

In this 2^nd post I will be enhancing the grid we created in the previous post.

How about adding row numbers to our view? We modify the columns array to hold a new member.

columns: [

new Ext.grid.RowNumberer(),

{id:'company',header: 'Last Name', width: 100, sortable: true, dataIndex: 'last_name'},

{header: 'First Name', width: 100, sortable: true, dataIndex: 'first_name'},

{header: 'Age', width: 75, sortable: true, dataIndex: 'age'},

{header: 'Date of Joining', width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'doj'}

]

Here’s the demo,

Here’s the link to the fiddle -> JSFiddle row numbering

By default multiple rows of the grid can be selected by holding down the “Ctrl” button. To disable multi select of rows add the following selection model to the grid.

sm: new Ext.grid.RowSelectionModel({ singleSelect:true })

Selecting multiple rows of a grid can be helpful. But to provide a better visual treatment rather than highlighted rows use a “CheckBoxSelectionModel”.

Here’s the modified grid code,

var sm = new Ext.grid.CheckboxSelectionModel();               

var grid = new Ext.grid.GridPanel({

store: empStore,

columns: [

        sm,   //this is to provide the checkbox for every row

        new Ext.grid.RowNumberer(),

        {header: 'Last Name', width: 100, sortable: true, dataIndex: 'last_name'},

        {header: 'First Name', width: 100, sortable: true, dataIndex: 'first_name'},

        {header: 'Age', width: 75, sortable: true, dataIndex: 'age'},

        {header: 'Date of Joining', width: 100, sortable: true, renderer:        Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'doj'}

],

sm: sm,  //sm is short for “selModel”

stripeRows: true,

height: 350,

width: 430,

title: 'Employee Details',

renderTo: Ext.getBody()

});

Demo below,

Grab the fiddle -> JSFiddle checkbox

Simple Grid using Ext JS

This blog post assumes you have a little background on Ext JS basics. If not I recommend you to head over to Sencha’s site and have a look at the documentation or even better follow a book.

But this is not rocket science either. A strong foundation in JavaScript is enough to get started.Grid data are very important for the user as most common information display is tabular. Grids or Data grids are made possible by using the class “Ext.grid.GridPanel”.

The following series of blog posts are written following Ext JS version 3.4. Migrating them to the latest version is not hard either. Subsequent posts will improve upon this grid by adding features incrementally. At the end you’ll realize how awesome the framework is.

This is what we will be building by the end of this post.

Let’s start by defining the sample data for the employee database. For the sake of simplicity, lets hardcode our data inside the application.

var empData = [

                       {'last_name':'Doe', 'first_name':'John', 'age':'23', 'doj':'08/06/2009'},

                       {'last_name':'Sparrow', 'first_name':'Jack', 'age':'26', 'doj':'08/12/2010'},

                       {'last_name':'Spacey', 'first_name':'Kevin', 'age':'27', 'doj':'01/23/2011'},

                       {'last_name':'Gates', 'first_name':'Bill', 'age':'35', 'doj':'10/10/2006'}

            ];

Next up we define the store. The store is nothing but a container of records. Each record is nothing but the actual data present in each row.

var empStore = new Ext.data.JsonStore({

                        fields: [

                             {name: 'last_name'},

                             {name: 'first_name'},

                             {name: 'age', type: 'int'},

                             {name: 'doj', type: 'date', dateFormat: 'm/d/Y'}

                         ],

                         data: empData

            });

Next up we define the actual grid,

var grid = new Ext.grid.GridPanel({

store: empStore,

            columns: [

                   {header: 'Last Name', width: 100, sortable: true, dataIndex: 'last_name'},

                   {header: 'First Name', width: 100, sortable: true, dataIndex: 'first_name'},

                   {header: 'Age', width: 75, sortable: true, dataIndex: 'age'},

                   {header: 'Date of Joining', width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'doj'}

                ],

             stripeRows: true,

             height: 350,

             width: 400,

             title: 'Employee Details',

             renderTo: Ext.getBody()

});

In the above code,

1. The “empStore” we just defined is associated with the GridPanel. This connects the store to the actual display grid. Store is not a display component but a behind the scenes prompter. Without it the grid probably does nothing.
2. We’ve declared the columns for the grid using the columns array. “dataIndex” is the glue which defines the mapping between the record data and the column in which it is supposed to show.
3. The “renderTo” specifies which DOM elements which would contain this grid. In our case, we chosen the page body.
4. Setting ‘sortable’ to “false” will disable sorting on that particular column.
5. Setting ‘stripeRows’ to “false” will not show any difference in row color between consecutive rows.

We're done. Here’s the working fiddle -> JSFiddle ExtJS Simple Grid

Make your own email app using AngularJS - Part 2

In my previous post, I had started with the basics needed to get an angular application running. Before we add more features let us begin re factoring what we already have.

I've mentioned that our controllers are in the global scope. Let’s fix that.

I am going to assign a value to the ng-app directive. So now when you view the DOM through Firebug, you will notice one global variable which is the app name we assigned to ng-app.

<html ng-app=”emailApp”>

We’re not done here. We need to register emailApp as an angular module for it to work.

Create a new JS file called app.js, with this.

var emailApp = angular.module(‘emailApp’, []);

//we have no dependencies as of now, hence the empty array.

We now need to map our controller(s) to this module. Let’s take this opportunity to migrate the controller code from the html to its own file.

Create a new JS file called controllers.js, with this.

emailApp.controller('EmailCtrl', function($scope) {

                $scope.messages = [{

                                id: 0,

                                sender: 'jean@somecompany.com',

                                subject: 'Hi there, old friend',

                                date: 'Dec 7, 2013 12:32:00'

                }, {

                                id: 1,

                                sender: 'maria@somecompany.com',

                                subject: 'Where did you leave my laptop?',

                                date: 'Dec 7, 2013 8:15:12'

                }, {

                                id: 2,

                                sender: 'bill@somecompany.com',

                                subject: 'Lost python',

                                date: 'Dec 6, 2013 20:35:02'

                }];

});

Now make sure to add app.js and controllers.js to the html page. The screen should come up as before.

There’s no fun in displaying hardcoded data. Let’s ajax-ify it.

To make use of ajax, we need to make use of an ajax service. In angular, services are of 2 types built in and user defined. I will now make use of the built in $http service to make ajax calls. User defined services will be added soon.

Before getting started make sure to move the messages array to a json file. I will save this json as messages.json

The controller now needs to have an extra parameter passed in. That parameter is $http. $http will be injected into our controller by angular. Our controller now looks like this,

emailApp.controller('EmailCtrl', function($scope, $http) {

	$http({method: 'GET', url: 'messages.json'}).

		success(function(data, status, headers, config) {

    		     $scope.messages = data;

  		}).

  		error(function(data, status, headers, config) {

		    console.log("An error occurred. Please refresh.")

		});

});

For these changes to work, we need to run this app using a web server.

Points to note

• It is recommended to maintain each controller in its own file, rather than using a single controllers.js
• Most built in services start with the $. It is recommended not to make use of $ for user defined services.

SPA features coming up in part 3.

Make your own email app using AngularJS - Part 1

     Angular JS is the one of the frameworks I wanted to get started from a long time. Angular, being a product by Google is the reason that got me interested.

So I am going to keep this very simple and write a mail client application. I am not going to lie, I’ve been reading a book on angular. This post is going to be part 1 of “How to build a Gmail killer”. Ha ha. If you find any mistakes, let me know.

To start off, I am going to get started with a simple html page, index.html

What you see below is a standard html5 page. I am dropping angular.min.js and bootstrap.css into the body and head sections respectively. Don’t bother about the file hierarchy for now.  The folks over at Google recommend using Yeoman. Its a long process, so I am going to skip this for now. But worth the effort.

Now the ng-app directive signals angular to kick in at this point. I have placed ng-app on the root node, that is <html>.

Everything else you see on the page is not related to AngularJS. I’ve just added a fancy navbar to our application using Twitter bootstrap.

The screen below shows the actual code for our application. "ng-controller" is assigned a controller name which will manage the div.  Note the usage of “ng-repeat” directive by the <tr> tag.

It’s now time to define EmailCtrl, which is our controller. For now, this controller maintains a hardcoded copy of our email messages.

And that’s it. Open this up and we have our very own email client.

Key points to note:

• The function “EmailCtrl” is currently defined in the global scope. We’ll rectify that once we start with modules. Also it is recommended to move this script into its own file, say controllers.js.

• $scope is a very important variable. Look up the Angular docs for a thorough reading. It is injected by the angular framework. Dependency injection brought to you by Angular.

• The {{ }} are angular’s way to indicate the variable which is bound to a particular tag. So <td>{{ mail.sender }}<td> means that the value of “mail.sender” will be substituted in its place. An alternative to this is this,<td ng-bind=”mail.sender”></td>.

In subsequent posts, I will build upon this example to add SPA features, where we will show a message viewer to view individual emails.

What’s an email client without asynchronous loading? I will bring in ajax support using $http.

Stay tuned.

Of Typography and web fonts

While coming up with one web page, I thought of using some good fonts to grab attention. So I started weighing my options.

1) You could either choose to host your own system fonts onto your web server. And use this to get it onto your web page

@font-face {

      font-family: "MyAwesomeFont";

      src: url("http://mywebsite.com/MyAwesomeFont.ttf");

}

body {

     font-family: " MyAwesomeFont ", serif

}

But this sounds very old and not trendy enough. We are in the age of clouds and CDN’s. Hosting static content on your server is passé.

2)      The next option is to make use of an online font library. Two big names here, “Typekit” by Adobe and “Google Web Fonts” by elgooG. Typekit being a paid service, I started diving into GWF.

Head over to http://www.google.com/fonts. Choose a couple of fonts you like, review your collection and start using them right away.

There are 3 ways to implement the chosen fonts onto your page.

1)      The standard approach by using <link href=””>

2)      Using @import url()

3)      Using Google WebFont Loader

You can find the actual code snippets for the above 3 methods on google.com/fonts.

After that you can have this(below) to get it working,

body {

     font-family: "MyAwesomeFont1", “MyAwesomeFont2”, Arail, serif

}

Always have a couple of fallback fonts on your font-family declaration. The order in which the fonts are declared here decides which font to use when the preceding font is not found. In this case, it will fall back to a system default serif font if none of the other 3 fonts are found.

The terms serif and sans-serif are not actual fonts as such, but refer to generic font families. This image should help you in case you’ve never heard of serif or sans-serif.

The great Steve Jobs learned typography. You can see that reflecting in the designs that apple has come up with. The i(Mac/ Pod/ Phone) are all built with quality in mind. The same reflects in their UI. Each app that gets published on iTunes undergoes a lot of quality control checks. For more info on these https://developer.apple.com/appstore/guidelines.html

Ok, so I was happy after all these awesome fonts on my page. But then connectivity started breaking down. The fonts were not getting loaded at just the right moment. The result, the browser shows the text initially in a default font and once the font is actually available (downloaded and ready) it swaps the font. What I just witnessed was a FOUT(Flash of Unstyled Text).

Do It Yourself – Making an URL Shortener

            URL Shorteners are nice little applications to have these days. Most webpages with content worth sharing have lengthy URLs. Twitter & Google have their own url shortening service. Tweets with URL’s on twitter are automatically shortened using their own service(t.co).

It’s no big deal to build one. Assuming you have a little bit of coding background, you should be getting your service running in no time. Else I recommend reading some basics on HTML, Server side processing, SQL queries. I will try to keep it as simple as possible. There’s always space for “YOUR” creative mind to step into action. I’ll leave that up to you.

Step1: Create a basic home page for your service. Something like Google URL Shortener . Let’s have a text box and a button. So the idea is, the user pastes his long url into the text box and hits the “Shorten URL” button.

Step2: At your server (any java based), capture the lengthy URL. For every request you receive you need to “GENERATE” an unique 6-8 alphanumeric characters. For the sake of simplicity let’s just start with 000001. For subsequent requests simply increment the previously generated number by 1(000002 and so on). Please be advised this is just to make this very simple. In reality you would be interested in using Base 36 encoding to generate your sequence. Head over to wikipedia's article on base 36 for some better idea at this generation strategy. This would make sure we make use of numbers 0-9 and characters a-z.

Step3: Save the mapping between the lengthy URL and shortened URL into a table. A typical DB entry will be something like

Id	Original_URL	Short_Code
1	http://en.wikipedia.org/wiki/Lamborghini_Aventador	000001

Step 4: You can now show the user the short code generated for the URL. It will be of the form

http://<yourdomain>/000001.

The idea is to have a very catchy & small domain name. That wraps up the generation.

Now when the user tries to access this short URL, another kind of request will need to be handled by your server. A reversal of the “generation strategy” mentioned above.

Step 1: From the DB table fetch the original URL.

Step 2: It wouldn’t make sense to display the original looooooong URL back on screen. Instead the user should be redirected to the Original_URL’s page.

“sendRedirect” method of “HttpServletResponse” interface is something to look at. Once a redirect request is served let’s just make sure we don’t overwhelm our server by having to serve the same redirection again and again. To do this make use of HTTP status codes 301(moved permanently) & 302(moved temporarily). The advantage is that these status codes are cached by browsers, so subsequent requests will be resolved locally. For further reading look into HTTP redirection codes.

If the above “ideal” approach seems to be too confusing at this point read this. Instead of server side redirection, simply send back the lengthy response to the user in the form of JSON or XML. Have a JavaScript function do this,

location.href= <original URL received from server>;

If your service seems to get very popular, you will at one point of time be stuck up with an awfully huge DB table. This will hamper your query's lookup time. You could also think about retention strategies for the URL's. Very old URL's could simple be disposed off. 

So there you have it, your very own URL shortener. 

Feel free to share your feedback. If you like my post I would love to hear from you.