[Problem] Tried to register widget with id==xxx but that id is already registered

You may face this error while working with the Dojo widgets. The main reason behind this error is that you are trying to create a widget with an id that already exists. The holder of this id may be the same widget.

If it is the same widget then you can destroy the old attached Dojo widget before re-creating the new one again as shown:

attachedWidget = dijit.byId("xxx");
		
if (attachedWidget ) {			
    attachedWidget.destroy();
    attachedWidget = null;
}
// Create the new attached widget here with the same id (xxx)...

If it is not the same widget then you can create the widget with another id without having to destroy the old one.

Invoking SCA Components from your Dojo iWidget Components in the WebSphere Process Server

To be able to call an SCA component from a Dojo iWidget component in a convenient way, you need to provide an HTTP Export for the SCA component. In this post, I will show you how to do this in details.

The complete post is here: https://www.ibm.com/developerworks/mydeveloperworks/blogs/hazem/entry/september_2_2011_10_42_pm?lang=en

Ten Tips for enhancing your Page Response Time

1. Do not declare your JavaScript functions in your view (JSP, XHTML, …etc). Instead, externalize your JavaScript functions to an external JavaScript file because JavaScript files are cached on the browser level.
2. Compress the JavaScript files.
3. Reduce the JavaScript code on the page load.
4. Do not use more than one client framework (for example: Dojo and YUI) on the same page.
5. Avoid duplicate JavaScript files include.
6. Avoid duplicate JavaScript functions.
7. Do not define your styles in your view. Instead, externalize your CSS code to a CSS file because CSS files are cached on the browser level.
8. Compress the CSS files.
9. Collect the images into one big image, and use the background-position for extracting the desired image.
10. Use Ajax for page updates like loading lists and independent lists.

IE Redirection Problem inside Facebook Application's Canvas (IFrame) and Solution

When working in my Facebook java application that performs Facebook authentication through OAuth. I found a very weird behavior when configuring my application on Facebook and setting the application canvas type to “IFrame”.

My FacebookSignInServlet is just redirecting the user to the Facebook graph OAuth authorization URL[1] and appending the application callback servlet URL to the Facebook graph OAuth authorization URL. This scenario works fine on all the browsers except IE.

After digging in the problem, I found that the problem was due to an IE iframe redirection security issue.

How to resolve this issue?

In your FacebookSignInServlet, set the P3P header to “IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT” as follows:

response.addHeader("P3P",
"CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\"");

And redirection will work without extra efforts from your side.

[1] https://graph.facebook.com/oauth/authorize

Protect your Java web application from the consequences of uploading large files

Problem Description:
Sometimes in our web applications, we provide HTML file inputs to our application users so they can upload their documents to the server.

BUT what will happen if a user or more upload a 3 or 4 or more giga bytes files to the server in the same time?
Unfortunately the server may have an OutOfMemory exception.

Another problem is that the client side file size validation is not supported on all browsers for security reasons (Actually the only allowed file size validation is on IE through the “Scripting.FileSystemObject” ActiveX control). So this sort of validation unfortunately has to be done on the server side???

Problem Solution:
Limiting the HTTP post size through setting a value for the (PostSizeLimit) parameter in the HTTP server.
In the IBM HTTP server (for example), this parameter exists in a file called (plugin-cfg.xml) under (/WebSphere/AppServer/config/cells).

Setting the PostSizeLimit to “20971520” means that the maximum file size to be allowed is 20 MB.
And setting the PostSizeLimit parameter to “-1” means unlimited post size.

I wish that this tip can be useful to you guys.

Uncaught TypeError: Object #<a Document#> has no method ‘write’

Error Conditions:
This issue happens when you use GMaps4JSF with Google Chrome (also Safari) in Facelets XHTML files (The default PDL for JSF 2.0). Actually this issue generally happens when you make make any include to Google Maps inside XHTML files:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAxrVS1QxlpJHXxQ2Vxg2bJBQdkFK-tWRbPPQS4ACM1pq_e-PltxQXeyH20wQuqDaQ_6EM5UeGGVpnIw"> </script>

Solution:
Just set the content type to “text/html”:

<f:view contentType="text/html">

Build your own TSS feed reader using Yahoo! pipes in 30 second!!!

In Yahoo! pipes you can build your TSS feed reader with no code, all what you should do is just:
1. Drag and drop the Fetch Site Feed block, and then write “http://www.theserverside.com”.
2. Drag a filter block and define in the rules:
item.title -> contains -> “Java”.
3. Link the blocks together, as described in the screenshot below.

You can see the demo here: http://pipes.yahoo.com/tssfeedreader/tssfeedreader



Build your own TSS feed reader using Google Mashup Editor (GME)

Google Mashup Editor allows you to build Mashup applications easily and quickly.
Using it, I could build a TSS feed reader in 10 minutes.

Before seeing the application code, we should know the ingredients of a GME application.
1. Page:
Every GME page should be enclosed by the <gm:page> tag.
2. Modules:
A set of tags that perform different operations.
Example of modules are <gm:list> (which can read directly an RSS feed),
(which wraps the google map) and <gm:item> (which can represent an RSS feed item).
3. Template:
The <gm:template> tag is responsible for information viewing and formatting. It works as XSLT to XML.
It can view and format the <gm:list> and <gm:item> content.
4. Events:
The <gm:handleEvent> tag allows defining events on the modules.
5. Controls:
A set of tags that define the User Interface (UI). They must be inside the <gm:template> tag.
For example:
<gm:text>, <gm:date>, <gm:select> …etc.

OK after knowing the GME application ingredients, Let's see our application few lines of code.

<gm:page title="TSS Feed Reader" authenticate="false">
<div class="gm-app-header">
	<h1>Welcome to the GME TSS feed Reader</h1>
</div>

<gm:list id="tssList"
	 data="http://www.theserverside.com/rss/theserverside-rss2.xml"
	 pagesize="5">
</gm:list>
<gm:item id="item" template="rssFeedTemplate">
	<gm:handleEvent src="tssList"/>
</gm:item>

<gm:template id="rssFeedTemplate">
	<div>
		<b><gm:text ref="atom:title"/></b><br/>
		<gm:html ref="atom:summary"/><br/>
	</div>
</gm:template>

</gm:page>

It is easy, is not it?
Here is the application url: http://tssfeedreader.googlemashups.com/


Redirecting the web application to its home page when session is timeout

One of the requirements that might be needed in web applications is redirecting the web application to its home page when the user session is timeout.

There are many approaches that can be followed to solve this problem, like using the JavaScript setTimeout() method to refresh the page every period of time and a servlet filter that check whether the session is expired to redirect the application to its home page.

Although this solution is applicable but will really induce massive amounts of stomach acid to the web application and to its maintaince.

After digging for a while in the problem, I found this smart approach; all what you should do is just place the following meta tag inside the <head> tag of your JSPs :

<meta http-equiv="refresh" 
content="<%= session.getMaxInactiveInterval() %>;
url=<your_login_page>.jsp">