6 Replies Latest reply on Oct 31, 2014 7:57 PM by Charles Odili

    @DataField Checkbox - InnerHTML is not preserved

    Saif Rehman Newbie

      HI Guys,

       

      I m basically running into an issue issue regarding the technique about how Errai generates html for different composite components. Basically, I have the following html snippt in my html file: http://proto.io/freebies/onoff/

      <div class="onoffswitch">
        <input data-field="toggleButton" type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
        <label class="onoffswitch-label" for="myonoffswitch">
        <span class="onoffswitch-inner">
        <span class="onoffswitch-active"><span class="onoffswitch-switch">ON</span></span>
        <span class="onoffswitch-inactive"><span class="onoffswitch-switch">OFF</span></span>
        </span>
        </label>
      </div>
      

       

      Now I want to use the toggleButton  in my @Templated (.java) file to take the advantage of different errai Features e.g. DataBinding , CDI injection , Event Handlers etc. So I do following:

      @Inject
      @DataField
      @Bound(property="enabled")
      private Checkbox toggleButton;
      

       

      According to this link, https://access.redhat.com/documentation/en-US/Red_Hat_JBoss_Web_Framework_Kit/2.3/html/Errai_Reference_Guide/ch10s06s04.… I should be able to take the advantage of all the html written in above mentioned html file. Which basically says : Inner text and inner HTML (preserved when component implements HasText or HasHTML)

       

      But when I compile the app , and look into the Browser html . The generated html is like following:

      <div class="onoffswitch">
        <span data-field="toggleButton" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
            <input id="gwt-id-2 type="checkbox">
            <label></label>
      </span>
        <label class="onoffswitch-label" for="myonoffswitch">
        <span class="onoffswitch-inner">
        <span class="onoffswitch-active"><span class="onoffswitch-switch">ON</span></span>
        <span class="onoffswitch-inactive"><span class="onoffswitch-switch">OFF</span></span>
        </span>
        </label>
      </div>
      

       

      So by Injecting the CheckBox into .java file the <input type="checkbox" > element is basically gets converted into a <span> <input type="checkbox" > <label></label></span> . And It ruins all of my style implemented in my real template.

      I know that the Checkbox of GWT implements HasHTML, so theoratically , the html should be preserved.


      Please clarify this to me . It may be , I m not able to understand it correctly .


      Thanks