+ * Show the words of the input text as tags (similar to price tags in the supermarket). You can select one or + * more tags. The list is sent to the backend bean as a comma-separated list. + *
* Usually this method is called internally by the JSF engine. + * + * @param _tags */ + @Override public void setTags(boolean _tags) { if (_tags) { addTagsResources(); @@ -159,8 +173,11 @@ public void setTags(boolean _tags) { } /** - * Activates the type-ahead aka autocomplete function. The list of values has to be defined in typeahead-values.
+ * Activates the type-ahead aka autocomplete function. The list of values has to be defined in typeahead-values. + *
* Usually this method is called internally by the JSF engine. + * + * @param _typeahead */ @Override public void setTypeahead(boolean _typeahead) { @@ -175,37 +192,39 @@ public void setTypeaheadValues(Object _typeaheadValues) { setTypeahead(true); super.setTypeaheadValues(_typeaheadValues); } - - /** - * Returns input mask. - * - * @return Input mask. - */ + + /** + * Returns input mask. + * + * @return Input mask. + */ + @Override public String getMask() { return (String) getStateHelper().eval(PropertyKeys.mask); } - /** - * Sets input mask and triggers JavaScript to be loaded. - * - * @param mask Input mask to set. - */ + /** + * Sets input mask and triggers JavaScript to be loaded. + * + * @param mask Input mask to set. + */ + @Override public void setMask(String mask) { if (mask != null && !mask.isEmpty()) { addInputmaskResources(); } - getStateHelper().put(PropertyKeys.mask, mask); + getStateHelper().put(PropertyKeys.mask, mask); } - + private void addInputmaskResources() { - AddResourcesListener.addResourceToHeadButAfterJQuery(C.BSF_LIBRARY, "js/jquery.inputmask.bundle.min.js"); + AddResourcesListener.addResourceToHeadButAfterJQuery(C.BSF_LIBRARY, "js/jquery.inputmask.bundle.min.js"); } private void addTypeaheadResources() { AddResourcesListener.addResourceToHeadButAfterJQuery(C.BSF_LIBRARY, "js/typeahead.js"); AddResourcesListener.addExtCSSResource("typeahead.css"); } - + private void addTagsResources() { AddResourcesListener.addResourceToHeadButAfterJQuery(C.BSF_LIBRARY, "js/bootstrap-tagsinput.min.js"); AddResourcesListener.addExtCSSResource("bootstrap-tagsinput.css"); diff --git a/src/main/java/net/bootsfaces/component/inputText/InputTextBeanInfo.java b/src/main/java/net/bootsfaces/component/inputText/InputTextBeanInfo.java index ff2f699a8..bb8c66505 100644 --- a/src/main/java/net/bootsfaces/component/inputText/InputTextBeanInfo.java +++ b/src/main/java/net/bootsfaces/component/inputText/InputTextBeanInfo.java @@ -3,17 +3,19 @@ import net.bootsfaces.beans.BsfBeanInfo; /** - * BeanInfo class to provide mapping - * of snake-case attributes to camelCase ones - * + * BeanInfo class to provide mapping of snake-case attributes to camelCase ones + * * @author durzod */ public class InputTextBeanInfo extends BsfBeanInfo { + /** * Get the reference decorated class + * + * @return */ @Override public Class getDecoratedClass() { return InputText.class; } -} \ No newline at end of file +} diff --git a/src/main/java/net/bootsfaces/component/inputText/InputTextRenderer.java b/src/main/java/net/bootsfaces/component/inputText/InputTextRenderer.java index 32685485c..f1b71384d 100644 --- a/src/main/java/net/bootsfaces/component/inputText/InputTextRenderer.java +++ b/src/main/java/net/bootsfaces/component/inputText/InputTextRenderer.java @@ -175,12 +175,9 @@ public void encodeEnd(FacesContext context, UIComponent component) throws IOExce if (visible && label != null) { rw.startElement("label", component); - rw.writeAttribute("for", fieldId, "for"); // "input_" + - // clientId - generateErrorAndRequiredClass(inputText, rw, clientId, inputText.getLabelStyleClass(), responsiveLabelClass, - "control-label"); + rw.writeAttribute("for", fieldId, "for"); // "input_" + clientId + generateErrorAndRequiredClass(inputText, rw, clientId, inputText.getLabelStyleClass(), responsiveLabelClass, "control-label"); writeAttribute(rw, "style", inputText.getLabelStyle()); - rw.writeText(label, null); rw.endElement("label"); } @@ -204,12 +201,13 @@ public void encodeEnd(FacesContext context, UIComponent component) throws IOExce // Input rw.startElement("input", inputText); rw.writeAttribute("id", fieldId, null); // "input_" + clientId + String name = inputText.getName(); - // System.out.println(name); if (null == name) { name = "input_" + clientId; } rw.writeAttribute("name", name, null); + rw.writeAttribute("type", t, null); generateStyleClass(inputText, rw); @@ -234,7 +232,7 @@ public void encodeEnd(FacesContext context, UIComponent component) throws IOExce if ((autocomplete != null) && (autocomplete.equals("off") || autocomplete.equals("false"))) { rw.writeAttribute("autocomplete", "off", null); } - + String v = getValue2Render(context, component); if (inputText instanceof InputSecret) { if (!((InputSecret) inputText).isRenderValue()) { @@ -260,25 +258,23 @@ public void encodeEnd(FacesContext context, UIComponent component) throws IOExce numberOfDivs--; } - // The following lines fix issue #1079 on basic tags (without typeahead). - // They initialize tagsinput manually and empty duplicated 'name' attribute - // on generated input (which holds the original HTML id). if (inputText.isTags() && (!inputText.isTypeahead())) { String id = fieldId; // input id id = id.replace(":", "\\\\:"); // escape the id for jQuery rw.startElement("script", null); - String js = "$('#" + id + "').tagsinput();" + // - "$('#" + id + "').attr('name','');"; + String js = "$('#" + id + "').tagsinput();"; + js += "$('#" + id + "').siblings('.bootstrap-tagsinput').addClass('form-control');"; rw.writeText(js, null); rw.endElement("script"); } Tooltip.activateTooltips(context, inputText); if (inputText.isTypeahead()) { - String id = component.getClientId(); - id = id.replace(":", "_"); // we need to escape the id for jQuery + String componentClientId = component.getClientId(); + // generateStyleClass() add the id as css class before + String escapedClientId = componentClientId.replace(":", "_"); // we need to escape the id for jQuery rw.startElement("script", component); - String typeaheadname = id + "_typeahead"; + String typeaheadname = escapedClientId + "_typeahead"; if (inputText.isTags()) { String js = "var engine = new Bloodhound({" + // "name: '" + typeaheadname + "'," + // @@ -288,7 +284,8 @@ public void encodeEnd(FacesContext context, UIComponent component) throws IOExce "}," + // "queryTokenizer: Bloodhound.tokenizers.whitespace" + // "});"; - js += "$('." + id + "').tagsinput({" + // + + js += "$('." + escapedClientId + "').tagsinput({" + // "typeaheadjs: {" + // " name: 'animals'," + // " displayKey: 'val'," + // @@ -297,16 +294,10 @@ public void encodeEnd(FacesContext context, UIComponent component) throws IOExce "}" + // "});";// - // The following lines fix issue #1079 on tags with typeahead. - // They empty duplicated 'name' attribute on generated input (which holds the original HTML id). - String inputId = fieldId; // input id - inputId = inputId.replace(":", "\\\\:"); // escape the id for jQuery - js += "$('#" + inputId + "').attr('name','');"; + js += "$('." + escapedClientId + "').siblings('.bootstrap-tagsinput').addClass('form-control');"; rw.writeText(js, null); - } else { - String options = ""; options = addOption(options, "hint:" + inputText.isTypeaheadHint()); options = addOption(options, "highlight:" + inputText.isTypeaheadHighlight()); @@ -314,10 +305,8 @@ public void encodeEnd(FacesContext context, UIComponent component) throws IOExce String options2 = ""; options2 = addOption(options2, "limit:" + inputText.getTypeaheadLimit()); options2 = addOption(options2, "name:'" + typeaheadname + "'"); - options2 = addOption(options2, - "source: BsF.substringMatcher(" + getTypeaheadValueArray(inputText) + ")"); - - rw.writeText("$('." + id + "').typeahead({" + options + "},{" + options2 + "});", null); + options2 = addOption(options2, "source: BsF.substringMatcher(" + getTypeaheadValueArray(inputText) + ")"); + rw.writeText("$('." + escapedClientId + "').typeahead({" + options + "},{" + options2 + "});", null); } rw.endElement("script"); }