JSF Component for the bootstrap form group

2020-11-18 16:48:55 +01:00 · 2020-11-18 16:48:55 +01:00 · 6a6a9f67f8
parent a9a16311b3
commit 6a6a9f67f8
1 changed files with 78 additions and 0 deletions
--- a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupText.xhtml
+++ b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/formGroupText.xhtml
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
+      xmlns:cc="http://xmlns.jcp.org/jsf/composite"
+      xmlns:f="http://xmlns.jcp.org/jsf/core">
+    <cc:interface shortDescription="Component for a form group with a text input">
+        <cc:attribute name="help"
+                      required="true"
+                      shortDescription="A short description of the input field"
+                      type="String" />
+        <cc:attribute name="inputId" 
+                      required="true" 
+                      shortDescription="The ID of the input field."
+                      type="String" />
+        <cc:attribute name="label"
+                      required="true"
+                      shortDescription="The label of the input field."
+                      type="String" />
+        <cc:attribute name="maxlength" 
+                      required="false"
+                      shortDescription="Maximum length of the text in this field."
+                      type="int" />
+        <cc:attribute name="minlength" 
+                      required="false"
+                      shortDescription="Minium length of the text in this field."
+                      type="int" />
+        <cc:attribute name="name" 
+                      required="true" 
+                      shortDescription="The name of the input field. This is also the name which is used to send the value of the input to the server."
+                      type="String" />
+        <cc:attribute name="pattern"
+                      required="false"
+                      shortDescription="A RegEx pattern that the value entered into this field must match"
+                      type="String" />
+        <cc:attribute name="placeholder"
+                      required="false"
+                      shortDescription="A placeholder to show in the empty field."
+                      type="String" />
+        <cc:attribute default="false"
+                      name="required"
+                      shortDescription="Is the field required?"
+                      required="false"
+                      type="boolean" />
+        <cc:attribute name="size"
+                      shortDescription="Length of the field. Can be overwritten using CSS."
+                      required="false"
+                      type="int" />
+        <cc:attribute name="value"
+                      default=""
+                      required="false"
+                      shortDescription="Value of the input field"
+                      type="String" />
+    </cc:interface>
+    <cc:implementation>
+        <c:if test="#{cc.attrs.value.length() > 0}">
+            <pre>has value</pre>
+        </c:if>
+        <div class="form-group">
+            <label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
+            <input aria-describedby="#{cc.attrs.inputId}-help"
+                   id="#{cc.attrs.inputId}"
+                   maxlength="#{(not empty cc.attrs.maxlength) ? cc.attrs.maxlength : null}"
+                   minlength="#{(not empty cc.attrs.minlength) ? cc.attrs.minlength : null}"
+                   name="#{cc.attrs.name}"
+                   pattern="#{not empty cc.attrs.pattern ? cc.attrs.pattern : null}"
+                   placeholder="#{not empty cc.attrs.placeholder ? cc.attrs.placeholder: null}"
+                   required="#{cc.attrs.required ? 'required' : ''}"
+                   size="#{not empty cc.attrs.size ? cc.attrs.size : null}"
+                   value="#{not empty cc.attrs.value ? cc.attrs.value : ''}"
+                   type="text" />
+            <small class="form-text text-muted"
+                   id="#{cc.attrs.inputId}-help">
+                #{cc.attrs.help}
+            </small>
+        </div>
+    </cc:implementation>
+</html>
+