Examples with ClientComponent com.liferay.faces.util.component.ClientComponent used on opensource projects

Example 1 with ClientComponent

use of com.liferay.faces.util.component.ClientComponent in project liferay-faces-alloy by liferay.

the class DialogRenderer method encodeJavaScriptCustom.

@Override
public void encodeJavaScriptCustom(FacesContext facesContext, UIComponent uiComponent) throws IOException {
    ResponseWriter responseWriter = facesContext.getResponseWriter();
    Dialog dialog = (Dialog) uiComponent;
    ClientComponent clientComponent = (ClientComponent) uiComponent;
    String clientVarName = getClientVarName(facesContext, clientComponent);
    String clientKey = clientComponent.getClientKey();
    if (clientKey == null) {
        clientKey = clientVarName;
    }
    encodeLiferayComponentVar(responseWriter, "dialog", clientKey);
    // Prevent scrolling when the show() JavaScript function is called.
    responseWriter.write("var ");
    responseWriter.write(clientKey);
    responseWriter.write("_scrollx=window.scrollX;");
    responseWriter.write("var ");
    responseWriter.write(clientKey);
    responseWriter.write("_scrolly=window.scrollY;");
    responseWriter.write("A.Do.before(function(stuff) { ");
    responseWriter.write(clientKey);
    responseWriter.write("_scrollx=window.scrollX; ");
    responseWriter.write(clientKey);
    responseWriter.write("_scrolly=window.scrollY;},Liferay.component('");
    responseWriter.write(clientKey);
    responseWriter.write("'),'show');");
    responseWriter.write("A.Do.after(function(stuff){window.scrollTo(");
    responseWriter.write(clientKey);
    responseWriter.write("_scrollx,");
    responseWriter.write(clientKey);
    responseWriter.write("_scrolly);},Liferay.component('");
    responseWriter.write(clientKey);
    responseWriter.write("'),'show');");
    // FACES-2209 remove class="hide" from the "mask" div that is used for modal dialogs
    // the mask div is placed as the first child of the parent of the dialog
    // removing this class allows a modal dialog to be fully rendered upon a partial request.
    responseWriter.write("var " + clientKey + "_mask=A.one('#");
    String clientId = dialog.getClientId(facesContext);
    String escapedBoundingBoxClientId = ComponentUtil.escapeClientId(clientId);
    responseWriter.write(escapedBoundingBoxClientId);
    responseWriter.write("').ancestor().one('.hide');");
    responseWriter.write("if (");
    responseWriter.write(clientKey);
    responseWriter.write("_mask) { ");
    responseWriter.write(clientKey);
    responseWriter.write("_mask.removeClass('hide') }; ");
    if (!dialog.isHideIconRendered()) {
        responseWriter.write("dialog.removeToolbar('header');");
    }
    // move the overlayBody div into the modal-body div
    String overlayBodyClientId = clientId.concat(OVERLAY_BODY_SUFFIX);
    String escapedOverlayBodyClientId = ComponentUtil.escapeClientId(overlayBodyClientId);
    String contentBoxClientId = clientId.concat(CONTENT_BOX_SUFFIX);
    String escapedContentBoxClientId = ComponentUtil.escapeClientId(contentBoxClientId);
    responseWriter.write("A.one('#");
    responseWriter.write(escapedOverlayBodyClientId);
    responseWriter.write("').appendTo(A.one('div#");
    responseWriter.write(escapedContentBoxClientId);
    responseWriter.write(">div.modal-body'));");
    if (!dialog.isModal() && dialog.isDismissible()) {
        encodeOverlayDismissible(responseWriter, dialog, clientKey);
    }
    JavaScriptFragment dialogJavaScriptFragment = new JavaScriptFragment("dialog");
    encodeFunctionCall(responseWriter, "LFAI.initDialog", dialogJavaScriptFragment);
    encodeOverlayJavaScriptCustom(responseWriter, facesContext, dialog, clientKey);
}

Example 2 with ClientComponent

