Last week, I was reading through an article written by Bill Venners (don’t read this now). Though the purpose of the article is to highlight some of the key interviewing techniques, I was excited by Josh Bloch question, “Finding is a number power of 2”.

After finding few answers other than the one mentioned in the above article, I put the same question to some of my colleagues/friends. Most of them (99% of people, including me) immediately came up with the following answer “recursive (Number/2)==0, then power of 2” or continuous multiplication with 2 gives that number, as shown below

int number = 8;
int tempNumber = 1;
while(tempNumber<number){
    tempNumber*=2;
}
if(tempNumber==number){
   System.out.println("Power of");
else{
   System.out.println("Not a power of");
}

Yes, the above solve the problem in hand, but is this an efficient one? Will this work for large numbers or gives overflow issues? For sure I can’t see this solution as an efficient one. So I contacted my genius friend Sree. Not to the surprise, he came up with a more efficient solution. I and 99% of my friends have seen the problem in decimal but Sree has seen it in bits. Without further ado let us see the (one line) code

 System.out.println(((number&(number-1))==0)?"Power of":"Not a power of");

Hope you too accept it to be more efficient than mine  One other solution proposed by Josh Bloch in the article http://www.artima.com/wbc/interprog.html (now read it) is

System.out.println(((number&(-number))==number)?"Power of":"Not a power of");

Which answer you came up with? Hey did you come up with some new one? Let us know the same.

Today (10-Nov-2009) I have experienced many new things in my life. First to mention, being an inhabitant of Chennai only after five years of industry experience, today is my first day to visit Tidel Park, Chennai.  Also today I have my first time exposure to Amazon Web Services (AWS). It is a good workshop that opened my eyes towards many new technical jargons. In this blog, I am trying to capture most of the items that are discussed today. Most of the things captured here are from my notes (or from top of my head), so they are going to be keywords rather than detailed explanations.

Amazon evangelist Jinesh Varia, after taking us through an introduction to Cloud Computing and its advantages talked about various cloud offerings from Amazon . In his words, Cloud Computing is one in which everything from storage, computing to network are accessed through APIs. APIs are exposed in REST, Query or SOAP/XML based.  For java developers, he has shown bunch of tools (sorry I couldn’t make note of everything) that comes handy, few to mention are typica, Eclipse Plug-in. I am able to grab one of his slides from slideshare. Jinesh also spent good time in explaining about the key offerings from AWS like

• S3 – Distributed redundant storage
• EBS – Elastic Block storage
• Amazon simple DB – Light weight database, indexed and query able database. However it is not a relational database.
• Amazon Relation Data Service – It is a MySQL relation database service
• Amazon SQS – I don’t have a proper definition of it, but from my understanding it is a Q that passes messages between applications/computers. It should be analogous to JMS queue
• EC2 – Virtual computation servers. It is where we create the instance that we need for processing. I see this as the heart of AWS.
• Elastic IP Address – Static IP Addresses for virtual instances in clouds. 8kMiles CTO, one of the participants mentioned this as “Pay when you don’t use”
• Amazon Mechanical turk – It is work force in the cloud. I need to research, what is needed to join this work force

Jinesh also mentioned about EBS snapshot and EBS load balancing. To understand most of these items I try to find an analogy out of the things I know. So, I think EBS snapshot should be like a virtual machine snapshot but former is all about data in S3.

We had a good time playing in clouds. Thanks to Amazon, for giving us a temporary account to play with clouds. After installing S3Fox a Firefox plug-in, working with S3 is almost like working in windows explorer as shown in Figure 1

Figure 1 - View of S3Fox

You can create buckets by right clicking on the cloud area (right upper part of the window). A bucket (directory) is a container that contains objects (files). Clicking on create directory shows a new window for entering bucket name and its location details as shown in Figure 2

Figure 2 - Creating Bucket

As the buckets are created you can go into any of those buckets and upload files from local folder to those buckets thereby to S3 clouds. It is also possible to change access permission of the files in the cloud as you do for files in windows

FIgure 3 - Editing ACL

Once a file is available in the cloud you will be able to access globally using normal http or through the exposed APIs, provided you have permission.

Now it’s time to play with EC2. We have installed Elastic Fox, yet another Firefox plug-in to play with EC2. Using Elastic Fox anyone could create an instance of Windows/Ubuntu/LAMP/WordPress (anything you name) instances in no time. In Amazon jargon these are called as AMI, Amazon Machine Image.

Figure 4 - ElasticFox listing AMI

I created one Windows 2003 R2 Datacenter edition server and I am able to successfully RDP to it. I am on Cloud9 when I am working on EC2 cloud for the first time . I am able to successfully run windows update in the virtual server running on the cloud. Even from my home network (128Mbps) I am having a good user experience (no delays or hiccups) with EC2 clouds. I searched for a Windows 7 AMI but I am not able to get one . When you create an instance you will be able to assign access groups and also configure services that need to be started.   Here is a short video on how to create EC2 instances using ElasticFox

Warning: These are really very few that are on top of my head and they might not be 100% perfect too. So I request you to take this as keys and search for more in Google. I also heard that Jinesh is writing white papers on these topics. So keep watch on that too.

In the last article in addition to setting up our IDE for writing REST services we have also got friendly with four basic annotations. In this article we will look in to some of the other commonly used annotations in REST.

The example of greeting a user is used through this article to help you comprehend and assimilate the tips provided in this article. Let us start by creating the form

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
     <title>Playing with Annotations</title>
   </head>
   <body>
      <form method="post" action="/PracticeREST/rest/helloworld/ ">
         <label>User Name:</label>
         <input type="text" name="name"></input>
         <input type="submit" value="submit"></input>
      </form>
    </body>
</html>

On submit, the form will be submitted as a POST request to the REST service deployed at PracticeREST/rest/greetings/ (same service that we wrote in our last article with certain modifications). The REST service should welcome the entered user. Pretty similar to the service that we saw in our last article with the following changes,

1. Have to handle POST request rather than GET as we did previously
2. Have to get the user name from form

Once we complete this, we will also look in to other ways of getting the user name, for example from URL and HTTPServletRequest object.

Manipulating Form Attributes:

For handling POST request, the POJO method needs to be decorated with @POST annotation as shown below,

@POST
public String sayHello(){
	//implement the business logic here
}

REST provides two annotations @MultivaluedMap and @FormParam to manipulate form attributes.  Using @FormParam(“param name”) we will be able to get the value of a particular form parameter as shown below,

public String sayHello(@FormParam("name") @DefaultValue("NoName") String name ){
	return "Howdy "+name+" !! Welcome to Jersey REST.";
}

In addition to @FormParam, REST provides @MultivaluedMap annotation to iterate over all the form parameters as shown below,

public String sayHello(MultivaluedMap<String, String> formParams){
	for (String key : formParams.keySet()) {
			formparameters = formparameters + formParams.get(key);
		}
		formparameters += "<br> Value got using FormParam " + userName;
	System.out.println(formparameters);
}

Note: Form parameters that has name attribute can only be manipulated with @MultivaluedMap and @FormParam annotations

Other ways to get user inputs

In addition to the above annotations which directly work on form parameters, REST provides @PathParam, @Context annotation to get user inputs.

Using @PathParam

To illustrate this, let us add a new link to our index.jsp as shown below

…..
<input type="text" name="name"></input>
<a href="/PracticeREST/rest/helloworld/veechand">Click Me</a>

Clicking on the link will direct the user to the service at /PracticeREST/rest/helloworld/veechand as a GET request. Assume that the username in the link, namely veechand, is dynamically populated using the logged in user. In this case our service URL should be something like /PracticeREST/rest/helloworld/[variable] and our business logic should able to get and process on the variable. @PathParam helps us in doing this,

@Path("/helloworld/{username}")
public String sayHello(@PathParam("username") @DefaultValue("NoName") String name ){
		return "Howdy "+name+" !! Welcome to Jersey REST.";
}

1. @PATH annotation has a variable embedded in it. This variable will be substituted at run time. Variable have to be represented in curly braces ‘{‘
2. Value of the URI variables can be got using @PathParam(’[variable name]‘). This annotation could take @DefaultValue to assign a default value to the variable.

Using @Context

@Context can be used for obtaining and processing information about the application deployment and individual request. Using @Context we can get handle to HttpHeaders, Request, SecurityContext, HttpServletConfig, ServletContext, HttpServletRequest, HttpServletResponse and EJB container details like @EJB, @EJBs, @WebServiceRef, @WebServiceRefs, @PersistenceContext, @PersistenceContexts, @PersistenceUnit and @PersistenceUnits. So using @Context a handle to Request object can be obtained and manipulated to get the needed parameters

public String post(@Context HttpServletRequest req) {
          String username = req.getParameter(key)
}

Hopefully you’ve found this tutorial interesting and this has been useful to you. Feel free to reuse this code elsewhere in your projects and chime in here if you are running into difficulties. Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!

Introduction

REST, acronym for Representational State Transfer is coined by Roy Fielding to represent architectural style of networked systems. This is not a standard but an architectural style for an application that is based on different standards like HTTP, XML, URL, MIME types.  JAX-RS specification, JSR 311 defines a set of java APIs for development of RESTful web services and RESTful java application.  Sun Jersey, JBoss RESTEasy, Apache CXF provides implementation for JSR 311. In this article we will look at the steps needed to setup Eclipse IDE for developing REST application using Jersey. We will also write our first HelloWorld service.

Step 1 : Downloading needed jars

The following jars needed to be available at compile time and runtime,

• jersey-core*.jar
• jersey-server*.jar
• jsr311-api-1.1.jar
• asm*.jar

All these jars can be downloaded in zip format at http://download.java.net/maven/2/com/sun/jersey/jersey-archive/

Note: Setup procedure is different for maven users and not covered in this blog.

Step 2 : Creating a Dynamic Web Project

Follow the step 2 mentioned in http://veechand.wordpress.com/2009/09/16/4-easy-steps-to-load-strut2inaction-source/

Note: Have the project name as PracticeREST instead of Struts2InAction

Step 3 : Configuring Build Path

Right click on the project. Choose properties and then Java Build Path > Libraries. Using “Add External Jars” option add the four jars downloaded in step 1

Figure 1 : Adding REST Jars

Also, change the Default output folder to classes directory (create newly) under WEB-INF folder. This has to be done in Source tab as shown below

Figure 2 - Changing Default output folder

Step 4 : Configuring REST servlets

To load Jersey servlets dispatcher add the following entries to PracticeREST/WebContent/WEB-INF/web.xml

<servlet>
   <servlet-name>Jersey Web Application</servlet-name>
  <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
</servlet>
<servlet-mapping>
 <servlet-name>Jersey Web Application</servlet-name>
 <url-pattern>/myrest/*</url-pattern>
</servlet-mapping>
</servlet>

Now all our REST web services will be available through …/rest/[resource]

Step 5 : Writing our first “Greetings” service

Create a new class my.practice.rest.Greetings and paste the below code


package my.practice.rest;
import javax.annotation.Resource;
import javax.ws.rs.DefaultValue;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.QueryParam;
/*
* @author veechand
*/
@Path("/sayhello/")
public class Greetings {
@GET
public String sayHello(@QueryParam("name") @DefaultValue ("NoName") String name ){
return "Howdy "+name+" !! Welcome to Jersey REST.";
}
}


The meaning of the annotations used in the above code are as below

Step 6 : Testing our Greetings Service

You will be able to access the Greetings service by launching   http://hostaddress:port-number/PracticeREST/rest/sayhello?name=veechand in your favorite http client

Note: You have to replace hostaddress and port-number with corresponding values.

Figure 3 - Result

Closing Notes:

List of principles of a REST web design can be read at http://www.xfront.com/REST-Web-Services.html. Yes, we are violating the 2^nd principle. I leave fixing this violation to readers. Comment if you have any issues in getting through it.

Keep watching for more write ups on Jersey REST

Currently I am reading Struts 2 in Action. This is my second book from Manning publication. My first book was JQuery in Action which is awesome.  As I completed the second chapter in Struts 2 I like to try out the sample HelloWorld program.  So I downloaded the source code from manning website. I am able to play with HelloWorld in few minutes by deploying (copying) the downloaded war inside Tomcat 5.5.  However I also want to make a development setup in my eclipse so that I could try out certain things after changing the downloaded source. Unfortunately I am not able to make this easily. My search for a document explaining the step to import the downloaded source in to eclipse also went in vain. After a struggle of few hours, got the downloaded source integrated with Eclipse. Today, we’re going to take a closer look at the steps to load the downloaded source in to eclipse.

Note: Below steps explains about loading Struts2InAction (war). The same applies to HelloWorld.

Step 1 – Extract the war file

Open the war file using some extraction utility like Winrar. Extract the contents in to Struts2InAction(create new) directory in your workspace.

Figure 1 - Extracting

Step 2 – Create a Eclipse project

We need to create a Dynamic Web Project in eclipse.

Figure 2 - Creating a new project

Enter the project name as “Struts2InAction”. Select the directory created in Step 1 as value to project contents

Figure 3 - Dynamic Project

Click Finish. A new project will be created with all the source code imported as shown in the below figure,

Figure 4 - Wrong directory structure

Step 3: Files re-arrangement

We need to make certain re-arrangements before successfully running the applications.

1. Copy all Chapter* directories in to WebContent directory
2. Copy menu, images in to WebContent directory
3. Copy index.html in to WebContent directory
4. Replace Struts2InAction/WebContent/WEB-INF with Struts2InAction/WEB-INF

Note: Do the above steps using windows explorer. After copying refresh the project in eclipse.

Once the above steps are done, the workspace will be re-structured as shown below

Figure 5 - Project Structure

Step 4 – Run and Have fun

Now on a single click the application will be running within eclipse.

Figure 6 - Running Application

Hope this blog helps you in saving your valuable time. The same procedure applies to creation of any “Dynamic Web Project”. Let me know if you find more easier way to achieve the same.

Simple Network Management Protocol (SNMP) is one of the widely used management protocol. SNMP has gained a huge advantage due to its ease of data retrieval and efficient use of network bandwidth. This blog aims to cover certain key points in SNMP (version 1 & 2c). Some of these points are not explicitly said in the SNMP RFC. Hope the concepts discussed will be a good learning experience to you

1. GetNext for SysName is SysName.0

SNMP Protocol Data Unit (PDU) “GetNext” is used to get lexicographically next managed object from the Management Information Base (MIB). One could wrongly conclude that “GetNext” of SysName is SysLocation on a glance through the MIB (here). However Figure 1 displays the actual result.

As shown, sysName.0 is lexicographically next to sysName. So even though sysName is leaf object only sysName.0 will have a value. So, GetNext will end up in getting sysName.0 and not sysLocation. This concept applies to any scalar object.

Note: Scalar objects are those that that have only one instance.

2. Tabular instances starts from 1 however Scalar instances start from 0

The index for tabular objects, objects that have multiple instances, starts from 1. However index for scalar objects, objects that have only instance, starts from 0 (off course ends at 0 itself;)). Figure 2 displays the output of ifIndex (tabular) and sysName (scalar) managed objects.

Henceforth, only snmpget on sysName.0 will return a value and snmpget on sysName will return an error.

3. RowStatus automatically moves to Active after successful creation

SNMP Version 2c defines a way to create a new row in a table. A new row can be created in tables that has a column of type ROWSTATUS. A new row can be created by giving values for all mandatory columns and setting ROWSTATUS column to “CreateAndGo(4)”. This will create a new row. If values for all mandatory columns are proper the ROWSTATUS value will be moved to “Active(1)”. However in certain cases, administrator needs to make a row active after certain period of time, say for cases like configuration changes. In such cases user needs to create row(s) with ROWSTATUS value as “CreateAndWait(5)”.  This will move the ROWSTATUS to “NotReady” or “NotInService” depending upon the value for other mandatory columns. As per the administrator intent, the row can be made active by setting the ROWSTATUS value to Active (1) at any point of time.

4. Error Index and Error Status are always set to zero (0) in SNMPV2c

SNMP version 2c is atomic, i.e. user will be able to get results for partial set of varbinds. In case of SNMP version 1, error will be returned when certain varbinds are wrong. A query made using SNMP version 1 and version 2c are as shown in Figure 3 and Figure 4

In case of SNMP version 1 Error Status and Error Index value will be updated properly*. However in SNMP version 2c these values are always set to zero (0) in response even in case of errors. So any assumption made in manager (NMS/EMS) based on these values will end up wrongly.

*Note:

1. Error Status will indicate the type of error and Error Index will indicate the first varbinds that caused this error. (applicable only to SNMP v1)
2. NMS – Network Management System
3. EMS – Element Management System

5. ifIndex re-usage is agent specific

IfTable is used to get the details about interfaces. This table is indexed using ifIndex, a unique index assigned to each interfaces. Reusing the ifIndex on swapping/removing of an interface is specific to agent implementation. For example, when user replaces an interface gi1/1 having ifIndex 10 with other interface say TenGig1/1, the new interface TenGig1/1 is not guaranteed to use the same ifIndex, 10.

Thanks to @surendrakumar for confirming TIP 5

As I have wrote in my previous article, JQGrid is one of the most powerful JQuery plug-ins used in creation of grids. Though JQGrid provides most of the functionality out of box, there are certain things for which we might need to extend. I came across one such requirement a week before.

JQGrid add buttons, like search to the navigator (pager) component. This navigator component is placed below the table. As far as user experience (UE) is considered action items needs to be placed at the top of the grid for easier accessibility (and many other reasons,  which I am not much aware of, comment if you are). So I started to dig in to JQGrid documents and source to achieve this. During this time, Rama pointed me about the toolbar option.  But there is no API in JQGrid to add buttons with the same look and feel as navigator buttons in toolbar (readers comment if you find any). This gave me a chance to extend JQGrid plug-in for this functionality.  With sometime over the weekend, I am able to achieve the same. Here, I share the code with you

Note: Updated code at end of post
/*
 * Add functionality to add buttons to toolbar instead of pager
 * Why can't we use the navButtonAdd method by passing toolbar as the element
 * 	1. By default toolbar:[true,"both/top/bottom"] adds a div perfectly between the table caption and header. But there is not table within this div. Due to this structure difference we can't make use of navButtonAdd
 *      2. We can go ahead by appending table inside toolbar div and then reusing navButtonAdd. But that still needs some more customziation. So went ahead with a new method
 */
$.fn.extend({
/*
 *
 * The toolbar has the following properties
 *	id of top toolbar: t_
<tablename>
 *	id of bottom toolbar: tb_
<tablename>
 *	class of toolbar: ui-userdata
 * elem is the toolbar name to which button needs to be added. This can be
 *	#t_tablename - if button needs to be added to the top toolbar
 *	#tb_tablename - if button needs to be added to the bottom toolbar
 */
    toolbarButtonAdd: function(elem,p){
       p = $.extend({
                caption : "newButton",
                title: '',
                buttonicon : 'ui-icon-newwin',
                onClickButton: null,
                position : "last"
              }, p ||{});
        var $elem = $(elem);
 	var tableString="
<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" style=\"table-layout: fixed;\">";
	tableString+="
<tbody>
<tr></tr>
</table>
";

      /*
	* Step 1: check whether a table is already added. If not add
	* Step 2: If there is no table already added then add a table
	* Step 3: Make the element ready for addition to the table
	* Step 4: Check the position and corresponding add the element
	* Step 5: Add other properties
	*/
        return this.each(function() {
		if( !this.grid)  { return; }
		if(elem.indexOf("#") != 0) {
			elem = "#"+elem;
		}
		//step 2
		if($(elem).children('table').length === 0){
			$(elem).append(tableString);
		}
		//step 3
		var tbd = $("
<td></td>
");
		$(tbd).addClass('ui-pg-button ui-corner-all').append("
<div class='ui-pg-div'><span class='ui-icon "+p.buttonicon+"'></span>"+p.caption+"</div>
").attr("title",p.title  || "")
	    .click(function(e){
		if ($.isFunction(p.onClickButton) ) {  p.onClickButton(); }
		return false;
		})
             .hover(
		function () {$(this).addClass("ui-state-hover");},
		function () {$(this).removeClass("ui-state-hover");}
		);
		if(p.id) {$(tbd).attr("id",p.id);}
		if(p.align) {$(elem).attr("align",p.align);}
		var findnav=$(elem).children('table');
		if(p.position ==='first'){
			if($(findnav).find('td').length === 0 ) {
				$("tr",findnav).append(tbd);
			} else {
				$("tr td:eq(0)",findnav).before(tbd);
			}
		} else {
			$("tr",findnav).append(tbd);
		        }
	});//this.each()
     }
});

 I hope there is no rocket science in the above code, so I am not explaining it here. The toolbarButtonAdd function will be more or less the same as navButtonAdd function in grid.formedit.js. One extra option that I have introduced is align. I have introduced this option to align the button in toolbar based on user preference. Align could take left, right, center.  I hope, MAC users will be more comfortable with buttons in left and Windows/nix users are comfortable with toolbars in right. Note: The element should point to the toolbar div. The id of the toolbar   div depends upon the position as follows,
Top toolbar: t_<tableid>
Bottom toolbar: tb_<tableid>   Sample Usage:
$('#mysimpletable')
.toolbarButtonAdd("#t_mysimpletable",{caption:"Toggle",position:"first",
title:"Toggle Search Toolbar", align:"right", buttonicon :'ui-icon-search', onClickButton:function(){ mygrid[0].toggleToolbar(); } })

 Let me know your comments on the above piece of toolbarButtonAdd function.

 Now, I am working on unit-testing and code coverage tools for JS.  So you could soon expect a blog on the same.

Update 24-jul-2009 - New code is available at

Updated 13-Aug-2009 - Support for IE http://snippets.dzone.com/posts/show/7629

For the past few days I have been working with JQGrid, one of the most powerful JQuery plug-in.  To give an outline, JQGrid helps us to create a grid with ease. The power of JQGrid comes from the fact that almost all the needs for a grid are addressed using simple tunable options. JQGrid can be downloaded from http://www.trirand.com/blog/?page_id=6.  JQGrid has a good documentation available at http://www.secondpersonplural.ca/jqgriddocs/index.htm. Also most of the JQGrid options are demonstrated well in http://www.trirand.com/jqgrid35/jqgrid.html. In spite of these well written documents, there are times I spent digging JQGrid source code for some customization needs. I also strongly feel that most of my co-workers might need the same at some point of time, so thought of blogging (documenting) for further reference.

All the code used in this article can be downloaded from here.

Our very first table looks as below

TIP 1: Changing JQGrid width and height

As depicted in the picture, the table doesn’t show up with paging information. Due to the smaller width, the 2^nd column header and value are also not fully visible.  To solve this, we need to set the width of the table, thereby columns. This can be achieved as shown below

1. During grid creation, use the property width with value in pixel as

width:700

OR

2. After grid creation, use setGridWidth(width, shrink) API as

$([tableid]).setGridWidth(700,true);

Similarly, height of the table can also be set using height :<value is pixel> and setGridHeight(height) API.  The default height is 150px. I am still searching for a way to set width/height of JQGrid in percentage (%). Comment, if you already know it.

TIP 2: Grid without unnecessary scroll area

If you are sure that the grid is not going to take more than N values and those N values can be fit in a single page, then there is no need for a scroll bar. In this case the space allotted for scrollbar is immaterial. I would rather prefer to remove this space. This can be achieved by setting the value of scrollOffset to zero as follows,

scrollOffset:0

By default the value of scrolloffset will be 18px

TIP 3:  Error due to missing locale file

You have included all the needed JS files like, JQuery, jqgrid (single file as minimized js/jquery.jqGrid.min.js) but still hitting with an error “$.jgrid is undefined” and grid is not rendered. This might be due to missing locale file. To solve this include appropriate locale, as

<script src="jqgridsrc/src/i18n/grid.locale-en.js" type="text/javascript" charset="utf-8"></script>

TIP 4: Callback function

We came across a requirement where we need to associate a hover event only to the first cell of a grid. To do the same, we need to get the first cell (td) and associate hover function on it and then implementing the functionality needed. Let’s assume that these functionalities (writing selector to get the first cell and writing .hover(…) function) is available in a function named doWhenHover(). The point here is when to call this function? THINK !! THINK !! THINK !!

If you told that it should be after the function that creates the table, in our example createMyTable(), then you are wrong.  Since the grid is not guaranteed to be completely formed at the end of createMyTable() function. So, JQGrid provides a callback function, loadComplete to which a function can be associated during grid creation like,

loadComplete: doWhenGridFullyLoaded

….

//grid creation completed

function doWhenGridFullyLoaded(){

//do the operation here

}

TIP 5: Using pagers only for buttons (or icons)

JQGrid documentation provides a tip at http://www.secondpersonplural.ca/jqgriddocs/index.htm under jqGrid > User Modules > Tips, Tricks and Hacks using which pager can be removed.  Here is yet another way to do the same. If you want to have pager only to add buttons and don’t like to display page numbers and other stuffs then we could remove those items as shown below,

$(‘#
<pagername>_center’).remove();

$(‘#
<pagername>_right’).remove();

Example: $('#mysimpletablepager_right').remove();

TIP 6: Hiding unwanted buttons in navigation bar

When navGrid(…) API is called to add a icon, say refresh  as

$(‘#
<tableid>’).navGrid('#mysimpletablepager',{refresh:true});

the following icons will be added in addition to the refresh icon

edit, add, del, refresh, search

To hide any of these icons associate those icons to a value of false. Say for example to hide edit, add icons and show other icons we can use the following fragment of code

$(‘#
<tableid>’).navGrid('#mysimpletablepager',{edit:false,add:false});

Also, by default view icon will be hidden, this can be made visible by associating true to it as view:true

Tip 7: Hiding the inline search by default

In addition to the popup search in JQGrid there is also an additional option of having inline search. In this case, a search textbox will be added to top of each column. Refer JQGrid documentation for the procedure to add inline search. But, when we add inline search functionality the search textbox will be shown by default and it occupies the first row below the header.  Though it can be argued that, showing search textbox by default makes the functionality explicit to user, I like it to be the other way i.e. when the grid is loaded the search textbox has to be hidden. User can make explicit request to show the search textbox. To do the same call mygrid[0].toggleToolbar() (the same code that is called when inline search icon is clicked) at the end of grid creation code as follows,

var myGrid = $(‘#mysimpletable’).jqGrid({

     url:<value>,

    ….//.other options

   })

.navButtonAdd("<
<pagerid>>",{caption:"",title:"Toggle Search Toolbar", buttonicon :'ui-icon-search', onClickButton:function(){ mygrid[0].toggleToolbar() } }); //icon to add the search bar with search textbox

mygrid.filterToolbar(); //adds the search toolbar

mygrid[0].toggleToolbar();//hide the toolbar by default

TIP 8: Having your own icons for navigation bar buttons

We are not always fulfilled with the available JQGrid/JQuery-UI images. So we might need to put our own image/icon for some of the buttons. This could be achieved by writing our own CSS and associating it with the navigator grid button by specifying it as a value to buttonicon as shown below

.ui-icon.myicon {

    width: 16px;

    height: 16px;

    background-image:url(edit.png);

}

mygrid.navButtonAdd("#mysimpletablepager",{caption:"",title:"Toggle Search Toolbar", buttonicon:'myicon', onClickButton:function(){ mygrid[0].toggleToolbar() } });

TIP 9: Removing title bar close button

I don’t find a real use of the tile bar close button. It would be much useful if the adjacent components occupy the space whenever user shrinks the grid, something like IGoogle portlets. Though JQGrid does it, it largely depends on the enclosing component. So I prefer to remove of button thereby hiding the functionality from user. As other removal this can also be easily achieved using remove() API as shown below

$('.ui-jqgrid-titlebar-close','#gview_mysimpletable').remove();

Note: Title bar won’t appear if the caption is an empty string.

TIP 10: Adding toolbar

JQGrid also provides an option to add toolbar to the table. This can be achieved using toolbar option, toolbar:[true,"both"] during grid creation. First parameter specifies whether the grid needs to be added or not. The second parameter is to tell about the location of the toolbar. Second parameter can take three values namely, top, bottom and both.

Stay tuned to know about the procedure for adding buttons to toolbar.

Version of

JQGrid – 3.5 beta

JQuery – 1.3.2

JQuery UI Theme – Dark Hive

Feel free to share your experience with JQGrid and also if you have cleaner way to solve some of the items discussed above, as comments.

       Though JQuery comes with a bunch of selectors, there are situation where we need to have additional functionality. JQuery has provided the interface using which we could harness our selector with the already available selectors. In this blog we are going to see 4 easy steps to do the same.
Step 1:

  Write your HTML file, include JQuery script and decide on the name of selector (important one )

Step 2:

 Extend the ‘:’ selector using JQuery extend function as follows,

  $.extend($.expr[':'],{
    selectorname>:function( elem, index, match, array ){
    }
  });

Step 3:

     For each element our method will be called by JQuery,  passing the element (note this is not JQuery element). If the element satisfies the condition return true, if not return false. JQuery will add the element to the resulting array if the function returns true.
Step 4:
                Use It and Test It

This is my first blog with screen cast.

Have easy learning, and let me know your comments on it.  The code that we developed in our screen cast is below, 

  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Custom Jquery Selector Demo</title>
        <script type="text/javascript" src="jquery-1.3.js"></script>
        <script>
         <span style="white-space: pre;"> </span>/*
           * Demonstrating Custom Selector
           * Objectives
           * Select all elements whose value for mySpecialAttr is greater than 9
           */
          $.extend($.expr[':'],{
              mySpecialAttrValueGreaterThan9: function( elem, index, match, array ){
                 var $element = $(elem);
                 var specialAttrValue = $element.attr('mySpecialAttr');
                 console.log("specialAttrValue="+specialAttrValue);
                 if(specialAttrValue != null && specialAttrValue.length > 9){
                      return true;
                 }
                 return false;
              }
           });
          $(document).ready(function() {
              console.log("Ready function getting executed");
              var $mySpeciaAttr = $(':mySpecialAttrValueGreaterThan9');
              $('#results').html("myspecialattribute result=<b>"+$mySpeciaAttr.size()+"<b>");
          });
        </script>
    </head>
    <body>
     <input type="text" name="name" value="" />
     <input type="text" name="Age" value="" mySpecialAttr="Small"/>
     <input type="text" name="Address" value="" myspecialAttr="Length greater than nine"/>
     <input type="text" name="Address" value="" myspecialAttr="Length greater than and second"/>
     <span class="test" id="results"></span>
    </body>
   </html>