Code Monkey home page Code Monkey logo

nl.fokkezb.pulltorefresh's Introduction

WANTED: Help to make the widget Android and Mobile Web compatible

PullToRefresh Widget

Overview

The PullToRefresh widget is an Alloy implementation of the TableView Refresh with headerPullView found in the docs for Titanium by Appcelerator.

Screenshot

Pull to refresh

Features

  • Initialize the widget through one simple call.
  • Change (localize) any of the messages displayed.
  • Localized date and time of last update.
  • Manually trigger the widget, e.g. for first load.

Future work

  • Android and Mobile Web compatibility and testing.
  • Localization of messages by the widget itself.
  • Find out how to override the view/style from outside the widget.

Quick Start

  • Download the repository of the widget as a ZIP file.
  • Move the file to your project's root folder.
  • Unzip the file and you'll find the widget under app/widgets/nl.fokkezb.pullToRefresh.
  • Add the widget as a dependency to your app/config.json file like so:
	"dependencies": {
		"nl.fokkezb.pullToRefresh":"1.1"
	}
  • Attach the widget to any Ti.UI.TableView. Please note the change of load to loader as from 1.1.
var ptrCtrl = Alloy.createWidget('nl.fokkezb.pullToRefresh', null, {
	table: $.myTable,
	loader: myLoaderCallback
});

or

var ptrCtrl = Alloy.createWidget('nl.fokkezb.pullToRefresh');
ptrCtrl.init({
	table: $.myTable,
	loader: myLoaderCallback
});
  • As from 1.1 your myLoaderCallback gets passed a callback that should be called upon completion. If you pass FALSE when calling the callback, the Last Updated date will NOT be updated.
function myLoaderCallback(widgetCallback) {
	// DO YOUR LOADING
	widgetCallback(true);
}

Additonal parameters

The only required parameters are the table and loader parameters. You can change the displayed texts using the following additional ones:

Parameter Type Default
msgPull string Pull down to refresh...
msgRelease string Release to refresh...
msgUpdating string Updating...
msgUpdated string Last Updated: %s %s

Addtional API functions

As from 1.1 you can also manually show and hide the view, update it's Last Updated date or trigger the complete cycle of the widget. Use this for example upon first load of the table or as long the table is empty.

Function Parameters Usage
init Object Initialize the widget (see Quick Start)
trigger Manually trigger show > load > date > hide cycle
show Show the headerPullView
hide Hide the headerPullView
date Date or FALSE Set the date of last update or FALSE to hide it
remove Undo the init

Changelog

  • 1.1
    • Exposed new API functions to show/hide the view, set the date and trigger the widget manually.
    • Renamed 'load' parameter to 'loader' in line with upcomming widgets.
  • 1.0
    • Initial version

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.