0 Replies Latest reply on Jan 25, 2016 6:37 AM by Borja Etxaburu

    TemplateUtil Div restriction

    Borja Etxaburu Newbie

      org.jboss.errai.ui.shared.TemplateUtil has a BIG restriction.

       

      Errai let's you create your own custom widgets and "paint" them with a template.

       

      We are creating a "item" tipe widget to paint all the items of a ListWidget. As we'd like to paint each item with a "<tr>......</tr>" like template we are limited with the TemplateUtil.java's restriction (what I see also as a error or bug):

       

      public static Element getRootTemplateElement(String templateContents, final String templateFileName, final String rootField) {
          String key = templateFileName + "#" + rootField;
          if (templateRoots.containsKey(key)) {
            return cloneWithEmptyParent(templateRoots.get(key));
          }
      
          Element parserDiv = DOM.createDiv();
          parserDiv.setInnerHTML(templateContents);
          if (rootField != null && !rootField.trim().isEmpty()) {
            logger.finer("Locating root element: " + rootField);
            VisitContext<TaggedElement> context = Visit.depthFirst(parserDiv, new Visitor<TaggedElement>() {
              @Override
              public boolean visit(VisitContextMutable<TaggedElement> context, Element element) {
                for (AttributeType attrType : AttributeType.values()) {
                  String attrName = attrType.getAttributeName();
                  TaggedElement existingCandidate = context.getResult();
                  if (element.hasAttribute(attrName) && element.getAttribute(attrName).equals(rootField)
                      && (existingCandidate == null || existingCandidate.getAttributeType().ordinal() < attrType.ordinal())) {
                    context.setResult(new TaggedElement(attrType, element));
                  }
                }
                return true;
              }
            });
      
      
            if (context.getResult() != null) {
              parserDiv = DOM.createDiv();
              parserDiv.appendChild(context.getResult().getElement());
            }
            else {
              throw new IllegalStateException("Could not locate Element in template with data-field, id or class = [" + rootField + "]\n"
                      + parserDiv.getInnerHTML());
            }
          }
      
      
          logger.finest(parserDiv.getInnerHTML().trim());
      
      
          final Element templateRoot = firstNonMetaElement(parserDiv);
          if (templateRoot == null) {
            throw new IllegalStateException("Could not find template root for this template: " + templateContents);
          }
          else {
            templateRoots.put(key, templateRoot);
            return cloneWithEmptyParent(templateRoot);
          }
        }
      
      
      
      

       

      The part I've painted in RED is not correct as it restricts the use of "not DIV like" @Templated annotated widgets.

       

      Errai creates a DIV like content and then sets the innerHtml, this way your Html is restricted and changed.

       

      Example:

       

      templateContents = "<tr class="odd">

                                              <td class="limiter chkbox"><div id="check"></div></td>

                                              <td class="limiter" data-label="Codigo"><div id="codigo"></div></td>

                                              <td data-label="Artículo"><div id="articulo"></div></td>

                                      </tr>"


      .......................pases from here...........................

      Element parserDiv = DOM.createDiv();

      parserDiv.setInnerHTML(templateContents);

      .........................................................................

       

      parserDiv = "<div>

                                <div id="check"></div>

                                <div id="codigo"></div>

                                <div id="articulo"></div>

                        <div>"

       

       

      This way you cant generete "NON DIV LIKE" widget's. What restricts for example the use of ListWidget.java class where each one of the items is a "TR like" html widget.

       

      csa mbarkley ¿Could it be that this is not a expected use of Errai? ¿Or something fixable in next versions? I've come out with a fix... but I don't know what to do.

       

      Willing to listen what people thinks or says about this.

       

      Thanks to everyone!!