Component for Bootstrap form group with input of type number
parent
0b416e49dd
commit
4a28e8f23a
|
|
@ -1,33 +0,0 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap"
|
||||
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 number 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="max"
|
||||
required="false"
|
||||
shortDescription="Maximum allowed value."
|
||||
type="String" />
|
||||
<cc:attribute name="min"
|
||||
required="false"
|
||||
shortDescription="Minimum allowed value."
|
||||
type="String" />
|
||||
<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="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="step"
|
||||
required="false"
|
||||
shortDescription="Stepping interval for the input"
|
||||
type="String" />
|
||||
<cc:attribute name="value"
|
||||
required="false"
|
||||
shortDescription="Value of the input field"
|
||||
type="String" />
|
||||
</cc:interface>
|
||||
<cc:implementation>
|
||||
<pre>
|
||||
step = #{cc.attrs.step}
|
||||
step = #{(not empty cc.attrs.step) ? cc.attrs.step : null}
|
||||
step not empty? #{not empty cc.attrs.step}
|
||||
</pre>
|
||||
<div>
|
||||
<div class="form-group">
|
||||
<label for="#{cc.attrs.inputId}">${cc.attrs.label}</label>
|
||||
<!--<cc:renderFacet name="input" />-->
|
||||
<input aria-describedby="#{cc.attrs.inputId}-help"
|
||||
data-step="#{cc.attrs.step}"
|
||||
id="#{cc.attrs.inputId}"
|
||||
max="#{not empty cc.attrs.max ? cc.attrs.max : null}"
|
||||
min="#{not empty cc.attrs.min ? cc.attrs.min : null}"
|
||||
name="#{cc.attrs.name}"
|
||||
placeholder="#{not empty cc.attrs.placeholder ? cc.attrs.placeholder : null}"
|
||||
required="#{cc.attrs.required ? 'required' : null}"
|
||||
step="#{cc.attrs.step}"
|
||||
type="number"
|
||||
value="#{not empty cc.attrs.value ? cc.attrs.value : null}" />
|
||||
<small class="form-text text-muted"
|
||||
id="#{cc.attrs.inputId}-help">
|
||||
#{cc.attrs.help}
|
||||
</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</cc:implementation>
|
||||
</html>
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap"
|
||||
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">
|
||||
|
|
@ -53,10 +53,8 @@
|
|||
type="String" />
|
||||
</cc:interface>
|
||||
<cc:implementation>
|
||||
<bootstrap:formGroup help="#{cc.attrs.help}"
|
||||
inputId="#{cc.attrs.inputId}"
|
||||
label="#{cc.attrs.label}">
|
||||
<f:facet name="input">
|
||||
<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}"
|
||||
|
|
@ -64,12 +62,15 @@
|
|||
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' : ''}"
|
||||
required="#{cc.attrs.required ? 'required' : null}"
|
||||
size="#{not empty cc.attrs.size ? cc.attrs.size : null}"
|
||||
value="#{not empty cc.attrs.value ? cc.attrs.value : ''}"
|
||||
type="text" />
|
||||
</f:facet>
|
||||
</bootstrap:formGroup>
|
||||
type="text"
|
||||
value="#{not empty cc.attrs.value ? cc.attrs.value : ''}" />
|
||||
<small class="form-text text-muted"
|
||||
id="#{cc.attrs.inputId}-help">
|
||||
#{cc.attrs.help}
|
||||
</small>
|
||||
</div>
|
||||
</cc:implementation>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,14 @@
|
|||
<bootstrap:formGroupText help="test"
|
||||
inputId="test"
|
||||
label="Test"
|
||||
name="test" />
|
||||
name="test"
|
||||
value="foobar bar" />
|
||||
<bootstrap:formGroupNumber help="The price"
|
||||
inputId="price"
|
||||
label="Price"
|
||||
name="price"
|
||||
step="0.01"
|
||||
value="10.0" />
|
||||
</form>
|
||||
<p>ToDo</p>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue