Using UIField HTML to create a dynamic table

[Joyce]

I am trying to build up an MVP GWT APP. Within my view I want to create a
dynamic HTML Table which is filled with data coming from an ArrayList by
using the @UiField HTML. Right now I can compile my application without
errors in eclipse but I can't see my data in the browser. The error I can
see in my browser is :

<Loading Image...>


The corresponding source code within my view is:

... @UiField HTML actionTable; ...
public void setRowData(ArrayList<T> rowData) {
this.rowData = rowData;
TableElement table = Document.get().createTableElement();
TableSectionElement tbody;
table.appendChild(tbody = Document.get().createTBodyElement());
for(int i = 0;i<rowData.size(); ++i)
{
TableRowElement row = tbody.insertRow(-1);
T t = rowData.get(i);
for (int j = 0; j < columnDefinitions.size(); ++j) {
TableCellElement cell = row.insertCell(-1);
StringBuilder sb = new StringBuilder();
columnDefinitions.get(j).render(t, sb);
cell.setInnerHTML(sb.toString());
Element child = cell.getFirstChildElement();
if (child != null) {
Event.sinkEvents(child, Event.ONFOCUS | Event.ONBLUR);
}
}
}
actionTable.setHTML(table.getInnerHTML());
}

The ArrayList comes from my server class in which I set the following data.

