Components for single checkbox, checkbox group and radio group
Jens Pelzetter
parent
de89b2c131
commit
a45ab318ef
|
|
@ -141,6 +141,13 @@ public class CategoryDetailsModel {
|
||||||
return selectedOptions;
|
return selectedOptions;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public Set<String> getMultipleSelectedOptions() {
|
||||||
|
final Set<String> selectedOptions = new HashSet<>();
|
||||||
|
selectedOptions.add("delta");
|
||||||
|
selectedOptions.add("bravo");
|
||||||
|
return selectedOptions;
|
||||||
|
}
|
||||||
|
|
||||||
public List<Message> getMessages() {
|
public List<Message> getMessages() {
|
||||||
return Collections.unmodifiableList(messages);
|
return Collections.unmodifiableList(messages);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||||
|
xmlns:cc="http://xmlns.jcp.org/jsf/composite">
|
||||||
|
<cc:interface shortDescription="Component for a single checkbox">
|
||||||
|
<cc:attribute default="false"
|
||||||
|
name="checked"
|
||||||
|
shortDescription="Is the checkbox selected?"
|
||||||
|
required="false"
|
||||||
|
type="boolean" />
|
||||||
|
<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="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 default="false"
|
||||||
|
name="required"
|
||||||
|
shortDescription="Is the field required?"
|
||||||
|
required="false"
|
||||||
|
type="boolean" />
|
||||||
|
<cc:attribute default="on"
|
||||||
|
name="value"
|
||||||
|
shortDescription="Value of the checkbox"
|
||||||
|
required="false"
|
||||||
|
type="String" />
|
||||||
|
</cc:interface>
|
||||||
|
<cc:implementation>
|
||||||
|
<div class="form-check">
|
||||||
|
<input class="form-check-input"
|
||||||
|
id="#{cc.attrs.inputId}"
|
||||||
|
name="#{cc.attrs.name}"
|
||||||
|
type="checkbox"
|
||||||
|
value="#{cc.attrs.value}" />
|
||||||
|
<label for="#{cc.attrs.inputId}">#{cc.attrs.label}</label>
|
||||||
|
</div>
|
||||||
|
</cc:implementation>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||||
|
xmlns:cc="http://xmlns.jcp.org/jsf/composite"
|
||||||
|
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
|
||||||
|
<cc:interface shortDescription="Component for a single checkbox">
|
||||||
|
<cc:attribute default="false"
|
||||||
|
name="checked"
|
||||||
|
shortDescription="Is the checkbox selected?"
|
||||||
|
required="false"
|
||||||
|
type="boolean" />
|
||||||
|
<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="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="options"
|
||||||
|
required="true"
|
||||||
|
shortDescription="The options for the select as Map with Strings as key and value . The keys of the Map is used for the value attribute of the option elements, the values of the map are used as content of the option elements"
|
||||||
|
type="java.util.Map" />
|
||||||
|
<cc:attribute default="false"
|
||||||
|
name="required"
|
||||||
|
shortDescription="Is the field required?"
|
||||||
|
required="false"
|
||||||
|
type="boolean" />
|
||||||
|
<cc:attribute default="#{java.util.Collections.emptySet()}"
|
||||||
|
name="selectedOptions"
|
||||||
|
required="false"
|
||||||
|
shortDescription="A collection of the keys of the selected options. The keys must be strings."
|
||||||
|
type="java.util.Collection" />
|
||||||
|
</cc:interface>
|
||||||
|
<cc:implementation>
|
||||||
|
<fieldset aria-describedby="#{cc.attrs.inputId}-help" class="form-group">
|
||||||
|
<div class="row">
|
||||||
|
<legend class="col-form-label col-sm-2 pt-0">#{cc.attrs.label}</legend>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<c:forEach items="#{cc.attrs.options.entrySet()}" var="option">
|
||||||
|
<div class="form-check">
|
||||||
|
<input checked="#{cc.attrs.selectedOptions.contains(option.key) ? 'checked' : null}"
|
||||||
|
class="form-check-input"
|
||||||
|
id="#{cc.attrs.inputId}-#{option.key}"
|
||||||
|
name="#{cc.attrs.name}"
|
||||||
|
type="checkbox"
|
||||||
|
value="#{option.key}" />
|
||||||
|
<label for="#{cc.attrs.inputId}-#{option.key}">#{option.value}</label>
|
||||||
|
</div>
|
||||||
|
</c:forEach>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<small class="form-text text-muted"
|
||||||
|
id="#{cc.attrs.inputId}-help">
|
||||||
|
#{cc.attrs.help}
|
||||||
|
</small>
|
||||||
|
</fieldset>
|
||||||
|
</cc:implementation>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||||
|
xmlns:cc="http://xmlns.jcp.org/jsf/composite"
|
||||||
|
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
|
||||||
|
<cc:interface shortDescription="Component for a single checkbox">
|
||||||
|
<cc:attribute default="false"
|
||||||
|
name="checked"
|
||||||
|
shortDescription="Is the checkbox selected?"
|
||||||
|
required="false"
|
||||||
|
type="boolean" />
|
||||||
|
<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="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="options"
|
||||||
|
required="true"
|
||||||
|
shortDescription="The options for the select as Map with Strings as key and value . The keys of the Map is used for the value attribute of the option elements, the values of the map are used as content of the option elements"
|
||||||
|
type="java.util.Map" />
|
||||||
|
<cc:attribute default="false"
|
||||||
|
name="required"
|
||||||
|
shortDescription="Is the field required?"
|
||||||
|
required="false"
|
||||||
|
type="boolean" />
|
||||||
|
<cc:attribute default="#{null}"
|
||||||
|
name="selectedOption"
|
||||||
|
required="false"
|
||||||
|
shortDescription="The selected option"
|
||||||
|
type="String" />
|
||||||
|
</cc:interface>
|
||||||
|
<cc:implementation>
|
||||||
|
<fieldset aria-describedby="#{cc.attrs.inputId}-help" class="form-group">
|
||||||
|
<div class="row">
|
||||||
|
<legend class="col-form-label col-sm-2 pt-0">#{cc.attrs.label}</legend>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<c:forEach items="#{cc.attrs.options.entrySet()}" var="option">
|
||||||
|
<div class="form-check">
|
||||||
|
<input checked="#{option.key.equals(cc.attrs.selectedOption) ? 'checked' : null}"
|
||||||
|
class="form-check-input"
|
||||||
|
id="#{cc.attrs.inputId}-#{option.key}"
|
||||||
|
name="#{cc.attrs.name}"
|
||||||
|
type="radio"
|
||||||
|
value="#{option.key}" />
|
||||||
|
<label for="#{cc.attrs.inputId}-#{option.key}">#{option.value}</label>
|
||||||
|
</div>
|
||||||
|
</c:forEach>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<small class="form-text text-muted"
|
||||||
|
id="#{cc.attrs.inputId}-help">
|
||||||
|
#{cc.attrs.help}
|
||||||
|
</small>
|
||||||
|
</fieldset>
|
||||||
|
</cc:implementation>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
@ -107,6 +107,46 @@
|
||||||
selectedOptions="#{CategoryDetailsModel.selectedOptions}"
|
selectedOptions="#{CategoryDetailsModel.selectedOptions}"
|
||||||
size="3" />
|
size="3" />
|
||||||
|
|
||||||
|
<bootstrap:formGroupSelect help="Select Test 2"
|
||||||
|
label="choose an option"
|
||||||
|
inputId="selecttest2"
|
||||||
|
multiple="true"
|
||||||
|
name="selecttest2"
|
||||||
|
options="#{CategoryDetailsModel.options}"
|
||||||
|
selectedOptions="#{CategoryDetailsModel.multipleSelectedOptions}"
|
||||||
|
size="3" />
|
||||||
|
<bootstrap:formCheck label="Are you sure?"
|
||||||
|
inputId="checkboxtest1"
|
||||||
|
name="checkboxtest1" />
|
||||||
|
<bootstrap:formGroupChecks help="Checkbox Test 1"
|
||||||
|
inputId="checkboxes1"
|
||||||
|
label="Checkboxes 1"
|
||||||
|
name="checkboxes1"
|
||||||
|
options="#{CategoryDetailsModel.options}" />
|
||||||
|
<bootstrap:formGroupChecks help="Checkbox Test2 "
|
||||||
|
inputId="checkboxes2"
|
||||||
|
label="Checkboxes 2"
|
||||||
|
name="checkboxes2"
|
||||||
|
selectedOptions="#{CategoryDetailsModel.selectedOptions}"
|
||||||
|
options="#{CategoryDetailsModel.options}" />
|
||||||
|
<bootstrap:formGroupChecks help="Checkbox Test 3"
|
||||||
|
inputId="checkboxes3"
|
||||||
|
label="Checkboxes 3"
|
||||||
|
name="checkboxes3"
|
||||||
|
selectedOptions="#{CategoryDetailsModel.multipleSelectedOptions}"
|
||||||
|
options="#{CategoryDetailsModel.options}" />
|
||||||
|
|
||||||
|
<bootstrap:formGroupRadio help="Radio Test 1"
|
||||||
|
inputId="radio1"
|
||||||
|
label="Radio 1"
|
||||||
|
name="radio1"
|
||||||
|
options="#{CategoryDetailsModel.options}" />
|
||||||
|
<bootstrap:formGroupRadio help="Radio Test 2 "
|
||||||
|
inputId="radios2"
|
||||||
|
label="Radio 2"
|
||||||
|
name="radio2"
|
||||||
|
selectedOption="charlie"
|
||||||
|
options="#{CategoryDetailsModel.options}" />
|
||||||
</form>
|
</form>
|
||||||
<p>ToDo</p>
|
<p>ToDo</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue