The Pull to Refresh widget implements the Pull to Refresh design pattern for the Alloy MVC framework for Titanium by Appcelerator. A Titanium Classic implementation can be found in the documentation.
Also take a look at my Infinite Scroll widget.
The widgets adds a HeaderPullView to a TableView that is shown when the users drags the view down when it is already scrolled to the top. An event is triggered so that the implementing controller can reload data.
- Add the widget to your TableView using just one line of code.
- Override all styling via your app's
app.tss
. - Manually trigger the widget from your controller.
- Full Android, Mobile Web, Tizen and BlackBerry compatibility and testing.
- Support for ListViews.
-
Download the latest release.
-
Unzip the file to
app/widgets/nl.fokkezb.pullToRefresh
. -
Add the widget as a dependency to your
app/config.json
file:"dependencies": { "nl.fokkezb.pullToRefresh":"1.3.2" }
-
Add the widget to your TableView:
<TableView> <Widget id="ptr" src="nl.fokkezb.pullToRefresh" onRelease="myLoader" /> </TableView>
-
In the callback set via
myLoader
make sure you call$.ptr.hide()
to hide the HeaderPullView when it is done loading.
The widget can be fully styled without touching the widget source. Use the following ID's in your app's app.tss
to override the default style:
ID | Description |
---|---|
#ptr |
The background of the HeaderPullView |
#ptrCenter |
Centers the contents, you probably only want to change bottom in conjuction with using the height parameter mentioned further on. |
#ptrArrow |
The arrow image. Use WPATH('/images/white.png') to use the white instead of the default grey image, or roll your own. |
#ptrIndicator |
The ActivityIndicator showing during load |
#ptrText |
The text |
The widget texts can be overridden and translated via your strings.xml
file, using the following names:
Name | Default |
---|---|
msgPull | Pull to refresh... |
msgRelease | Release to refresh... |
msgUpdating | Updating... |
There are no required options to pass via TSS properties or XML attributes, apart from the onRelase
attribute to bind your callback to the release-event.
If you re-style the widget you might need to change the height
of the HeaderPullView to keep during load. And instead of using a strings.xml
file you can also override the default texts using the following parameters:
Parameter | Type | Default |
---|---|---|
height | number |
Height of the HeaderPullView during load (default: 50 ) |
msgPull | string |
Overrides Pull to refresh... |
msgRelease | string |
Overrides Release to refresh... |
msgUpdating | string |
Overrides Updating... |
You can also manually show and hide the view or trigger the complete cycle of the widget. You could use this for the first load when your window opens.
| Function | Parameters | Usage
| ---------- | ---------- |
| setOptions | object
| Set any of the options
| refresh | | Manually trigger pull + release
| show | | Show the headerPullView
| hide | | Hide the headerPullView
| dettach | | Remove the headerPullView
| attach | | Re-add the headerPullView after removal
- 1.3.2
- Typo in
widget.json
- Typo in
- 1.3.1 (broken)
- Code clean-up
- 1.3
- From now on declared in the XML view instead of the controller!
- Splitted
init
intosetOptions
andattach
- Renamed
remove
todettach
- Renamed
trigger
torefresh
to not interfere with BackBone
- 1.2
- Retina arrow images, including new (default) grey one
- Removed text showing last update for more clear view
- Easier styling
- 1.1 / 1.1.1
- Exposed new API functions to
show
/hide
the view, set thedate
andtrigger
the widget manually. - Renamed
load
parameter toloader
in line with upcomming widgets.
- Exposed new API functions to
- 1.0
- Initial version
Copyright 2013 Fokke Zandbergen Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.