google.com/docs

Well today i was trying to open my google documents and i keyed in google.com/docs hoping that google would redirect me to documents, apparently it didnot but instead it downloaded an empty text file with the name "docs" into my downloads folder. Is google trying to do something which i didnot know about or is there something wrong with the system?

browser and the web

Learn more about the browser, and how the internet works, written for naive users by the guys at Google Chrome in 20 things I learned about Browser and the Web.

Managing history in GWT

Managing history is one of the important task of an AJAX application. The GWT application is mostly a single page and so the developer has to take care of what to do with the forward and back buttons. One easy but not so good step is to take out the toolbar from the browser all together, so that we don’t need to worry about it. A better approach is to preserve the history of the major changes in the application so that they are easily accessible with the back and forward buttons.

To explain more about the history I will be considering a simple login application as most of the examples do. I create a splash screen with a “SignIn” button clicking which will take you to the login page with username and password fields and demonstrate history on it.

  1: package com.snippets.client;
  2: 
  3: import com.google.gwt.core.client.EntryPoint;
  4: import com.google.gwt.event.dom.client.ClickEvent;
  5: import com.google.gwt.event.dom.client.ClickHandler;
  6: import com.google.gwt.event.logical.shared.ValueChangeEvent;
  7: import com.google.gwt.event.logical.shared.ValueChangeHandler;
  8: import com.google.gwt.user.client.History;
  9: import com.google.gwt.user.client.ui.Button;
 10: import com.google.gwt.user.client.ui.Grid;
 11: import com.google.gwt.user.client.ui.Label;
 12: import com.google.gwt.user.client.ui.PasswordTextBox;
 13: import com.google.gwt.user.client.ui.RootPanel;
 14: import com.google.gwt.user.client.ui.TextBox;
 15: import com.google.gwt.user.client.ui.VerticalPanel;
 16: 
 17: public class Snippets implements EntryPoint {
 18: 	private static final String LOGIN_PAGE = "Login";
 19: 	private static final String SPLASH_PAGE = "Splash";
 20: 
 21: 	VerticalPanel verticalPanel ;
 22: 
 23: 	public void onModuleLoad() {
 24: 		verticalPanel  = new VerticalPanel();
 25: 
 26: 		History.addValueChangeHandler(new ValueChangeHandler<String>() {
 27: 
 28: 			@Override
 29: 			public void onValueChange(ValueChangeEvent<String> event) {
 30: 				if (LOGIN_PAGE.equals(event.getValue())) 
 31: 				{
 32: 					loginPage();
 33: 				}
 34: 				else if (SPLASH_PAGE.equals(event.getValue())) 
 35: 				{
 36: 					splashPage();
 37: 				}
 38: 			}
 39: 		});
 40: 		History.newItem(SPLASH_PAGE);
 41: 		RootPanel.get().add(verticalPanel);
 42: 	}
 43: 
 44: 	private void loginPage()
 45: 	{
 46: 		final Grid grid = new Grid(3, 2);
 47: 		final Label userName = new Label("name");
 48: 		final TextBox userBox = new TextBox();
 49: 		final Label passwordLabel = new Label("password");
 50: 		final PasswordTextBox passwordBox = new PasswordTextBox();
 51: 
 52: 		final Button loginButton = new Button("login");
 53: 
 54: 		grid.setWidget(0, 0, userName);
 55: 		grid.setWidget(0, 1, userBox);
 56: 
 57: 		grid.setWidget(1, 0, passwordLabel);
 58: 		grid.setWidget(1, 1, passwordBox);
 59: 
 60: 		grid.setWidget(2, 1, loginButton);
 61: 		verticalPanel.clear();
 62: 		verticalPanel.add(grid);
 63: 	}
 64: 
 65: 	private void splashPage()
 66: 	{
 67: 		final Label message = new Label("Welcome. Please login");
 68: 
 69: 		final Button button = new Button("Take Me to login Page");
 70: 		button.addClickHandler(new ClickHandler() {
 71: 
 72: 			@Override
 73: 			public void onClick(ClickEvent event) {
 74: 				History.newItem(LOGIN_PAGE);			
 75: 			}
 76: 		});
 77: 		verticalPanel.clear();
 78: 		verticalPanel.add(message);
 79: 		verticalPanel.add(button);
 80: 	}
 81: }

Firstly, History is basically a stack. So the item first inserted will be last one to be returned. Each of the state in the history is represented with a particular string that is appended to the URL with a “#” sign.

1. Initially on page load I am setting up the first history item as in line 40.
2. On the button click in the first page I am going to the next one, so as the state is changed on the button click I am going to add the new page to the history stack using the newItem method again. Line 74
3. Finally I am adding a history listener to determine what page should be retrieved when a particular token is pulled out from the stack.

GWT internally uses the “window.location.hash” to get the token and send it to the listener. Its up to the developer to determine what to do when a particular token is encountered.

PS: I never worked on managing history on a large application, so I am not quite sure how it will pan out . But I am willing to work on it if some one is interested.

Combobox setValue

In a combobox the selectionChangedEvent is called when a value is selected from the combobox and also when setValue method is used. There is always a requirement that the event should be called only when a value is selected from the list than when programmatically setting the value.