public class ActionServiceImpl extends RemoteServiceServlet implements MyActionService {

private static final String[] actionName = new String[] { "Trikots fÃŒr A-Jugend", "Rollstuhl fÃŒr Maria" };
private static final double[] targetAmount = new double[] { 1000, 2500 };
private static final double[] donationMinimum = new double[] { 10, 10 };
private static final double[] amountDonationSoFar = new double[] { 258, 742 };
private static final String[] accountName = new String[] { "Max Mustermann", "Maria Musterfrau" };
private static final String[] iban = new String[] { "DE447818032764520919100", "DE4478180328485419100" };
private static final String[] NameOfBank = new String[] { "ABC Bank", "XYZ Bank" };
private final HashMap<String, Campaign> actions = new HashMap<String, Campaign>();
private final HashMap<String, Account> accounts = new HashMap<String, Account>();

public ActionServiceImpl() {
initActions();
}

private void initActions() {

for (int i = 0; i < actionName.length; ++i) {
Account account = new Account(accountName[i], NameOfBank[i], iban[i]);
Campaign action = new Campaign(String.valueOf(i), actionName[i], targetAmount[i], donationMinimum[i],
amountDonationSoFar[i], account);
accounts.put(account.getName(), account);
actions.put(action.getId(), action);
}
}

@Override
public ArrayList<ShowActions> getShowActions() {
ArrayList<ShowActions> showActions = new ArrayList<ShowActions>();

Iterator<String> it = actions.keySet().iterator();
while (it.hasNext()) {
Campaign action = actions.get(it.next());
showActions.add(action.getActions());
}
return showActions;
}

The corresponding ui.xml looks like that:

<ui:UiBinder
xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">

<ui:style>
.contactsViewButtonHPanel {
margin: 5px 0px 0x 5px;
}
.contactsViewContactsFlexTable {
margin: 5px 0px 5px 0px;
}
</ui:style>

<g:DecoratorPanel>
<g:VerticalPanel>
<g:HorizontalPanel addStyleNames="{style.contactsViewButtonHPanel}">
<g:Button ui:field="addButton">Add</g:Button>
<g:Button ui:field="removeButton">Delete</g:Button>
<g:Button ui:field="editButton">Add</g:Button>
<g:Button ui:field="donationListButton">Delete</g:Button>
<g:Button ui:field="formButton">Delete</g:Button>
</g:HorizontalPanel>
<g:HTML ui:field="actionTable"></g:HTML>
<!--<g:FlexTable ui:field="contactsTable" addStyleNames="{style.contactsViewContactsFlexTable}"/> -->
</g:VerticalPanel>
</g:DecoratorPanel></ui:UiBinder>

Does anyone have an idea on how to fix my problem? Or is there an other way
how I can display my data?

Thank you in advance!


<Loading Image...>

[Jens]

The errors says you have a ClassCastException in line 14 in MyAction.java.
So you should start looking at MyAction.

-- J.

[Joyce]

Thank you for your help!
I changed my configuration in my MyAction class and now I get this error:

<Loading Image...>

My code on server side in the class ActionServiceImpl looks like that:

public class ActionServiceImpl extends RemoteServiceServlet implements MyActionService {

private static final String[] actionName = new String[] { "Trikots fÃŒr A-Jugend", "Rollstuhl fÃŒr Maria" };
private static final double[] targetAmount = new double[] { 1000, 2500 };
private static final double[] donationMinimum = new double[] { 10, 10 };
private static final double[] amountDonationSoFar = new double[] { 258, 742 };
private static final String[] accountName = new String[] { "Max Mustermann", "Maria Musterfrau" };
private static final String[] iban = new String[] { "DE447818032764520919100", "DE4478180328485419100" };
private static final String[] NameOfBank = new String[] { "ABC Bank", "XYZ Bank" };
private final HashMap<String, Campaign> actions = new HashMap<String, Campaign>();
private final HashMap<String, Account> accounts = new HashMap<String, Account>();

public ActionServiceImpl() {
initActions();
}

private void initActions() {

for (int i = 0; i < actionName.length; ++i) {
Account account = new Account(accountName[i], NameOfBank[i], iban[i]);
Campaign action = new Campaign(String.valueOf(i), actionName[i], targetAmount[i], donationMinimum[i],
amountDonationSoFar[i], account);
accounts.put(account.getName(), account);
actions.put(action.getId(), action);
}
}

@Override
public ArrayList<ShowActions> getShowActions() {
ArrayList<ShowActions> showActions = new ArrayList<ShowActions>();

Iterator<String> it = actions.keySet().iterator();
while (it.hasNext()) {
Campaign action = actions.get(it.next());
showActions.add(action.getActions());
}
return showActions;
}

The MyActionService Interface looks like this:

@RemoteServiceRelativePath("myActionService")public interface MyActionService extends RemoteService {
ShowActions addAction(Campaign action);
Campaign getCampaign(String id);
ArrayList<ShowActions> getShowActions();

Campaign updateAction(Campaign action);}

Post by Jens
The errors says you have a ClassCastException in line 14 in MyAction.java.
So you should start looking at MyAction.
-- J.

[Jens]

Post by Joyce
<https://lh3.googleusercontent.com/-0qnTbaEhZ6w/Wyd_Av-0PsI/AAAAAAAAApY/uwi1qs7lvJE4hOzcOvuOZo7jZ2fo0WWYgCLcBGAs/s1600/Bildschirmfoto%2B2018-06-18%2Bum%2B11.34.13.png>

This means GWT has made a request to your server but the servlet is not
registered at the expected location, thus the server responds with a 404
not found status (take a look in your network inspector in the browser).
You either have to update your web.xml or tell GWT to use a different url
for the service. For the latter take a look at the javadoc of
@RemoteServiceRelativePath for details.

-- J.

[Joyce]

Do you have an idea how I can fix that problem?
I set my path to @RemoteServiceRelativePath("myActionService") and the url
in my web.xml is the following: "
/com.google.gwt.myaction.client.client.MyAction/myaction". Is there an
other way how to set the url? Or how can I tell GWT to use a different url
for the service? I tried changing both parameters but in my browser the
error description didn't change. It seems to me that the url is configured
somewhere else. Thank you!!

Post by Jens

Post by Joyce
<https://lh3.googleusercontent.com/-0qnTbaEhZ6w/Wyd_Av-0PsI/AAAAAAAAApY/uwi1qs7lvJE4hOzcOvuOZo7jZ2fo0WWYgCLcBGAs/s1600/Bildschirmfoto%2B2018-06-18%2Bum%2B11.34.13.png>

This means GWT has made a request to your server but the servlet is not
registered at the expected location, thus the server responds with a 404
not found status (take a look in your network inspector in the browser).
You either have to update your web.xml or tell GWT to use a different url
for the service. For the latter take a look at the javadoc of
@RemoteServiceRelativePath for details.
-- J.

[Thomas Broyer]

As can be seen in your screenshot, the request goes to
/myaction/myActionService. The myActionService part comes from the
@RemoteServiceRelativePath("myActionService"), and the /myaction part comes
from the module name; or in this case most likely a rename-to="myaction" in
your module (which is also what triggers GWT into generating a file named
myaction.nocache.js in a myaction folder).
To make it work, you need to align map your servlet to
/myaction/myActionService (instead of
/com.google.gwt.myaction.client.MyAction/myaction)

Post by Joyce
Do you have an idea how I can fix that problem?
url in my web.xml is the following: "
/com.google.gwt.myaction.client.client.MyAction/myaction". Is there an
other way how to set the url? Or how can I tell GWT to use a different
url for the service? I tried changing both parameters but in my browser the
error description didn't change. It seems to me that the url is configured
somewhere else. Thank you!!

Post by Jens

Post by Joyce
<https://lh3.googleusercontent.com/-0qnTbaEhZ6w/Wyd_Av-0PsI/AAAAAAAAApY/uwi1qs7lvJE4hOzcOvuOZo7jZ2fo0WWYgCLcBGAs/s1600/Bildschirmfoto%2B2018-06-18%2Bum%2B11.34.13.png>

This means GWT has made a request to your server but the servlet is not
registered at the expected location, thus the server responds with a 404
not found status (take a look in your network inspector in the browser).
You either have to update your web.xml or tell GWT to use a different url
for the service. For the latter take a look at the javadoc of
@RemoteServiceRelativePath for details.
-- J.

[Joyce]

Thank you for your help! The mapping to my servlet works now!
Unfortunately I have an other error now... I tried to use a
columnDefintions which are causing errors now. It seems like that I didn't
define them correctly. But I really unsure about how to use them correctly.
Does anyone has an idea on how to create my dynamic table without using an
extra class for the columnDefinition? My goal is it to get the value of
actionName, targetAmount and amountDonationSoFar from my Campaign object
which I have in my ArrayList<T>.

The source Code for my table looks like this:

public void setRowData(ArrayList<T> rowData) {
this.rowData = rowData;
TableElement table = Document.get().createTableElement();
TableSectionElement tbody;
table.appendChild(tbody = Document.get().createTBodyElement());
for(int i = 0;i<rowData.size(); ++i)
{
TableRowElement row = tbody.insertRow(-1);
T t = rowData.get(i);
for (int j = 0; j < columnDefinitions.size(); ++j) {
TableCellElement cell = row.insertCell(-1);
StringBuilder sb = new StringBuilder();
columnDefinitions.get(j).render(t, sb);
cell.setInnerHTML(sb.toString());
Element child = cell.getFirstChildElement();
if (child != null) {
Event.sinkEvents(child, Event.ONFOCUS | Event.ONBLUR);
}
}
}
actionTable.setHTML(table.getInnerHTML());
}

And the elements which are in my ArrayList<T> are coming from here:

public class ActionServiceImpl extends RemoteServiceServlet implements MyActionService {

private static final String[] actionName = new String[] { "Trikots fÃŒr A-Jugend", "Rollstuhl fÃŒr Maria" };
private static final double[] targetAmount = new double[] { 1000, 2500 };
private static final double[] donationMinimum = new double[] { 10, 10 };
private static final double[] amountDonationSoFar = new double[] { 258, 742 };
private static final String[] accountName = new String[] { "Max Mustermann", "Maria Musterfrau" };
private static final String[] iban = new String[] { "DE447818032764520919100", "DE4478180328485419100" };
private static final String[] NameOfBank = new String[] { "ABC Bank", "XYZ Bank" };
private final HashMap<String, Campaign> actions = new HashMap<String, Campaign>();
private final HashMap<String, Account> accounts = new HashMap<String, Account>();

public ActionServiceImpl() {
initActions();
}

private void initActions() {

for (int i = 0; i < actionName.length; ++i) {
Account account = new Account(accountName[i], NameOfBank[i], iban[i]);
Campaign action = new Campaign(String.valueOf(i), actionName[i], targetAmount[i], donationMinimum[i],
amountDonationSoFar[i], account);
accounts.put(account.getName(), account);
actions.put(action.getId(), action);
}
}

@Override
public ArrayList<ShowActions> getShowActions() {
ArrayList<ShowActions> showActions = new ArrayList<ShowActions>();

Iterator<String> it = actions.keySet().iterator();
while (it.hasNext()) {
Campaign action = actions.get(it.next());
showActions.add(action.getActions());
}
return showActions;
}

My Campaign class looks like this:

@SuppressWarnings("serial")

public class Campaign implements Serializable{

private String name;

private double targetAmount;

private double donationMinimum;

private double amountDonationSoFar;

private Account account;

private String id;

public Campaign() {}


public Campaign(String id, String name, double targetAmount, double donationMinimum, double amountDonationSoFar, Account account) {

this.name = name;

this.targetAmount = targetAmount;

this.donationMinimum = donationMinimum;

this.amountDonationSoFar = amountDonationSoFar;

this.account = account;

this.id = id;

}

public ShowActions getActions() {

return new ShowActions(id, name, targetAmount, amountDonationSoFar);

}

... get and set methods for all attributes