Adding display of fieldLabel and fieldDescription to Touch UI inner fields

[modeckimellett]

Hello!

This request contains the following:

• adds display of the fieldLabel and fieldDescription values to the inner fields in the Touch UI
• moves the Touch UI css over to a less file extension
• added a class which was missing from any field sets that were added on load (from previously entered values)
• other styling changes (borders, spacing, etc)
• updated the version number to the next snapshot
• added a Netbeans specific file to the .gitignore

If possible, I would like to get this change, or something close to it, into a release soon. My current use case has instances of the Multicompositefield component with multiple text fields per item. It is difficult to know which field is which with no labels! Therefore the main goal of this pull request is to get that accomplished. The majority of the css changes are intended to support that addition. Moving to a less file extension on the css should let us clean up the css further at a later date. Right now it is pretty rough, but working.

Please note, I'm testing this in AEM 6.2 SP1. I confirmed the behavior in a normal Component Dialog (both as a modal and expanded to full screen), but I don't have a good example of a read only instance. If there are test cases available, I would appreciate getting a list of them to run before this is merged in.

Let me know what I need to do to move this forward!

Thank you!
-Edward

[modeckimellett]

Alternatively, this could be fixed by setting ComponentHelper.Options#rootField() to true in https://github.com/OlsonDigital/multicomposite-addon/blob/develop/src/main/java/com/citytechinc/aem/multicompositeaddon/tags/WidgetIncludeTag.java. The field labels and descriptions appear to be dropped because /libs/granite/ui/components/foundation/form/field/field.jsp renders inputs as follows:

        if (cmp.getOptions().rootField()) {
            attrs.addClass("coral-Form-field");
            
            %><div <%= wrapperAttr.build() %>><%

            if (fieldLabel != null) {
                %><label class="coral-Form-fieldlabel"><%= outVar(xssAPI, i18n, fieldLabel) %></label><%
            }
        }
        
        cmp.call("render.jsp", new Options().tag(tag));
        
        if (cmp.getOptions().rootField()) {
            if (fieldDesc != null) {
                %><span class="coral-Form-fieldinfo coral-Icon coral-Icon--infoCircle coral-Icon--sizeS" data-init="quicktip" data-quicktip-type="info" data-quicktip-arrow="right" data-quicktip-content="<%= xssAPI.encodeForHTMLAttr(outVar(xssAPI, i18n, fieldDesc)) %>"></span><%
            }
            %></div><%
        }

Note the cmp.getOptions().rootField() checks. I chose instead to re-render the label and description so that we could maintain control of the styling of the inputs as a composite field as indicated in https://docs.adobe.com/docs/en/aem/6-2/develop/ref/javadoc/com/adobe/granite/ui/components/ComponentHelper.Options.html#rootField(boolean)