Exploring web2.0 features in web sphere portal8.0

Web2.0 :-  All over Web2.0 contains latest features in client side programming models like Ajax. Client side programming :-  Portal supports client side programming by providing apis to perform operations  like preferences, changing windows state Proceed by the following steps :- 1) Add a reference for the client side programming model tag library: <%@ taglib uri="http://www.ibm.com/xmlns/prod/websphere/portal/v6.1/portlet-client-model"      prefix="portlet-client-model" %> <portlet-client-model:init>      <portlet-client-model:require module="ibm.portal.xml.*"/>      <portlet-client-model:require module="ibm.portal.portlet.*"/> </portlet-client-model:init> 2) For a complete list of modules for use with the client side programming model refer to the public API documentation. Use the object ibm.portal.portlet.PortletWindow as an entry point: <script>    dojo.addOnLoad(function() {       <%=namespace%>_portletWindow = new ibm.portal.portlet.PortletWindow("<%=portletWindowID%>");    }); </script> Sample Jsp :-  <%@page session="false" contentType="text/html" pageEncoding="ISO-8859-1" import="java.util.*,javax.portlet.*,com.ibm.explorecsa.*" %> <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>         <%@taglib uri="http://www.ibm.com/xmlns/prod/websphere/portal/v6.1/portlet-client-model" prefix="portlet-client-model" %>         <portlet:defineObjects/> <portlet-client-model:init>       <portlet-client-model:require module="ibm.portal.xml.*"/>       <portlet-client-model:require module="ibm.portal.portlet.*"/>    </portlet-client-model:init>   <script>    dojo.addOnLoad(function() {       <portlet:namespace/>_portletWindow = new ibm.portal.portlet.PortletWindow("<%=portletWindowID%>");    }); </script> <DIV style="margin: 6px"> <H3 style="margin-bottom: 3px">Welcome!</H3> This is a sample view mode page.  You have to edit this page to customize it for your own use.<BR> </DIV> Live text for click to action :-  Using this you can define a source and action links. When some one  clicks on source we can pass data to action. Source tag The source tag must be an HTML span ( <span> ) or division ( <div> ) elements that is annotated with a c2a:source class. The properties of a source tag are as follows: Table 1. Source tag properties Property Content Mandatory c2a:typename We can define a namesapce to uniquely identify source and action{http://www.google.com#123} Yes c2a:value Actual data that is passed to the target operation. Yes c2a:anchor This will be displayed as a link to user. Were actually users initiate the process. No c2a:display Markup that is inserted as a header into the menu that is generated after clicking source and click to actions. No Target tag The target tag must be a HTML form ( <form> ) that is annotated with a c2a:target class. The properties of a target tag are as follows: Table 2. Target tag properties Property Content Mandatory c2a:typename We can define a namesapce to uniquely identify source and action{http://www.google.com#123} Yes c2a:action-label This string will be displayed when user clicks on source and then select {click for actions} Yes c2a:action-param Finally the data passed from source is placed here No

Example :- 

<%@page session="false" contentType="text/html" pageEncoding="ISO-8859-1" import="java.util.*,javax.portlet.*,com.ibm.explorecsa.*" %>

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>        

<%@taglib uri="http://www.ibm.com/xmlns/prod/websphere/portal/v6.1/portlet-client-model" prefix="portlet-client-model" %>        

<portlet:defineObjects/>

<portlet-client-model:init>

      <portlet-client-model:require module="ibm.portal.xml.*"/>

      <portlet-client-model:require module="ibm.portal.portlet.*"/>   

</portlet-client-model:init> 

<!--Below ibm image is source link for action -->

<div class="c2a:source someotherclass">

    <span class="c2a:typename" 

          style="display:none">http://www.ibm.com/xmlns/prod/datatype#email822

    </span>

    <b class="c2a:value" style="display:none;">johndoe@acme.com</b>

    <img class="c2a:anchor" src="<%=request.getContextPath() %>/img/my_logo.jpg"/>   

    <p class="c2a:display" style="display:none;">             

        <b>This is a sample click-to-action source</b>          

        <b>You can add an optional header to your action menu</b>

    </p>   

</div>

<!--After user clicks on ibm the data in value is populated in text box -->

<form class="c2a:target" onsubmit="doSomething(this);return false"

      action="javascript:void(0)" > 

    <span class="c2a:typename" style="display:none;"> http://www.ibm.com/xmlns/prod/datatype#email822</span>

    <p class="c2a:action-label">Show inbox</p> 

    <input type="text" class="c2a:action-param" name="someInputName">

</form>

Output :-