AutoScrolling dans la page JSF/Primefaces

Question

J'utilise Primefaces et JSF2.0 pour construire une page.

Dans la page j'ai deux panneaux quand je clique sur le bouton "Click-me" un panneau un, il a rendu le deuxième panneau dans la même page, ce que je veux est quand je clique sur le bouton "Click-moi" page devrait également défiler automatiquement et devrait amener le deuxième en-tête de panneau devant l'utilisateur, actuellement l'utilisateur doit faire défiler manuellement pour voir le deuxième panneau. Le code est comme ci-dessous

XHTML page

<h:form id="form1"> 
    <p:panel header="Panel One" id="PanelOne" > 
     <h:panelGrid styleClass="panelGrid" columns="2" id="PanelOneGrid" width="90%" > 

      <h:outputText value="First Input Field Panel One" ></h:outputText> 
      <p:inputTextarea rows="20" cols="80"></p:inputTextarea> 

      <h:outputText value="Second Input Field Panel One" ></h:outputText> 
      <p:inputTextarea rows="20" cols="80"></p:inputTextarea> 

      <h:outputText value="" ></h:outputText> 
       <p:commandButton value="Click-me" update="form1" action="#{autoScrollBean.clickAction}"> 
       </p:commandButton> 

     </h:panelGrid> 
    </p:panel> 

    <p:panel header="Second One" id="PanelTwo" rendered="#{autoScrollBean.renderPanelTwo}"> 
     <h:panelGrid styleClass="panelGrid" columns="2" id="PanelTwoGrid" width="90%" > 

      <h:outputText value="First Input Field Panel Two" ></h:outputText> 
      <p:inputTextarea rows="20" cols="80"></p:inputTextarea> 

      <h:outputText value="Second Input Field Panel Two" ></h:outputText> 
      <p:inputTextarea rows="20" cols="80"></p:inputTextarea> 

     </h:panelGrid> 
    </p:panel> 

</h:form> 

Managed Bean est comme ci-dessous

@ManagedBean 
@ViewScoped 
public class AutoScrollBean { 

private boolean renderPanelTwo; 

public boolean isRenderPanelTwo() { 
    return renderPanelTwo; 
} 

public void setRenderPanelTwo(boolean renderPanelTwo) { 
    this.renderPanelTwo = renderPanelTwo; 
} 

public void clickAction() { 
    System.out.println("Inside Method"); 
    setRenderPanelTwo(true); 
} 

}

EDIT:

<p:focus /> 

En utilisant la commande ci-dessus focus, curosr va au premier champ de saisie et ce champ de saisie est montré à l'utilisateur après le défilement automatique, mais je veux montrer l'utilisateur de l'en-tête de panneau PAS du premier champ de saisie.

Answer 1

Je l'ai fait en utilisant JavaScript et testé dans IE que mon exigence ne pas nécessaire toute la compatibilité du navigateur, donc je n'ai pas testé pour un autre navigateur.

La nécessité de la fonction JavaScript placé dans l'en-tête: section (h tête) si vous utilisez la structure de modèle dans le JSF2.0

<script type="text/javascript"> 
    function ScrollPage(location) { 
     window.location.hash=location; 
    } 
</script> 

Créer l'ancre dans la page où vous souhaitez faire défiler ou ancrer la Page

<a id="anchorSecondPanel"> 

Tout en cliquant sur le bouton de commande appeler cette fonction sur l'événement onComplete

oncomplete="ScrollPage('anchorSecondPanel')" 

Le code modifié complet pour xhtml est comme ci-dessous

<h:form id="form1"> 
    <p:panel header="Panel One" id="PanelOne" > 
     <h:panelGrid styleClass="panelGrid" columns="2" id="PanelOneGrid" width="90%" > 

      <h:outputText value="First Input Field Panel One" ></h:outputText> 
      <p:inputTextarea rows="20" cols="80"></p:inputTextarea> 

      <h:outputText value="Second Input Field Panel One" ></h:outputText> 
      <p:inputTextarea rows="20" cols="80"></p:inputTextarea> 

      <h:outputText value="" ></h:outputText> 
       <p:commandButton value="Click-me" update="form1" action="#{autoScrollBean.clickAction}" oncomplete="ScrollPage('FeatureMainPanel')"> 
       </p:commandButton> 

     </h:panelGrid> 
    </p:panel> 

    <a id="anchorSecondPanel"> 
    <p:panel header="Second One" id="PanelTwo" rendered="#{autoScrollBean.renderPanelTwo}"> 
     <h:panelGrid styleClass="panelGrid" columns="2" id="PanelTwoGrid" width="90%" > 

      <h:outputText value="First Input Field Panel Two" ></h:outputText> 
      <p:inputTextarea rows="20" cols="80"></p:inputTextarea> 

      <h:outputText value="Second Input Field Panel Two" ></h:outputText> 
      <p:inputTextarea rows="20" cols="80"></p:inputTextarea> 

     </h:panelGrid> 
    </p:panel> 

</h:form> 

Answer 2

Eh bien, ajoutez juste du javascript à votre xhtml.

<script>   
    function scroll() 
    { 
     var grid = $("#form1\\:PanelTwo .panelGrid");  
     $('html, body').animate({ 
      scrollTop : grid.offset().top 
     },4000);     
    }   
</script> 

Et appelez quand vous appuyez sur le bouton:

<p:commandButton value="Click-me" update="form1" action="#{autoScrollBean.clickAction}" oncomplete="scroll()" > 

Cela fera le scrolltrick