Showing posts with label LazyLoading. Show all posts
Showing posts with label LazyLoading. Show all posts

Saturday, 21 February 2015

Flipview With IncementalLoading/LazyLoading support

How to do Incremental loading (LazyLoading) of data you can check from here

Now How to integrate it with FlipView ?
  • To do the same u need to download the library from Nuget.org which support Incremental loading in FlipView - JISoft.FlipView
  • There is library available to do so. check here
How to use this library
  • Follow the same tutorial to create collection for incremental loading from this blog.
  • Integration with JFlipView
 <Page  
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
   xmlns:toolkit="using:JISoft.FlipView"  
   xmlns:LV="using:ExtendedListView"  
   x:Class="App3.MainPage"    
   mc:Ignorable="d">  
  <Grid Background="#3e3e3e" x:Name="LayoutRoot">  
     <toolkit:JFlipView x:Name="flipvw" VerticalAlignment="Top" HorizontalAlignment="Stretch" IncrementalLoadingTrigger="Edge"   
               SelectionChanged="JFlipView_SelectionChanged" DataFetchSize="5" ItemsSource="{Binding TestData}" IncrementalLoadingThreshold="4" Margin="0,0,200,0" Background="#FF444747" ManipulationMode="All">  
       <toolkit:JFlipView.ItemTemplate>  
         <DataTemplate>  
           <Border BorderThickness="1" BorderBrush="#f1f1f1" Margin="5" Width="{Binding Wid}" Height="100" >  
             <TextBlock Text="{Binding data}"/>  
           </Border>  
         </DataTemplate>  
       </toolkit:JFlipView.ItemTemplate>  
     </toolkit:JFlipView>  
  </Grid>  
 </Page>  
  • Here your Flipview is ready which can do LazyLoading of data in same way as ListView/GridView do. Check below property to understand LazyLoading
    • IncrementalLoadingThreshold - MSDN
    • DataFetchSize - MSDN
    • IncrementalLoadingThresholdTrigger - MSDN

Thursday, 19 February 2015

IncrementalLoading(LazyLoading) in Windows phone 8.1 and Windows 8.1

How to do Incremental loading (LazyLoading) of data in ListView/GridView ?
  • In WinRT runtime ListView and GridView implement ISupportIncrementalLoading interface.
  • This interface will be called by Listview/Gridview when it reaches to end of list edge and gives callback to load more items.
  • There is library available to do so. check here
How to use this library
  • Add this library in your Windows 8.1 or Windows phone 8.1 project from Nuget.
  • After adding library reference is already been added to project.
  • Now create a collection which implement "IncrementalLoadingCollection" from library this way as mention below.
  • Right Click on  IncrementalLoadingList<BookSummaryInfo> and use Implement Abstract class, it will add two methods
    •  Task<int> LoadNextItemsAsync () - make it async mehod
    • CanLoadMoreItems() - business logic to handle max item to fetch
  • See example below
 public class BookCollection :IncrementalLoadingList<BookSummaryInfo>
 {
     private BookSearchDataContext _bookDataContext;
     public BookCollection(BookSearchDataContext bookDataContext)
     {
         this._bookDataContext = bookDataContext;
     }
     protected async override Task<int> LoadNextItemsAsync(int count) //count is passed by ListView/GridView
     {
        if (_bookDataContext != null)
        {
           //Network request and get Data - Pass the no of items require from network - count
           //"count" which is passed from ListView/GridView
           SearchResponse response = await _bookDataContext.SearchBooks(count);    
           if (response != null && response.Search != null && response.Search.Length > 0)
           {
              foreach (var bookinfo in response.Search)
              {
                 //Add data to Collection
                  this.Add(new BookSummaryInfo(bookinfo));
              }
              //return the no of items added
              return response.Search.Length;
           }
       }
       return 0;
     }     
     protected override bool CanLoadMoreItems()
     {
         ////your Own logic - if you have more items make it true else false
        return _bookDataContext.hasMore;
     }
}

  • Now Your Collection is Ready next We will use same collection To bind with ListView/GridView
  • Now Let's Create ViewModel 

////Your View-Model which contain the IncrementalLoadingCollection   
public class BookDataVM   
{   
    BookSearchDataContext data; bool _IsBusy;   
    public BookDataVM()   
    {   
        data = new BookSearchDataContext();  
        ////Collection with Incremental Loading capability   
        BookCollection = new BookCollection(data);   
    }   
}   
  • Now this BookCollection object can be bind to ListView/GridView.
  • Scroll to the end of list it will give you call-back "LoadNextItemsAsync" where you can add more items to collection.

See FlipView with IncrementalLoading