Author: abelevich Date: 2010-09-06 11:37:00 -0400 (Mon, 06 Sep 2010) New Revision: 19122 Modified: branches/RF-8992/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceInputBaseRenderer.java branches/RF-8992/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceSelectBaseRenderer.java branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceInput.ecss branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.ecss branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.js branches/RF-8992/ui/input/ui/src/main/templates/inplaceSelect.template.xml Log: fix styles, add script stub for the inplaceSelect component, fix inplace renderers, implement markup for the inplaceSelect Modified: branches/RF-8992/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceInputBaseRenderer.java =================================================================== --- branches/RF-8992/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceInputBaseRenderer.java 2010-09-06 13:40:47 UTC (rev 19121) +++ branches/RF-8992/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceInputBaseRenderer.java 2010-09-06 15:37:00 UTC (rev 19122) @@ -77,14 +77,7 @@ public static final String OPTIONS_INITIAL_VALUE = "initialValue"; - private static final String READY_STATE_CSS = "rf-ii-d-s"; - private static final String EDIT_STATE_CSS = "rf-ii-e-s"; - - private static final String CHANGED_STATE_CSS = "rf-ii-c-s"; - - private static final String NONE_CSS = "rf-ii-none"; - private static final Map<String, ComponentAttribute> INPLACEINPUT_HANDLER_ATTRIBUTES = Collections .unmodifiableMap(ComponentAttribute.createMap( new ComponentAttribute(HTML.ONCLICK_ATTRIBUTE).setEventNames("inputClick"). @@ -143,11 +136,11 @@ } public String getReadyStyleClass(UIComponent component, InplaceState inplaceState) { - return (InplaceState.changed != inplaceState) ? READY_STATE_CSS : HtmlUtil.concatClasses(READY_STATE_CSS, CHANGED_STATE_CSS); + return (InplaceState.changed != inplaceState) ? getReadyStateCss() : HtmlUtil.concatClasses(getReadyStateCss(), getChangedStateCss()); } public String getEditStyleClass(UIComponent component, InplaceState inplaceState) { - return (InplaceState.edit != inplaceState)? HtmlUtil.concatClasses(EDIT_STATE_CSS, NONE_CSS) : EDIT_STATE_CSS; + return (InplaceState.edit != inplaceState)? HtmlUtil.concatClasses(getEditStateCss(), getNoneCss()) : getEditStateCss(); } public String getReadyClientId(FacesContext facesContext, UIComponent component, InplaceState inplaceState) { String clientId = component.getClientId(facesContext); @@ -170,13 +163,12 @@ public void buildScript(ResponseWriter writer, FacesContext facesContext, UIComponent component) throws IOException { AbstractInplaceInput inplaceInput = (AbstractInplaceInput)component; JSFunction function = new JSFunction("new RichFaces.ui.InplaceInput"); - function.addParameter(inplaceInput.getClientId(facesContext)); String clientId = inplaceInput.getClientId(facesContext); Map<String, Object> options = new HashMap<String, Object>(); options.put(OPTIONS_EDIT_EVENT, inplaceInput.getEditEvent()); - options.put(OPTIONS_NONE_CSS, NONE_CSS); - options.put(OPTIONS_CHANGED_CSS, CHANGED_STATE_CSS); + options.put(OPTIONS_NONE_CSS, getNoneCss()); + options.put(OPTIONS_CHANGED_CSS, getChangedStateCss()); options.put(OPTIONS_EDIT_CONTAINER, clientId + ":edit"); options.put(OPTIONS_INPUT, clientId + ":input"); options.put(OPTIONS_LABEL, clientId + ":label"); @@ -189,8 +181,25 @@ options.put(OPTIONS_BUTTON_OK, clientId + ":okbtn"); options.put(OPTIONS_BUTTON_CANCEL, clientId + ":cancelbtn"); } + + function.addParameter(clientId); function.addParameter(options); - writer.write(function.toString()); } + + public String getReadyStateCss() { + return "rf-ii-d-s"; + } + + public String getEditStateCss() { + return "rf-ii-e-s"; + } + + public String getChangedStateCss() { + return "rf-ii-c-s"; + } + + public String getNoneCss() { + return "rf-ii-none"; + } } Modified: branches/RF-8992/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceSelectBaseRenderer.java =================================================================== --- branches/RF-8992/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceSelectBaseRenderer.java 2010-09-06 13:40:47 UTC (rev 19121) +++ branches/RF-8992/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceSelectBaseRenderer.java 2010-09-06 15:37:00 UTC (rev 19122) @@ -1,6 +1,8 @@ package org.richfaces.renderkit; import java.io.IOException; +import java.util.HashMap; +import java.util.Map; import javax.faces.application.ResourceDependencies; import javax.faces.application.ResourceDependency; @@ -8,7 +10,10 @@ import javax.faces.context.FacesContext; import javax.faces.context.ResponseWriter; +import org.ajax4jsf.javascript.JSFunction; +import org.richfaces.component.AbstractInplaceSelect; + /** * @author Anton Belevich * @@ -24,9 +29,34 @@ @Override public void buildScript(ResponseWriter writer, FacesContext facesContext, UIComponent component) throws IOException { + AbstractInplaceSelect inplaceSelect = (AbstractInplaceSelect)component; + JSFunction function = new JSFunction("new RichFaces.ui.InplaceSelect"); + + String clientId = inplaceSelect.getClientId(facesContext); + Map<String, Object> options = new HashMap<String, Object>(); + + function.addParameter(clientId); + function.addParameter(options); + writer.write(function.toString()); } public String getListStyles(FacesContext facesContext, UIComponent component) { return ""; } + + public String getReadyStateCss() { + return "insel_default_state"; + } + + public String getEditStateCss() { + return "insel_edit_state"; + } + + public String getChangedStateCss() { + return "insel_changed_state"; + } + + public String getNoneCss() { + return "rf-is-none"; + } } Modified: branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceInput.ecss =================================================================== --- branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceInput.ecss 2010-09-06 13:40:47 UTC (rev 19121) +++ branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceInput.ecss 2010-09-06 15:37:00 UTC (rev 19122) @@ -1,6 +1,7 @@ input.rf-ii-f { background-image: none; background-color : '#{richSkin.editBackgroundColor}'; + /*TODO: seems these styles are incorrect*/ border-bottom-width : 10px; border-bottom-style: solid; border-bottom-color: '#{richSkin.editBackgroundColor}'; Modified: branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.ecss =================================================================== --- branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.ecss 2010-09-06 13:40:47 UTC (rev 19121) +++ branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.ecss 2010-09-06 15:37:00 UTC (rev 19122) @@ -1,45 +1,216 @@ -.insel_default_state{ display : inline-block; position : relative; white-space : nowrap; background-color : #f1f1f1/*editorBackgroundColor*/; border-bottom : 1px dashed #000000/*generalTextColor*/; padding-left : 3px; padding-right : 3px;} -.insel_changed_state{ background-image:url(images/mark_changed.gif); background-position : top left; background-repeat : no-repeat;} +input.insel_field { + background : '#{richSkin.editBackgroundColor}'; + padding : 0px 0px 0px 0px; + border : 0px; + margin : 0px; + width : 112px; + background-image:"url(#{resource['org.richfaces:mark_list.gif']})"; + background-position : center right; + background-repeat : no-repeat; + font-family:inherit; + font-size : inherit; +} -.insel_edit_state{ position : absolute; top : 0px; left : 0px; width : 100px; display : inline-block;} -.insel_field{ background : #FBFF8E/*editBackgroundColor*/; padding : 0px 0px 0px 0px; border : 0px; margin : 0px; width : 112px; background-image:url(images/mark_list.gif); background-position : center right; background-repeat : no-repeat;} +.rf-is-none { + display: none; +} -.insel_btn{ - background : url(images/bg_btn.png) top repeat-x #C7D7EC; /*gradient - from generalBackgroundColor to tabBackgroundColor, background-color - tabBackgroundColor*/ - border : 1px outset #BED6F8; /*panelBorderColor*/ +.insel_font { +} + +.insel_default_state { + display : inline-block; + position : relative; + white-space : nowrap; + background-color : '#{richSkin.editBackgroundColor}'; + border-bottom-width : 1px; + border-bottom-style : dashed; + border-bottom-color : '#{richSkin.generalTextColor}'; + padding-left : 3px; + padding-right : 3px; +} + +.insel_changed_state { + background-image : "url(#{resource['org.richfaces:mark_changed.gif']})"; + background-position : top left; + background-repeat : no-repeat; +} + +.insel_edit_state { + position : absolute; + top : 0px; + left : 0px; + width : 100px; + display : inline-block; +} + +.insel_field { + background-color : '#{richSkin.editBackgroundColor}'; + padding : 0px 0px 0px 0px; + border : 0px; + margin : 0px; + width : 112px; + background-image: "url(#{resource['org.richfaces:mark_list.gif']})"; + background-position : center right; + background-repeat : no-repeat; +} + +.insel_btn { + background-image : "url(#{resource['org.richfaces.renderkit.html.images.InplaceComponentButtonGradientImage']})"; + background-position : top; + background-repeat: repeat-x; + background-color: '#{richSkin.tabBackgroundColor}'; + border-width : 1px; + border-style : outset; + border-color : '#{richSkin.panelBorderColor}'; padding : 0px; - margin : 0px;} -.insel_btn_press{ - background : url(images/bg_press.png) top repeat-x #C7D7EC; /*gradient - from tabBackgroundColor to generalBackgroundColor, background-color - tabBackgroundColor*/ - border : 1px inset #BED6F8; /*panelBorderColor*/ + margin : 0px; +} + +.insel_btn_press { + background-image : "url(#{resource['org.richfaces.renderkit.html.images.InplaceComponentPressButtonGradientImage']})"; + background-position : top; + background-repeat : repeat-x; + background-color : '#{richSkin.tabBackgroundColor}'; + border-width : 1px; + border-style : inset; + border-color : '#{richSkin.panelBorderColor}'; padding : 0px; - margin : 0px;} -.insel_btn_set{ position : absolute; top:0px; left : 112px; white-space : nowrap} + margin : 0px; +} + +.insel_btn_set { + position : absolute; + top : 0px; + left : 112px; + white-space : nowrap; +} -.insel_list_cord{ position : relative; font-size : 0px;d@isplay : none}/*DDL is hidden!!!!!*/ -.insel_list_position{ position : absolute; top: 0px; left: -1px; } -.insel_list_decoration{ border : 1px solid #A6A6A6 /*panelBorderColor*/; padding : 0px; background : #FBFF8E; /*editorBackgroundColor*/} -.insel_list_scroll{ overflow : auto; overflow-x : hidden; height : 100px;} -.insel_option{ padding : 2px; white-space : nowrap; background : #FBFF8E /*editorBackgroundColor*/; cursor : default;} -.insel_select{ padding : 1px; width : 100%; background-color: #DFE8F6; border : 1px dotted #a3bae9;/*generalTextColor*/} -.insel_width_list{ width : 250px;} +.insel_list_cord { + position : absolute; + font-family:inherit; + font-size : inherit; +} +.insel_list_position { + position : absolute; + top: 0px; + left: -1px; +} -.insel_list_cord{ position : relative; font-size : 0px;d@isplay : none}/*DDL is hidden!!!!!*/ -.insel_list_decoration{ border : 1px solid #A6A6A6 /*panelBorderColor*/; padding : 0px; background : #FFFFFF; /*tableBackgroundColor*/} -.insel_list_scroll{ overflow : auto; overflow-x : hidden;} -.insel_option{ padding : 2px; white-space : nowrap; cursor : default;} -.insel_select{ padding : 1px; width : 100%; background-color: #DFE8F6; border : 1px dotted #a3bae9;/*generalTextColor*/} +.insel_list_decoration { + border-width : 1px; + border-style : solid; + border-color : '#{richSkin.panelBorderColor}'; + padding : 0px; + display: inline-block; + width: 100%; + background-color : '#{richSkin.editBackgroundColor}'; +} +.insel_list_scroll { + overflow : auto; + overflow-x : hidden; + height : 100px; + display: inline-block; + width: 100%; +} +.insel_option { + padding : 2px; + white-space : nowrap; + background-color : '#{richSkin.editBackgroundColor}'; + cursor : default; + display : inline-block; + width : 100%; +} -.insel_btn_preposition { position : absolute; top : 0px; right : 0px; wigth : 1px; height : 1px;} -.insel_btn_position { position : absolute; top : 0px; left : 0px; white-space : nowrap;} +.insel_select { + padding : 1px; + width : 100%; + background-color: #DFE8F6; /*get from skin???*/ + border-width : 1px; + border-style : dotted; + border-color : '#{richSkin.generalTextColor}'; +} -.insel_btn_shadow {position: relative; padding : 6px 6px 6px 6px; top : -6px; right : -6px;} -.insel_shadow {position: relative; padding : 6px 6px 6px 6px; top : -6px; left : -6px;} +.insel_width_list { + width : 250px; +} -.insel_shadow_t {background: url(images/bg_shadow.png) top left; position: absolute; width: 6px; top: 0px; bottom: 6px; left : 0px} -.insel_shadow_l {background: url(images/bg_shadow.png) bottom left; position: absolute; height: 6px; bottom: 0px; left: 0px; right: 6px;} -.insel_shadow_r {background: url(images/bg_shadow.png) bottom right; position: absolute; width: 6px; top: 6px; bottom: 0px; right: 0px;} -.insel_shadow_b {background: url(images/bg_shadow.png) right top; position: absolute; height: 6px; top: 0px; left: 6px; right: 0px;} \ No newline at end of file +.insel_select { + padding : 1px; + width : 100%; + background-color: #DFE8F6; + border-width : 1px; + border-style : dotted; + border-color : '#{richSkin.generalTextColor}'; +} + +.insel_btn_preposition { + position : absolute; + top : 0px; + right : 0px; + wigth : 1px; + height : 1px; +} + +.insel_btn_position { + position : absolute; + top : 0px; + left : 0px; + white-space : nowrap; +} + +.insel_btn_shadow { + position: relative; + padding : 6px 6px 6px 6px; + top : -6px; + right : -6px; +} + +.insel_shadow { + display: inline-block; + width: 100%; + position: relative; + padding : 6px 6px 6px 6px; + top : -6px; left : -6px; +} + +.insel_shadow_t { + background-image : "url(#{resource['org.richfaces:bg_shadow.png']})"; + background-position : top left; + position: absolute; + width: 6px; + top: 0px; + bottom: 6px; + left : 0px +} +.insel_shadow_l { + background-image : "url(#{resource['org.richfaces:bg_shadow.png']})"; + background-position : bottom left; + position : absolute; + height : 6px; + bottom : 0px; + left : 0px; + right : 6px; +} +.insel_shadow_r { + background : "url(#{resource['org.richfaces:bg_shadow.png']})"; + background-position : bottom right; + position : absolute; + width : 6px; + top : 6px; + bottom : 0px; + right : 0px; +} + +.insel_shadow_b { + background : "url(#{resource['org.richfaces:bg_shadow.png']})"; + background-position : right top; + position: absolute; + height : 6px; + top: 0px; + left : 6px; + right : 0px; +} \ No newline at end of file Modified: branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.js =================================================================== --- branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.js 2010-09-06 13:40:47 UTC (rev 19121) +++ branches/RF-8992/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.js 2010-09-06 15:37:00 UTC (rev 19122) @@ -0,0 +1,9 @@ +(function ($, rf) { + + rf.ui = rf.ui || {}; + + rf.ui.InplaceSelect = function(id, options) { + + } + +})(jQuery, window.RichFaces); Modified: branches/RF-8992/ui/input/ui/src/main/templates/inplaceSelect.template.xml =================================================================== --- branches/RF-8992/ui/input/ui/src/main/templates/inplaceSelect.template.xml 2010-09-06 13:40:47 UTC (rev 19121) +++ branches/RF-8992/ui/input/ui/src/main/templates/inplaceSelect.template.xml 2010-09-06 15:37:00 UTC (rev 19122) @@ -36,73 +36,69 @@ <span id="#{clientId}" class="#{getReadyStyleClass(component, inplaceState)}" cdk:passThroughWithExclusions="id class"> - <span id="#{clientId}:label" class="rf-ii-lbl"> + + <span id="#{clientId}:label" class="rf-is-lbl"> #{inplaceValue} </span> - <input id="#{clientId}:focus" type="image" - style="position: absolute; top: 0px; left: 0px; outline-style: none;" - class="rf-ii-none" /> - <span id="#{clientId}:edit" class="#{getEditStyleClass(component, inplaceState)}"> + + <input id="#{clientId}:focus" type="image" style="position: absolute; top: 0px; left: 0px; outline-style: none;" class="rf-is-none" /> + + <span id="#{clientId}:edit" class="#{getEditStyleClass(component, inplaceState)}" + style="display: inline-block;"> <input id="#{clientId}:input" autocomplete="off" name="#{clientId}" type="text" value="#{getInputValue(facesContext, component)}" - class="rf-ii-f" style="width: #{component.attributes['inputWidth']};" + class="insel_field" style="width: #{component.attributes['inputWidth']};" cdk:passThrough="tabIndex" readonly="readonly"> <cdk:call expression="renderInputHandlers(facesContext, component);" /> </input> <c:if test="#{component.attributes['showControls']}"> - <span class="rf-ii-btn-prepos"> - <span class="rf-ii-btn-pos"> - <span id="#{clientId}:btnshadow" class="rf-ii-btn-shadow"> - <span class="rf-ii-btn-shadow-t"></span> - <span class="rf-ii-btn-shadow-l"></span> - <span class="rf-ii-btn-shadow-r"></span> - <span class="rf-ii-btn-shadow-b"></span> + <span class="insel_btn_preposition"> + <span class="insel_btn_position"> + <span id="#{clientId}:btnshadow" class="insel_shadow"> - <span id="#{clientId}:btn" style="position : relative"> + <span class="insel_shadow_t"></span> + <span class="insel_shadow_l"></span> + <span class="insel_shadow_r"></span> + <span class="insel_shadow_b"></span> + + <span id="#{clientId}:btn" style="position : relative;"> <input type="image" id="#{clientId}:okbtn" src="#{getResourcePath(facesContext, 'org.richfaces/ico_ok.gif')}" - class="rf-ii-btn" onmousedown="this.className='rf-ii-btn-p'" - onmouseout="this.className='rf-ii-btn'" onmouseup="this.className='rf-ii-btn'" /> + class="insel_btn" onmousedown="this.className='insel_btn_press'" + onmouseout="this.className='insel_btn_press'" onmouseup="this.className='insel_btn'" /> <input type="image" id="#{clientId}:cancelbtn" src="#{getResourcePath(facesContext,'org.richfaces/ico_cancel.gif')}" - class="rf-ii-btn" onmousedown="this.className='rf-ii-btn-press'" - onmouseout="this.className='rf-ii-btn'" onmouseup="this.className='rf-ii-btn'" /> + class="insel_btn" onmousedown="this.className='insel_btn_press'" + onmouseout="this.className='insel_btn_press'" onmouseup="this.className='insel_btn'" /> <br /> </span> + </span> </span> </span> </c:if> - + <br/> <span class="insel_list_cord"> - <span class="insel_shadow"> - <span class="insel_shadow_t"> - <span class="insel_shadow_l"></span> - <span class="insel_shadow_r"></span> - <span class="insel_shadow_b"></span> - <span class="insel_list_decoration"> - <span class="insel_list_scroll"> - <span class="insel_option insel_font" onmouseout="this.className='insel_option insel_font'" - onmouseover="this.className='insel_option insel_font insel_select'">Option 1</span> - <span class="insel_option insel_font" onmouseout="this.className='insel_option insel_font'" - onmouseover="this.className='insel_option insel_font insel_select'">Option 2</span> - <span class="insel_option insel_font" onmouseout="this.className='insel_option insel_font'" - onmouseover="this.className='insel_option insel_font insel_select'">Option 3</span> - <span class="insel_option insel_font" onmouseout="this.className='insel_option insel_font'" - onmouseover="this.className='insel_option insel_font insel_select'">Option 4</span> - <span class="insel_option insel_font" onmouseout="this.className='insel_option insel_font'" - onmouseover="this.className='insel_option insel_font insel_select'">Option 6</span> - <span class="insel_option insel_font" onmouseout="this.className='insel_option insel_font'" - onmouseover="this.className='insel_option insel_font insel_select'">Option 7</span> - <span class="insel_option insel_font" onmouseout="this.className='insel_option insel_font'" - onmouseover="this.className='insel_option insel_font insel_select'">Option 8</span> - <span class="insel_option insel_font" onmouseout="this.className='insel_option insel_font'" - onmouseover="this.className='insel_option insel_font insel_select'">Option 9</span> - <span class="insel_option insel_font" onmouseout="this.className='insel_option insel_font'" - onmouseover="this.className='insel_option insel_font insel_select'">Option 0</span> + <span class="insel_list_position insel_width_list"> + <span class="insel_shadow"> + <span class="insel_shadow_t"></span> + <span class="insel_shadow_l"></span> + <span class="insel_shadow_r"></span> + <span class="insel_shadow_b"></span> + <span class="insel_list_decoration"> + <span class="insel_list_scroll"> + <span class="insel_option insel_font">Option 1</span> + <br/> + <span class="insel_option insel_font">Option 2</span> + <br/> + <span class="insel_option insel_font">Option 3</span> + <br/> + <span class="insel_option insel_font">Option 4</span> + <br/> </span> </span> </span> + </span> </span> </span>