JSR 286 Two Phrase Rendering with WebSphere Portal

I was trying to implement a JSR-286 portlet with the new feature called two phrase rendering in IBM WebSphere Portal. You can use this feature to change the title of the portlet, add headers or cookies and so on. In my job, we were trying to add CSS and JavaScript files in the header.
The default value of the two phrase rendering is false, which is turning off. To enable it, you will need to put the following configuration in your portlet configuration. You can either put them in the scope of <portlet-app> or each individual portlet.

 
 <container-runtime-option>
    <name>javax.portlet.renderHeaders</name>
    <value>true</value>
  </container-runtime-option> 

Second, you will need to overrdie the doHeader() method to add your CSS and JavaScript files:

protected void doHeaders(RenderRequest request, RenderResponse response) {

        //CSS
 Element linkElement = response.createElement("link");
 linkElement.setAttribute("rel", "stylesheet");
 linkElement.setAttribute("type", "text/css");
 String filePath = "/css/my.css";
 linkElement.setAttribute("href", filePath); 
 response.addProperty(MimeResponse.MARKUP_HEAD_ELEMENT, linkElement);

        //JS
 Element scriptElement = response.createElement("script");
 scriptElement.setAttribute("type", "text/javascript");
 String filePath = "/js/my.js";
 scriptElement.setAttribute("src", filePath); 
 scriptElement.setTextContent(" ");
 response.addProperty(MimeResponse.MARKUP_HEAD_ELEMENT, scriptElement);
}

Usually, this should work without any issue. However, if you have your own custom theme, make sure in /themes/html/[theme name]/default.jsp has this IBM custom tag:

<portal-core:portletsHeadMarkupElements method="xhtml" />

<button> tags in IE 6 issue

Recently, I encountered a problem with IE6. As we know, IE6 is the worst browsers ever. However, there are still lots of users using it. The problem was using <button> on IE6.

The first issue was if you have a button tag like this:

<button name="myBtn" value="123">Remove Item</button>

In FireFox, you'll get myBtn=123 after your form submitted. However, in IE6, you'll receive myBtn=Remove Item

The other issue was if you have two <button> in the same form, they will all be submitted. My case was trying to create a service agreement page with two buttons. One is ACCEPT button and the other is DECLINE. However, in IE6, if I use <button> tags, I will alway get both of them and don't know how to handle it.

One way to fix the problem is using <input> tags instead of <button>. However, there are a lot of benefits using <button>, such as you can have content in <button> tags.

My way to handle the issue was making one disabled when the other one clicked. Therefore I alway get only one button value/content.

<button name="accept" value="accept" onClick="disableBtnDecline();">accept</button>
<button name="declinie" value="decline" onClick="disableBtnAccept();">decline</button>  

Timed Redirection

I was trying to create a timed redirection for a website. The requirement was after users register site successfully, display the success page and redirect to welcome page after 5 seconds. Also, we wanted to display countdown time on the screen.

There are many ways to redirect a page. You can use HTML meta tag to refresh a page like this:

< meta http-equiv="refresh" content="5;url=http://example.com/" / >

However, it is discouraged and deprecated by the W3C, since unexpected refresh can disorient users. Meta refresh also impairs the web browser's "back" button in some browsers (including Internet Explorer 6 and before), although most modern browsers compensate for this (Mozilla Firefox, Opera, Internet Explorer 7). -- from Wikipedia (Meta_refresh)

Also, since I need to display the countdown time, I decided to use Javascript. Some people on the Internet suggest using HTML input tags to display the countdown time. Personally, I don't like add a tag just for displaying something dynamic on the screen. Therefore, I use JavaScript setInterval method to handle it.

Here is the JavaScript code:

function timedRedirect(time, page){
  var timeTag = dojo.byId('redirectTime');
  if(timeTag){
    setInterval(function(){
      time--;
      timeTag.innerHTML = time;
      if(time == 0){
        window.location = page;
      } 
    }, 1000);
    timeTag.innerHTML = time;
   }
}

In your HTML file:

  
You will be redirected to the Welcome page inseconds or click here to go there now.
  

Also, I have a css style like this:

.redirectTime{
 margin-left: 5px;
 margin-right: 5px;
 color: #cc0000;
}

a.redirectLink, a.redirectLink:link, a.redirectLink:visited, a.redirectLink:active{
 color: #cc0000;
}

a.redirectLink:hover{
 color: #cc0000;
 text-decoration: underline;
}

Linkedin.com - A networking site for professionals

www.linkedin.com

Comparing with facebook, I do like Linkedin.com more. Through Linkedin, I can keep updating my resume to public, join a variety of professional groups to expend my network and connect with professionals around the world by just clicking the link.

I had a Linked account probably two years ago. However, I started frequently using Linked.com after I graduated from IIT last year. When I worked in Taiwan as a Java Developer, I could only connect to other professionals through the co-operated project, conferences, or online forum. There was no website like Linkedin.com at that time. Today, I can easily add someone who works for Google, Amazon or Apple in my professional network. It's amazing, isn't it?

Last but not least, if you're a job seeker, there are lots of recruiters and companies on Linkedin. Your resume can be found by them easily, or you can just send a message to someone in the company you're interested in working for.

Eat 24 hours!!

What do you do when you're hungry, lazy to cook and tired to go out? Yes, you call a deliver. However, if the only number you knew is the pizzeria around the corner and you're sick of it, what would you do? The website I introduce would be an idea.

This interesting site is called eat24hours.com. You can easily find a variety of cuisines near you on this website. And more importantly, they deliver. The benefits for you are convenient, easy and fast. Also the advantages for the restaurants are they can get more exposure online, and easily build a E-Commerce site. Moreover, it's totally FREE!! I wonder how the site makes money. Maybe for now they just want to seek as much as online users.

So........are you hungry now? Let's order something to eat!

P.S. If you are a restaurant owner and would like to join them, check this out:

http://san-francisco.eat24hours.com/index.php?SCR=s_newrest&cpa=owner

Inspecting my iPod touch!

Recently I started inspecting my iPod touch. How to synchronize with my iTune, how to download podcasting and how to install some iPod touch applications.

First of all, you have to create and an Apple ID on iTune or apple.com. Then you can log onto iTunes store to check out available musics, movies, podcastings or applications. Some of them are free, some of them are not.

After you choose something from iTunes store, they will be automatically downloaded to your PC, or Mac. Then you have to synchronize them to your iPod touch or iPhone.

Two things before synchronization:

1. You may need to upgrade your iPod software to the last version (v3.1.2) <= $4.95

2.Remember check your the tabs you want to synchronize on your iPod touch.

Our product is Explanation!

Commoncraft.com is the website that uses the interesting animation to explain some of difficult information technologies. Through the animation, no matter you are a geek or not, you can easily understand the concept of those technologies.

Here is an example. I bet you might hear what is called "Cloud Computing." One day you really want to figure it out what it really is and type the keyword on Google, you will find tons of articles with full of the jargon. However, by watching the animation on Commoncraft.com, you can get a simplification of what it is.

There are many other interesting animations on Commoncraft.com. What are you waiting for?

BTW, here is the funny one they did in Halloween 2007: