[richfaces-svn-commits] JBoss Rich Faces SVN: r6011 - in trunk/sandbox/ui/inplaceInput/src/main: resources/org/richfaces/renderkit/html/css and 2 other directories.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Mon Feb 11 12:02:53 EST 2008
Author: vmolotkov
Date: 2008-02-11 12:02:53 -0500 (Mon, 11 Feb 2008)
New Revision: 6011
Modified:
trunk/sandbox/ui/inplaceInput/src/main/config/component/inplaceinput.xml
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 15:55:43 UTC (rev 6010)
+++ trunk/sandbox/ui/inplaceInput/src/main/config/component/inplaceinput.xml 2008-02-11 17:02:53 UTC (rev 6011)
@@ -67,6 +67,11 @@
<classname>java.lang.String</classname>
<defaultvalue><![CDATA["click"]]></defaultvalue>
</property>
+ <property>
+ <name>controlsPosition</name>
+ <classname>java.lang.String</classname>
+ <defaultvalue><![CDATA["right"]]></defaultvalue>
+ </property>
<property>
<name>oneditactivation</name>
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 15:55:43 UTC (rev 6010)
+++ trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss 2008-02-11 17:02:53 UTC (rev 6011)
@@ -29,7 +29,7 @@
}
.rich-inplace-edit {
- /*position:relative;*/
+ position:relative;
width:100px;
}
@@ -43,6 +43,37 @@
padding:0px 0px 0px 3px;
width:100px;
}
+
+/* mock-up styles */
+
+*{font-family : verdana; font-size:11px;}
+body{padding : 30px;}
+fieldset{padding : 30px; border : 1px solid #c0c0c0;}
+legend{font-weight : bold}
+
+
+
+.is_default_state{white-space : nowrap; background-color : #f1f1f1; border-bottom : 1px dashed #000000; padding-left : 3px; padding-right : 3px;}
+.is_changed_state{background-image:url(images/mark_open.gif); background-position : top left; background-repeat : no-repeat;}
+.is_edit_state{position : relative; width : 100px;}
+.is_field{background : #FFF281; padding : 0px 0px 0px 3px; border : 0px; margin : 0px; width : 100px; position : absolute; top:0px; left : 0px;}
+.is_btn{
+ background : url(images/bg_btn.png) #FFFFFF;
+ border : 1px outset #BED6F8;
+ padding : 0px;
+ margin : 0px;}
+.is_btn_press{
+ background : url(images/bg_press.png) #FFFFFF;
+ border : 1px inset #BED6F8;
+ padding : 0px;
+ margin : 0px;}
+.is_btn_set{ /*position : absolute; top:0px; left : 100px;*/ white-space : nowrap}
+.is_shadow{ top:-7; left:-5; position : absolute;}
+.is_shadow_size{ width : 36px; height : 26px;}
+.is_shadow_tl{ background : url(images/bg_shadow.png) repeat-x top left;}
+.is_shadow_tr{ background : url(images/bg_shadow.png) repeat-x top right;}
+.is_shadow_bl{ background : url(images/bg_shadow.png) repeat-x bottom left;}
+.is_shadow_br{ background : url(images/bg_shadow.png) repeat-x bottom right;}
]]>
</f:verbatim>
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 15:55:43 UTC (rev 6010)
+++ trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js 2008-02-11 17:02:53 UTC (rev 6011)
@@ -4,7 +4,7 @@
Richfaces.InplaceInput.prototype = {
- initialize: function(clientId, temValueKeepId, valueKeepId, attributes, events, classes) {
+ initialize: function(clientId, temValueKeepId, valueKeepId, attributes, events, classes, barParams) {
this.inplaceInput = $(clientId);
this.tempValueKeeper = $(temValueKeepId);
this.valueKeeper = $(valueKeepId);
@@ -17,6 +17,13 @@
this.currentState = Richfaces.InplaceInput.STATES[0];
+ this.initDimensions();
+ if (this.attributes.showControls) {
+ this.bar = new Richfaces.InplaceInputBar(barParams[0], barParams[1], barParams[2], barParams[3],
+ this.attributes.controlsPosition,
+ {width: this.INPUT_WIDTH, height: this.INPUT_HEIGHT},
+ this.inputProcessing, this.cancel);
+ }
this.initHandlers();
this.initEvents();
},
@@ -34,6 +41,18 @@
}
},
+ initDimensions : function() {
+
+ this.valueKeeper.style.visibility = "hidden";
+ this.valueKeeper.show();
+
+ this.INPUT_WIDTH = this.valueKeeper.offsetWidth;
+ this.INPUT_HEIGHT = this.valueKeeper.offsetHeight;
+
+ this.valueKeeper.hide();
+ this.valueKeeper.style.visibility = "visible";
+ },
+
/*
* HANDLERS
*/
@@ -61,20 +80,9 @@
},
tmpValueBlurHandler : function() {
- var userValue = this.tempValueKeeper.value;
- if (this.events.onviewactivation) {
- this.inplaceInput.fire("rich:onviewactivation", {});
+ if (!this.attributes.apllyFromControlsOnly) {
+ this.inputProcessing();
}
- this.endEditableState();
- this.applyUserValue();
- if (this.valueKeeper.value != userValue) {
- this.startChangedState();
- } else {
- this.startViewState();
- }
- if (this.events.onviewactivated) {
- this.inplaceInput.fire("rich:onviewactivated", {});
- }
},
/**
@@ -85,6 +93,9 @@
},
endEditableState : function() {
+ if (this.bar) {
+ this.bar.hide();
+ }
this.tempValueKeeper.hide();
},
@@ -94,6 +105,9 @@
startEditableState : function() {
this.currentState = Richfaces.InplaceInput.STATES[1];
+ if (this.bar) {
+ this.bar.show();
+ }
this.inplaceInput.className = this.classes.COMPONENT.EDITABLE;
this.tempValueKeeper.show();
this.tempValueKeeper.focus();
@@ -117,27 +131,54 @@
/**
* UTILITIES
*/
- applyUserValue : function() {
+
+ cancel : function() {
+
+ },
+
+ inputProcessing : function() {
+ var userValue = this.tempValueKeeper.value;
+ var value = this.valueKeeper.value;
+ if (this.events.onviewactivation) {
+ this.inplaceInput.fire("rich:onviewactivation", {});
+ }
+ this.endEditableState();
+ //this.applyUserValue();
+ if (userValue == "") {
+ this.setDefaultText();
+ this.valueKeeper.value = "";
+ this.startViewState();
+ } else if (userValue != value) {
+ this.currentText = userValue;
+ this.valueKeeper.value = userValue;
+ this.startChangedState();
+ } else {
+ this.startViewState();
+ }
+ if (this.events.onviewactivated) {
+ this.inplaceInput.fire("rich:onviewactivated", {});
+ }
+ },
+
+ /*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]);
+ this.inplaceInput.removeChild(this.inplaceInput.childNodes[3]);
},
getCurrentText : function() {
- return this.inplaceInput.childNodes[2];
+ return this.inplaceInput.childNodes[3];
},
createNewText : function(text) {
@@ -146,6 +187,71 @@
};
+Richfaces.InplaceInputBar = Class.create();
+Richfaces.InplaceInputBar.prototype = {
+ initialize : function(barId, okId, cancelId, buttonsPanelId, position, intDims, okHandler, cancelHandler) {
+ this.bar = $(barId);
+ this.ok = $(okId);
+ this.cancel = $(cancelId);
+ this.bsPanel = $(buttonsPanelId);
+
+ this.position = position;
+ this.initHandlers(okHandler, cancelHandler);
+ this.initDimensions();
+ this.positioning(intDims);
+ },
+
+ initHandlers : function(okHandler, cancelHandler) {
+ //this.ok.observe("click", function(e){okHandler}.bindAsEventListener(this));
+ //this.cancel.observe("click", function(e){cancelHandler}.bindAsEventListener(this));
+ },
+
+ initDimensions : function() {
+
+ /*this.bar.style.visibility = "hidden";
+ this.bar.show();*/
+
+ //var dim = this.bsPanel.getDimensions();
+ this.BAR_WIDTH = 28;
+ this.BAR_HEIGHT = 12;
+
+ /*this.bar.hide();
+ this.bar.style.visibility = "visible";*/
+ },
+
+ show : function() {
+ this.bar.show();
+ },
+
+ hide : function() {
+ this.bar.hide();
+ },
+
+ positioning : function(intDims) {
+ this.bar.style.position = "absolute";
+ this.bsPanel.style.position = "relative";
+ var bs = this.bar.style;
+ switch (this.position) {
+ case "top" :
+ bs.top = -this.BAR_HEIGHT + "px";
+ bs.left = "0px";
+ break;
+ case "bottom" :
+ bs.top = intDims.height + "px";
+ bs.left = "0px";
+ break;
+ case "left" :
+ bs.top = "0px";
+ bs.left = -this.BAR_WIDTH + "px";
+ break;
+ case "reight" :
+ bs.top = "0px";
+ bs.left = intDims.width + "px";
+ break;
+ }
+ }
+};
+
Richfaces.InplaceInput.STATES = [0, 1, 2];// 0 - view, 1- editable, 2 - changed
Richfaces.InplaceInput.CLASSES = {
COMPONENT : {CHANGED : "rich-inplace rich-inplace-changed",
Modified: trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx
===================================================================
--- trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx 2008-02-11 15:55:43 UTC (rev 6010)
+++ trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx 2008-02-11 17:02:53 UTC (rev 6011)
@@ -42,22 +42,50 @@
size='#{component.attributes["inputSize"]}'
maxlength='#{component.attributes["inputMaxLength"]}'
minlength='#{component.attributes["inputMinLength"]}'
+ autocomplete="off"
value='#{fieldValue}'/>
<input id='#{clientId}value' type='hidden' value='#{fieldValue}'/>
+ <div id="#{clientId}bar" class="is_btn_set" style="display:none;">
+ <div class="is_shadow">
+ <table class="is_shadow_size" cellspacing="0" cellpadding="0" border="0">
+ <tbody>
+ <tr>
+ <td class="is_shadow_tl">
+ <img width="10" height="1" border="0" alt="" src="/inplaceInput-sample/images/spacer.gif"/>
+ <br/>
+ </td>
+ <td class="is_shadow_tr">
+ </td>
+ </tr>
+ <tr>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div id="#{clientId}buttons">
+ <input id="#{clientId}ok" class="is_btn" type="image" onmouseup="this.className='is_btn'"
+ onmouseout="this.className='is_btn'" onmousedown="this.className='is_btn_press'"
+ src="/inplaceInput-sample/images/ico_ok.gif"/>
+ <input id="#{clientId}cancel" class="is_btn" type="image" onmouseup="this.className='is_btn'"
+ onmouseout="this.className='is_btn'" onmousedown="this.className='is_btn_press'"
+ src="/inplaceInput-sample/images/ico_cancel.gif"/>
+ </div>
+ </div>
#{value}
</span>
<script type="text/javascript">
var attributes = {defaultLabel : '#{component.attributes["defaultLabel"]}',
- showControls : '#{component.attributes["showControls"]}',
- apllyFromControlsOnly : '#{component.attributes["apllyFromControlsOnly"]}',
+ showControls : #{component.attributes["showControls"]},
+ apllyFromControlsOnly : #{component.attributes["apllyFromControlsOnly"]},
editEvent : '#{component.attributes["editEvent"]}',
- selectOnEdit : '#{component.attributes["selectOnEdit"]}'};
+ selectOnEdit : #{component.attributes["selectOnEdit"]},
+ controlsPosition : '#{component.attributes["controlsPosition"]}'};
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, Richfaces.InplaceInput.CLASSES);
+
+ var inplaceInput = new Richfaces.InplaceInput('#{clientId}', '#{clientId}tempValue', '#{clientId}value', attributes, events, Richfaces.InplaceInput.CLASSES, ['#{clientId}bar', '#{clientId}ok', '#{clientId}cancel', '#{clientId}buttons']);
</script>
</f:root>
\ No newline at end of file
More information about the richfaces-svn-commits
mailing list