use of com.liferay.faces.util.component.ClientComponent in project liferay-faces-alloy by liferay.

the class AlloyRendererCommon method encodeJavaScriptMain.

/**
 * This method renders JavaScript which creates the Alloy component and puts it into the Liferay.component map.
 * Example output of this function is shown below:
 *
 * <pre>
 *	    {@code
 *	        Liferay.component('clientKey',
 *	                new A.AlloyComponent({
 *	                    attribute1:value1,
 *	                    attribute2:value2,
 *	                    ...
 *	                    attributeN:valueN
 *	                })
 *	        );
 *	    }
 * </pre>
 *
 * @throws  IOException
 */
/* package-private */
static void encodeJavaScriptMain(FacesContext facesContext, UIComponent uiComponent, String alloyClassName, AlloyRenderer alloyRenderer) throws IOException {
    ResponseWriter responseWriter = facesContext.getResponseWriter();
    ClientComponent clientComponent = (ClientComponent) uiComponent;
    String clientKey = clientComponent.getClientKey();
    if (clientKey == null) {
        clientKey = alloyRenderer.getClientVarName(facesContext, clientComponent);
    }
    // Begin encoding JavaScript to create the Alloy JavaScript component and put it in the Liferay.component map.
    responseWriter.write("Liferay.component('");
    String escapedClientKey = RendererUtil.escapeJavaScript(clientKey);
    responseWriter.write(escapedClientKey);
    responseWriter.write("',");
    // Write Alloy JavaScript component.
    responseWriter.write("new A.");
    responseWriter.write(alloyClassName);
    responseWriter.write("({");
    alloyRenderer.encodeAlloyAttributes(facesContext, responseWriter, uiComponent);
    responseWriter.write("})");
    // Close Liferay.component parenthesis.
    responseWriter.write(");");
}

Example 3 with ClientComponent

use of com.liferay.faces.util.component.ClientComponent in project liferay-faces-alloy by liferay.

the class SelectRatingRenderer method encodeJavaScriptCustom.

