focus_6.xhtml
2.35 KB
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:focus="http://richfaces.org/sandbox/focus" xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
>
<head>
<title>Focus sample</title>
</head>
<body>
<ui:include src="menu.xhtml"/>
<p>
Focus is placed on control withing modal panel. Modal panel is rendered before it is shown, thus
javascript that sets focus should not be invoked at that moment.
To cope with that focus component has "timing" attribute which, when valued to "onJScall"
allows setting focus later whenever user wishes. When "timing" is set to "onJScall" then "name" attribute
must be also specified. It is name of JavaScript function that will be generated and can be called by user
to set focus in any moment.
In this example we put onshow="focusTheForm();" in modal panel which causes
focus to be placed after the modal is visible.
Notice that "name" attribute of focuse component is equal to "focusTheForm".
</p>
<h:form>
<h:commandButton value="Show modal">
<rich:componentControl for="panel" event="onclick" operation="show" disableDefault="true"/>
</h:commandButton>
</h:form>
<rich:modalPanel id="panel" autosized="true" onshow="focusTheForm();">
<h:form id="theForm">
<focus:focus name="focusTheForm" timing="onJScall"/>
<h:panelGrid columns="3">
<h:outputLabel value="Username" for="username"/>
<h:inputText value="#{username}" id="username" required="true"/>
<h:message for="username"/>
<h:outputLabel value="Email" for="email"/>
<h:inputText value="#{email}" id="email" required="true"/>
<h:message for="email"/>
</h:panelGrid>
<a4j:commandButton value="Submit" reRender="theForm" oncomplete="Richfaces.FocusManager.focus();"/>
<h:commandButton value="Close">
<rich:componentControl for="panel" event="onclick" operation="hide" disableDefault="true"/>
</h:commandButton>
</h:form>
</rich:modalPanel>
<rich:insert src="/focus_6.xhtml" highlight="html"/>
</body>
</html>