-
Notifications
You must be signed in to change notification settings - Fork 297
quickview
This library contains repeaters which support partial updates in ajax use case.
QuickView is a wicket component(RepeatingView) , it lets you add or remove the rows without the need to re-render the whole repeater again in ajax use cases.the way of using QuickView is almost like DataView.
QuickGridView renders items in rows and columns in table/grid format. It also lets you add or remove the rows without the need to re-render the whole repeater again in ajax use cases. The way of using QuickGridView is almost like GridView.
Include in your maven project
<dependency>
<groupId>org.wicketstuff</groupId>
<artifactId>quickview</artifactId>
<version> 8.3.0 </version>
</dependency>
Why is it useful?
The repeaters wicket have like DataView are amazing but they can't be partially updated with ajax so you can't basically render new rows unless you add parent to AjaxRequestTarget(which will cause re-rendering of the whole repeater) or say if you remove a row you can only show your change to user by adding parent to AjaxRequestTarget,this can work in some scenarios but it might not be acceptable at places where performance is the concern ,you just don't want to retrieve the whole data again and then render all of that again.not good at server side,not good at client/user side. QuickView solves this problem for almost all of these scenarios,it can just render new row(s) in the end or at the start without the need to re-render the whole of repeater depending on where you want to add the new rows,similarly you can remove the row(s).the way of using quickview is exactly like DataView in fact by default quickview works fine in case of paging (ie. in case where whole View is rendered). QuickView by default uses DefaultQuickReuseStrategy(which implements IQuickReuseStrategy). see examles to see the use of different strategies and how they are used.
**Please note IQuickReuseStrategy is replacement for Reuse constant used in earlier versions **
Add new row in QuickView
/*
start and end are boundaries that are used to determine start and end of
quickview in markup
the boundaries concept is added new and will be available in 6.14.0
*/
Component start=new EmptyPanel("start");
Component end =new EmptyPanel("end");
IDataProvider<Integer> data = new ListDataProvider<Integer>(list);
WebMarkupContainer numbers = new WebMarkupContainer("numbers"); //quickview's parent
numbers.setOutputMarkupId(true); //needed for ajax
final QuickView<Integer> number= new QuickView<Integer>("number",data,start,end)
{
@Override
protected void populate(Item<Integer> item) {
item.add(new Label("display", item.getModel()));
}
};
numbers.add(number);
add(numbers);
AjaxLink addLink = new AjaxLink("addLink") {
@Override
public void onClick(AjaxRequestTarget target) {
int newObject=list.get(list.size()-1) +1;
list.add( newObject);
//just enough to create and add a new item in the end
number.addNewItems(newObject);
}
};
add(addLink);
complete example for the same is provided in the examples provided in the package
the above code might look very familiar to you,using quickview looks exactly like a dataview . in ajaxlink's onclick you create a new item by just using quickview.addNewItems(newObject). adding the item to quickview also means a new row/item will be rendered.there is no need to add quickview'parent to the ajaxlink in above code and you should also NOT do that as it will mean the whole quickview is rendered again which is what you don't want in current case.
Add new row in QuickGridView
Component start=new EmptyPanel("start");
Component end =new EmptyPanel("end");
IDataProvider<Integer> data = new ListDataProvider<Integer>(list);
WebMarkupContainer numbers = new WebMarkupContainer("numbers"); //parent for quickview
numbers.setOutputMarkupId(true); //needed for ajax
final QuickGridView<Integer> number=new QuickGridView<Integer>("number",data,start,end) {
@Override
protected void populate(CellItem<Integer> item) {
item.add(new Label("display", item.getModel()));
}
@Override
protected void populateEmptyItem(CellItem<Integer> item) {
item.add(new Label("display"));
}
};
number.setColumns(2);
numbers.add(number);
add(numbers);
AjaxLink addLink = new AjaxLink("addLink") {
@Override
public void onClick(AjaxRequestTarget target) {
int newObject=10,newObject=20;
List<Integer>newOnes=new ArrayList<Integer>();
newOnes.add(newObject);
newOnes.add(newObject2);
//just enough to add new rows and corresponding cells
number.addRows(data.iterator());
}
};
complete example for the same is provided in the examples provided in the package
AjaxItemsNavigator. It is also provided in the package,it is a navigator which creates new rows on click.It works like what you see in social networking applications,click on a link more to get more feeds/updates .the way to use it is very simple.
AjaxItemsNavigator navigator=new AjaxItemsNavigator("navigator",quickView);
add(navigator) ;
just enough to use AjaxItemsNavigator ,create a quickview and pass to it and that's it.
AjaxItemsNavigator with QuickGridView
AjaxItemsNavigator navigator=new AjaxItemsNavigator("nav",gridView);
add(navigator);
just enough to use AjaxItemsNavigator with QuickGridView,create a QuickGridView and pass to it and that's it.
complete example for the same is provided in the examples provided in the package
AjaxPageScrollEventBehavior
it's an AjaxEventBehavior which fires an event when scroll-bar of Page is moved to the bottom else it just ignores the "scroll" events.when you implement onScroll just call the behavior's addItemsForNextPage(quickview) and new rows will be created when scroll event is fired.Add this behavior to the Page for example.
//behavior added to page
add(new AjaxPageScrollEventBehavior(){
@Override
protected void onScroll(AjaxRequestTarget target) {
addItemsForNextPage(quickView);
}
});
complete example for the same is provided in the examples provided with quickview's package
AjaxComponentScrollEventBehavior
it's an AjaxEventBehavior which fires an event when scroll-bar of quickview's parent is moved to the bottom else it just ignores the "scroll" events.when you implement onScroll just call the behavior's addItemsForNextPage(quickview) and new rows will be created when scroll event is fired.Add this behavior to quickview's parent. for example.
//parent is quickview's parent and behavior is added to it
parent.add(new AjaxComponentScrollEventBehavior(){
@Override
protected void onScroll(AjaxRequestTarget target) {
addItemsForNextPage(quickView);
}
});
complete example for the same is provided in the examples provided with quickview's package
Quickview works well with PagingNavigator or AjaxPagingNavigator for example to use with AjaxPagingNavigator
IDataProvider<Integer> data=new ListDataProvider<Integer>(list);
final int itemsPerRequest=4;//rows created per request
// quickview by default works fine for paging
QuickView<Integer> quickView=new QuickView<Integer>("number",data,itemsPerRequest) {
@Override
protected void populate(Item<Integer> item) {
item.add(new Label("display",item.getModel()));
}
} ;
//don't forget adding quickview to parent with any ajax navigator
WebMarkupContainer numbers=new WebMarkupContainer("numbers");
numbers.add(quickView);
numbers.setOutputMarkupId(true); //don't forget required when using ajax navigators
add(numbers);
AjaxPagingNavigator navigator=new AjaxPagingNavigator("navigator",quickView);
add(navigator) ;
there is nothing new to explain ,just create quickview and pass it on to the navigator like you do with dataview. complete example for the same is provided in the examples provided with quickview's package
Please note the idea/inspiration to write quickview came from Igor Vaynberg's article
http://wicketinaction.com/2008/10/repainting-only-newly-created-repeater-items-via-ajax/