Note
The Project Code is available here.
When an activity is displayed, UIActivityFactory will look for its registered custom actvity display by activity's type. If not found, UIDefaultActivity will be called for displaying that activity.
For example, in Social, there is an activity of type "exosocial:spaces" created by SpaceActivityPublisher, but now, you want to display it without own UI component instead of the default one. To do that, follow these steps.
1. Create a sample project:
mvn archetype:generate
[INFO] Scanning for projects...
[INFO] Searching repository for plugin with prefix: 'archetype'.
[INFO] artifact org.apache.maven.plugins:maven-archetype-plugin: checking for updates from central
[INFO] snapshot org.apache.maven.plugins:maven-archetype-plugin:2.0-alpha-6-SNAPSHOT: checking for updates from central
[INFO] snapshot org.apache.maven.archetype:maven-archetype:2.0-alpha-6-SNAPSHOT: checking for updates from central
[INFO] ------------------------------------------------------------------------
[INFO] Building Maven Default Project
[INFO] task-segment: [archetype:generate] (aggregator-style)
[INFO] ------------------------------------------------------------------------
[INFO] Preparing archetype:generate
[INFO] No goals needed for project - skipping
[INFO] snapshot org.apache.maven.archetype:archetype-common:2.0-alpha-6-SNAPSHOT: checking for updates from central
[INFO] snapshot org.apache.maven.archetype:archetype-common:2.0-alpha-6-SNAPSHOT: checking for updates from apache.snapshots
[INFO] [archetype:generate {execution: default-cli}]
[INFO] Generating project in Interactive mode
[INFO] No archetype defined. Using maven-archetype-quickstart (org.apache.maven.archetypes:maven-archetype-quickstart:1.0)
Choose archetype:
1: remote -> docbkx-quickstart-archetype (null)
2: remote -> gquery-archetype (null)
3: remote -> gquery-plugin-archetype (null)
//....
285: remote -> wicket-scala-archetype (Basic setup for a project that combines Scala and Wicket,
depending on the Wicket-Scala project. Includes an example Specs
test.)
286: remote -> circumflex-archetype (null)
Choose a number: 76: 76
Choose version:
1: 1.0
2: 1.0-alpha-1
3: 1.0-alpha-2
4: 1.0-alpha-3
5: 1.0-alpha-4
6: 1.1
Choose a number: : 1
Define value for property 'groupId': : org.exoplatform.social.samples
Define value for property 'artifactId': : exo.social.samples.activity-plugin
Define value for property 'version': 1.0-SNAPSHOT: 1.0.0-SNAPSHOT
Define value for property 'package': org.exoplatform.social.samples: org.exoplatform.social.samples.activityPlugin
Confirm properties configuration:
groupId: org.exoplatform.social.samples
artifactId: exo.social.samples.activity-plugin
version: 1.0.0-SNAPSHOT
package: org.exoplatform.social.samples.activityPlugin
Y: y
2. Edit the pom.xml file as below.
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.exoplatform.social</groupId>
<artifactId>social-project</artifactId>
<version>1.1.0-GA</version>
</parent>
<groupId>org.exoplatform.social.samples</groupId>
<artifactId>exo.social.samples.activity-plugin</artifactId>
<packaging>jar</packaging>
<version>1.1.0-GA</version>
<name>exo.social.samples.activity-plugin</name>
<build>
<sourceDirectory>src/main/java</sourceDirectory>
<outputDirectory>target/classes</outputDirectory>
<resources>
<resource>
<directory>src/main/resources</directory>
<includes>
<include>**/*.gtmpl</include>
</includes>
</resource>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.xml</include>
</includes>
</resource>
</resources>
</build>
<dependencies>
<dependency>
<groupId>org.exoplatform.portal</groupId>
<artifactId>exo.portal.webui.core</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.exoplatform.portal</groupId>
<artifactId>exo.portal.webui.portal</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.exoplatform.social</groupId>
<artifactId>exo.social.component.core</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.exoplatform.social</groupId>
<artifactId>exo.social.component.webui</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.exoplatform.social</groupId>
<artifactId>exo.social.component.service</artifactId>
<scope>provided</scope>
</dependency>
</dependencies>
</project>
To use the custom UI component for displaying its activity, you need a class that must be a subclass of BaseUIActivity.
3. Call UISpaceSimpleActivity
package org.exoplatform.social.samples.activityplugin;
import org.exoplatform.social.webui.activity.BaseUIActivity;
import org.exoplatform.webui.config.annotation.ComponentConfig;
import org.exoplatform.webui.core.lifecycle.UIFormLifecycle;
@ComponentConfig(
lifecycle = UIFormLifecycle.class,
template = "classpath:groovy/social/plugin/space/UISpaceSimpleActivity.gtmpl"
)
public class UISpaceSimpleActivity extends BaseUIActivity {
}
The UISpaceSimpleActivity.gtmpl template should be created under main/resources/groovy/social/plugin/space:
<div>This is a space activity UI component displayed for type "exosocial:spaces"</div>
An activity builder as explained later is also needed.
package org.exoplatform.social.samples.activityplugin;
import org.exoplatform.social.core.activity.model.Activity;
import org.exoplatform.social.webui.activity.BaseUIActivity;
import org.exoplatform.social.webui.activity.BaseUIActivityBuilder;
public class SimpleSpaceUIActivityBuilder extends BaseUIActivityBuilder {
@Override
protected void extendUIActivity(BaseUIActivity uiActivity, Activity activity) {
// TODO Auto-generated method stub
}
}
4. Create the configuration.xml file under conf/portal:
<configuration xmlns="http://www.exoplaform.org/xml/ns/kernel_1_1.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.exoplaform.org/xml/ns/kernel_1_1.xsd http://www.exoplaform.org/xml/ns/kernel_1_1.xsd">
<external-component-plugins>
<target-component>org.exoplatform.webui.ext.UIExtensionManager</target-component>
<component-plugin>
<name>add.action</name>
<set-method>registerUIExtensionPlugin</set-method>
<type>org.exoplatform.webui.ext.UIExtensionPlugin</type>
<init-params>
<object-param>
<name>Simple Space Activity</name>
<object type="org.exoplatform.social.webui.activity.UIActivityExtension">
<field name="type">
<string>org.exoplatform.social.webui.activity.BaseUIActivity</string>
</field>
<field name="name">
<string>exosocial:spaces</string>
</field>
<field name="component">
<string>org.exoplatform.social.samples.activityplugin.UISpaceSimpleActivity</string>
</field>
<field name="activityBuiderClass">
<string>org.exoplatform.social.samples.activityplugin.SimpleSpaceUIActivityBuilder</string>
</field>
</object>
</object-param>
</init-params>
</component-plugin>
</external-component-plugins>
</configuration>
Note that exosocial:spaces must have its value matching with the activity's type that you want to display with your UI component.
Assume that you have already built the Social project with version 1.1. If you do not know how to, have a look at building from sources with Social 1.1.0-CR01. Next, build a sample project and copy the jar file to /tomcat/lib. Then, run Social, create a space and access it, you can see the space's activity of type "exosocial:spaces" is displayed by default in Social:
The custom UI component for displaying activity of type "exosocial:spaces" is like below:
5. Make the custom UI activity display have the look, feel and function like the default one.
When displaying an activity, you should make sure that the look and feel of the custom UI component is consistent and match with other activities and have the full functions of Like, Comments. To create another UI component to display, call UISpaceLookAndFeelActivity:
package org.exoplatform.social.samples.activityplugin;
import org.exoplatform.social.webui.activity.BaseUIActivity;
import org.exoplatform.webui.config.annotation.ComponentConfig;
import org.exoplatform.webui.config.annotation.EventConfig;
import org.exoplatform.webui.core.lifecycle.UIFormLifecycle;
@ComponentConfig(
lifecycle = UIFormLifecycle.class,
template = "classpath:groovy/social/plugin/space/UISpaceLookAndFeelActivity.gtmpl",
events = {
@EventConfig(listeners = BaseUIActivity.ToggleDisplayLikesActionListener.class),
@EventConfig(listeners = BaseUIActivity.ToggleDisplayCommentFormActionListener.class),
@EventConfig(listeners = BaseUIActivity.LikeActivityActionListener.class),
@EventConfig(listeners = BaseUIActivity.SetCommentListStatusActionListener.class),
@EventConfig(listeners = BaseUIActivity.PostCommentActionListener.class),
@EventConfig(listeners = BaseUIActivity.DeleteActivityActionListener.class, confirm = "UIActivity.msg.Are_You_Sure_To_Delete_This_Activity"),
@EventConfig(listeners = BaseUIActivity.DeleteCommentActionListener.class, confirm = "UIActivity.msg.Are_You_Sure_To_Delete_This_Comment")
}
)
public class UISpaceLookAndFeelActivity extends BaseUIActivity {
}
6. Create the UISpaceLookAndFeelActivity template. The easiest way is to copy the content of UIDefaultActivity.gtmpl to this template file:
<%
import org.exoplatform.portal.webui.util.Util;
import org.exoplatform.webui.form.UIFormTextAreaInput;
def pcontext = Util.getPortalRequestContext();
def jsManager = pcontext.getJavascriptManager();
def labelActivityHasBeenDeleted = _ctx.appRes("UIActivity.label.Activity_Has_Been_Deleted");
def activity = uicomponent.getActivity();
def activityDeletable = uicomponent.isActivityDeletable();
%>
<% if (activity) { //process if not null
jsManager.importJavascript("eXo.social.Util", "/social-resources/javascript");
jsManager.importJavascript("eXo.social.PortalHttpRequest", "/social-resources/javascript");
jsManager.importJavascript("eXo.social.webui.UIForm", "/social-resources/javascript");
jsManager.importJavascript("eXo.social.webui.UIActivity", "/social-resources/javascript");
def labelComment = _ctx.appRes("UIActivity.label.Comment");
def labelLike = _ctx.appRes("UIActivity.label.Like");
def labelUnlike = _ctx.appRes("UIActivity.label.Unlike");
def labelSource = _ctx.appRes("UIActivity.label.Source");
def inputWriteAComment = _ctx.appRes("UIActivity.input.Write_A_Comment");
def labelShowAllComments = _ctx.appRes("UIActivity.label.Show_All_Comments");
def labelHideAllComments = _ctx.appRes("UIActivity.label.Hide_All_Comments");
def labelOnePersonLikeThis = _ctx.appRes("UIActivity.label.One_Person_Like_This");
def labelPeopleLikeThis = _ctx.appRes("UIActivity.label.People_Like_This");
def labelYouLikeThis = _ctx.appRes("UIActivity.label.You_Like_This");
def labelYouAndOnePersonLikeThis = _ctx.appRes("UIActivity.label.You_And_One_Person_Like_This");
def labelYouAndPeopleLikeThis = _ctx.appRes("UIActivity.label.You_And_People_Like_This");
def likeActivityAction = uicomponent.event("LikeActivity", "true");
def unlikeActivityAction = uicomponent.event("LikeActivity", "false");
def commentList = uicomponent.getComments();
def allComments = uicomponent.getAllComments();
if (allComments) {
labelShowAllComments = labelShowAllComments.replace("{0}", allComments.size() + "");
labelHideAllComments = labelHideAllComments.replace("{0}", allComments.size() + "");
}
def displayedIdentityLikes = uicomponent.getDisplayedIdentityLikes();
def identityLikesNum = 0;
def labelLikes = null;
def toggleDisplayLikesAction = uicomponent.event("ToggleDisplayLikes");
def startTag = "<a onclick={{{"}}}$toggleDisplayLikesAction{{{"}}} id={{{"}}}ToggleDisplayListPeopleLikes${activity.id}{{{"}}} href={{{"}}}#ToggleDisplayListPeopleLikes{{{"}}}>";
def endTag = "</a>";
if (displayedIdentityLikes != null) {
identityLikesNum = displayedIdentityLikes.length;
}
def commentListStatus = uicomponent.getCommentListStatus();
def commentFormDisplayed = uicomponent.isCommentFormDisplayed();
def likesDisplayed = uicomponent.isLikesDisplayed();
//params for init UIActivity javascript object
def params = """
{activityId: '${activity.id}',
inputWriteAComment: '$inputWriteAComment',
commentMinCharactersAllowed: ${uicomponent.getCommentMinCharactersAllowed()},
commentMaxCharactersAllowed: ${uicomponent.getCommentMaxCharactersAllowed()},
commentFormDisplayed: $commentFormDisplayed,
commentFormFocused: ${uicomponent.isCommentFormFocused()}
}
"""
jsManager.addOnLoadJavascript("initUIActivity${activity.id}");
//make sures commentFormFocused is set to false to prevent any refresh to focus, only focus after post a comment
uicomponent.setCommentFormFocused(false);
def activityUserName, activityUserProfileUri, activityImageSource, activityContentBody, activityPostedTime;
def commentFormBlockClass = "", listPeopleLikeBlockClass = "", listPeopleBGClass = "";
if (!commentFormDisplayed) {
commentFormBlockClass = "DisplayNone";
}
if (!likesDisplayed) {
listPeopleLikeBlockClass = "DisplayNone";
}
if (uicomponent.isLiked()) {
if (identityLikesNum > 1) {
labelLikes = labelYouAndPeopleLikeThis.replace("{start}", startTag).replace("{end}", endTag).replace("{0}", identityLikesNum + "");
} else if (identityLikesNum == 1) {
labelLikes = labelYouAndOnePersonLikeThis.replace("{start}", startTag).replace("{end}", endTag);
} else {
labelLikes = labelYouLikeThis;
}
} else {
if (identityLikesNum > 1) {
labelLikes = labelPeopleLikeThis.replace("{start}", startTag).replace("{end}", endTag).replace("{0}", identityLikesNum + "");
} else if (identityLikesNum == 1) {
labelLikes = labelOnePersonLikeThis.replace("{start}", startTag).replace("{end}", endTag);
}
}
if (!labelLikes) {
//hides diplayPeopleBG
listPeopleBGClass = "DisplayNone";
}
activityContentTitle = activity.title;
activityPostedTime = uicomponent.getPostedTimeString(activity.postedTime);
activityUserName = uicomponent.getUserFullName(activity.userId);
activityUserProfileUri = uicomponent.getUserProfileUri(activity.userId);
activityImageSource = uicomponent.getUserAvatarImageSource(activity.userId);
if (!activityImageSource) {
activityImageSource = "/social-resources/skin/ShareImages/SpaceImages/SpaceLogoDefault_61x61.gif";
}
%>
<div class="UIActivity">
<script type="text/javascript">
function initUIActivity${activity.id}() {
new eXo.social.webui.UIActivity($params);
}
</script>
<% uiform.begin() %>
<div class="NormalBox clearfix">
<a class="Avatar" title="$activityUserName" href="$activityUserProfileUri">
<img title="$activityUserName" src="$activityImageSource" alt="$activityUserName" height="54px" width="56px">
</a>
<div class="ContentBox" id="ContextBox${activity.id}">
<div class="TitleContent clearfix">
<div class="Text">
<a title="$activityUserName" href="$activityUserProfileUri">$activityUserName</a>
</div>
<% if (activityDeletable) {%>
<div onclick="<%= uicomponent.event("DeleteActivity", uicomponent.getId(), ""); %>" class="CloseContentBoxNormal" id="DeleteActivityButton${activity.id}"><span></span></div>
<%}%>
</div>
<div class="Content">
$activityContentTitle (from custom UI component)<br>
</div>
<div class="LinkCM">
<span class="DateTime">$activityPostedTime *</span>
<% def toggleDisplayCommentAction = uicomponent.event('ToggleDisplayCommentForm', null, false);
def commentLink = "";
%>
<a class="LinkCM $commentLink" onclick="$toggleDisplayCommentAction" id="CommentLink${activity.id}" href="#comment">
$labelComment
</a> |
<% if (uicomponent.isLiked()) { %>
<a onclick="$unlikeActivityAction" class="LinkCM" id="UnLikeLink${activity.id}" href="#unlike">
$labelUnlike
</a>
<% } else { %>
<a onclick="$likeActivityAction" class="LinkCM" id="LikeLink${activity.id}" href="#like">
$labelLike
</a>
<% }%>
</div>
</div>
<div class="ListPeopleLikeBG $listPeopleBGClass">
<div class="ListPeopleLike">
<div class="ListPeopleContent">
<% if (!labelLikes) labelLikes = ""; %>
<div class="Title">$labelLikes</div>
<div class="$listPeopleLikeBlockClass">
<%
//def personLikeFullName, personLikeProfileUri, personLikeAvatarImageSource;
displayedIdentityLikes.each({
personLikeFullName = uicomponent.getUserFullName(it);
personLikeProfileUri = uicomponent.getUserProfileUri(it);
personLikeAvatarImageSource = uicomponent.getUserAvatarImageSource(it);
if (!personLikeAvatarImageSource) {
personLikeAvatarImageSource = "/social-resources/skin/ShareImages/activity/AvatarPeople.gif";
}
%>
<a class="AvatarPeopleBG" title="$personLikeFullName" href="$personLikeProfileUri">
<img width="47px" height="47px" src="$personLikeAvatarImageSource" alt="$personLikeFullName" title="$personLikeFullName" />
</a>
<% })%>
</div>
<div class="ClearLeft">
<span></span>
</div>
</div>
</div>
</div>
<div class="CommentListInfo">
<% if (uicomponent.commentListToggleable()) {
def showAllCommentsAction = uicomponent.event("SetCommentListStatus", "all");
def hideAllCommentsAction = uicomponent.event("SetCommentListStatus", "none");
%>
<div class="CommentBlock">
<div class="CommentContent">
<div class="CommentBorder">
<% if (commentListStatus.getStatus().equals("latest") || commentListStatus.getStatus().equals("none")) { %>
<a onclick="$showAllCommentsAction" href="#show-all-comments">
$labelShowAllComments
</a>
<% } else if (commentListStatus.getStatus().equals("all")) { %>
<a onclick="$hideAllCommentsAction" href="#hide-all-comments">
$labelHideAllComments
</a>
<% } %>
</div>
</div>
</div>
<% } %>
</div>
<% if (allComments.size() > 0) { %>
<div class="DownIconCM"><span></span></div>
<% }%>
<%
def commenterFullName, commenterProfileUri, commenterImageSource, commentMessage, commentPostedTime;
def first = true, commentContentClass;
commentList.each({
if (first & !uicomponent.commentListToggleable()) {
commentContentClass = "CommentContent";
first = false;
} else {
commentContentClass = "";
}
commenterFullName = uicomponent.getUserFullName(it.userId);
commenterProfileUri = uicomponent.getUserProfileUri(it.userId);
commenterImageSource = uicomponent.getUserAvatarImageSource(it.userId);
if (!commenterImageSource) {
commenterImageSource = "/social-resources/skin/ShareImages/activity/AvatarPeople.gif";
}
commentMessage = it.title;
commentPostedTime = uicomponent.getPostedTimeString(it.postedTime);
%>
<div id="CommentBlock${activity.id}" class="CommentBox clearfix">
<a class="AvatarCM" title="$commenterFullName" href="$commenterProfileUri">
<img src="$commenterImageSource" alt="$commenterFullName" height="36px" width="38px">
</a>
<div class="ContentBox">
<div class="Content">
<a href="$commenterProfileUri"><span class="Commenter">$commenterFullName<span></a><br />
$commentMessage
<br/>
</div>
<div class="LinkCM">
<span class="DateTime">$commentPostedTime</span>
</div>
</div>
<%
if (uicomponent.isCommentDeletable(it.userId)) {
%>
<div onclick="<%= uicomponent.event("DeleteComment", uicomponent.id, it.id); %>" class="CloseCMContentHilight"><span></span></div>
<% } %>
</div>
<% }) %>
<div class="CommentBox $commentFormBlockClass clearfix" id="CommentFormBlock${activity.id}">
<% uicomponent.renderChild(UIFormTextAreaInput.class); %>
<input type="button" onclick="<%= uicomponent.event("PostComment") %>" value="$labelComment" class="CommentButton DisplayNone" id="CommentButton${activity.id}" />
</div>
</div>
<% uiform.end() %>
</div>
<% } else { %> <!-- activity deleted -->
<div class="UIActivity Deleted">$labelActivityHasBeenDeleted</div>
<% }%>
And you should make needed modifications for this template:
<div class="Content">
$activityContentTitle (from custom UI component)<br>
</div>
7. Reconfigure the configuration.xml file:
<configuration xmlns="http://www.exoplaform.org/xml/ns/kernel_1_1.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.exoplaform.org/xml/ns/kernel_1_1.xsd http://www.exoplaform.org/xml/ns/kernel_1_1.xsd">
<external-component-plugins>
<target-component>org.exoplatform.webui.ext.UIExtensionManager</target-component>
<component-plugin>
<name>add.action</name>
<set-method>registerUIExtensionPlugin</set-method>
<type>org.exoplatform.webui.ext.UIExtensionPlugin</type>
<init-params>
<object-param>
<name>Look And Feel Space Activity</name>
<object type="org.exoplatform.social.webui.activity.UIActivityExtension">
<field name="type">
<string>org.exoplatform.social.webui.activity.BaseUIActivity</string>
</field>
<field name="name">
<string>exosocial:spaces</string>
</field>
<field name="component">
<string>org.exoplatform.social.samples.activityplugin.UISpaceLookAndFeelActivity</string>
</field>
<field name="activityBuiderClass">
<string>org.exoplatform.social.samples.activityplugin.SimpleSpaceUIActivityBuilder</string>
</field>
</object>
</object-param>
</init-params>
</component-plugin>
</external-component-plugins>
</configuration>
8. Rebuild the sample project, copy the .jar file to tomcat/lib. Run the server again and see the result:
Note
Currently, you have to copy and paste in the template file. By this way, you have full control of the UI but it is not a good way when there are changes in UIDefaultActivity. This will be improved soon so that no copy/paste is needed.