@DataField Checkbox - InnerHTML is not preserved
srrehman Oct 20, 2014 6:29 AMHI 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