FACES-1988 Develop alloy:progressBar component

alloy/components-ext.xml

@@ -2468,14 +2468,13 @@
 		parentClass="javax.faces.component.UIComponentBase"
 		rendererParentClass="com.liferay.faces.alloy.render.internal.AlloyRendererBase" yui="true">
 		<description>
-			<![CDATA[ProgressBar is a UIComponent that displays a progress bar.
-				<br />
-				This component includes a client-side JavaScript API which can be accessed using the <code>clientKey</code> attribute and the <code>Liferay.component()</code> method:
+			<![CDATA[<p>ProgressBar is a UIComponent that displays a progress bar and can operate as a server-side or client-side progress indicator.</p>
+				<p>This component includes a client-side JavaScript API which can be accessed using the <code>clientKey</code> attribute and the <code>Liferay.component()</code> method:
 				<ul>
 					<li><code>set()</code> - The <code>set()</code> method can be used to set the client-side value of the component e.g. <code>Liferay.component('progressBar').set('value', value);</code>.</li>
-					<li><code>start()</code> - The <code>start()</code> method begins polling the server for the value of the component.</li>
-					<li><code>stop()</code> - The <code>stop()</code> method ends the component's polling of the server.</li>
-				</ul>]]>
+					<li><code>start()</code> - The <code>start()</code> method starts polling the server for the value of the component.</li>
+					<li><code>stop()</code> - The <code>stop()</code> method stops the component's polling of the server.</li>
+				</ul></p>]]>
 		</description>
 		<attributes>
 			<attribute>

alloy/src/main/java/com/liferay/faces/alloy/component/progressbar/ProgressBar.java

@@ -39,14 +39,13 @@ public class ProgressBar extends ProgressBarBase implements ClientBehaviorHolder
 	// Public Constants
 	public static final String COMPONENT_FAMILY = "com.liferay.faces.alloy.component.progressbar";
 	public static final String COMPONENT_TYPE = "com.liferay.faces.alloy.component.progressbar.ProgressBar";
