Image shack API documentation and examples

 I have been trying to use imagechack's image hosting api for fewbs. Their documentation is good for reference but not really good enough for a beginner. Next obvious step was googling and I found a lot of interesting sites giving examples on various technologies e.g.

PHP -
http://elliottback.com/wp/using-the-imageshack-xml-api/
.NET C#
http://www.codeemporium.com/2009/06/14/dot-net-c-sharp-wrapper-for-the-imageshack-xml-api/
Ajax - HTML
http://www.blocsoft.com/blog/imageshack.asp
http://code.google.com/p/imageshackapi/wiki/RedirectAPI

Its a wonderful service for small site owners and needs to be emphasized and supported as much as possible.

Accessing session objects with GWT and Spring security

There are several tutorials on how GWT and spring can be integrated (e.g. and )and they have done a good enough job for me not to cover those topics in details.

I found details scarce on how to use sessions in GWT environment to store and retrieve values during the rpc calls.

Problem:
Spring security by its design runs, by default, using url rewriting i.e. it appends ';jsessionid:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' to the url of authenticated page. This jsessionid is sent to server again when another page is requested. In this way the request is assumed to be coming from the same user.

The problem with this approach is that there is no way you can append jsessionid field to the rpc call url due to which the call is not authenticated. In case you put rpc call's access as authenticated (using access="ROLE_XXX" or access="isAuthenticated()" etc.) none of the rpc call succeeds. In case, you did not put rpc call access as authenticated, principal received on these calls is "anonymousUser" and a new session id is assigned to each request and thus whatever you stored in a session last time is inaccessible

Solution:

Solution is strikingly simple. Use cookies to do this stuff. For this to work you need to the following
1) in spring security 3+ security configuration disable url-rewriting
....
2) Allow your server to use cookies for session management. For tomcat 6, I was using, this can be done by setting 'cookies' field to true in context.xml in conf folder. It can be found in more detail @ and other pages given in its "related questions"

Voila! everything works and session object on server side can be retrieved using the following code

HttpSession curRequest =
((ServletRequestAttributes) RequestContextHolder.currentRequestAttributes())
.getRequest().getSession(false);

UPDATE

I stumbled upon a way to access request object and hence the underlying session by a simpler method. GWT exposes the current request by method getThreadLocalRequest. From request object session can be obtained. More details can be found at javadoc.

Facebook login button

This post is about the agony facebook makes its developer goes through with inadequate documentation, poor linking of pages and alien language (xfbml) which never behaves the I expect it to. Anyway this is how I got facebook login working on my site.
Problem: I used the facebook login on my site http://fewbs.com/login. It appeared fine and easily but the popup which opened for login never closed and opened the root of my site.
Solutions on web:
1. Most of them used receiver_htm file in the FB.init which I was not using so it was quite confusing whether or not I was doing the right thing.
2. Some said that fb:login-button takes onlogin attribute which really helped me take the next step
3. Others said that onlogin method should take "document.location.href=document.location.href". This did not work for me.
My solution:
A combination and a variant of the above solutions here :-
Use the code below at the bottom of your page in script tags

window.onload = function(){
FB.init({appId: 'xxxxxxxxx', status: true, cookie: true,xfbml: true});
}
function doFBLogin()
{
FB.api('/me', function(response) {
//your code here
});
}

Use the codebelow to place the login button.
<fb:login-button onlogin="doFBLogin();"></fb:login-button>

There are couple of other options for fb:login-button which can be found here
http://wiki.developers.facebook.com/index.php/Fb:login-

UPDATE: I think the login popup closes automatically if it finds any meaningful JS expressions in the onlogin attribute.

Flash not rendering in apps

I am staring to write again after a long time to log my technical experience gained during the development of fewbs

I will discuss about firefox issue of flash rendering today. I am using Firefox 3.5.7 with Flash 10.
Problem: Flash based widgets were not rendering on the tabs i.e. I could hear the sound from them but they were not rendering.
Solution on web:
1) Doctype issues as given on experts-exchange

2) An old bug of firefox 3 and Flash 9 which I thought was not relevant. Adobe notes


RCA: When switch of tab is made in fewbs(not in firefox) the last tab's display was set to none and the current's one to block. As a result the contents of flash movie in the hidden tab rolled back to beginning and movie stops playing. When
the user goes to the last tab, firefox loads the whole movie again. To fix this, I used zIndexes to place the frame over each other and fool firefox that the the tab is still active.
Due to this, firefox intermittently stopped rendering flash movies even in the current tab as apps. It was frightening at first as I thought I might have hit a firefox bug. Excluding youtube from embeddable apps section seemed like a death stone.
Soltuion: After hours of digging, I, thankfully, noticed the above happening. Now I no longer use zIndexes. I quietly transport the tabs to a style top value of -1000px :)

iframes and cloneNode

During my implementation of favs and its various submenu i got to know about the limitation in IE 6 of using DOM functions like cloneNode, insertBefore, appendChild.
Problem:
1. Node is defined / made in a different frame
2. That node is accessed from parent or a different frame
3. The node is accessible and one can change all its properties but when it used as an arguement in one of the DOM functions like cloneNode, insertBefore, appendChild, 'invalid argument' error is thrown.
Solution:
Simple, make a new node and make its outerHTML equal to the node in other frame. You will have to set its position though.
I read that this problem doesn;t appear in case of mozilla and safari. other browsers cannot handle this.

Make space for moving divs between other divs

I am glad today because I really found a better way of doing things than what I had found. Isn't the feeling of achievement which gives the best exhilaration?
Problem - You have a list of divs. You have to make these divs movable and when it is moving, it should become transparent and when it is put on some other div in the list, the latter should move to the former's place to make space for it to land.
Solution on net -

1. Make a list of divs.
2. Make them transparent as discussed in the last post.
3. Keep the left, top, width and height of divs as attributes.
4. As the mouse moves, check if the mouse has entered some other div's dimensions and if so swap it with the position of the div being moved
5. If the target div is not the last div, then get its next div and move the source div before its next sibling using insert before
6. If the target div is the last div use appendchild

My solution -

3. Why the dimensions of the div is to be kept is very important. Since the moving div was always found to be above the target div, no mouse events reached the target div. Therefore this round about solution was used. I found a way to keep the source div beneath the target div. In the process I learnt about the z-index. z-index only works when its scope is the same. In other words, z-index only works correctly when it is used to order sister elements. Therefore the z-index of the parentNode can only be compared to the those of its sister elements and not its children. Similarly the z-index of the children cannot be compared with its parents. And yeah, the z-index only when the position attribute is explicitly set to absolute / relative

Anyway, so finally, by adjusting the z-index, I positioned the divs correctly and now the source div was always below the target div and now all the mouse events reached it. Now on mouseover, I can swap the positions. Saved a lot of CPU :)

5. Not much improvement here, just a little more elegant method. If the source div is before the target div, then the target div has to be inserted before the source div. This is done by insertBefore method. if the source div is after target div, then the source div is to be inserted before the target div

All this can be seen in action at fewbs.com. (not immediately, the release is not final. Check in a weeks time)

Auto reload

alpha opacity in IE seems to work only when width and height is given.
It also works with position absolute even when width and height is not given.
I could not find much about its behavious even on MSDN nor in forums.
For now i am done with what I was doing...
and yeah the opacity thingy works in mozilla by giving opacity : x where 0 < x < 1.