[richfaces-svn-commits] JBoss Rich Faces SVN: r6007 - in trunk/sandbox/ui/inplaceInput/src/main: java/org/richfaces/renderkit and 3 other directories.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Mon Feb 11 09:18:39 EST 2008
Author: vmolotkov
Date: 2008-02-11 09:18:39 -0500 (Mon, 11 Feb 2008)
New Revision: 6007
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:
inplaceInput functionality
Modified: trunk/sandbox/ui/inplaceInput/src/main/config/component/inplaceinput.xml
===================================================================
--- trunk/sandbox/ui/inplaceInput/src/main/config/component/inplaceinput.xml 2008-02-11 14:05:40 UTC (rev 6006)
+++ trunk/sandbox/ui/inplaceInput/src/main/config/component/inplaceinput.xml 2008-02-11 14:18:39 UTC (rev 6007)
@@ -63,11 +63,6 @@
<defaultvalue>false</defaultvalue>
</property>
<property>
- <name>apllyFromControlsOnly</name>
- <classname>boolean</classname>
- <defaultvalue>false</defaultvalue>
- </property>
- <property>
<name>editEvent</name>
<classname>java.lang.String</classname>
<defaultvalue><![CDATA["click"]]></defaultvalue>
@@ -89,6 +84,11 @@
<name>onviewactivated</name>
<classname>java.lang.String</classname>
</property>
+ <property>
+ <name>selectOnEdit</name>
+ <classname>boolean</classname>
+ <defaultvalue>false</defaultvalue>
+ </property>
</properties>
</component>
</components>
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-11 14:05:40 UTC (rev 6006)
+++ trunk/sandbox/ui/inplaceInput/src/main/java/org/richfaces/renderkit/InplaceInputBaseRenderer.java 2008-02-11 14:18:39 UTC (rev 6007)
@@ -1,5 +1,13 @@
package org.richfaces.renderkit;
+import javax.faces.component.UIComponent;
+import javax.faces.context.FacesContext;
+import javax.faces.convert.Converter;
+
+import org.ajax4jsf.javascript.JSFunctionDefinition;
+import org.ajax4jsf.javascript.JSReference;
+import org.ajax4jsf.javascript.ScriptString;
+import org.ajax4jsf.javascript.ScriptUtils;
import org.ajax4jsf.renderkit.HeaderResourcesRendererBase;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
@@ -19,4 +27,44 @@
protected Class<UIInplaceInput> getComponentClass() {
return UIInplaceInput.class;
}
+
+ public String getAsEventHandler(FacesContext context, UIComponent component, String attributeName) {
+ String event = (String) component.getAttributes().get(attributeName);
+ ScriptString result = JSReference.NULL;
+
+ if (event != null) {
+ event = event.trim();
+
+ if (event.length() != 0) {
+ JSFunctionDefinition function = new JSFunctionDefinition();
+ function.addParameter("event");
+ function.addToBody(event);
+
+ result = function;
+ }
+ }
+ return ScriptUtils.toScript(result);
+ }
+
+ protected String getConvertedStringValue(FacesContext context, UIInplaceInput component, Object value) {
+ Converter converter = component.getConverter();
+
+ if (converter == null) {
+ if (value == null) {
+ return "";
+ } else if (value instanceof String) {
+ return (String) value;
+ }
+
+ Class converterType = value.getClass();
+ if (converterType != null ) {
+ converter = context.getApplication().createConverter(converterType);
+ }
+
+ if (converter == null) {
+ return value.toString();
+ }
+ }
+ return converter.getAsString(context, component, 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-11 14:05:40 UTC (rev 6006)
+++ trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss 2008-02-11 14:18:39 UTC (rev 6007)
@@ -5,9 +5,47 @@
<f:verbatim>
<![CDATA[
+.rich-inplace {
+}
+.rich-inplace-changed {
+ background-color:#F1F1F1;
+ border-bottom:1px dashed #000000;
+ padding-left:3px;
+ padding-right:3px;
+ white-space:nowrap;
+
+ background-image:url(/inplaceInput-sample/images/mark_open.gif);
+ background-position:left top;
+ background-repeat:no-repeat;
+}
+
+.rich-inplace-view {
+ background-color:#F1F1F1;
+ border-bottom:1px dashed #000000;
+ padding-left:3px;
+ padding-right:3px;
+ white-space:nowrap;
+}
+
+.rich-inplace-edit {
+ /*position:relative;*/
+ width:100px;
+}
+
+.rich-inplace-field {
+ background:#FFF281 none repeat scroll 0%;
+ border:0px none;
+ /*left:0px;
+ top:0px;
+ position:absolute;*/
+ margin:0px;
+ padding:0px 0px 0px 3px;
+ width:100px;
+}
]]>
</f:verbatim>
+
</f:template>
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-11 14:05:40 UTC (rev 6006)
+++ trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js 2008-02-11 14:18:39 UTC (rev 6007)
@@ -4,33 +4,165 @@
Richfaces.InplaceInput.prototype = {
- initialize: function(clientId, temValueKeepId, valueKeepId, attributes, events) {
+ initialize: function(clientId, temValueKeepId, valueKeepId, attributes, events, classes) {
this.inplaceInput = $(clientId);
this.tempValueKeeper = $(temValueKeepId);
this.valueKeeper = $(valueKeepId);
this.attributes = attributes;
+ this.events = events;
+ this.classes = classes;
+
+ this.currentText = this.getCurrentText();
+
this.currentState = Richfaces.InplaceInput.STATES[0];
this.initHandlers();
+ this.initEvents();
},
initHandlers : function() {
this.inplaceInput.observe(this.attributes.editEvent, function(e){this.switchingStatesHandler(e);}.bindAsEventListener(this));
+ this.tempValueKeeper.observe("blur", function(e){this.tmpValueBlurHandler(e);}.bindAsEventListener(this));
},
- switchingStatesHandler : function() {
+ initEvents : function() {
+ for (var e in this.events) {
+ if (e) {
+ this.inplaceInput.observe("rich:" + e, this.events[e]);
+ }
+ }
+ },
+
+ /*
+ * HANDLERS
+ */
+ switchingStatesHandler : function(e) {
+ var target;
+ if (e.target) {
+ target = e.target;
+ } else if (target = e.srcElement) {
+ target = e.srcElement;
+ } else {
+ //TO DO: to catch this exception
+ }
+ if (target.tagName.toLowerCase() == "input") {
+ return;
+ }
+
+ if (this.events.oneditactivation) {
+ this.inplaceInput.fire("rich:oneditactivation", {});
+ }
this.endViewState();
+ this.startEditableState();
+ if (this.events.oneditactivated) {
+ this.inplaceInput.fire("rich:oneditactivated", {});
+ }
+ },
+
+ tmpValueBlurHandler : function() {
+ var userValue = this.tempValueKeeper.value;
+ if (this.events.onviewactivation) {
+ this.inplaceInput.fire("rich:onviewactivation", {});
+ }
+ this.endEditableState();
+ this.applyUserValue();
+ if (this.valueKeeper.value != userValue) {
+ this.startChangedState();
+ } else {
+ this.startViewState();
+ }
+ if (this.events.onviewactivated) {
+ this.inplaceInput.fire("rich:onviewactivated", {});
+ }
+ },
+
+ /**
+ * STATE'S API
+ */
+ endViewState : function() {
+ this.deleteViewArtifacts();
+ },
+
+ endEditableState : function() {
+ this.tempValueKeeper.hide();
+ },
+
+ endChangedState : function() {
+ this.deleteViewArtifacts();
+ },
+
+ startEditableState : function() {
+ this.currentState = Richfaces.InplaceInput.STATES[1];
+ this.inplaceInput.className = this.classes.COMPONENT.EDITABLE;
this.tempValueKeeper.show();
-
- this.currentState = Richfaces.InplaceInput.STATES[1];
+ this.tempValueKeeper.focus();
+ if (this.attributes.selectOnEdit) {
+ Richfaces.InplaceInput.textboxSelect(this.tempValueKeeper, 0, this.tempValueKeeper.value.length);
+ }
},
- endViewState : function() {
- var viewValue = (this.inplaceInput.textContent) ? this.inplaceInput.textContent : this.inplaceInput.textNode;
- this.inplaceInput.removeNode(viewValue);
+ startViewState : function() {
+ this.currentState = Richfaces.InplaceInput.STATES[0];
+ this.createNewText(this.currentText);
+ this.inplaceInput.className = this.classes.COMPONENT.VIEW;
+ },
+
+ startChangedState : function () {
+ this.currentState = Richfaces.InplaceInput.STATES[2];
+ this.createNewText(this.valueKeeper.value);
+ this.inplaceInput.className = this.classes.COMPONENT.CHANGED;
+ },
+
+ /**
+ * UTILITIES
+ */
+ applyUserValue : function() {
+ var newValue = this.tempValueKeeper.value;
+ if (newValue == "") {
+ this.setDefaultText();
+ this.valueKeeper.value = "";
+ } else if (newValue != this.valueKeeper.value) {
+ this.currentText = newValue;
+ this.valueKeeper.value = newValue;
+ }
+ },
+
+ setDefaultText : function() {
+ this.currentText = this.attributes.defaultLabel;
+ },
+
+ deleteViewArtifacts : function () {
+ this.inplaceInput.removeChild(this.inplaceInput.childNodes[2]);
+ },
+
+ getCurrentText : function() {
+ return this.inplaceInput.childNodes[2];
+ },
+
+ createNewText : function(text) {
+ this.inplaceInput.appendChild(document.createTextNode(text));
}
};
-Richfaces.InplaceInput.STATES = [0, 1, 2];// 0 - view, 1- editable, 2 - changed
\ No newline at end of file
+Richfaces.InplaceInput.STATES = [0, 1, 2];// 0 - view, 1- editable, 2 - changed
+Richfaces.InplaceInput.CLASSES = {
+ COMPONENT : {CHANGED : "rich-inplace rich-inplace-changed",
+ VIEW : "rich-inplace rich-inplace-view",
+ EDITABLE : "rich-inplace rich-inplace-edit"}
+}
+
+Richfaces.InplaceInput.textboxSelect = function(oTextbox, iStart, iEnd) {
+ if (Prototype.Browser.IE) {
+ var oRange = oTextbox.createTextRange();
+ oRange.moveStart("character", iStart);
+ oRange.moveEnd("character", -oTextbox.value.length + iEnd);
+ oRange.select();
+ } else if (Prototype.Browser.Gecko) {
+ oTextbox.setSelectionRange(iStart, iEnd);
+ } else {
+ //FIXME
+ oTextbox.setSelectionRange(iStart, iEnd);
+ }
+}
\ No newline at end of file
Modified: trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx
===================================================================
--- trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx 2008-02-11 14:05:40 UTC (rev 6006)
+++ trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx 2008-02-11 14:18:39 UTC (rev 6007)
@@ -18,29 +18,46 @@
</h:scripts>
<f:clientid var="clientId" />
- <span id="#{clientId}" class="rich-inplace">
- #{component.attributes["value"]}
- <input id='#{clientId}tempValue"'
- class='rich-inplace-input'
+ <jsp:scriptlet>
+ <![CDATA[
+ Object value = component.getAttributes().get("value");
+ Object fieldValue = component.getAttributes().get("value");
+ value = getConvertedStringValue(context, component,value);
+ if (value == null) {
+ fieldValue = "";
+ value = component.getAttributes().get("defaultLabel");
+ }
+ if (value.equals("")) {
+ value = component.getAttributes().get("defaultLabel");
+ }
+ variables.setVariable("value", value);
+ variables.setVariable("fieldValue", fieldValue);
+ ]]>
+ </jsp:scriptlet>
+ <span id="#{clientId}" class="rich-inplace rich-inplace-view">
+ <input id='#{clientId}tempValue'
+ class='rich-inplace-field'
style='display:none;'
type='text'
size='#{component.attributes["inputSize"]}'
maxlength='#{component.attributes["inputMaxLength"]}'
minlength='#{component.attributes["inputMinLength"]}'
- value='#{component.attributes["value"]}'/>
- <input id='#{clientId}value' type='hidden' value='#{component.attributes["value"]}'/>
+ value='#{fieldValue}'/>
+ <input id='#{clientId}value' type='hidden' value='#{fieldValue}'/>
+ #{value}
</span>
<script type="text/javascript">
var attributes = {defaultLabel : '#{component.attributes["defaultLabel"]}',
showControls : '#{component.attributes["showControls"]}',
apllyFromControlsOnly : '#{component.attributes["apllyFromControlsOnly"]}',
- editEvent : '#{component.attributes["editEvent"]}'};
+ editEvent : '#{component.attributes["editEvent"]}',
+ selectOnEdit : '#{component.attributes["selectOnEdit"]}'};
- var events = {oneditactivation : '#{component.attributes["oneditactivation"]}',
- onviewactivation : '#{component.attributes["onviewactivation"]}',
- oneditactivated : '#{component.attributes["onviewactivation"]}',
- onviewactivated : '#{component.attributes["onviewactivated"]}'};
+ 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")}};
- var inplaceInput = new Richfaces.InplaceInput('#{clientId}', '#{clientId}tempValue', '#{clientId}value', attributes, events);
+ var inplaceInput = new Richfaces.InplaceInput('#{clientId}', '#{clientId}tempValue', '#{clientId}value', attributes, events, Richfaces.InplaceInput.CLASSES);
</script>
</f:root>
\ No newline at end of file
More information about the richfaces-svn-commits
mailing list