Esd input inplace
- 3. Introduction Inplace provides easy inplace editing and inline content display. Inplace consists of two members 1. Display element is the initial clickable label 2. Inline element is the hidden content that is displayed when display element is toggled.
- 4. Attributes Name Default Type Description id null String Unique identifier of the component rendered true Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered. binding null Object An el expression that maps to a server side UIComponent instance in a backing bean label null String Label to be shown in display mode. emptyLabel null String Label to be shown in display mode when value is empty.
- 5. Cont. effect fade String Effect to be used when toggling. effectSpeed normal String Speed of the effect. disabled false Boolean Prevents hidden content to be shown. style null String Inline style of the main container element. styleClass null String Style class of the main container element. Name Default Type Description
- 6. Cont. Name Default Type Description editor false Boolean Specifies the editor mode. saveLabel Save String Tooltip text of save button in editor mode. cancelLabel Cancel String Tooltip text of cancel button in editor mode. event click String Name of the client side event to display inline content.
- 7. Syntax The inline component needs to be a child of inplace. <p:inplace> <h:inputText value="Edit me" /> </p:inplace>
- 8. Custom Labels By default inplace displays its first childs value as the label, you can customize it via the label attribute. <h:outputText value="Select One:" /> <p:inplace label="Cities"> <h:selectOneMenu> <f:selectItem itemLabel="Istanbul" itemValue="Istanbul" /> <f:selectItem itemLabel="Ankara" itemValue="Ankara" /> </h:selectOneMenu> </p:inplace>
- 9. Facets For advanced customization , output and input facets are provided. <p:inplace id="checkboxInplace"> <f:facet name="output"> Yes or No </f:facet> <f:facet name="input"> <h:selectBooleanCheckbox /> </f:facet> </p:inplace>
- 10. Effects Default effect is fade and other possible effect is slide , also effect speed can be tuned with values slow , normal and fast. <p:inplace label="Show Image" effect="slide" effectSpeed="fast"> <p:graphicImage value="/images/nature1.jpg" /> </p:inplace>
- 11. Editor Inplace editing is enabled via editor option. public class InplaceBean { private String text; //getter-setter }
- 12. Cont. <p:inplace editor="true"> <h:inputText value="#{inplaceBean.text}" /> </p:inplace> save and cancel are two provided ajax behaviors events.
- 13. Cont. public class InplaceBean { private String text; public void handleSave() { //add faces message with update text value } //getter-setter }
- 14. Cont. <p:inplace editor="true"> <p:ajax event="save" listener="#{inplaceBean.handleSave}" update="msgs" /> <h:inputText value="#{inplaceBean.text}" /> </p:inplace> <p:growl id="msgs" />
- 15. Client Side API Method Params Return Type Description show() - void Shows content and hides display element. hide() - void Shows display element and hides content. toggle() - void Toggles visibility of between content and display element. save() - void Triggers an ajax request to process inplace input. cancel() - void Triggers an ajax request to revert inplace input.
- 16. No questions please !!