Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-13418] ListView: Pull-to-refresh support

GitHub Issuen/a
TypeSub-task
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2013-06-24T23:46:14.000+0000
Affected Version/sn/a
Fix Version/s2013 Sprint 13 API, 2013 Sprint 13, Release 3.2.0
ComponentsiOS
Labelslistview
ReporterIngo Muschenetz
AssigneeVishal Duggal
Created2013-04-05T22:34:12.000+0000
Updated2017-03-21T18:32:49.000+0000

Description

will require API/events discussion.

Comments

  1. Vishal Duggal 2013-06-19

    ListView changes New property - pullView (replaces headerPullView) New events - pull (e.active = true/false), pullend (fired on dragend when pull is active) On iOS we will also need to add support to set contentInsets on the listView to keep the pullView visible while data is being updated and then setting it back to (0,0).
  2. Vishal Duggal 2013-06-20

    Test Code
       var win = Ti.UI.createWindow({backgroundColor: 'white'});
       var listView = Ti.UI.createListView({height:'90%', top:0});
       var sections = [];
       
       var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});
       var fruitDataSet = [
           {properties: { title: 'Apple'}},
           {properties: { title: 'Banana'}},
           {properties: { title: 'Cantaloupe'}},
           {properties: { title: 'Fig'}},
           {properties: { title: 'Guava'}},
           {properties: { title: 'Kiwi'}},
       ];
       fruitSection.setItems(fruitDataSet);
       sections.push(fruitSection);
       
       var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables'});
       var vegDataSet = [
           {properties: { title: 'Carrots'}},
           {properties: { title: 'Potatoes'}},
           {properties: { title: 'Corn'}},
           {properties: { title: 'Beans'}},
           {properties: { title: 'Tomato'}},
       ];
       vegSection.setItems(vegDataSet);
       
       
       var fishSection = Ti.UI.createListSection({ headerTitle: 'Fish'});
       var fishDataSet = [
           {properties: { title: 'Cod'}},
           {properties: { title: 'Haddock'}},
           {properties: { title: 'Salmon'}},
           {properties: { title: 'Tuna'}},
       ];
       fishSection.setItems(fishDataSet);
       
       
       listView.sections = sections;
       
       
       var refreshCount = 0;
       
       function getFormattedDate(){
           var date = new Date();
           return date.getMonth() + '/' + date.getDate() + '/' + date.getFullYear() + ' ' + date.getHours() + ':' + date.getMinutes();
       }
       
       
       function resetPullHeader(){
           actInd.hide();
           imageArrow.transform=Ti.UI.create2DMatrix();
           if (refreshCount < 2) {
               imageArrow.show();
               labelStatus.text = 'Pull down to refresh...';
               labelLastUpdated.text = 'Last Updated: ' + getFormattedDate();
           } else {
               labelStatus.text = 'Nothing To Refresh';
               labelLastUpdated.text = 'Go Cook Something';
               listView.removeEventListener('pull', pullListener);
               listView.removeEventListener('pullend', pullendListener);
               eventStatus.text = 'Removed event listeners.';
           }
           listView.setContentInsets({top:0}, {animated:true});
       }
       
       function loadTableData()
       {
           if (refreshCount == 0) {
               listView.appendSection(vegSection);
           } else if (refreshCount == 1) {
               listView.appendSection(fishSection);
           } 
           refreshCount ++;
           resetPullHeader();
       }
       
       function pullListener(e){
           eventStatus.text = 'EVENT pull FIRED. e.active = '+e.active;
           if (e.active == false) {
               var unrotate = Ti.UI.create2DMatrix();
               imageArrow.animate({transform:unrotate, duration:180});
               labelStatus.text = 'Pull down to refresh...';
           } else {
               var rotate = Ti.UI.create2DMatrix().rotate(180);
               imageArrow.animate({transform:rotate, duration:180});
               if (refreshCount == 0) {
                   labelStatus.text = 'Release to get Vegetables...';
               } else {
                   labelStatus.text = 'Release to get Fish...';
               }
           }
       }
       
       function pullendListener(e){
           eventStatus.text = 'EVENT pullend FIRED.';
       
           if (refreshCount == 0) {
               labelStatus.text = 'Loading Vegetables...';        
           } else {
               labelStatus.text = 'Loading Fish...';
           }
           imageArrow.hide();
           actInd.show();
           listView.setContentInsets({top:80}, {animated:true});
           setTimeout(function(){
               loadTableData();
           }, 2000);
       }
       
       var tableHeader = Ti.UI.createView({
           backgroundColor:'#e2e7ed',
           width:320, height:80
       });
        
       var border = Ti.UI.createView({
           backgroundColor:'#576c89',
           bottom:0,
           height:2
       });
       tableHeader.add(border);
        
       var imageArrow = Ti.UI.createImageView({
           image:'https://github.com/appcelerator/titanium_mobile/raw/master/demos/KitchenSink/Resources/images/whiteArrow.png',
           left:20, bottom:10,
           width:23, height:60
       });
       tableHeader.add(imageArrow);
        
       var labelStatus = Ti.UI.createLabel({
           color:'#576c89',
           font:{fontSize:13, fontWeight:'bold'},
           text:'Pull down to refresh...',
           textAlign:'center',
           left:55, bottom:30,
           width:200
       });
       tableHeader.add(labelStatus);
        
       var labelLastUpdated = Ti.UI.createLabel({
           color:'#576c89',
           font:{fontSize:12},
           text:'Last Updated: ' + getFormattedDate(),
           textAlign:'center',
           left:55, bottom:15,
           width:200
       });
       tableHeader.add(labelLastUpdated);
        
       var actInd = Ti.UI.createActivityIndicator({
           left:20, bottom:13,
           width:30, height:30
       });
       tableHeader.add(actInd);
       
       
       listView.pullView = tableHeader;
       
       listView.addEventListener('pull', pullListener);
       
       listView.addEventListener('pullend',pullendListener);
       
       
       var eventStatus = Ti.UI.createLabel({
           font:{fontSize:13, fontWeight:'bold'},
           text: 'Event data will show here',
           bottom:0,
           height:'10%'
       })
       
       win.add(listView);
       win.add(eventStatus);
       win.open();
       
  3. Vishal Duggal 2013-06-20

    Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/4407
  4. Sabil Rahim 2013-06-24

    @vishalduggal shouldn't we add this test case to KS ?
  5. Lee Morris 2017-03-21

    Closing ticket as fixed.

JSON Source