@Override
public void encodeJavaScriptCustom(FacesContext facesContext, UIComponent uiComponent) throws IOException {
    ResponseWriter responseWriter = facesContext.getResponseWriter();
    ClientComponent clientComponent = (ClientComponent) uiComponent;
    String clientVarName = getClientVarName(facesContext, clientComponent);
    String clientKey = clientComponent.getClientKey();
    if (clientKey == null) {
        clientKey = clientVarName;
    }
    encodeLiferayComponentVar(responseWriter, clientVarName, clientKey);
    // The above should render something like this: var _1_WAR_showcaseportlet__j_idt6_j_idt19_j_idt22_j_idt23 =
    // Liferay.component('myClientKey');
    // J-
    // What should we consider when we initialize the value of this component?
    // 
    // Contributor			   What value do they want?				What will we do with this value?
    // ----------------------  -----------------------------------	---------------------------------------------
    // 1. AlloyUI			   -1									Ignore.
    // 
    // 2. JSF				   ""									Use as default.
    // 
    // 3. Developer Attribute  Liferay.component(liferayKey).		If defined, use this, but remember it is the
    // .get('defaultSelected')				number of stars, not the value.
    // 
    // 4. Developer EL		   rating.getValue()					If defined, use this.
    // 
    // 5. User Event												Since no interaction from the user yet, use
    // the value chosen above.
    // J+
    // 2. JSF
    String hiddenInputValue = "";
    // J-
    // 3. Developer attribute
    // no developer attribute is allowed for this component, even though alloyui allows for an attribute called defaultSelected
    // that attribute has not been exposed here in favor of using normal JSF application techniques for establishing defaults
    // in the model.
    // J+
    // 4. and 5. If the developer EL or user input is specified, then the value of the hidden input field should be
    // set to this value of the rating component
    ValueHolder valueHolder = (ValueHolder) uiComponent;
    Object value = valueHolder.getValue();
    if (value != null) {
        hiddenInputValue = value.toString();
    }
    // Initialize the hidden input generated by AlloyUI to the hiddenInputValue, instead of its default of -1.
    responseWriter.write("document.getElementsByName('");
    String clientId = uiComponent.getClientId(facesContext);
    String escapedClientId = RendererUtil.escapeJavaScript(clientId);
    responseWriter.write(escapedClientId);
    responseWriter.write("')[0].value='");
    String escapedHiddenInputValue = RendererUtil.escapeJavaScript(hiddenInputValue);
    responseWriter.write(escapedHiddenInputValue);
    responseWriter.write("';");
    // Make sure that the rendered rating is correct (i.e. how many stars are filled). The only way that the
    // client-side LiferayComponent would have a selectedIndex at this point is if the defaultSelected attribute
    // is set. Carefully decide if we need to clear the selected rating or if we need to select the user's selected
    // rating.
    Long selectedIndex = (Long) facesContext.getAttributes().remove(SELECTED_INDEX);
    // render of the page, and no valid default value was set.
    if (selectedIndex.intValue() == SelectRatingResponseWriter.NO_SELECTION_INDEX) {
        // This is case 1.  the user selected to clear the value.
        if (facesContext.isPostback()) {
            responseWriter.write(clientVarName);
            responseWriter.write(".clearSelection();");
        } else // Otherwise, this is case 2. Since there has been no user interaction yet, then we do not need to clear
        // anything, or select anything, since the Alloy component will simply be able to render itself correctly.
        {
        // no operation needed.
        }
    } else // J-
    // Otherwise, JSF says that this component has a value, because JSF rendered one of the input type="radio" as
    // "checked" and its selectedIndex is not -1.  There are two possible reasons for this:
    // 1. The model has a default value coming through on initial render
    // 2. The user clicked on a star, this is a postback, and we need the component to have that many stars filled.
    // 
    // This is the case where an alloySelectedIndex has been established (or Alloy renders stars already
    // filled to the defaultSelected input), but the user has selected a different number of stars than the
    // alloySelectedIndex, so we need to "select" the correct number of stars to be filled. If the alloySelectedIndex is
    // the same as the indexSelectedByJSF, we do not want to select it again, since alloy has already filled the
    // correct number of stars. If we did select it again, it would clear the stars ... not showing what the user
    // selected.
    // J+
    {
        String indexSelectedByJSF = selectedIndex.toString();
        responseWriter.write("var alloySelectedIndex=");
        responseWriter.write(clientVarName);
        responseWriter.write(".get('selectedIndex');if(");
        responseWriter.write(indexSelectedByJSF);
        responseWriter.write("!=alloySelectedIndex){");
        responseWriter.write(clientVarName);
        responseWriter.write(".select(");
        responseWriter.write(indexSelectedByJSF);
        responseWriter.write(");}");
    }
    // J-
    // What should we consider when a user clicks on the component?
    // 
    // Contributor			   What value do they want?				What will we do with this value?
    // ----------------------  -----------------------------------	---------------------------------------------
    // 1. AlloyUI			   event.target.get('value')			Use this as the value unless it is -1 which is
    // the cancel value.
    // 
    // 2. JSF				   ''									Use this value instead of -1 or the cancel
    // value.
    // 
    // 3. Developer Attribute  Liferay.component('liferayKey')		Ignore because user input is overriding this.
    // .get('defaultSelected')
    // 
    // 4. Developer EL		   rating.getValue()					Ignore because user input is overriding this.
    // 
    // 5. User Event		   event.target.get('value')			Use this unless it is the cancel or reset
    // value.
    // J+
    // Start encoding the onclick event.
    responseWriter.write(clientVarName);
    responseWriter.write(".on('click',function(event){");
    // Within the onclick event, establish the newValue of the hiddenInput.
    responseWriter.write("var newValue=(event.target.get('value')=='-1')?'':event.target.get('value');");
    // Within the onclick event, set the newValue of the hidden input.
    responseWriter.write("document.getElementsByName('");
    responseWriter.write(escapedClientId);
    responseWriter.write("')[0].value=newValue;");
    // Within the onclick event, write out the jsf onclick event to call, that was captured by the ResponseWriter,
    // if any.
    String onClick = (String) facesContext.getAttributes().remove(FACES_RUNTIME_ONCLICK);
    if (onClick != null) {
        // Escape the escapedClientId's backslashes since it is passed as a argument to the JavaScript
        // replaceFirst function below, which expects a regex.
        String backslashEscapedClientId = escapedClientId.replace("\\", DOUBLE_BACKSLASH);
        String hiddenInputNodeJs = "document.getElementsByName('" + backslashEscapedClientId + "')[0]";
        responseWriter.write(onClick.replaceFirst("this", hiddenInputNodeJs));
    }
    // Finish encoding the onclick event.
    responseWriter.write("});");
}

