Author: abelevich Date: 2008-02-27 07:42:05 -0500 (Wed, 27 Feb 2008) New Revision: 6365 Modified: trunk/sandbox/ui/inplaceInput/src/main/config/component/inplaceinput.xml trunk/sandbox/ui/inplaceInput/src/main/java/org/richfaces/renderkit/InplaceInputBaseRenderer.java trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx Log: code review fixes Modified: trunk/sandbox/ui/inplaceInput/src/main/config/component/inplaceinput.xml =================================================================== --- trunk/sandbox/ui/inplaceInput/src/main/config/component/inplaceinput.xml 2008-02-27 12:35:37 UTC (rev 6364) +++ trunk/sandbox/ui/inplaceInput/src/main/config/component/inplaceinput.xml 2008-02-27 12:42:05 UTC (rev 6365) @@ -154,7 +154,7 @@ <description></description> </property> <property> - <name>changedClass</name> + <name>changeClass</name> <classname>java.lang.String</classname> <description></description> </property> @@ -169,7 +169,7 @@ <description></description> </property> <property> - <name>changedHoverClass</name> + <name>changeHoverClass</name> <classname>java.lang.String</classname> <description></description> </property> @@ -208,8 +208,7 @@ <name>oninputclick</name> <classname>java.lang.String</classname> <description>HTML: a script expression; a pointer button is clicked</description> - - </property> + </property> <property> <name>oninputdblclick</name> <classname>java.lang.String</classname> Modified: trunk/sandbox/ui/inplaceInput/src/main/java/org/richfaces/renderkit/InplaceInputBaseRenderer.java =================================================================== --- trunk/sandbox/ui/inplaceInput/src/main/java/org/richfaces/renderkit/InplaceInputBaseRenderer.java 2008-02-27 12:35:37 UTC (rev 6364) +++ trunk/sandbox/ui/inplaceInput/src/main/java/org/richfaces/renderkit/InplaceInputBaseRenderer.java 2008-02-27 12:42:05 UTC (rev 6365) @@ -28,7 +28,36 @@ private static Log logger = LogFactory.getLog(InplaceInputBaseRenderer.class); private static final String CONTROLS_FACET = "controls"; - + + private static final int NORMAL_KEY = 0; + + private static final int HOVERED_KEY = 1; + + private static final int EDITABLE_KEY = 2; + + private static final String INPLACE_COMPONENT = "COMPONENT"; + + private static final String INPLACE_CHANGED = "CHANGED"; + + private static final String INPLACE_VIEW = "VIEW"; + + private static final String INPLACE_EDITABLE = "EDITABLE"; + + private static final String INPLACE_NORMAL = "NORMAL"; + + private static final String INPLACE_HOVERED = "HOVERED"; + + private static final String INPLACE_CSS_PUBLIC = "rich-inplace"; + + private static final String INPLACE_CSS_VIEW = "view"; + + private static final String INPLACE_CSS_EDITABLE = "edit"; + + private static final String INPLACE_CSS_CHANGE = "change"; + + private static final String INPLACE_CSS_HOVER = "hover"; + + protected Class<UIInplaceInput> getComponentClass() { return UIInplaceInput.class; @@ -42,12 +71,9 @@ } else { if (logger.isDebugEnabled()) { - //FIXME: from Maksim - //That's no ComboBox but Inplace input! - logger.debug("No decoding necessary since the component " + component.getId() + - " is not an instance or a sub class of UIComboBox"); + " is not an instance or a sub class of UIInplaceInput"); } return; } @@ -79,32 +105,125 @@ } } - //FIXME: from Maksim --> I think this method should check if facet is rendered as well public boolean isControlsFacetExists(FacesContext context, UIComponent component) { UIComponent facet = component.getFacet(CONTROLS_FACET); - if (facet != null) { + if (facet != null && facet.isRendered()) { return true; } return false; } + public String encodeScriptAttributes(FacesContext context, UIComponent component) { + StringBuffer attributes = new StringBuffer(); + attributes.append("var attributes = "); + + ScriptOptions options = new ScriptOptions(component); + options.addOption("defaultLabel"); + options.addOption("showControls"); + options.addOption("applyFromControlsOnly"); + options.addOption("editEvent"); + options.addOption("selectOnEdit"); + options.addOption("verticalPosition"); + options.addOption("horizontalPosition"); + options.addOption("inputWidth"); + options.addOption("inputMinWidth"); + options.addOption("inputMaxWidth"); + attributes.append(options.toScript()); + + return attributes.toString(); + } + + public String encodeScriptEvents(FacesContext context, UIComponent component) { + StringBuffer events = new StringBuffer(); + + events.append("var events = "); + ScriptOptions options = new ScriptOptions(component); + options.addOption("oneditactivation", getAsEventHandler(context, component, "oneditactivation")); + options.addOption("onviewactivation",getAsEventHandler(context, component, "onviewactivation")); + options.addOption("oneditactivated",getAsEventHandler(context, component, "oneditactivated")); + options.addOption("onviewactivated",getAsEventHandler(context, component, "onviewactivated")); + events.append(options.toScript()); + + return events.toString(); + } + public String encodeInplaceInputCss(FacesContext context, UIComponent component) { + StringBuffer cssMap = new StringBuffer(); + cssMap.append("var classes = "); + + ScriptOptions mainMap = new ScriptOptions(component); + ScriptOptions componentClasses = new ScriptOptions(component); + ScriptOptions changedClasses = new ScriptOptions(component); + ScriptOptions viewClasses = new ScriptOptions(component); + + changedClasses.addOption(INPLACE_NORMAL, buildCss(component, NORMAL_KEY, INPLACE_CSS_CHANGE) ); + changedClasses.addOption(INPLACE_HOVERED, buildCss(component, HOVERED_KEY, INPLACE_CSS_CHANGE)); + + viewClasses.addOption(INPLACE_NORMAL, buildCss(component, NORMAL_KEY, INPLACE_CSS_VIEW) );; + viewClasses.addOption(INPLACE_HOVERED, buildCss(component, HOVERED_KEY, INPLACE_CSS_VIEW)); + + componentClasses.addOption(INPLACE_CHANGED,changedClasses); + componentClasses.addOption(INPLACE_VIEW, viewClasses); + componentClasses.addOption(INPLACE_EDITABLE,buildCss(component, EDITABLE_KEY, INPLACE_CSS_EDITABLE)); + + mainMap.addOption(INPLACE_COMPONENT, componentClasses); + cssMap.append(mainMap.toString()); + return cssMap.toString(); + } + + private String buildCss(UIComponent component, int key, String suffix) { + Object value; + StringBuffer stringBuffer = new StringBuffer(); + switch (key) { + case NORMAL_KEY: + stringBuffer.append(INPLACE_CSS_PUBLIC); + stringBuffer.append(" "); + stringBuffer.append(INPLACE_CSS_PUBLIC + "-" + suffix); + value = component.getAttributes().get(suffix + "Class"); + if (value != null) { + stringBuffer.append(" "); + stringBuffer.append(value); + } + break; + case HOVERED_KEY: + stringBuffer.append(INPLACE_CSS_PUBLIC + "-" + "input-" + suffix + "-" + INPLACE_CSS_HOVER); + value = component.getAttributes().get(suffix + "HoverClass"); + if (value != null) { + stringBuffer.append(" "); + stringBuffer.append(value); + } + break; + + case EDITABLE_KEY: + stringBuffer.append(INPLACE_CSS_PUBLIC); + stringBuffer.append(" "); + stringBuffer.append(INPLACE_CSS_PUBLIC + "-" + suffix); + value = component.getAttributes().get(suffix + "Class"); + if (value != null) { + stringBuffer.append(" "); + stringBuffer.append(value); + } + break; + } + return stringBuffer.toString(); + } + public String getAsEventHandler(FacesContext context, UIComponent component, String attributeName) { - String event = (String) component.getAttributes().get(attributeName); - ScriptString result = JSReference.NULL; + String event = (String) component.getAttributes().get(attributeName); + String result = null; + + if (event != null) { + event = event.trim(); + + if (event.length() != 0) { + JSFunctionDefinition function = new JSFunctionDefinition(); + function.addParameter("event"); + function.addToBody(event); - if (event != null) { - event = event.trim(); - - if (event.length() != 0) { - JSFunctionDefinition function = new JSFunctionDefinition(); - function.addParameter("event"); - function.addToBody(event); - - result = function; + result = function.toScript(); + } } - } - return ScriptUtils.toScript(result); + return result; } protected String getConvertedStringValue(FacesContext context, UIInplaceInput component, Object value) { Modified: trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss =================================================================== --- trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss 2008-02-27 12:35:37 UTC (rev 6364) +++ trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss 2008-02-27 12:42:05 UTC (rev 6365) @@ -1,5 +1,6 @@ <?xml version="1.0" encoding="UTF-8"?> <f:template xmlns:f='http:/jsf.exadel.com/template' + xmlns:u='http:/jsf.exadel.com/template/util' xmlns="http://www.w3.org/1999/xhtml" > @@ -8,7 +9,7 @@ .rich-inplace { } - .rich-inplace-changed { + .rich-inplace-change { background-position:left top; background-repeat:no-repeat; } @@ -32,7 +33,7 @@ } .rich-inplace-input-view-hover { - border: thin solid red; + color: blue; } .rich-inplace-input-change-hover { @@ -41,6 +42,7 @@ .rich-inplace-input-strut { height : 1px; + position: absolute; } .rich-inplace-button { Modified: trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js =================================================================== --- trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js 2008-02-27 12:35:37 UTC (rev 6364) +++ trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js 2008-02-27 12:42:05 UTC (rev 6365) @@ -68,16 +68,22 @@ */ inplaceMouseOverHandler : function(e) { + var className = this.inplaceInput.className; if (this.currentState == Richfaces.InplaceInput.STATES[0]) { - this.inplaceInput.className += " " + this.classes.COMPONENT.VIEW.HOVERED; + if (className.indexOf(this.classes.COMPONENT.VIEW.HOVERED) == -1) { + className += " " + this.classes.COMPONENT.VIEW.HOVERED; + } } else if (this.currentState == Richfaces.InplaceInput.STATES[2]) { - this.inplaceInput.className += " " + this.classes.COMPONENT.CHANGED.HOVERED; + if (className.indexOf(this.classes.COMPONENT.CHANGED.HOVERED) == -1) { + className += " " + this.classes.COMPONENT.CHANGED.HOVERED; + } } + this.inplaceInput.className = className; }, inplaceMouseOutHandler : function(e) { if (this.currentState == Richfaces.InplaceInput.STATES[0]) { - this.inplaceInput.className = this.classes.COMPONENT.VIEW.NORMAL; + this.inplaceInput.className = this.classes.COMPONENT.VIEW.NORMAL; } else if (this.currentState == Richfaces.InplaceInput.STATES[2]) { this.inplaceInput.className = this.classes.COMPONENT.CHANGED.NORMAL; } Modified: trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx =================================================================== --- trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx 2008-02-27 12:35:37 UTC (rev 6364) +++ trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx 2008-02-27 12:42:05 UTC (rev 6365) @@ -25,10 +25,8 @@ <f:clientid var="clientId" /> <jsp:scriptlet> <![CDATA[ - //FIXME: from Maksim --> why get same attribute twice? - //This is UIInput, so better call getValue() directly. It's 10x faster - Object value = component.getAttributes().get("value"); - Object fieldValue = component.getAttributes().get("value"); + Object value = component.getValue(); + Object fieldValue = value; value = getConvertedStringValue(context, component,value); if (value == null) { fieldValue = ""; @@ -50,13 +48,12 @@ variables.setVariable("cancelIcon", cancelIcon); } - //FIXME: from Maksim --> Check spelling, in English control is with single L - String controllClass = (String)component.getAttributes().get("controllClass"); - variables.setVariable("controllClass", controllClass); - String controllHoveredClass = (String)component.getAttributes().get("controllHoverClass"); - variables.setVariable("controllHoverClass", controllHoveredClass); - String controllPressedClass = (String)component.getAttributes().get("controllPressedClass"); - variables.setVariable("controllPressedClass", controllPressedClass); + String controlClass = (String)component.getAttributes().get("controlClass"); + variables.setVariable("controlClass", controlClass); + String controlHoveredClass = (String)component.getAttributes().get("controlHoverClass"); + variables.setVariable("controlHoverClass", controlHoveredClass); + String controlPressedClass = (String)component.getAttributes().get("controlPressedClass"); + variables.setVariable("controlPressedClass", controlPressedClass); ]]> </jsp:scriptlet> @@ -119,6 +116,7 @@ </tbody> </table> </div> + <div id="#{clientId}buttons" style="position:relative;"> <input id='#{clientId}ok' class='rich-inplace-button #{controlClass}' type='image' @@ -143,33 +141,14 @@ </div> #{value} </span> + + <script type="text/javascript"> - //TODO: from Maksim --> I suggest you to change this code to use JavaScriptOption class - //Constructor can be created from java code - - var attributes = {defaultLabel : '#{component.attributes["defaultLabel"]}', - showControls : #{component.attributes["showControls"]}, - applyFromControlsOnly : #{component.attributes["applyFromControlsOnly"]}, - editEvent : '#{component.attributes["editEvent"]}', - selectOnEdit : #{component.attributes["selectOnEdit"]}, - verticalPosition : '#{component.attributes["controlsPosition"]}', - horizontalPosition : '#{component.attributes["controlsHorizontalAlign"]}', - inputWidth : '#{component.attributes["inputWidth"]}', - inputMinWidth : '#{component.attributes["minInputWidth"]}', - inputMaxWidth : '#{component.attributes["maxInputWidth"]}' - }; - var events = {oneditactivation : #{this:getAsEventHandler(context, component, "oneditactivation")}, - onviewactivation : #{this:getAsEventHandler(context, component, "onviewactivation")}, - oneditactivated : #{this:getAsEventHandler(context, component, "oneditactivated")}, - onviewactivated : #{this:getAsEventHandler(context, component, "onviewactivated")}}; - - //Global variable? HMMM... - Richfaces.InplaceInput.CLASSES = { - COMPONENT : {CHANGED : {NORMAL : 'rich-inplace rich-inplace-changed #{component.attributes["changedClass"]}', HOVERED : 'rich-inplace-input-change-hover #{component.attributes["changedHoverClass"]}'}, - VIEW : {NORMAL : 'rich-inplace rich-inplace-view #{component.attributes["viewClass"]}', HOVERED : 'rich-inplace-input-view-hover #{component.attributes["viewHoverClass"]}'}, - EDITABLE : 'rich-inplace rich-inplace-edit #{component.attributes["editClass"]}'} - }; - - var inplaceInput = new Richfaces.InplaceInput('#{clientId}', '#{clientId}tempValue', '#{clientId}value', '#{clientId}tabber', '#{clientId}strut', attributes, events, Richfaces.InplaceInput.CLASSES, ['#{clientId}bar', '#{clientId}ok', '#{clientId}cancel', '#{clientId}buttons','#{clientId}btns_shadow']); + + #{this:encodeScriptAttributes(context, component)}; + #{this:encodeScriptEvents(context, component)}; + #{this:encodeInplaceInputCss(context, component)}; + + var inplaceInput = new Richfaces.InplaceInput('#{clientId}', '#{clientId}tempValue', '#{clientId}value', '#{clientId}tabber', '#{clientId}strut', attributes, events, classes, ['#{clientId}bar', '#{clientId}ok', '#{clientId}cancel', '#{clientId}buttons','#{clientId}btns_shadow']); </script> </f:root> \ No newline at end of file