This discussion is archived
5 Replies Latest reply: Jan 2, 2008 4:05 AM by LucasJellema RSS

cursor position

600718 Newbie
Currently Being Moderated
hi

i have two <af:inputText> and a command button in my page.
when the page is loaded i want the cursor to be in the first textbox and when i click a button the cursor should be focused to the next input text.

how to do this??
plz help me.
  • 1. Re: cursor position
    LucasJellema Oracle ACE
    Currently Being Moderated
    Hi,

    You asked this before - and I provided a reply. Does this not work for you?

    You probably could add an onLoad listener (JavaScript) to the page, that will set the focus once the page has loaded. It could take the name of the item to focus on from some hidden field that you may create using an hidden inputText whose value is derived from a managed bean property set in the action listener.


    If the focus is to be set after a PPR request/response was processed, you may be interested in the option of adding JavaScript to the PPR response (I found it in the ADF 11g Web User Interface Developer's Guide). Using the ExtendedRenderKitService you apparently can add JavaScript inside the action listener logic.

    Lucas
  • 2. Re: cursor position
    600718 Newbie
    Currently Being Moderated
    thankx a lot for the replies.

    can u just provide me a an example to see how focus is set to the component using java script.

    i tried a lot of examples but didnt succeed.

    rgds
  • 3. Re: cursor position
    LucasJellema Oracle ACE
    Currently Being Moderated
    Can you provide me with the code of your page and your attempt to set the focus using JavaScript on the onLoad and I will try to take it from there.

    Lucas
  • 4. Re: cursor position
    600718 Newbie
    Currently Being Moderated
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <%@ page contentType="text/html;charset=windows-1252"%>
    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
    <%@ taglib uri="http://xmlns.oracle.com/adf/faces/rich" prefix="af"%>

    <f:view>

    <af:document binding="#{backing_setFocus.document1}" id="document1"
    initialFocusId="#{backing_setFocus.inputText1}">
    <f:verbatim>
    <![CDATA[
    <script language="JavaScript" type="text/javascript">
    function setFocus(event) {      
    var t=AdfPage.PAGE.findComponent("inputText2");
    t.focus();
    alert("Hello");

    }
    </script>
    ]]>
    </f:verbatim>
    <af:form binding="#{backing_setFocus.form1}" id="form1">
    <af:inputText label="Name" binding="#{backing_setFocus.inputText1}"
    id="inputText1"/>
    <af:inputText label="ID " binding="#{backing_setFocus.inputText2}"
    id="inputText2"/>
    <af:commandButton text="Set focus"
    binding="#{backing_setFocus.commandButton1}"
    id="commandButton1"
    actionListener="#{backing_setFocus.on_click}" >
    <af:clientListener method="setFocus" type="action"/>

    </af:commandButton>
    </af:form>
    </afh:body>
    </af:document>

    </f:view>




    when i run this the loading image is seen.but in the status bar it is showing done.
    when i remove the script part and <af:clientListener> part from the code the page is loaded and i can see the page.

    plz help me
  • 5. Re: cursor position
    LucasJellema Oracle ACE
    Currently Being Moderated
    Dear KK,

    I have done some tests - and the results were not all extremely satisfying. To say the least. However, I did find a method that will probably do it for you.

    It involves a little bit of JavaScript - not using the AdfPage API, as I did not get it to work properly.

    The client now looks like this:
    <?xml version='1.0' encoding='windows-1252'?>
    <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
              xmlns:trh="http://myfaces.apache.org/trinidad/html">
      <jsp:directive.page contentType="text/html;charset=windows-1252"/>
      <f:view>
        <af:document initialFocusId="inputText1">
          <trh:script text="function setFocus(event) { 
             var t=document.getElementById('inputText2::content');
             t.focus();
          }
    
          function setFocusId(id) { 
            var t=document.getElementById(id);
            t.focus();
          }
    "/>
          <af:form id="form1">
            <af:panelFormLayout>
              <af:inputText label="Name" id="inputText1"/>
              <af:inputText label="ID " id="inputText2"/>
            </af:panelFormLayout>
            <af:commandButton text="Set focus on ID field" id="commandButton1"
                              actionListener="#{backing_setFocus.commandButton1}" />
            <af:commandButton text="Set focus on ID field " id="commandButton3"
                              partialSubmit="true">
              <af:clientListener method="setFocus" type="action"/>
            </af:commandButton>
          </af:form>
        </af:document>
      </f:view>
    </jsp:root>
    The associated backing bean has the commandButton1 method that is called as actionListener. In addition to doing whatever you want it to do, it writes a little piece of JavaScript to be executed when the PPR completes. It relies on the fact that an inputText element is rendered using a table with the same id as the inputText and inside that table an HTML input element with id equals tableId::content.
    package nl.amis.adffaces;
    
    import javax.faces.component.UIComponent;
    import javax.faces.context.FacesContext;
    import javax.faces.event.ActionEvent;
    
    import org.apache.myfaces.trinidad.render.ExtendedRenderKitService;
    import org.apache.myfaces.trinidad.util.Service;
    
    public class SetFocusBacker {
    
        public SetFocusBacker() {
        }
    
        public void commandButton1(ActionEvent actionEvent) {
            
            
            FacesContext facesContext = FacesContext.getCurrentInstance();
            ExtendedRenderKitService service =
            (ExtendedRenderKitService)Service.getRenderKitService(facesContext,
            ExtendedRenderKitService.class);
            UIComponent ip = facesContext.getViewRoot().findComponent("inputText2");
            String clientId = ip.getClientId(facesContext);
            service.addScript(facesContext,
                              "setFocusId('"+clientId+"::content');");
            System.out.println("added client side script "+clientId);
      }
    
    }
    I hope this does what you are looking for - or at least helps you find a way yourself.

    best regards,

    Lucas