-	public static final String POLL = "poll";
 	public static final String RENDERER_TYPE =
 		"com.liferay.faces.alloy.component.progressbar.internal.ProgressBarRenderer";
 	public static final String STYLE_CLASS_NAME = "alloy-progress-bar";
 
 	// Private Constants
 	private static final Collection<String> EVENT_NAMES = Collections.unmodifiableCollection(Arrays.asList(
-				ProgressCompleteEvent.PROGRESS_COMPLETE, POLL));
+				"progressComplete", "poll"));
 
 	public ProgressBar() {
 		super();
@@ -80,7 +79,7 @@ public void queueEvent(FacesEvent facesEvent) {
 
 	@Override
 	public String getDefaultEventName() {
-		return POLL;
+		return "poll";
 	}
 
 	@Override

alloy/src/main/java/com/liferay/faces/alloy/component/progressbar/ProgressCompleteEvent.java

@@ -24,9 +24,6 @@
  */
 public class ProgressCompleteEvent extends AjaxBehaviorEvent {
 
-	// Public Constants
-	public static final String PROGRESS_COMPLETE = "progressComplete";
-
 	/// serialVersionUID
 	private static final long serialVersionUID = 7578789532730213902L;
 

alloy/src/main/java/com/liferay/faces/alloy/component/progressbar/internal/AjaxBehaviorWrapper.java

@@ -26,7 +26,6 @@
 import javax.faces.event.AbortProcessingException;
 import javax.faces.event.AjaxBehaviorListener;
 import javax.faces.event.BehaviorEvent;
-import javax.faces.render.ClientBehaviorRenderer;
 
 
 /**
@@ -171,16 +170,7 @@ public boolean isResetValues() {
 
 	@Override
 	public String getScript(ClientBehaviorContext behaviorContext) {
-
-		String script = null;
-		FacesContext facesContext = behaviorContext.getFacesContext();
-		ClientBehaviorRenderer clientBehaviorRenderer = getRenderer(facesContext);
-
-		if (clientBehaviorRenderer != null) {
-			script = clientBehaviorRenderer.getScript(behaviorContext, this);
-		}
-
-		return script;
+		return getWrapped().getScript(behaviorContext);
 	}
 
 	@Override

alloy/src/main/java/com/liferay/faces/alloy/component/progressbar/internal/ProgressBarAjaxBehavior.java

@@ -13,12 +13,14 @@
  */
 package com.liferay.faces.alloy.component.progressbar.internal;
 
-import java.util.AbstractList;
 import java.util.ArrayList;
 import java.util.Collection;
 import java.util.List;
 
 import javax.faces.component.behavior.AjaxBehavior;
+import javax.faces.component.behavior.ClientBehaviorContext;
+import javax.faces.context.FacesContext;
+import javax.faces.render.ClientBehaviorRenderer;
 
 import com.liferay.faces.util.lang.StringPool;
 
@@ -77,14 +79,7 @@ public String getOnevent() {
 
 		// Add the onsuccess() callback to the onevent() callback in order to allow for a recursive call to our
 		// polling function.
-		StringBuilder oneventCallbackStringBuilder = new StringBuilder();
-		oneventCallbackStringBuilder.append("function(data){if(data.status==='success'){");
-		oneventCallbackStringBuilder.append(onsuccessCallback);
-		oneventCallbackStringBuilder.append("();}");
-		oneventCallbackStringBuilder.append(onevent);
-		oneventCallbackStringBuilder.append("}");
-
-		return oneventCallbackStringBuilder.toString();
+		return "function(data){if(data.status==='success'){" + onsuccessCallback + "();}" + onevent + "}";
 	}
 
 	@Override
@@ -97,7 +92,21 @@ public Collection<String> getRender() {
 			renderList.add(clientId);
 		}
 
-		return (AbstractList<String>) renderList;
+		return renderList;
+	}
+
+	@Override
+	public String getScript(ClientBehaviorContext behaviorContext) {
+
+		String script = null;
+		FacesContext facesContext = behaviorContext.getFacesContext();
+		ClientBehaviorRenderer clientBehaviorRenderer = getRenderer(facesContext);
+
+		if (clientBehaviorRenderer != null) {
+			script = clientBehaviorRenderer.getScript(behaviorContext, this);
+		}
+
+		return script;
 	}
 
 	@Override

alloy/src/main/java/com/liferay/faces/alloy/component/progressbar/internal/ProgressBarRenderer.java

@@ -29,10 +29,8 @@
 import javax.faces.render.FacesRenderer;
 
 import com.liferay.faces.alloy.component.progressbar.ProgressBar;
-import com.liferay.faces.alloy.component.progressbar.ProgressCompleteEvent;
 import com.liferay.faces.util.component.ComponentUtil;
 import com.liferay.faces.util.component.Styleable;
-import com.liferay.faces.util.context.ExtFacesContext;
 import com.liferay.faces.util.js.JavaScriptFragment;
 import com.liferay.faces.util.lang.StringPool;
 import com.liferay.faces.util.render.internal.BufferedScriptResponseWriter;
@@ -77,7 +75,7 @@ public void encodeJavaScriptCustom(FacesContext facesContext, UIComponent uiComp
 		}
 
 		Map<String, List<ClientBehavior>> clientBehaviorMap = progressBar.getClientBehaviors();
-		List<ClientBehavior> pollEventClientBehaviors = clientBehaviorMap.get(ProgressBar.POLL);
+		List<ClientBehavior> pollEventClientBehaviors = clientBehaviorMap.get("poll");
 
 		// If the developer has specified <f:ajax event="poll" />, then
 		if ((pollEventClientBehaviors != null) && !pollEventClientBehaviors.isEmpty()) {
@@ -105,15 +103,15 @@ public void encodeJavaScriptCustom(FacesContext facesContext, UIComponent uiComp
 			StringBuilder buf = new StringBuilder();
 			buf.append("function(pollingFunction){");
 
-			// ClientBehavior.getScript(ClientBehaviorContext clientBehaviorContext) renders javascript which expects
-			// a javascript variable named 'event' to have been initilized and contain the DOM event which triggered the
+			// ClientBehavior.getScript(ClientBehaviorContext clientBehaviorContext) renders javascript which expects a
+			// javascript variable named 'event' to have been initilized and contain the DOM event which triggered the
 			// request. Since there is no DOM event which triggers the progressBar events, render javascript
 			// initializing event to null;
 			buf.append("var event = null;");
 
 			String clientId = progressBar.getClientId(facesContext);
 			ClientBehaviorContext clientBehaviorContext = ClientBehaviorContext.createClientBehaviorContext(
-					facesContext, progressBar, ProgressBar.POLL, clientId, null);
+					facesContext, progressBar, "poll", clientId, null);
 			int size = pollEventClientBehaviors.size();
 
 			// It is possible to specify multiple <f:ajax event="poll" /> tags (even though there is no benefit).
@@ -238,7 +236,6 @@ protected void encodeHiddenAttributes(FacesContext facesContext, ResponseWriter
 		String clientId = progressBar.getClientId(facesContext);
 		String contentBoxClientId = clientId.concat(CONTENT_BOX_SUFFIX);
 		encodeClientId(responseWriter, CONTENT_BOX, contentBoxClientId, first);
-		first = false;
 
 		// Begin encoding event listeners that occur on the event.
 		encodeNonEscapedObject(responseWriter, StringPool.ON, StringPool.BLANK, first);
@@ -248,8 +245,7 @@ protected void encodeHiddenAttributes(FacesContext facesContext, ResponseWriter
 		boolean onFirst = true;
 		String oncomplete = progressBar.getOncomplete();
 		Map<String, List<ClientBehavior>> clientBehaviorMap = progressBar.getClientBehaviors();
-		List<ClientBehavior> clientBehaviorsForComplete = clientBehaviorMap.get(
-				ProgressCompleteEvent.PROGRESS_COMPLETE);
+		List<ClientBehavior> clientBehaviorsForComplete = clientBehaviorMap.get("progressComplete");
 
 		if ((oncomplete != null) || ((clientBehaviorsForComplete != null) && !clientBehaviorsForComplete.isEmpty())) {
 
@@ -272,7 +268,7 @@ protected void encodeHiddenAttributes(FacesContext facesContext, ResponseWriter
 			if ((clientBehaviorsForComplete != null) && !clientBehaviorsForComplete.isEmpty()) {
 
 				ClientBehaviorContext clientBehaviorContext = ClientBehaviorContext.createClientBehaviorContext(
-						facesContext, progressBar, ProgressCompleteEvent.PROGRESS_COMPLETE, clientId, null);
+						facesContext, progressBar, "progressComplete", clientId, null);
 
 				for (ClientBehavior clientBehaviorForComplete : clientBehaviorsForComplete) {
 					onCompleteBuilder.append(clientBehaviorForComplete.getScript(clientBehaviorContext));
@@ -299,17 +295,14 @@ protected void encodeHiddenAttributes(FacesContext facesContext, ResponseWriter
 		if ((label != null) && label.contains(TOKEN)) {
 
 			String escapedLabel = RendererUtil.escapeJavaScript(label);
-			StringBuilder onValueChangeStringBuilder = new StringBuilder();
-			onValueChangeStringBuilder.append("function(event){this.set('label','");
-			onValueChangeStringBuilder.append(escapedLabel);
-			onValueChangeStringBuilder.append("'.replace(LFAI.TOKEN_REGEX, event.newVal));}");
-			encodeNonEscapedObject(responseWriter, VALUE_CHANGE, onValueChangeStringBuilder.toString(), onFirst);
+			encodeNonEscapedObject(responseWriter, VALUE_CHANGE,
+				"function(event){this.set('label','".concat(escapedLabel).concat(
+					"'.replace(LFAI.TOKEN_REGEX, event.newVal));}"), onFirst);
 			onFirst = false;
 		}
 
 		// Finish encoding event listeners that occur on the event.
 		responseWriter.write(StringPool.CLOSE_CURLY_BRACE);
-		first = false;
 	}
 
 	/**
@@ -375,7 +368,7 @@ private boolean isServerPollingEnabled(UIComponent uiComponent) {
 
 		ProgressBar progressBar = (ProgressBar) uiComponent;
 		Map<String, List<ClientBehavior>> clientBehaviorMap = progressBar.getClientBehaviors();
-		List<ClientBehavior> clientBehaviorsForPolling = clientBehaviorMap.get(ProgressBar.POLL);
+		List<ClientBehavior> clientBehaviorsForPolling = clientBehaviorMap.get("poll");
 
 		return ((clientBehaviorsForPolling != null) && !clientBehaviorsForPolling.isEmpty());
 	}

alloy/src/main/resources/META-INF/alloy.taglib.xml

@@ -6902,7 +6902,7 @@ java.lang.Object)</method-signature>
 		</tag-extension>
 	</tag>
 	<tag>
-		<description><![CDATA[ProgressBar is a UIComponent that displays a progress bar.     <br />     This component includes a client-side JavaScript API which can be accessed using the <code>clientKey</code> attribute and the <code>Liferay.component()</code> method:     <ul>      <li><code>set()</code> - The <code>set()</code> method can be used to set the client-side value of the component e.g. <code>Liferay.component('progressBar').set('value', value);</code>.</li>      <li><code>start()</code> - The <code>start()</code> method begins polling the server for the value of the component.</li>      <li><code>stop()</code> - The <code>stop()</code> method ends the component's polling of the server.</li>     </ul>]]></description>
+		<description><![CDATA[<p>ProgressBar is a UIComponent that displays a progress bar and can operate as a server-side or client-side progress indicator.</p>     <p>This component includes a client-side JavaScript API which can be accessed using the <code>clientKey</code> attribute and the <code>Liferay.component()</code> method:     <ul>      <li><code>set()</code> - The <code>set()</code> method can be used to set the client-side value of the component e.g. <code>Liferay.component('progressBar').set('value', value);</code>.</li>      <li><code>start()</code> - The <code>start()</code> method starts polling the server for the value of the component.</li>      <li><code>stop()</code> - The <code>stop()</code> method stops the component's polling of the server.</li>     </ul></p>]]></description>
 		<tag-name>progressBar</tag-name>
 		<component>
 			<component-type>com.liferay.faces.alloy.component.progressbar.ProgressBar</component-type>

demos/showcase/showcase-webapp/src/main/resources/alloy.properties

@@ -17,7 +17,7 @@ misc_alloy_body=general:webappBody.xhtml,portletBody.xhtml
 misc_alloy_form=general:form.xhtml,FormBackingBean.java|instant-ajax:form.xhtml,FormBackingBean.java|view-params:form.xhtml,FormBackingBean.java
 misc_alloy_head=general:webappHead.xhtml,portletHead.xhtml
 misc_alloy_loadConstants=general:loadConstants.xhtml,ClassConstants.java,EnumConstants.java,InterfaceConstants.java
-misc_alloy_progressBar=general:progressBar.xhtml,ProgressBarBacking.java|client-side:progressBar.xhtml|server-events:progressBar.xhtml,ProgressBarBacking.java
+misc_alloy_progressBar=general:progressBar.xhtml,ProgressBarBacking.java|client-side:progressBar.xhtml|server-events:progressBar.xhtml,ProgressBarBacking.java|vertical:progressBar.xhtml,ProgressBarBacking.java
 multimedia_alloy_audio=general:audio.xhtml,AudioBacking.java|graceful-degradation:audio.xhtml,AudioBacking.java|alternate-formats:audio.xhtml,AudioBacking.java|html5-passthrough:audio.xhtml
 multimedia_alloy_icon=general:icon.xhtml
 multimedia_alloy_image=general:image.xhtml

demos/showcase/showcase-webapp/src/main/resources/i18n.properties

@@ -269,10 +269,11 @@ alloy-popover=[javadoc:com.liferay.faces.alloy.component.popover.Popover] is a [
 alloy-popover-general=The component *must be associated* with another component (such as [vdldoc:alloy:button]) via the [vdldoc:alloy:popover:for] attribute, so that the popover can be displayed nearby. When [vdldoc:alloy:dialog:dismissible]=`true` the dialog can be dismissed by clicking outside of it.<br /><br />*JavaScript API:*<ul><li>`show()` causes the popover to be visible</li><li>`hide()` causes the popover to be invisible</li><li>`toggle()` causes the popover visibility to be toggled</li></ul>
 alloy-popover-general-example-1=Default usage with [vdldoc:alloy:popover:dismissible]=`true`
 alloy-popover-general-example-2=Alternate usage with [vdldoc:alloy:dialog:dismissible]=`false`
-alloy-progressbar=[javadoc:com.liferay.faces.alloy.component.progressbar.ProgressBar] is a [javadoc:javax.faces.component.UIComponent] that displays a progress bar.
-alloy-progressbar-general=The component can be used to display *server-side* progress. If an [vdldoc:f:ajax] child tag is specified with [vdldoc:f:ajax:event]=`poll` (or if no event is specified since "poll" is the default), the component will poll the server for progress by checking the [vdldoc:alloy:progressBar:value] attribute on the server and updating the client-side widget to the new value. The [vdldoc:alloy:progressBar:pollingDelay] attribute can be used to specify the *delay* (in milliseconds) before dispatching a polling Ajax request after recieving the response of a previous request.<br /><br />*JavaScript API:*<ul><li>`start()` causes the <code>progressBar</code> to begin polling the server.</li><li>`stop()` causes the <code>progressBar</code> to stop polling the server.</li></ul>
-alloy-progressbar-client-side=The component can be used to track *client-side progress* by utilizing the JavaScript `set` method.
-alloy-progressbar-server-events=Specifying the [vdldoc:f:ajax] child tag with [vdldoc:f:ajax:event]=`progressComplete` will broadcast the server-side [javadoc:com.liferay.faces.alloy.component.progressbar.ProgressCompleteEvent]. Listening to the event is accomplished by specifying a backing-bean method via the [vdldoc:alloy:progressBar:completeListener] attribute. The [vdldoc:alloy:progressBar:pollingDelay] attribute can be used to specify the *delay* (in milliseconds) before dispatching a polling Ajax request after recieving the response of a previous request.
+alloy-progressbar=[javadoc:com.liferay.faces.alloy.component.progressbar.ProgressBar] is a [javadoc:javax.faces.component.UIComponent] that displays a progress bar and can operate as a *server-side* or *client-side* progress indicator.
+alloy-progressbar-general=The component can display *server-side* progress by nesting an [vdldoc:f:ajax] child tag. When [vdldoc:f:ajax:event]=`"poll"` (the default), the component will *poll the server for progress* by checking the [vdldoc:alloy:progressBar:value] attribute on the server and updating the client-side widget. The [vdldoc:alloy:progressBar:pollingDelay] attribute can be used to specify the *delay* (in milliseconds) before dispatching a polling Ajax request after receiving the response of a previous request.<br /><br />*JavaScript API:*<ul><li>`start()` causes the progress bar to start polling the server.</li><li>`stop()` causes the progress bar to stop polling the server.</li></ul>
+alloy-progressbar-client-side=The component can display *client-side* progress by utilizing the `set` JavaScript function.
+alloy-progressbar-server-events=Specifying the [vdldoc:f:ajax] child tag with [vdldoc:f:ajax:event]=`"progressComplete"` will broadcast the server-side [javadoc:com.liferay.faces.alloy.component.progressbar.completeEvent]. Listening to the event is accomplished by specifying a backing-bean method via the [vdldoc:alloy:progressBar:completeListener] attribute. The [vdldoc:alloy:progressBar:pollingDelay] attribute can be used to specify the *delay* (in milliseconds) before dispatching a polling Ajax request after recieving the response of a previous request.
+alloy-progressbar-vertical=The component can be displayed vertically by specifying [vdldoc:alloy:progresBar:layout]=`"pageDirection"`.
 alloy-row=[javadoc:com.liferay.faces.alloy.component.row.Row] is a [javadoc:javax.faces.component.UIPanel] component that renders a `&lt;div&gt;` and is designed to be used in conjunction with [vdldoc:alloy:column] child component tags.
 alloy-row-general=The component takes [vdldoc:alloy:column] tags as children in order to layout components in a tabular grid.
 alloy-row-column-width=The *width* of an [vdldoc:alloy:column] can be specified via the [vdldoc:alloy:column:width] attribute.

demos/showcase/showcase-webapp/src/main/webapp/component/alloy/progressbar/client-side/progressBar.xhtml

@@ -20,7 +20,7 @@
 
 					function stopProgress() {
 
-						if(progressInterval) {
+						if (progressInterval) {
 							clearInterval(progressInterval);
 						}
 					};

demos/showcase/showcase-webapp/src/main/webapp/component/alloy/progressbar/vertical/progressBar.xhtml

@@ -0,0 +1,25 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:alloy="http://liferay.com/faces/alloy"
+	xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:showcase="http://xmlns.jcp.org/jsf/composite/showcase"
+	xmlns:ui="http://xmlns.jcp.org/jsf/facelets" template="/templates/component-2col.xhtml">
+
+	<ui:define name="col1">
+		<alloy:form>
+			<showcase:example>
+				<alloy:progressBar id="progressBar" clientKey="progressBar" height="200" label="{0}%"
+					layout="pageDirection" pollingDelay="1000" width="50" value="#{progressBarBacking.progress}">
+					<f:ajax listener="#{progressBarBacking.incrementProgress}" />
+				</alloy:progressBar>
+				<alloy:button value="#{i18n['start-progress']}"
+					onclick="Liferay.component('progressBar').startPolling(); return false;" />
+				<alloy:button value="#{i18n['stop-progress']}"
+					onclick="Liferay.component('progressBar').stopPolling(); return false;" />
+				<alloy:commandButton actionListener="#{progressBarBacking.resetProgress}"
+					onclick="Liferay.component('progressBar').stopPolling();"
+					value="#{i18n['reset-progress']}">
+					<f:ajax render="progressBar" />
+				</alloy:commandButton>
+			</showcase:example>
+		</alloy:form>
+	</ui:define>
+
+</ui:composition>