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 :

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!

[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:

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

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);
}

[Jens]

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!!

[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)

[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:

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