Sunday, June 17, 2018

Using UIField HTML to create a dynamic table

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(;              showActions.add(action.getActions());          }          return showActions;      }

The corresponding ui.xml looks like that:

<ui:UiBinder     xmlns:ui=""    xmlns:g="">        <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!

You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to
To post to this group, send email to
Visit this group at
For more options, visit

No comments:

Post a Comment