/
Highlight.java
191 lines (165 loc) · 7.54 KB
/
Highlight.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
/*
* Copyright 2018 OmniFaces
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
* an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
* specific language governing permissions and limitations under the License.
*/
package org.omnifaces.component.script;
import static java.lang.Boolean.TRUE;
import static java.lang.String.format;
import static javax.faces.application.ResourceHandler.JSF_SCRIPT_LIBRARY_NAME;
import static javax.faces.application.ResourceHandler.JSF_SCRIPT_RESOURCE_NAME;
import static org.omnifaces.config.OmniFaces.OMNIFACES_LIBRARY_NAME;
import static org.omnifaces.config.OmniFaces.OMNIFACES_SCRIPT_NAME;
import static org.omnifaces.util.Components.getCurrentForm;
import java.io.IOException;
import java.util.EnumSet;
import java.util.Set;
import javax.faces.application.ResourceDependency;
import javax.faces.component.FacesComponent;
import javax.faces.component.UIForm;
import javax.faces.component.UIInput;
import javax.faces.component.visit.VisitContext;
import javax.faces.component.visit.VisitHint;
import javax.faces.component.visit.VisitResult;
import javax.faces.context.FacesContext;
import org.omnifaces.util.State;
/**
* <p>
* The <code><o:highlight></code> is a helper component which highlights all invalid {@link UIInput} components
* and the associated labels by adding an error style class to them. Additionally, it by default focuses the first
* invalid {@link UIInput} component. The <code><o:highlight /></code> component can be placed anywhere in the
* view, as long as there's only one of it. Preferably put it somewhere in the master template for forms.
* <pre>
* <h:form>
* <h:inputText value="#{bean.input1}" required="true" />
* <h:inputText value="#{bean.input2}" required="true" />
* <h:commandButton value="Submit" action="#{bean.submit}" />
* </h:form>
* <o:highlight />
* </pre>
* <p>
* The default error style class name is <code>error</code>. You need to specify a CSS style associated with the class
* yourself. For example,
* <pre>
* label.error {
* color: #f00;
* }
* input.error, select.error, textarea.error {
* background-color: #fee;
* }
* </pre>
* <p>
* You can override the default error style class by the <code>styleClass</code> attribute:
* <pre>
* <o:highlight styleClass="invalid" />
* </pre>
* <p>
* You can disable the default focus on the first invalid input element setting the <code>focus</code> attribute.
* <pre>
* <o:highlight styleClass="invalid" focus="false" />
* </pre>
* <p>
* Since version 2.5, the error style class will be removed from the input element and its associated label when the
* enduser starts using the input element.
*
* @author Bauke Scholtz
* @see OnloadScript
* @see ScriptFamily
*/
@FacesComponent(Highlight.COMPONENT_TYPE)
@ResourceDependency(library=JSF_SCRIPT_LIBRARY_NAME, name=JSF_SCRIPT_RESOURCE_NAME, target="head") // Required for jsf.ajax.request.
@ResourceDependency(library=OMNIFACES_LIBRARY_NAME, name=OMNIFACES_SCRIPT_NAME, target="head") // Specifically highlight.js.
public class Highlight extends OnloadScript {
// Public constants -----------------------------------------------------------------------------------------------
/** The standard component type. */
public static final String COMPONENT_TYPE = "org.omnifaces.component.script.Highlight";
// Private constants ----------------------------------------------------------------------------------------------
private static final Set<VisitHint> VISIT_HINTS = EnumSet.of(VisitHint.SKIP_UNRENDERED);
private static final String DEFAULT_STYLECLASS = "error";
private static final Boolean DEFAULT_FOCUS = TRUE;
private static final String SCRIPT = "OmniFaces.Highlight.apply([%s], '%s', %s);";
private enum PropertyKeys {
// Cannot be uppercased. They have to exactly match the attribute names.
styleClass, focus
}
// Variables ------------------------------------------------------------------------------------------------------
private final State state = new State(getStateHelper());
// Actions --------------------------------------------------------------------------------------------------------
/**
* Visit all components of the current {@link UIForm}, check if they are an instance of {@link UIInput} and are not
* {@link UIInput#isValid()} and finally append them to an array in JSON format and render the script.
* <p>
* Note that the {@link FacesContext#getClientIdsWithMessages()} could also be consulted, but it does not indicate
* whether the components associated with those client IDs are actually {@link UIInput} components which are not
* {@link UIInput#isValid()}. Also note that the highlighting is been done by delegating the job to JavaScript
* instead of directly changing the component's own <code>styleClass</code> attribute; this is chosen so because we
* don't want the changed style class to be saved in the server side view state as it may result in potential
* inconsistencies because it's supposed to be an one-time change.
*/
@Override
public void encodeChildren(FacesContext context) throws IOException {
UIForm form = getCurrentForm();
if (form == null) {
return;
}
StringBuilder clientIds = new StringBuilder();
form.visitTree(VisitContext.createVisitContext(context, null, VISIT_HINTS), (visitContext, component) -> {
if (component instanceof UIInput && !((UIInput) component).isValid()) {
if (clientIds.length() > 0) {
clientIds.append(',');
}
String clientId = component.getClientId(visitContext.getFacesContext());
clientIds.append('"').append(clientId).append('"');
}
return VisitResult.ACCEPT;
});
if (clientIds.length() > 0) {
context.getResponseWriter().write(format(SCRIPT, clientIds, getStyleClass(), isFocus()));
}
}
/**
* This component is per definiton only rendered when the current request is a postback request and the
* validation has failed.
*/
@Override
public boolean isRendered() {
FacesContext context = getFacesContext();
return context.isPostback() && context.isValidationFailed() && super.isRendered();
}
// Getters/setters ------------------------------------------------------------------------------------------------
/**
* Returns the error style class which is to be applied on invalid inputs. Defaults to <code>error</code>.
* @return The error style class which is to be applied on invalid inputs.
*/
public String getStyleClass() {
return state.get(PropertyKeys.styleClass, DEFAULT_STYLECLASS);
}
/**
* Sets the error style class which is to be applied on invalid inputs.
* @param styleClass The error style class which is to be applied on invalid inputs.
*/
public void setStyleClass(String styleClass) {
state.put(PropertyKeys.styleClass, styleClass);
}
/**
* Returns whether the first error element should gain focus. Defaults to <code>true</code>.
* @return Whether the first error element should gain focus.
*/
public boolean isFocus() {
return state.get(PropertyKeys.focus, DEFAULT_FOCUS);
}
/**
* Sets whether the first error element should gain focus.
* @param focus Whether the first error element should gain focus.
*/
public void setFocus(boolean focus) {
state.put(PropertyKeys.focus, focus);
}
}