Pull to Refresh

amx:refreshContainer

The Pull to Refresh component allows a user to drag on the top of a List View to reveal an area with a spinning activity indicator and brief message, as additional list items can be fetched. This is typically used with a List View, but could be used with other components.

This component is commonly used on tablets and phones. For examples of transitions, see Animated Transitions doc.

Appearance

Appearance characteristics for this component.

• Background: The refresh area default color is gray.
• Activity Indicator: The activity indicator draws and then spins.
• Message: A brief two line message displays.

Behavior

Common behaviors for this component.

• Drag: Dragging from the top will reveal the background container and draw the activity indicator.
• Release: Will either close the Refresh container or allow the Activity Indicator to spin as additional items can be fetched.
• Push: The content of the list view will be pushed down the page.

Usage

Usage guidelines for this component.

• Add animated transitions cautiously and use them consistently throughout your app.
• Transitions should start immediately on the action that triggers them.
• Consider the cultures that you are designing for if sliding left or right has other meanings.

Sample

AMX sample code for this component.

<amx:refreshContainer id="rc1"
refreshDesc="#{pageFlowScope.componentProperties.refreshDesc}"
pullText="#{pageFlowScope.componentProperties.pullText}"
busyText="#{pageFlowScope.componentProperties.busyText}"
subText="#{pageFlowScope.componentProperties.subText}"
actionListener="#{PropertyBean.RefreshActionHandler}">


<amx:setPropertyListener
from="Last updated: Recently"
to="#{pageFlowScope.componentProperties.subText}"
type="action"/>


<amx:listView
id="listView1" var="row" value="#{bindings.contacts.collectionModel}"
bufferStrategy="viewport"
collapsibleDividers="true"
dividerAttribute="last"
dividerMode="firstLetter"
rendered="#{pageFlowScope.componentProperties.rendered}"
showDividerCount="true"
showMoreStrategy="autoScroll">


<amx:listItem id="listItem1" action="details">
<amx:outputText value="#{row.first} #{row.last}" id="outputText1"/>


<amx:setPropertyListener from="#{row.rowKey}" to="#{pageFlowScope.currentContact}"
type="action"/>


<amx:setPropertyListener from="#{row.first}" to="#{pageFlowScope.currentContactFirst}"
type="action"/>


<amx:setPropertyListener from="#{row.last}" to="#{pageFlowScope.currentContactLast}"
type="action"/>


<amx:setPropertyListener from="#{row.address}" to="#{pageFlowScope.currentContactAddress}"
type="action"/>


<amx:setPropertyListener from="#{row.city}" to="#{pageFlowScope.currentContactCity}"
type="action"/>


<amx:setPropertyListener from="#{row.state}" to="#{pageFlowScope.currentContactState}"
type="action"/>


<amx:setPropertyListener from="#{row.zip}" to="#{pageFlowScope.currentContactZip}"
type="action"/>


<amx:setPropertyListener from="#{row.phone}" to="#{pageFlowScope.currentContactPhone}"
type="action"/>


<amx:setPropertyListener from="#{row.mobile}" to="#{pageFlowScope.currentContactMobile}"
type="action"/>
</amx:listItem>
</amx:listView>


</amx:refreshContainer>


Related

• Used On: Phone, Tablet
• Also Called: Drag to Refresh
• Related Components: List View, Swipe to Reveal
• Resources: None