Author: vmolotkov Date: 2008-02-19 08:17:46 -0500 (Tue, 19 Feb 2008) New Revision: 6160 Modified: trunk/sandbox/ui/inplaceSelect/src/main/java/org/richfaces/renderkit/InplaceSelectBaseRenderer.java trunk/sandbox/ui/inplaceSelect/src/main/resources/org/richfaces/renderkit/html/css/inplaceselect.xcss trunk/sandbox/ui/inplaceSelect/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceselect.js trunk/sandbox/ui/inplaceSelect/src/main/templates/inplaceselect.jspx Log: InplaceSelect component Modified: trunk/sandbox/ui/inplaceSelect/src/main/java/org/richfaces/renderkit/InplaceSelectBaseRenderer.java =================================================================== --- trunk/sandbox/ui/inplaceSelect/src/main/java/org/richfaces/renderkit/InplaceSelectBaseRenderer.java 2008-02-19 12:25:41 UTC (rev 6159) +++ trunk/sandbox/ui/inplaceSelect/src/main/java/org/richfaces/renderkit/InplaceSelectBaseRenderer.java 2008-02-19 13:17:46 UTC (rev 6160) @@ -16,6 +16,10 @@ import javax.faces.convert.ConverterException; import javax.faces.model.SelectItem; +import org.ajax4jsf.javascript.JSFunctionDefinition; +import org.ajax4jsf.javascript.JSReference; +import org.ajax4jsf.javascript.ScriptString; +import org.ajax4jsf.javascript.ScriptUtils; import org.ajax4jsf.util.InputUtils; import org.ajax4jsf.util.SelectUtils; import org.apache.commons.logging.Log; @@ -107,4 +111,22 @@ protected Class <? extends UIComponent> getComponentClass() { return UIInplaceSelect.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); + } } Modified: trunk/sandbox/ui/inplaceSelect/src/main/resources/org/richfaces/renderkit/html/css/inplaceselect.xcss =================================================================== --- trunk/sandbox/ui/inplaceSelect/src/main/resources/org/richfaces/renderkit/html/css/inplaceselect.xcss 2008-02-19 12:25:41 UTC (rev 6159) +++ trunk/sandbox/ui/inplaceSelect/src/main/resources/org/richfaces/renderkit/html/css/inplaceselect.xcss 2008-02-19 13:17:46 UTC (rev 6160) @@ -1,3 +1,11 @@ +<?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" > + +<f:verbatim> +<![CDATA[ + *{font-family : verdana; font-size:11px;} body{padding : 30px;} fieldset{padding : 30px; border : 1px solid #c0c0c0;} @@ -41,4 +49,8 @@ .cb_shadow_tl{ background : url(images/bg_shadow.png) repeat-x top left;} .cb_shadow_tr{ background : url(images/bg_shadow.png) repeat-x top right;} .cb_shadow_bl{ background : url(images/bg_shadow.png) repeat-x bottom left;} -.cb_shadow_br{ background : url(images/bg_shadow.png) repeat-x bottom right;} \ No newline at end of file +.cb_shadow_br{ background : url(images/bg_shadow.png) repeat-x bottom right;} +]]> +</f:verbatim> + +</f:template> \ No newline at end of file Modified: trunk/sandbox/ui/inplaceSelect/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceselect.js =================================================================== --- trunk/sandbox/ui/inplaceSelect/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceselect.js 2008-02-19 12:25:41 UTC (rev 6159) +++ trunk/sandbox/ui/inplaceSelect/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceselect.js 2008-02-19 13:17:46 UTC (rev 6160) @@ -0,0 +1,28 @@ +if(!window.Richfaces) window.Richfaces = {}; +Richfaces.InplaceSelect = Class.create(Richfaces.Input, { + inizialize : function($super, listObj, clientId, temValueKeepId, valueKeepId, tabberId, strutId, attributes, events, classes, barParams) { + $super(clientId, temValueKeepId, valueKeepId, tabberId, strutId, attributes, events, classes, barParams); + this.comboList = listObj; + }, + + initHandlers : function() { + this.comboList.list.observe("click", function(e){this.listClickHandler(e);}.bindAsEventListener(this)); + this.tempValueKeeper.observe("blur", function(e){this.tmpValueBlurHandler(e);}.bindAsEventListener(this)); + this.tempValueKeeper.observe("blur", function(e){this.tempKeeperClickHandler(e);}.bindAsEventListener(this)); + }, + + tempKeeperClickHandler : function() { + this.insList.showWithDelay(); + }, + + tmpValueBlurHandler : function(event) { + $super(event); + this.comboList.hideWithDelay(); + }, + + listClickHandler : function(event) { + this.tempValueKeeper.focus(); + this.inputProcessing(); + this.comboList.hideWithDelay(); + } +}); Modified: trunk/sandbox/ui/inplaceSelect/src/main/templates/inplaceselect.jspx =================================================================== --- trunk/sandbox/ui/inplaceSelect/src/main/templates/inplaceselect.jspx 2008-02-19 12:25:41 UTC (rev 6159) +++ trunk/sandbox/ui/inplaceSelect/src/main/templates/inplaceselect.jspx 2008-02-19 13:17:46 UTC (rev 6160) @@ -9,66 +9,74 @@ baseclass="org.richfaces.renderkit.InplaceSelectBaseRenderer" class="org.richfaces.renderkit.html.InplaceSelectRenderer" component="org.richfaces.component.UIInplaceSelect"> + +<h:styles>css/inplaceselect.xcss</h:styles> +<h:scripts> + new org.ajax4jsf.javascript.PrototypeScript() +</h:scripts> + <f:clientid var="clientId" /> <f:resource var="spacer" name="images/spacer.gif"/> - <span id="#{clientId}" class="insel_edit_state"> - <img src="images/spacer.gif" class="insel_strut"/> - <input readonly="readonly" type="Text" value="New York" class="insel_field"/> - <div class="insel_btn_set"> - <div class="insel_shadow"> - <table cellpadding="0" cellspacing="0" border="0" class="insel_shadow_size"> - <tr> - <td class="insel_shadow_tl"> - <img src="#{spacer}" width="10" height="1" alt="" border="0"/><br/> - </td> - <td class="insel_shadow_tr"> - <img src="images/spacer.gif" width="1" height="10" alt="" border="0"/><br/> - </td> - </tr> - <tr> - <td class="insel_shadow_bl"> - <img src="#{spacer}" width="1" height="10" alt="" border="0"/><br/> - </td> - <td class="insel_shadow_br"> - <img src="#{spacer}" width="10" height="1" alt="" border="0"/><br/> - </td> - </tr> - </table> - </div> - <div style="position : relative"> - <input type="image" src="images/ico_ok.gif" class="insel_btn" onmousedown="this.className='insel_btn_press'" onmouseout="this.className='insel_btn'" onmouseup="this.className='insel_btn'"/> - <input type="image" src="images/ico_cancel.gif" class="insel_btn" onmousedown="this.className='insel_btn_press'" onmouseout="this.className='insel_btn'" onmouseup="this.className='insel_btn'"/> - </div> +<span id="#{clientId}" class="insel_edit_state"> + <input id="#{clientId}tabber" type="button" value="" style="width: 1px; position: absolute; left: -32767px;" /> + <img id="#{clientId}inplaceStrut" src="#{spacer}" class="is_strut"/> + <input id="#{clientId}inplaceTmpValue" readonly="readonly" type="Text" value="New York" class="insel_field"/> + <input id='#{clientId}inplaceValue' name='#{clientId}value' type='hidden' value='#{fieldValue}'/> + <div class="insel_btn_set"> + <div class="insel_shadow"> + <table cellpadding="0" cellspacing="0" border="0" class="insel_shadow_size"> + <tr> + <td class="insel_shadow_tl"> + <img src="#{spacer}" width="10" height="1" alt="" border="0"/><br/> + </td> + <td class="insel_shadow_tr"> + <img src="#{spacer}" width="1" height="10" alt="" border="0"/><br/> + </td> + </tr> + <tr> + <td class="insel_shadow_bl"> + <img src="#{spacer}" width="1" height="10" alt="" border="0"/><br/> + </td> + <td class="insel_shadow_br"> + <img src="#{spacer}" width="10" height="1" alt="" border="0"/><br/> + </td> + </tr> + </table> </div> + <div style="position : relative"> + <input type="image" src="images/ico_ok.gif" class="insel_btn" onmousedown="this.className='insel_btn_press'" onmouseout="this.className='insel_btn'" onmouseup="this.className='insel_btn'"/> + <input type="image" src="images/ico_cancel.gif" class="insel_btn" onmousedown="this.className='insel_btn_press'" onmouseout="this.className='insel_btn'" onmouseup="this.className='insel_btn'"/> + </div> + </div> - <div class="cb_width_list" style="position : absolute; height : 100px; left : 0px; top: 13px"> - <iframe class="cb_width_list cb_list_scroll cb_list_position" frameborder="0"></iframe> + <div id="listParent#{clientId}" class="cb_width_list" style="position : absolute; height : 100px; left : 0px; top: 13px"> + <iframe class="cb_width_list cb_list_scroll cb_list_position" frameborder="0"></iframe> <div class="cb_shadow"> - <table cellpadding="0" cellspacing="0" border="0" width="257" height="109"> + <table id="shadow#{clientId}" cellpadding="0" cellspacing="0" border="0" width="257" height="109"> <tr> <td class="cb_shadow_tl"> - <img src="images/spacer.gif" width="10" height="1" alt="" border="0"/><br/> + <img src="#{spacer}" width="10" height="1" alt="" border="0"/><br/> </td> <td class="cb_shadow_tr"> - <img src="images/spacer.gif" width="1" height="10" alt="" border="0"/><br/> + <img src="#{spacer}" width="1" height="10" alt="" border="0"/><br/> </td> </tr> <tr> <td class="cb_shadow_bl"> - <img src="images/spacer.gif" width="1" height="10" alt="" border="0"/><br/> + <img src="#{spacer}" width="1" height="10" alt="" border="0"/><br/> </td> <td class="cb_shadow_br"> - <img src="images/spacer.gif" width="10" height="10" alt="" border="0"/><br/> + <img src="#{spacer}" width="10" height="10" alt="" border="0"/><br/> </td> </tr> </table> </div> - <div class="cb_list_position"> - <div class="cb_list_decoration"> - <div class="cb_list_scroll cb_width_list"> + <div id="listPosition#{clientId}" class="cb_list_position"> + <div id="listDecoration#{clientId}" class="cb_list_decoration"> + <div id="list#{clientId}" class="cb_list_scroll"> <div class="cb_option cb_font">Option 1</div> <div class="cb_option cb_font">Option 2</div> <div class="cb_option cb_font">Option 3</div> @@ -82,8 +90,52 @@ </div> </div> </div> - - </div> - </span> + </div> +</span> +<script type="text/javascript"> + Richfaces.InplaceSelect.CLASSES = { + FIELD : {CLASSES: + {NORMAL : "rich-combobox-font-inactive rich-combobox-input-inactive #{inputInactiveClass}", + ACTIVE : "rich-combobox-font rich-combobox-input #{inputClass}", + DISABLED : "rich-combobox-font-disabled rich-combobox-input-disabled #{inputDisabledClass}"}, + STYLE : + {NORMAL : "#{inputStyle}", + ACTIVE : "#{inputStyle}", + DISABLED : "#{inputDisabledStyle}"} + }, + COMBO_LIST : { + LIST : {CLASSES :{ACTIVE : "rich-combobox-list-cord rich-combobox-list-scroll rich-combobox-list-decoration rich-combobox-list-position #{listClass}"}, + STYLE : {ACTIVE: "#{listStyle}"} + }, + ITEM : {NORMAL : "rich-combobox-item #{itemClass}", + SELECTED : "rich-combobox-item rich-combobox-item-selected #{itemSelectedClass}" + } + } + } + var richInplaceSelAttributes = {defaultLabel : '#{component.attributes["defaultLabel"]}', + showControls : #{component.attributes["showControls"]}, + applyFromControlsOnly : #{component.attributes["applyFromControlsOnly"]}, + editEvent : '#{component.attributes["editEvent"]}', + verticalPosition : '#{component.attributes["controlsPosition"]}', + horizontalPosition : '#{component.attributes["controlsHorizontalAlign"]}', + inputWidth : '#{component.attributes["inputWidth"]}', + inputMinWidth : '#{component.attributes["inputMinWidth"]}', + inputMaxWidth : '#{component.attributes["inputMaxWidth"]}' + }; + + var richInplaceSelEvents = {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 richInplaceList = new Richfaces.ComboBoxList('list#{clientId}', 'listParent#{clientId}', false, + Richfaces.InplaceSelect.CLASSES, '100px', '100px', itemsText, null, + '#{clientId}inplaceTmpValue', 'shadow#{clientId}', 0, 0); + var richInplaceSelect = new Richfaces.InplaceSelect(richInplaceList, '#{clientId}', '#{clientId}inplaceTmpValue', + '#{clientId}inplaceValue', '#{clientId}tabber', '#{clientId}inplaceStrut', + richInplaceSelAttributes, richInplaceSelEvents, Richfaces.InplaceSelect.CLASSES, + ['#{clientId}bar', '#{clientId}ok', '#{clientId}cancel', '#{clientId}buttons']); +</script> + </f:root> \ No newline at end of file