Components for single checkbox, checkbox group and radio group
Former-commit-id: a45ab318ef
pull/7/head
Jens Pelzetter
parent
5a19b15ebf
commit
92060495ac
|
|
@ -141,6 +141,13 @@ public class CategoryDetailsModel {
|
|||
return selectedOptions;
|
||||
}
|
||||
|
||||
public Set<String> getMultipleSelectedOptions() {
|
||||
final Set<String> selectedOptions = new HashSet<>();
|
||||
selectedOptions.add("delta");
|
||||
selectedOptions.add("bravo");
|
||||
return selectedOptions;
|
||||
}
|
||||
|
||||
public List<Message> getMessages() {
|
||||
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}"
|
||||
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>
|
||||
<p>ToDo</p>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue