I want to add footer to a datatable. It will do some statistic work like "sum". Can anyone show me how to do this? It will be great if you show me some examples. Thanks!
Regards
Here is an example. In this example we will create page with table with invoices. One invoice in each row. At the bottom of the table will be toolbar in which will be shown the sum of all invoices.
Invoice.java (Object that represents one invoice)
public class Invoice implements Serializable {
private String description;
private int sum;
public Invoice() {}
public Invoice(String description, int sum) {
this.description = description;
this.sum = sum;
}
// setters and getters
}
InvoiceDataProvider.java (Data provider for the table)
public class InvoiceDataProvider implements IDataProvider {
private List<Invoice> invoices;
public InvoiceDataProvider(IModel<Double> sumModel) {
invoices = new ArrayList<Invoice>();
invoices.add(new Invoice("for rent", 550));
invoices.add(new Invoice("for phone", 25));
invoices.add(new Invoice("for insurance", 10));
// reset sumModel
sumModel.setObject(0.0);
// count the sum of invoices
for (Invoice invoice : invoices) {
sumModel.setObject(sumModel.getObject() + invoice.getSum());
}
}
#Override
public void detach() {
}
#Override
public Iterator iterator(long first, long count) {
return invoices.iterator();
}
#Override
public IModel model(final Object object) {
return new AbstractReadOnlyModel<Invoice>() {
#Override
public Invoice getObject() {
return (Invoice) object;
}
};
}
#Override
public long size() {
return invoices.size();
}
}
In the data provider we get data to be shown in the table (invoices list). Than we count sum of the invoices in the list and add the result to the model.
InvoicesToolbar.java (The toolbar for the table. Here the total sum of invoices will be shown)
public class InvoicesToolbar extends AbstractToolbar {
private IModel<Double> sumModel;
public InvoicesToolbar(DataTable table, IModel sumModel) {
super(table);
this.sumModel = sumModel;
add(new Label("sumText", Model.of("total sum")));
add(new Label("sumNumber", sumModel));
}
}
We save sumModel and create two labels. The label 'sumText' will show text 'total sum' and label 'sumNumber' will show the value stored in the model (sumModel).
InvoicesToolbar.html (The toolbar is panel so the appropriate html file should be created)
<?xml version="1.0" encoding="UTF-8" ?>
<wicket:panel xmlns:wicket="http://wicket.apache.org">
<tr>
<td><span wicket:id="sumText"></span></td>
<td><span wicket:id="sumNumber"></span></td>
</tr>
</wicket:panel>
We create one table row with two cells (the table will have two columns) and add html elements with wicket id to render there some text.
DataTablePage.java (The web page with the table)
public class DataTablePage extends WebPage {
public DataTablePage() {
List<IColumn> columns = new ArrayList<IColumn>();
columns.add(new PropertyColumn(Model.of("description"), "description"));
columns.add(new PropertyColumn(Model.of("sum"), "sum"));
IModel<Double> sumModel = new Model<Double>(0.0);
DataTable table = new DataTable("table", columns, new InvoiceDataProvider(sumModel), 10);
table.addTopToolbar(new HeadersToolbar(table, null));
table.addBottomToolbar(new InvoicesToolbar(table, sumModel));
add(table);
}
}
We create list of columns (PropertyColumn - value will be the property of the object). We create model (sumModel). In this model will be lately stored the total sum of the invoices. And we create table. To this table (to the top) we add header toolbar (headers for the columns) and (to the bottom) we add our InvoiceToolbar.
DataTablePage.html (Html markup for the web page)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table</title>
</head>
<body>
<table wicket:id="table"></table>
</body>
</html>
Above the wicket-core dependency we also need wicket-extensions dependency. The code was tested using wicket 6.18.0.
When populating the data table, say for instance with a ListView, you should increment an Integer Model that will be used later in a Label.
Model sumModel = new Model(0);
listview = new ListView(...) {
... populate(ListItem item) {
int N = // whatever value you need
sumModel.setObject(sumModel.getObject() + N);
}
}
add(listview);
// ...
Label sumFooter = new Label("footer", sumModel);
add(sumFooter);
PS: I have not tested this.
edit
You should check CountLabel component aswell
(http://opensource.55minutes.com/apidocs/fiftyfive-wicket-all/4.0-SNAPSHOT/fiftyfive/wicket/basic/CountLabel.html)
Related
I want to paginate my results. First I've tried the classic way and it worked, my dataView retrieves a list with results from database and displays the number of results I want per page.
(Looks like this << <1 2 3 4 5> >> )
final DataView<RequestEntity> dataView = new MyDataView();
dataView.setItemsPerPage(10);
linksContainer.add(new PagingNavigator("pageNavigator", dataView));
<a wicket:id="pageNavigator"></a>
Now I want to retrieve data from database only when the next page is clicked (kind of lazy loading/ lazy pagination). So I modified my DAOObject like this:
query.setMaxResults(entriesPerPage);
It is the same query like before but this time it will take the amount of results I want per page.
And it works, it retrieves as much entries as I want per page. The problem is that I don't know how to display another page. It appears just one page with the first entries from the query. (Looks like this << 1 >>)
My idea is to use links instead of AjaxPagingNavigator to display pages from 1 to 5 and when the link is clicked the query is executed. I don't think my idea is good. Can you help me? I hope my question isn't too stupid.
Thanks
Done! All I needed to do is to create IDataProvider that knows everything. If you create it you don't need to worry about the size( about tricking it to show more pages).
IDataProvider dataProvider = new IDataProvider<RequestEntity>() {
RequestEntityDAOExtra requestEntityDAOExtra =
((MyApp) getApplication()).getMyRequestDAO();
#Override
public Iterator<? extends RequestEntity> iterator(long first, long count) {
List<RequestEntity> entitiesByDomainList = requestEntityDAOExtra.getEntityByDomain(
domainInput.getModelObject(), (int) count, (int) first);
return entitiesByDomainList.iterator();
}
#Override
public long size() {
return requestEntityDAOExtra.getEntityByDomainCount(domainInput.getModelObject());
}
#Override
public IModel<RequestEntity> model(final RequestEntity requestEntity) {
return new LoadableDetachableModel() {
#Override
protected RequestEntity load() {
return requestEntity;
}
};
}
#Override
public void detach() {
}
};
final DataView<RequestEntity> dataView = new MyDataView(dataProvider, 10);
private class MyDataView extends DataView<RequestEntity> {
public MyDataView(IDataProvider dataProvider, int i) {
super("linksList", dataProvider, i);
}
#Override
protected void populateItem(final Item<RequestEntity> item) {
.....
}
}
I have a component for editing db entity. It has #CommitAfter on onSuccess(). When it is on the separate page it works fine. I click update button, it saves data and redirects to view page.
Now I want to reuse it on the list page. By clicking on item it should appear. After editing and clicking update button on the component it should save item to db and hide itself.
To achieve this I modified component so I can set zone id for its form. Put component inside zone on the list page, added links for each item with event onSelectItem, which sets zone id for component and returns body of the zone.
It did show component and I could edit fields and hit update button. It updated item but redirected whole page to view page. I tried to return null in onSuccess() – but in this case it didn’t save data to db and zone also wasn’t refreshed. I also tried call page class from a component by using #InjectPage and return page.zone.getBody() – this does reload zone but still doesn’t save data though all methods passed w/o exception. Also it too bad to call page specific code inside a component. My other custom ajax calls do save data to db in methods with #CommitAfter.
So my question what is the correct way of doing this in Tapestry?
ContactsList.tml
<html t:type="layout" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd" xmlns:p="tapestry:parameter">
<t:form>
... list of contacts linked to onSelectContact()
</t:form>
<t:zone id="editContact" t:id="editContactZone">
<t:if test="selectedContact">
<t:contactform t:id="contactForm" />
</t:if>
</t:zone>
</html>
ListPage.java
public class ContactsList{
#InjectComponent
private Zone editContactZone;
#InjectComponent("contactForm")
private ContactForm contactForm;
#Property
private Contact selectedContact;
public Object onSelectContact(#RequestParameter(value = "id", allowBlank = false) Integer id) {
selectedContact = getContactById(id);
if (selectedContact != null) {
contactForm.setContact(selectedContact);
contactForm.setFormZone(editContactZone.getClientId());
}
return editContactZone.getBody();
}
}
ContactForm.tml
<div xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" xmlns:p="tapestry:parameter">
<t:form t:id="editContactForm" zone="prop:zone">
.... contact fields
</t:form>
</div>
ContactForm.java
public class ContactForm{
#InjectComponent("editContactForm")
private Form editContactForm;
#Property
private String zone;
#InjectPage
private ContactList listPage;
#InjectPage
private ViewContact viewContact;
#Property
protected Contact contact;
public void setContact(Contact contact) {
this.contact = contact;
}
public void setFormZone(String zone){
this.zone = zone;
}
#CommitAfter
public Object onSuccess() {
parseContact();
storeContact(); // calls DAO.store(contact)
return zone == null ? viewContact : listPage.onSelectContact(0); //don't like this in component code but at least it returns zone's body
}
}
You could pass a Block component parameter to the ContactForm containing the markup to render after #OnSuccess.
Or perhaps a better separation of concerns is to fire an event in the ContactForm which bubbles up to the page? Eg:
ContactForm.java
#Inject ComponentResources resources;
#CommitAfter
public void onSuccess() {
storeContact();
resources.triggerEvent("contactSaved", new Object[] { contact }, null);
}
ContactsList.java
#Inject AjaxResponseRenderer ajaxRenderer;
#Inject Zone someZone;
#Property Contact contact;
public void onContactSaved(Contact contact) {
this.contact = contact;
ajaxRenderer.addRender(someZone);
}
Also, why are you using #RequestParameter? Why not use event context?
ContactsList.tml
<t:loop source="contacts" item="contact">
<t:eventlink event="selectContact" context="contact">Edit ${contact.name}</t:eventlink>
</t:loop>
ContactList.java
Block onSelectContact(Contact contact) {
// doStuff
}
I am trying to have a general home page that depending on the parameter passed to the control, different content (modules) will be displayed.
For example, a user may select Kentucky from the menu and the id for Kentucky is 1. The home controller gets the id (1) and determines the possible modules for that
state (a simple db call.) Perhaps there is an announcements module and a contacts module for the state. An announcements module could have several items but it's only one module. There would be a partial view for each type of module.
Here is the basic setup I have.
public interface IModuleRepository
{
IList<MenuItemModule> GetMenuItemModules(int menuItem);
IList<Announcements> GetAnnouncements(int modID);
IList<News> GetNews(int modID);
IList<Contacts> GetContacts(int modID);
}
//business object
public class MenuItemModule
{
private int _MenuItemID;
private int _ModuleID;
private int _ModuleDefID;
private string _Src;
private int _ModuleOrder;
//get, set properties for these...
}
//announcements entity
public class Announcements
{
private int _ID = -1;
private int _MenuItemID = -1;
private int _ModuleID = -1;
private string _Description = string.Empty;
//get set props ...
}
In my home controller...
public class HomeController : Controller
{
private IModuleRepository modRepository;
public HomeController(IModuleRepository modRepository)
{
this.modRepository = modRepository;
}
public ViewResult Item(string ItemID)
{
//returns a list of menuitemmodules for the page. This gives me the Src or name of each
//module on the page, i.e. Announcements, news, contacts, etc.
var modules = modRepository.GetMenuItemModules(Convert.ToInt32(ItemID));
return View(modules);
}
}
I have tried several different models to return but I always run up against some contstraint. If I pass the menuitemmodules to my Item.aspx, then I can do something like this:
foreach (var mod in Model)
{
Html.RenderPartial(mod.Src, a); //needs an announcement object though
}
That makes it somewhat dynamic because I have the Src which would basically be something like "Announcements" and I can just create an announcements.ascx partial to process the module. But I have found it difficult to pass my menuitemmodule and an announcements entity as well.
I have also messed around with passing a more complex object and then testing every Src that comes through with an If statement. This would make scaling difficult in the future as I increase the number of possible modules in the app.
How can I solve my problem? I hope I have provided enough info. I like the basic idea here - http://www.mikesdotnetting.com/Article/105/ASP.NET-MVC-Partial-Views-and-Strongly-Typed-Custom-ViewModels but that seems to only work for static modules on a page.
I did try a composite view model called ModuleViewModel. Here is that attempt:
public class ModuleViewModel
{
public IList<Announcements> announcements { get; set; }
public IList<MenuItemModule> mods { get; set; }
}
If I pass that model to the Item.aspx I can do something like this (but I must be doing something wrong because something doesn't look right.)
foreach (var mod in Model)
{
if (mod.announcements.Count > 0)
{
Html.RenderPartial("Announcements", mod.announcements);
}
}
Once again, scalability is going to haunt me. I would like to have something like this on item page:
foreach (var mod in Model)
{
Html.RenderPartial(mod.Src, mod);
}
That would the correct partial view and pass it the correct model.
Create Module classes that derive from a common Module base class:
public class AnnouncementsModule : Module
{
}
public class ContactsModule : Module
{
}
In controller:
Create your various modules and put them into your overall view module (here it has a property called Modules that is an array of Module:
var viewModel = new ComplexViewModel
{
Modules = new []
{
new ContactsModule(),
new AnnouncementsModule()
}
};
return View(viewModule);
In view:
#Html.DisplayFor(x => x.Modules);
Create the partial views for each Type of Module in the appropriate 'Shared` folder. (Run it without creating them and it will show you an exception with the locations where it's looking for them).
After messing around with this for over a week, I finally managed to figure out how MVC can do what I want dynamically. I decided to post my solution for others that are new to MVC. Hopefully, the following will clear up the misunderstandings I had (although, at this point in my understanding of MVC, I cannot say this is the best approach.)
I will include the previous code snips and modifications for clarity:
public interface IModuleRepository
{
IList<MenuItemModule> GetMenuItemModules(int menuItem);
IList<Announcements> GetAnnouncements(int modID);
IList<News> GetNews(int modID);
IList<Contacts> GetContacts(int modID);
}
//business object
public class MenuItemModule
{
private int _MenuItemID;
private int _ModuleID;
private int _ModuleDefID;
private string _Src;
private int _ModuleOrder;
//get, set properties for these...
}
//announcements entity
public class Announcements : MenuItemModule
{
private int _ID = -1;
private string _Description = string.Empty;
//get set props ...
}
I also added another class:
public class AnnouncementModule : MenuItemModule
{
private IList<Announcements> _Announcements;
//get set prop
}
...and I created a model for the view
public class HomeItemViewModel
{
public MenuItemModule[] MenuItemModules { get; set; } //collection of menuitemmodules
}
In my home controller...
var menuItemModules = modRepository.GetMenuItemModules(ItemID);
if (menuItemModules.Count > 0)
{
AnnouncementModule aMod;
MenuItemModule[] mods = new MenuItemModule[menuItemModules.Count()];
int i = 0;
//loop through each MenuItemModule assign to the appropriate model
foreach (MenuItemModule mod in menuItemModules)
{
if (mod.Src == "Announcements")
{
aMod = new AnnouncementModule();
aMod.Announcements = modRepository.GetAnnouncements(mod.ModuleID);
//now add this to the menuitemmodule collection
mods[i] = aMod;
}
if (mod.Src == "Contacts")
{
//...
}
i++;
}
}
var viewModel = new HomeItemViewModel
{
MenuItemModules = mods
};
return View(viewModel);
Then I used the suggestion to use DisplayFor in the view. The view is strongly typed to HomeItemViewModel.
<%: Html.DisplayFor(m => m.MenuItemModules) %>
This iterates through the collection and based on the type, it will call that template. In this example, it calls AnnouncementModule.ascx which is strongly typed to AnnouncementModule.
foreach (var a in Model.Announcements)
{
//a.Description will give us the description of the announcement
}
I realize there are slicker ways to code the controller, and I plan on refactoring, but this skeleton should provide the basics to solve the question I posted.
I have a java class:
public Task {
private int id;
private Company sender;
private Company receiver;
//Getter and Setter
...
}
As you can see, I have 2 other custom classes in the task class. And a company has for example Adress and Directory.
I have a CompanyPanel which will reusable be used on the Page. Here is some code from the panel.
public class CompanyPanel extends Panel {
protected List<Company> companies;
public CompanyPanel(String id, IModel<Company> model) {
super(id,new CompoundPropertyModel<Company>(model));
companies = new ArrayList<Company>();
Company company_1 = new Company();
//Setting default predefined values for the company, so I can select it from the dropdown and to set fields automatically
company_1.setFtpAdress("adress1.com");
company_1.setFtpDir("/MusterDir/");
companies.add(company_1);
//SAME for another company
...
companies.add(comany_2);
...
final DropDownChoice<Company> companyList = new DropDownChoice<Company>("companies", model,
new LoadableDetachableModel<List<Company>>() {
#Override
protected List<Company> load() {
return companies;
}
}){
protected boolean wantOnSelectionChangedNotifications() {
return true;
}
};
add(companyList);
final TextField<String> ftpAdress = new TextField<String>("ftpAdress");
ftpAdress.setOutputMarkupId(true);
add(ftpAdress);
final TextField<String> ftpDir = new TextField<String>("ftpDir");
ftpDir.setOutputMarkupId(true);
add(ftpDir);
//added Ajax to dropdown to update textfields automatically, based on selection of dropdown
companyList.add(new AjaxFormComponentUpdatingBehavior("onchange")
{
#Override
protected void onUpdate(AjaxRequestTarget target)
{
target.add(ftpAdress);
target.add(ftpDir);
}
});
}
}
In the Page I use reuseable CompanyPanels.
...
CompanyPanel senderPanel = new CompanyPanel("senderPanel", new PropertyModel(task,"sender"));
senderPanel.setOutputMarkupId(true);
form.add(senderPanel);
CompanyPanel receiverPanel = new CompanyPanel("receiverPanel", new PropertyModel(task,"receiver"));
receiverPanel.setOutputMarkupId(true);
form.add(receiverPanel);
...
When I submit the form I do:
public void onSubmit(AjaxRequestTarget target, Form<?> form) {
//doSomething
target.add(senderPanel);
target.add(receiverPanel);
}
The problem: The company panel is not being rerendered. And I don't really know why.
Workflow:
I select a company from the dropdown panel
The TextFields(which are inside the companyPanel) will be set correctly, based on the dropdown
I modify a textField (which belongs to a company)
I submit the form
I change the company from the dropdown list
I change back to the first company -> PROBLEM: the modified textfields displays still the modified text inside. It was not reseted to the default values.
Any help very appreciated.
Of course they will display the modified values. You create a list of companies in the CompanyPanel constructor. When you modify a company's data, the object is modified inside that list.
A quick way to fix this would be to replace the CompanyPanel panel with a new instance of CompanyPanel in your onSubmit method. That would recreate the list of companies with your default values. You would of course lose the modified values.
Another possibly better fix is to move the companies list creation into the loadabledetachablemodel:
final DropDownChoice<Company> companyList = new DropDownChoice<Company>("companies", model,
new LoadableDetachableModel<List<Company>>() {
#Override
protected List<Company> load() {
List<Company>companies = new ArrayList<Company>();
Company company_1 = new Company();
//Setting default predefined values for the company, so I can select it from the dropdown and to set fields automatically
company_1.setFtpAdress("adress1.com");
company_1.setFtpDir("/MusterDir/");
companies.add(company_1);
//SAME for another company
...
companies.add(comany_2);
...
return companies;
}
This way the list of companies is recreated on every request with the default values.
Make sure you implement a proper equals() and hashCode() method in Company though for DropDownChoice to show the proper selected element though - because in this scenario the object in your model and the objects in the list may never be ==.
You have to provide more code. If you submit the correctly so that the model changes try:
senderPanel.modelChanged();
receiverPanel.modelChanged();
target.add(senderPanel);
target.add(receiverPanel);
I'd like to have a PropertyColumn of a DataTable right-aligned. But if I try to add a new SimpleAttributeModifier("align", "right") to the cell item, it is added to a span within the td, rather than the td itself.
public class AssetSizeColumn<T> extends PropertyColumn<T> {
...
#SuppressWarnings("unchecked")
public void populateItem(Item<ICellPopulator<T>> item, String componentId, IModel<T> rowModel) {
IModel<Long> model = (IModel<Long>) createLabelModel(rowModel);
Component label = new Label(componentId, model.getValue().toString());
label.add(new SimpleAttributeModifier("align", "right"));
item.add(label);
}
Can I get at the td to set the alignment?
The trick is that the td is the parent of the item as soon as it is added to the ICellPopulator, so that we can add a modifier to it straight away.
public void populateItem(Item<ICellPopulator<T>> item, String componentId, IModel<T> rowModel) {
IModel<Long> model = (IModel<Long>) createLabelModel(rowModel);
Component label = new Label(componentId, model.getObject().toString());
item.add(label);
label.getParent().add(new SimpleAttributeModifier("align", "right"));
}