Enterprise System Development - input inplace

1. Input inplace

2. Group members:
Samia
khlood
Tayyaba
haqsar
Anum
adil

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 !!