How to add a digital clock using javascript in the .JSFF file?

Question

I am using the ADF program. This javascript code works in the .JSF file but cannot work in the .JSFF file. What is the next solution?

<?xml version='1.0' encoding='UTF-8'?>
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core"
                xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
    <f:view>
       <af:document title="Test.jsff" id="d1">
        <af:resource type="javascript">
          function startTime() {
              var today = new Date();
              var h = today.getHours();
              var m = today.getMinutes();
              var s = today.getSeconds();
              m = checkTime(m);
              s = checkTime(s);
              document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
              t = setTimeout('startTime()', 500);
          }

          function checkTime(i) {
              if (i &lt; 10) {
                  i = "0" + i;
              }
              return i;
          }
        </af:resource>
        <af:form id="f1">
            <af:outputText value="outputText1" id="txt">
                <af:clientListener method="startTime()" type="propertyChange"/>
            </af:outputText>
        </af:form>
    </af:document>
</f:view>
</ui:composition>

Answer 1

The problem is that you can't add an ad:document tag (and therefore you can't add the resource tag there too) into a fragment. To add javascript tot a fragment, you'll add an ad:panelFormLayout and to that, you add the at:resource tag. The next Problem is your JavaScript code. You assume the component can be found by the ID 'txt'. This is only true if you add the component to a page directly, outside any other naming container. A fragment is a naming container, so the client ID of the component changes according to its position on the page. As you can add a fragment multiple times to a page, the ID 'txt' would be present multiple times otherwise. To see the difference, you can inspect the page source when you render the page with a fragment (a region on the page). The ID will be something like 'r1:0:txt' instead of 'txt'. r1 is the id of the region, the 0 is the index of the region and 'txt' the II of the component inside the region.