Como usar o autofocus no primefaces

Programação
#1

estou com problema meio besta mais não consigo resolver através da documentação.

Quero que quando abrir a página, um campo do inputText fique já focado.

#2

Posta o código do XHTML.

#3

Template

`

<h:head>

<title>
	<ui:insert name="titulo"> </ui:insert>
</title>

<link rel="Stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<link rel="stylesheet" href="css/estilo.css" />

</h:head>

<h:body>



<p:outputLabel styleClass=“page-hide” > Controle de Serviço </p:outputLabel>


<p:commandButton styleClass=“btn btn-danger” value=“sair” />

<div class="container">
	<div class="row">
	  <div class="col-md-3">
	  	<p:commandButton  styleClass="btn btn-primary" value="cadastro de serviço" />
	  	<p:commandButton  styleClass="btn btn-primary" value="consulta serviço" />
	  	<p:commandButton  styleClass="btn btn-primary" value="cadastrar cliente" />
	  	<p:commandButton  styleClass="btn btn-primary" value="consultar cliente" />
	  	<p:commandButton  styleClass="btn btn-primary" value="fotos de serviços" />
	  	<p:commandButton  styleClass="btn btn-primary" value="relatórios" />
	  	
	  	<p:commandButton value="acessar" styleClass="btn btn-lg btn-danger btn-block" />
	  </div>
	  <div class="col-md-9">
	  MENU PRINCIPAL
	  </div>
	</div>

<div id="context">
	<ui:insert name="context" />
</div>
`

página que usa o template
`

<ui:composition template="/template/_template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p=“http://primefaces.org/ui”>

<ui:define name="titulo">
	menu principal
</ui:define>

</ui:composition>

`

#4

Ok, mas cadê o input e o <p:focus />??

#5

confundi o código aqui vou consertar.

#6

eu só tentei até este ponto, não queria perder muito tempo, porque tenho outras prioridades.

`

Controle de Servico 
<div class="container">
	<h:form class="form-login">
	<p:focus context="usuario"/>
		<fieldset>
			<legend>Acesso ao sistema</legend>
			<p:outputLabel for="usuario" value="usuario" />
			<p:inputText id="usuario" styleClass="form-control"
				placeholder="informe seu login" value="" required="true" />
			<p:outputLabel for="senha" value="senha" />
			<p:password id="senha" value="" styleClass="form-control"
				placeholder="informe sua senha" required="true" feedback="true"
				promptLabel="Informe sua senha" />
			<p:commandButton value="acessar" style='margin-top: 5px'
				styleClass="btn btn-lg btn-danger btn-block" />
		</fieldset>
	</h:form>
</div>
<script src="jquery/jquery.js" />
<script>
	$('legend').animate({"margin-left": "+=80"},5000);
</script>
`
#7

Tenta assim:


    <h:form class="form-login">
	    <fieldset id="flLogin">
                    <p:focus context="flLogin"/>
			<legend>Acesso ao sistema</legend>
			<p:outputLabel for="usuario" value="usuario" />
			<p:inputText id="usuario" styleClass="form-control"
				placeholder="informe seu login" value="" required="true" />
			<p:outputLabel for="senha" value="senha" />
			<p:password id="senha" value="" styleClass="form-control"
				placeholder="informe sua senha" required="true" feedback="true"
				promptLabel="Informe sua senha" />
			<p:commandButton value="acessar" style='margin-top: 5px'
				styleClass="btn btn-lg btn-danger btn-block" />
		</fieldset>
	</h:form>
#8

não deu.
HTTP Status 500 - Cannot find component for expression "flLogin" referenced from "j_idt2:j_idt4".

#9

No seu caso eu faria da seguinte forma:

<p:focus for="usuario" />

#10

usa o fieldset do prime.

#11

ficou no mesmo jeito.

<h:form class="form-login"> <p:fieldset id="flLogin"> <p:focus context="usuario" /> <legend>Acesso ao sistema</legend> <p:outputLabel for="usuario" value="usuario" /> <p:inputText id="usuario" styleClass="form-control" placeholder="informe seu login" value="" required="true" /> <p:outputLabel for="senha" value="senha" /> <p:password id="senha" value="" styleClass="form-control" placeholder="informe sua senha" required="true" feedback="true" promptLabel="Informe sua senha" /> <p:commandButton value="acessar" style='margin-top: 5px' styleClass="btn btn-lg btn-danger btn-block" /> </p:fieldset> </h:form>

#12

<p:focus context="usuario" /> É o id do fieldset

EDIT: Tou lendo a documentação o context vai pegar o componente que engloba e busca o primeiro input habilitado p/ setar o focu, o for determina qual id(element) que você quer.

#13

<p:focus for="usuario" />

Note que eu coloquei o id usuario no for e não no context…faça um teste desse jeito.

1 curtida