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 three conferences:

JSF Summit

Dec 1-4, 2009
Orlando, FL

CommunityOne West
Here I'll be co-speaking with Ed Burns, who is co-chairman of the JSR 314 (JSF 2.0) Expert Group

June 1-3, 2009
The Moscone Center
San Francisco
Map

This is an open developer conference. Monday 6/1 is free!

Liferay East Coast User Conference

May 21, 2009
Rivet Logic Corporation (Training Center)
1775 Wiehle Avenue, 3rd floor
Reston, VA 20190
Map

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 real-timecommunication 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!

4 Comments

Please sign in to comment.

Looks nice but how does that work in a clustered environment? How about the performance aspects with thousands of concurrent users?

Please sign in to reply.

For a clustered environment, you'll want to make use of the ICEfaces Enterprise Push Server. This applies JMS within the cluster to provide a single point of contact for all Ajax Push page updates, thereby solving browser connection limit problems. It also improves scalability through custom application server Asynchronous Request Processing (ARP). In order to serve thousands of concurrent users, a cluster will very likely be required, perhaps even for the session memory overhead (depending on the application). Fortunately, Ajax Push is very easily parallelizable: by broadcasting a render request to the cluster as a whole, all the nodes can work independently to push the updates to the connected browsers.

Please sign in to reply.

ICEfaces works fine. I'll try those portlets when they are available.

Please sign in to reply.

Looks really good. Could you post the code? I am especially interested in the sn:friend component and the overall configuration and integration with ICEfaces.

Please sign in to reply.

Menu Display

Blogs

Category Filter

More Blog Entries

Try out Portal Pack 3.0.1

Portal Pack JSF Portlet (Woodstock) Page Navigation Issue - workaround