Example 4 with ClientComponent

use of com.liferay.faces.util.component.ClientComponent in project liferay-faces-alloy by liferay.

the class OutputTooltipRenderer method encodeJavaScriptCustom.

@Override
public void encodeJavaScriptCustom(FacesContext facesContext, UIComponent uiComponent) throws IOException {
    ClientComponent clientComponent = (ClientComponent) uiComponent;
    String clientVarName = getClientVarName(facesContext, clientComponent);
    String clientKey = clientComponent.getClientKey();
    if (clientKey == null) {
        clientKey = clientVarName;
    }
    ResponseWriter responseWriter = facesContext.getResponseWriter();
    OutputTooltip tooltip = (OutputTooltip) uiComponent;
    encodeOverlayJavaScriptCustom(responseWriter, facesContext, tooltip, clientKey);
    if ((tooltip.getFor() == null) && facesContext.isProjectStage(ProjectStage.Development)) {
        logger.error("The 'for' attribute is required for alloy:outputTooltip");
    }
    // In order to workaround a bug where the tooltip appears in the incorrect place, set the trigger again after
    // the tooltip has been initialized
    encodeLiferayComponentVar(responseWriter, clientVarName, clientKey);
    responseWriter.write(clientVarName);
    responseWriter.write(".set('trigger',");
    responseWriter.write(clientVarName);
    responseWriter.write(".get('trigger'));");
}

Example 5 with ClientComponent

use of com.liferay.faces.util.component.ClientComponent in project liferay-faces-alloy by liferay.

the class InputSourceCodeRenderer method encodeJavaScriptCustom.

@Override
public void encodeJavaScriptCustom(FacesContext facesContext, UIComponent uiComponent) throws IOException {
    ResponseWriter responseWriter = facesContext.getResponseWriter();
    InputSourceCode inputSourceCode = (InputSourceCode) uiComponent;
    Boolean readOnly = inputSourceCode.getReadOnly();
    ClientComponent clientComponent = (ClientComponent) uiComponent;
    String clientVarName = getClientVarName(facesContext, clientComponent);
    String clientKey = clientComponent.getClientKey();
    if (clientKey == null) {
        clientKey = clientVarName;
    }
    encodeLiferayComponentVar(responseWriter, clientVarName, clientKey);
    if ((readOnly == null) || (!readOnly)) {
        String hiddenInputClientId = getHiddenInputClientId(facesContext, uiComponent);
        String escapedHiddenInputClientId = "#" + ComponentUtil.escapeClientId(hiddenInputClientId);
        responseWriter.write(clientVarName);
        responseWriter.write(".getSession().on('change', function() {A.one('");
        responseWriter.write(escapedHiddenInputClientId);
        responseWriter.write("').set('value',");
        responseWriter.write(clientVarName);
        responseWriter.write(".getSession().getValue())});");
    }
    responseWriter.write(clientVarName);
    responseWriter.write(".editor.setOptions({ minLines: ");
    responseWriter.write(inputSourceCode.getMinLines().toString());
    responseWriter.write("});");
    responseWriter.write(clientVarName);
    responseWriter.write(".editor.setOptions({ maxLines: ");
    responseWriter.write(inputSourceCode.getMaxLines().toString());
    responseWriter.write("});");
}