One idea i was given when going through Sencha forums is to disable all the events before setting the value and then enabling them back again (this is a little weird, as this requirement comes up most of the time. They should probably try to make it a little easier than that)..

But anyways it works for now.

  1: combobox.disableEvents(true);
  2: combobox.setValue();  //set a value
  3: combobox.enableEvents(true);

Editor Grid and checkboxSelectionModel

I experienced that the check box selection model and the editor grid does not go along well if we are clicking on the row rather than only the check box. The problem is that the row gets selected and deselected when the editable cells are changed.

I needed to enable the select only when we click the first 2 columns and just editable on the rest.

A solution is to override handleMouseDown

  1: @Override
  2: protected void handleMouseDown(GridEvent e) {
  3: 	if (checkBoxOnly || checkBoxSynchronized) {
  4:         	if (e.getColIndex() < 3 && e.getEvent().getButton() == NativeEvent.BUTTON_LEFT) { 
  6: 	        	M m = listStore.getAt(e.getRowIndex());
  7: 			if (m != null) {
  8: 		        	if (isSelected(m)) {
  9: 					doDeselect(Arrays.asList(m), false);
 10: 				} else {
 11: 					doSelect(Arrays.asList(m), true, false);
 12: 				}
 13: 			}
 14: 		}
 15: 	} else {
 16: 	       super.handleMouseDown(e);
 17: 	}
 18: }

changing the color of the text in the combobox’s Textbox

Haa!! extjs has changed it named to sencha. Well I might be the last one mentioning it :).

Well coming back to what i was about to write in this post. I had this requirement of coloring the text in the combobox's text box. As i searched for it, i could not find a better solution than this one.

The list values in the combobox can be color coded using the template.

combobox.setSimpleTemplate("<font color='{color}'>{name}</font>");

Now if a particular item from the list is selected that has a different color, the color changes to black in the textBox. Inorder to maintain the color of the list item, I tried something like this.

  1: combobox.addSelectionChangedListener(new SelectionChangedListener<ModelData>() {
  2: 	@Override
  3: 	public void selectionChanged(SelectionChangedEvent<ModelData> se) {
  4: 		if(deptjob.getValue() != null ) {
  5:               		ModelData md = combobox.getValue();
  6: 			combobox.el().getChild(0).setStyleAttribute("color", md.get("color").toString());
  7: 		}
  8: 	}
  9: });

Any ideas on a better way in solving this problem is appreciated.

Grid Row Refresh GXT

Probably most of you out there must have known how to do that. But to just put it in paper, this is how we can refresh a particular grid row instead of refreshing or reloading the entire grid.

                      GridView has a refreshRow method inbuilt but it is not publicly available for some reason. So we can extend the GridView class as shown below to create our own method of refreshRow. Using refreshRow instead of refreshing the whole grid is faster when you are working on a grid with way too much data.

import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.store.StoreEvent;
import com.extjs.gxt.ui.client.widget.grid.GridView;
public class MyGridView extends GridView{
	@Override
	public void refreshRow(int row) {
		super.refreshRow(row);
	}
}

Grouping and Sorting grid GXT

If sorting has to be applied with grouping, grouping should be done first and then sort should be applied. This is because GXT grid grouping changes the sort order based on the grouping.

Array functions in javascript

Finally my first post of the year. Coding in core javascript scared me from the beginning because it does not have a perfect IDE with intellisense as java for eclipse. Coming to the point, I decided to improve myself in javascript. I was actually going through the arrays in javascript and read about some interesting functions. So decided to jot them down for my reference later. I am not sure how popular or how efficient these functions are. Most of my work's application is developed in javascript and I dont remember seeing any of these functions.

Lets consider we created an array      

  var array = ['kolli','ravi'];

Coming to the functions:

1) Push and pop: These are the simple functions that we all know since our undergrad mostly in data structures, stacks. So in an array push adds an element to the end of the array and pop deletes an element from the end of the array.

Eg:

array.push('kanth');

This statement adds ‘kanth’ to the end of the array now the array being [‘kolli’,’ravi’,’kanth’]

array.pop();

This statement removes the last element in the array resulting in [‘kolli’,‘ravi’]

2) unshift and shift: These functions are also used to insert and remove elements from the array but from the other end (beginning of the array).

Eg:

array.unshift("hye");

This statement adds ‘Hye’ to the beginning of the array resulting in [‘hye’,’kolli’,’ravi’]

array.shift();

This statement removes the first element in the array. Result: [‘kolli’,’ravi’']

3) Splice: This is a little more complex function than the others. It can be used to add, remove, replace elements in the array.

Syntax:

splice(StartingPos, NoofItemsToDelete, Items_to_add);

Eg:

array.splice(2,0,'kanth');

This statement is going to insert ‘kanth’ at location 2 of the array, without deleting anything.

array.splice(2,1);

This statement is going to remove 1 element starting from position 2.

array.splice(1,1,'rocks');

This statement is going to replace the element in position 1 resulting in array [‘kolli’,’rocks’].

Finally one more advantage of this function is that it lets us add more than one element to the array by just separating them with a ‘,’.