Tuesday, 19 May 2009
Conference Talks: Social Networking Portlets with ICEfaces Ajax Push
I have the privilege of speaking about Social Networking Portlets with ICEfaces Ajax Push at the following two conferences:
 |
 |
|
Liferay East Coast User Conference May 21, 2009 |
CommunityOne West June 1-3, 2009 This is an open developer conference. Monday 6/1 is free! |
The talks will focus on the power and elegance of Liferay + ICEfaces Ajax Push, and how these technologies can be used together to create Social Networking portlets with Liferay Portal.
Social networking is a natural addition to portals, already a meeting place for applications. Diverse systems and users can be brought together for web-based communication and collaboration. When introduced to Ajax Push, Portlets can provide near-real-time communication features, such as presence, chat, and new forms of application-specific interaction.
Here's a screen shot of two portlets I'll be demontrating: ICEfaces Friends, and ICEfaces Chat:
The friends portlet is presence-aware, in that it has an application-scoped bean that listens to users logging-in/out of the portal. When it receives one of those events, ICEfaces Ajax Push will fire a visual effect, alerting the user of the friend's online status. If online, then the chat icon is activated. If the user clicks on the chat icon, then ICEfaces Ajax Push is used to achieve inter-portlet communication with the Chat portlet on the right. A new chat session is created, and users can chat with one another in near-real-time, again thanks to ICEfaces Ajax Push.
One of the things that I love about JSF, is the elegant, clean separation of the Model, View, and Controller concerns of the MVC design pattern. Case in point: Here's the entire XHTML markup for the Chat portlet:.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns:c="http://java.sun.com/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ice="http://www.icesoft.com/icefaces/component"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:sn="http://www.liferay.com/jsf/facelets/socialnetworking">
<ice:portlet styleClass="portlet-content">
<sn:styling />
<ice:form>
<ice:messages />
<c:set value="#{chatRoomsModel.roomsWithUser}" var="chatRoomsWithUser" />
<ice:panelTabSet rendered="#{!empty chatRoomsWithUser}" value="#{chatRoomsWithUser}" var="chatRoom">
<ice:panelTab label="#{chatRoom.name}">
<ice:panelGroup id="scroller" style="overflow: auto; width: 100%; height: 250px;">
<ice:dataTable rowClasses="results-row,results-row alt"
width="100%" value="#{chatRoom.chatMessages}" var="chatMessage">
<ice:column style="width: 50px;">
<sn:friend
portraitStyleClass="avatar" portraitWidth="30px" showJobTitle="false"
showOnlineStatus="false" user="#{chatMessage.user}" />
</ice:column>
<ice:column>
<ice:outputText value="#{chatMessage.date}">
<f:convertDateTime pattern="MM/dd/yyyy hh:mm:ss a" />
</ice:outputText>
<br />
<ice:outputText value="#{chatMessage.text}" />
</ice:column>
</ice:dataTable>
</ice:panelGroup>
<ice:inputText action="#{chatRoomsBacking.addMessage(chatRoom)}" value="#{chatRoomsBacking.messageText}" />
<ice:commandButton action="#{chatRoomsBacking.addMessage(chatRoom)}" value="#{message['add-message']}" />
</ice:panelTab>
</ice:panelTabSet>
</ice:form>
</ice:portlet>
</f:view>
Also, these portlets make heavy use of Facelets Composite Components, and demonstrate how you can create new JSF components entirely with XHTML markup.
Hope to see you at one of these conferences!
Posted by at 7:29 PM in Entries by Neil Griffin