Base component for Bootstrap form groups
parent
6a6a9f67f8
commit
b23c1f8f25
|
|
@ -0,0 +1,33 @@
|
||||||
|
<!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="A base component for form groups. The control (input) is added by the input facet.">
|
||||||
|
<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:facet name="input" required="true" />
|
||||||
|
</cc:interface>
|
||||||
|
<cc:implementation>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
|
||||||
|
<cc:renderFacet name="input" />
|
||||||
|
<small class="form-text text-muted"
|
||||||
|
id="#{cc.attrs.inputId}-help">
|
||||||
|
#{cc.attrs.help}
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</cc:implementation>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml"
|
<html xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap"
|
||||||
|
xmlns="http://www.w3.org/1999/xhtml"
|
||||||
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
|
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
|
||||||
xmlns:cc="http://xmlns.jcp.org/jsf/composite"
|
xmlns:cc="http://xmlns.jcp.org/jsf/composite"
|
||||||
xmlns:f="http://xmlns.jcp.org/jsf/core">
|
xmlns:f="http://xmlns.jcp.org/jsf/core">
|
||||||
|
|
@ -52,27 +53,23 @@
|
||||||
type="String" />
|
type="String" />
|
||||||
</cc:interface>
|
</cc:interface>
|
||||||
<cc:implementation>
|
<cc:implementation>
|
||||||
<c:if test="#{cc.attrs.value.length() > 0}">
|
<bootstrap:formGroup help="#{cc.attrs.help}"
|
||||||
<pre>has value</pre>
|
inputId="#{cc.attrs.inputId}"
|
||||||
</c:if>
|
label="#{cc.attrs.label}">
|
||||||
<div class="form-group">
|
<f:facet name="input">
|
||||||
<label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
|
<input aria-describedby="#{cc.attrs.inputId}-help"
|
||||||
<input aria-describedby="#{cc.attrs.inputId}-help"
|
id="#{cc.attrs.inputId}"
|
||||||
id="#{cc.attrs.inputId}"
|
maxlength="#{(not empty cc.attrs.maxlength) ? cc.attrs.maxlength : null}"
|
||||||
maxlength="#{(not empty cc.attrs.maxlength) ? cc.attrs.maxlength : null}"
|
minlength="#{(not empty cc.attrs.minlength) ? cc.attrs.minlength : null}"
|
||||||
minlength="#{(not empty cc.attrs.minlength) ? cc.attrs.minlength : null}"
|
name="#{cc.attrs.name}"
|
||||||
name="#{cc.attrs.name}"
|
pattern="#{not empty cc.attrs.pattern ? cc.attrs.pattern : null}"
|
||||||
pattern="#{not empty cc.attrs.pattern ? cc.attrs.pattern : null}"
|
placeholder="#{not empty cc.attrs.placeholder ? cc.attrs.placeholder: null}"
|
||||||
placeholder="#{not empty cc.attrs.placeholder ? cc.attrs.placeholder: null}"
|
required="#{cc.attrs.required ? 'required' : ''}"
|
||||||
required="#{cc.attrs.required ? 'required' : ''}"
|
size="#{not empty cc.attrs.size ? cc.attrs.size : null}"
|
||||||
size="#{not empty cc.attrs.size ? cc.attrs.size : null}"
|
value="#{not empty cc.attrs.value ? cc.attrs.value : ''}"
|
||||||
value="#{not empty cc.attrs.value ? cc.attrs.value : ''}"
|
type="text" />
|
||||||
type="text" />
|
</f:facet>
|
||||||
<small class="form-text text-muted"
|
</bootstrap:formGroup>
|
||||||
id="#{cc.attrs.inputId}-help">
|
|
||||||
#{cc.attrs.help}
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</cc:implementation>
|
</cc:implementation>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue