How to use ocx with javascript in jsf page

Question

Hello,
Please i create a jsf page which purpose is to scan.
I used in a source of my jsf page an OCX with object tag like
<OBJECT ID="Ranger"
CLASSID="CLSID:1C5C9095-05A8-11D4-9AF9-00104B23E2B1">
</OBJECT>
i wrote my functions which use this ocx in javascript. Function that i call with clientlistener rear adf button
but it doesn't work
Could you please help me please VERY IMPORTANT

Answer 1

This my html code:
<SCRIPT LANGUAGE=javascript FOR=Ranger EVENT=TransportNewState(newState,previousState)>  
// Transport new state, fired every time the State changes on the control
// input params , are the new state and the previous state
//alert(newState);
var RangerTransportStates = {TransportUnknownState: -1, TransportShutDown: 0, TransportStartingUp: 1,
                              TransportChangeOptions: 2, TransportEnablingOptions: 3, TransportReadyToFeed: 4,
                              TransportFeeding: 5, TransportExceptionInProgress:6, TransportShuttingDown: 7};
if(newState == RangerTransportStates.TransportShutDown)
      document.getElementById('StartRanger').disabled = false;
      document.getElementById('EnableRanger').disabled = true;
      document.getElementById('StopFeeding').disabled = true;
      document.getElementById('StartFeeding').disabled = true;
      document.getElementById('ChangeOptions').disabled = true;
      document.getElementById('Shutdown').disabled = true;     
      document.getElementById('UserInstructions').innerHTML = "Press 'Startup Ranger' to initialize the Ranger control"
if(newState == RangerTransportStates.TransportChangeOptions)
      document.getElementById('StartRanger').disabled = true;
      document.getElementById('StartFeeding').disabled = true;
      document.getElementById('EnableRanger').disabled = false;
      document.getElementById('Shutdown').disabled = false;
      document.getElementById('UserInstructions').innerHTML = "<b>Ranger Started</b> <br> Press 'Enable Ranger' to enable the current Ranger Options and prepare to start feeding"
if(newState == RangerTransportStates.TransportReadyToFeed)
      document.getElementById('EnableRanger').disabled = true;
      document.getElementById('StopFeeding').disabled = true;
      document.getElementById('StartFeeding').disabled = false;
      document.getElementById('ChangeOptions').disabled = false;
      document.getElementById('Shutdown').disabled = false;
      document.getElementById('UserInstructions').innerHTML = "<b>Ready to feed </b><br> Press 'Start Feeding' to start Ranger Feeding checks from main hopper"
if(newState == RangerTransportStates.TransportFeeding)
      document.getElementById('StartFeeding').disabled = true;
      document.getElementById('ChangeOptions').disabled = true;
      document.getElementById('Shutdown').disabled = true;
      document.getElementById('StopFeeding').disabled = false;     
      document.getElementById('UserInstructions').innerHTML = "<b>Feeding... </b><br> Press 'Stop Feeding' to stop Ranger from Feeding checks"
getstatus();
</SCRIPT> 
<SCRIPT LANGUAGE=javascript FOR=Ranger EVENT=TransportChangeOptionsState(previousState)>  
//Fired when Ranger reaches the change option state, input params are previous state
getstatus();
</SCRIPT> 
<SCRIPT LANGUAGE=javascript FOR=Ranger EVENT=TransportReadyToFeedState(previousState)>  
//Fired when ranger is ready to feed the next item
getstatus();
</SCRIPT> 
<SCRIPT LANGUAGE=javascript FOR=Ranger EVENT=TransportFeedingStopped(reason,itemsFed,itemsrequested)>  
//Fired when feeding has stopped
getstatus();
</SCRIPT> 
<SCRIPT LANGUAGE=javascript FOR=Ranger EVENT=TransportItemInPocket(itemID)>  
//Fired when the item has been fed into the pocket
var RangerSides = {TransportFront: 0, TransportRear: 1};
var RangerImageColorTypes = {ImageColorTypeBitonal:0, ImageColorTypeGrayscale: 1, ImageColorTypeColor: 2};
// Note: SaveImageToFile() below is used to save gray scale images.  Please verify that 'NeedFrontImage2' and
//       'NeedRearImage2' are set to 'true' in the GenericOptions.ini file.  If bitonal images are to be saved,
//       please set 'NeedFrontImage1'/'NeedRearImage1' to 'true' before calling SaveImageToFile() for bitonal images.
document.getElementById('MICR').innerHTML = 'MICR: ' + Ranger.GetMicrText(1);
temp = Ranger.SaveImageToFile(RangerSides.TransportFront, RangerImageColorTypes.ImageColorTypeGrayscale, "C:\\test\\Testfront.jpg");
temp = Ranger.SaveImageToFile(RangerSides.TransportRear, RangerImageColorTypes.ImageColorTypeGrayscale,"C:\\test\\Testback.jpg");
//Here you could check to see if the images were saved, putting alternate
//text in place of the image if they werent saved.
document.getElementById('PIC').innerHTML = '<img height=200 width=400 src=' + '"Testfront.jpg">' + '<br>' + '<img height=200 width=400 src=' + '"Testback.jpg">';
getstatus();
</SCRIPT> 
<SCRIPT LANGUAGE=javascript FOR=Ranger EVENT=TransportNewItem()>  
// Fired when a new item has entered the track
getstatus();
</SCRIPT> 
<SCRIPT LANGUAGE=javascript FOR=Ranger EVENT=TransportShutDownState(currentState,previousState)>  
//Fired when the Ranger control has been shutdown
getstatus();
</SCRIPT> 
<SCRIPT LANGUAGE=javascript FOR=Ranger EVENT=TransportSetItemOutput(itemID)>  
//fired when the item is ready to have params set(pocketing decisions)
getstatus();
</SCRIPT> 
<!-- End of Events ------------- -->
<SCRIPT LANGUAGE="javascript">
function getstatus()
     document.getElementById('Status').innerHTML = 'Status: ' + Ranger.GetTransportStateString();
</SCRIPT>
</head>
<body>
<OBJECT ID="Ranger"
CLASSID="CLSID:1C5C9095-05A8-11D4-9AF9-00104B23E2B1">
</OBJECT>
<div id="container">
     <div id="banner" >
     </div>
     <div id="left">
          <h2>Ranger Control Buttons</h2>
          <br><div id="Status">Status:</div><br>
          <input class="controlbutton" id="StartRanger" type=button value="Startup Ranger" onclick="Ranger.Startup();">
          <input class="controlbutton" id="EnableRanger" disabled type=button value="Enable Ranger" onclick="Ranger.EnableOptions();">
          <input class="controlbutton" id="StartFeeding" disabled type=button value="Start Feeding" onclick="Ranger.StartFeeding(0,0);">
          <input class="controlbutton" id="StopFeeding" disabled type=button value="Stop Feeding" onclick="Ranger.StopFeeding();">
          <input class="controlbutton" id="ChangeOptions" disabled type=button value="Change Options" onclick="Ranger.PrepareToChangeOptions();">
          <input class="controlbutton" id="Shutdown" disabled type=button value="Shutdown Ranger" onclick="Ranger.Shutdown();">
     </div>
     <div id="content">
          <div id="UserInstructions">Press 'Startup Ranger' to initialize the Ranger control</div>
          <br>
          <div id="MICR"></div>
          <br>
          <div id="PIC"></div>
     </div>
     <div id="footer"><h1>Ranger Control</h1></div>
</div>
them jsf code:
<f:view>
<OBJECT ID="Ranger"
    CLASSID="CLSID:1C5C9095-05A8-11D4-9AF9-00104B23E2B1">
</OBJECT>   
  <af:document id="d1" title="Fiche Bordereau">
    <af:messages id="m1"/>
    <af:form id="f1">
      <af:pageTemplate viewId="/tempCompens.jspx" id="pt1">
       <af:resource type="javascript">
        // Transport new state, fired every time the State changes on the control
        // input params , are the new state and the previous state
        //alert(newState);
        var RangerTransportStates = {TransportUnknownState: -1, TransportShutDown: 0, TransportStartingUp: 1,
                              TransportChangeOptions: 2, TransportEnablingOptions: 3, TransportReadyToFeed: 4,
                              TransportFeeding: 5, TransportExceptionInProgress:6, TransportShuttingDown: 7};
        ok =false;
        var i = 0;
        if(newState == RangerTransportStates.TransportShutDown)
            document.getElementById('btn_demarre').disabled = false;
            document.getElementById('btn_active').disabled = true;
            document.getElementById('btn_arretscan').disabled = true;
            document.getElementById('btn_scan').disabled = true;
            document.getElementById('btn_changetat').disabled = true;
            document.getElementById('btn_arret').disabled = true;
            document.getElementById('UserInstructions').value = "Appuyer sur Demarrer pour initiliser le scanner"
        if(newState == RangerTransportStates.TransportChangeOptions)
            document.getElementById('btn_demarre').disabled = true;
            document.getElementById('btn_scan').disabled = true;
            document.getElementById('btn_active').disabled = false;
            document.getElementById('btn_arret').disabled = false;
            document.getElementById('UserInstructions').value = "Demarrage... Appuyer sur Activer pour preparer le scanning "
            ok = false;
        if(newState == RangerTransportStates.TransportReadyToFeed)
            document.getElementById('btn_active').disabled = true;
            document.getElementById('btn_arretscan').disabled = true;
            document.getElementById('btn_scan').disabled = false;
            document.getElementById('btn_changetat').disabled = false;
            document.getElementById('btn_arret').disabled = false;
            document.getElementById('UserInstructions').value = "Pret a scanner.   Appuyer sur Scanner pour lancer le scanning"
            ok = true;
        if(newState == RangerTransportStates.TransportFeeding)
            document.getElementById('btn_scan').disabled = true;
            document.getElementById('btn_changetat').disabled = true;
            document.getElementById('btn_arret').disabled = true;
            document.getElementById('btn_arretscan').disabled = false;
            document.getElementById('UserInstructions').value = "Scanning...  Appuyer sur Arret scanning pour stopper le scanning"
        getstatus();
       </af:resource>
       <af:resource type="javascript">
        //Fired when the item has been fed into the pocket
            var RangerSides = {TransportFront: 0, TransportRear: 1};
            var RangerImageColorTypes = {ImageColorTypeBitonal:0, ImageColorTypeGrayscale: 1, ImageColorTypeColor: 2};
        //alert(Ranger.GetGenericOptionFileName());
            Ranger.SetGenericOption("OptionalDevice","NeedFrontImage1",true);
            Ranger.SetGenericOption("OptionalDevice","NeedRearImage1",true);
            document.getElementById('cmc7').value = 'CMC7= '+Ranger.GetMicrText(1);
            var cmc7 = trim(Ranger.GetMicrText(1));
            cmc7 = cmc7.replace(" ","_");
            cmc7 = cmc7.replace(" ","_");
        //cmc7 = cmc7.substring(0,15);
            cmc7R = cmc7+"_R.jpg";
        //alert(Ranger.GetImageAddress(RangerSides.TransportFront, RangerImageColorTypes.ImageColorTypeGrayscale))
            function trim(myString)
                return myString.replace(/^\s+/g,'').replace(/\s+$/g,'')
            temp = Ranger.SaveImageToFile(RangerSides.TransportFront, RangerImageColorTypes.ImageColorTypeGrayscale, "C:\\Documents and Settings\\Koffi Ernest\\Mes documents\\NetBeansProjects\\Scan-project\\web\\"+cmc7R);
            window.onload = function()
              document.getElementById("verso").src = monfichierV();
            function monfichierR()
            //  nomfichier = nomfichier+"_R.jpg";
                var nomfichier = trim(Ranger.GetMicrText(1))+"_R.jpg";
                return  nomfichier
            cmc7V = cmc7+"_V.jpg";
            temp = Ranger.SaveImageToFile(RangerSides.TransportRear, RangerImageColorTypes.ImageColorTypeGrayscale,"C:\\Documents and Settings\\Koffi Ernest\\Mes documents\\NetBeansProjects\\Scan-project\\web\\"+cmc7V);
            window.onload = function()
                document.getElementById("verso").src = monfichierV();
            function monfichierV()
                var nomfichierV = trim(Ranger.GetMicrText(1))+"_V.jpg";
                return nomfichierV
            function getRImageUrl(img)
                var imageSrc = trim(Ranger.GetMicrText(1))+"_R.jpg";
                if(img.src != imageSrc)
                // don't get stuck in an endless loop
                img.src = imageSrc;
            function getVImageUrl(img)
             var imageSrc = trim(Ranger.GetMicrText(1))+"_V.jpg";
             if(img.src != imageSrc)
             { // don't get stuck in an endless loop
              img.src = imageSrc;
        document.getElementById('recto').source = cmc7R;
        document.getElementById('verso').source = cmc7V;
        getstatus();
       </af:resource>
        <af:resource type="javascript">
             document.getElementById('status').value = Ranger.GetTransportStateString();
        </af:resource>
        <f:facet name="temp">
          <af:panelSplitter id="ps1" splitterPosition="329"
                            inlineStyle="width:709px;">
            <f:facet name="first">
              <af:panelGroupLayout layout="scroll"
                                   xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
                                   id="pgl5">
                <af:panelGroupLayout id="pgl1">
                  <af:outputText value="Saisie des informations du bordereau"
                                 id="ot1"
                                 inlineStyle="font-size:small; font-family:inherit; color:Gray; font-weight:bold;"/>
                </af:panelGroupLayout>
                <af:panelFormLayout id="pfl1">
                  <f:facet name="footer">
                    <af:panelGroupLayout id="pgl4" layout="horizontal">
                      <af:commandButton text="Annuler" id="cb4"/>
                      <af:spacer width="5" height="10" id="s14"/>
                      <af:commandButton text="Scanner" id="cb5"
                                        action="success"/>
                    </af:panelGroupLayout>
                  </f:facet>
                  <af:spacer width="10" height="30" id="s2"/>
                  <af:panelGroupLayout id="panelGroupLayout1"
                                       layout="horizontal" valign="middle">
                    <af:inputText label="N° de compte                   " id="it1"/>
                    <af:spacer width="10" height="10" id="s16"/>
                    <af:commandButton text="..." id="cb3"/>
                  </af:panelGroupLayout>
                  <af:spacer width="5" height="3" id="s12"/>
                  <af:panelGroupLayout id="pgl2" layout="horizontal"
                                       valign="middle">
                    <af:inputText label="Nom du client         " id="it3"/>
                  </af:panelGroupLayout>
                  <af:spacer width="5" height="3" id="s17"/>
                  <af:panelGroupLayout id="pgl11" layout="horizontal"
                                       valign="middle">
                    <af:inputText label="N° bordereau    " id="it4"/>
                    <af:spacer width="5" height="10" id="s11"/>
                    <af:commandButton text="New" id="cb1"/>
                    <af:spacer width="2" height="10" id="s13"/>
                    <af:commandButton text="Find" id="cb2"/>
                  </af:panelGroupLayout>
                  <af:spacer width="5" height="3" id="s18"/>
                  <af:panelGroupLayout id="pgl3">
                    <af:inputText label="Nbre de chèque" id="it2"/>
                    <af:spacer width="5" height="3" id="s19"/>
                    <af:inputDate label="Date d'operation                  " id="id1"/>
                  </af:panelGroupLayout>
                  <af:spacer width="1000" height="10" id="s1"/>
                </af:panelFormLayout>
              </af:panelGroupLayout>
            </f:facet>
            <f:facet name="second">
              <af:panelGroupLayout layout="scroll"
                                   xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
                                   id="pgl6">
                <af:outputText value="Resultat scanning" id="ot2"
                               inlineStyle="font-size:small; font-weight:bold; color:Gray;"/>
                <af:panelTabbed id="pt2"
                                inlineStyle="height:498px; width:680px;">
                  <af:showDetailItem text="Scanning" id="sdi1">
                    <af:panelSplitter id="ps2" splitterPosition="103"
                                      inlineStyle="width:433px; height:436px;">
                      <f:facet name="first">
                        <af:panelGroupLayout id="pgl7" layout="vertical">
                          <af:outputText value="Liste de contrôles" id="ot3"
                                         inlineStyle="font-weight:bold; color:Gray;"/>
                          <af:spacer width="10" height="10" id="s20"/>
                          <af:outputText id="status"/>
                          <af:spacer width="10" height="10" id="s8"/>
                          <af:commandButton text="Demarrer      "
                                            id="btn_demarre">
                            <af:clientListener type="click"
                                               method="Ranger.Startup()"/>
                          </af:commandButton>
                          <af:spacer width="10" height="10" id="s7"/>
                          <af:commandButton text="Activer              "
                                            id="btn_active"
                                            disabled="true">
                            <af:clientListener method="Ranger.EnableOptions()"
                                               type="click"/>
                          </af:commandButton>
                          <af:spacer width="10" height="10" id="s6"/>
                          <af:commandButton text="Scanner       "
                                            id="btn_scanne"
                                            disabled="true">
                            <af:clientListener method="Ranger.StartFeeding(0,0)"
                                               type="click"/>
                          </af:commandButton>
                          <af:spacer width="10" height="10" id="s3"/>
                          <af:commandButton text="Arrêt Scan   "
                                            id="btn_arretscan"
                                            disabled="true">
                            <af:clientListener method="Ranger.StopFeeding()"
                                               type="click"/>
                          </af:commandButton>
                          <af:spacer width="10" height="10" id="s4"/>
                          <af:commandButton text="Changer Etat"
                                            id="btn_changetat"
                                            disabled="true">
                            <af:clientListener method="Ranger.PrepareToChangeOptions()"
                                               type="click"/>
                          </af:commandButton>
                          <af:spacer width="10" height="10" id="s5"/>
                          <af:commandButton text="Arrêter         "
                                            id="btn_arret"
                                            disabled="true">
                            <af:clientListener method="Ranger.Shutdown()"
                                               type="click"/>
                          </af:commandButton>
                        </af:panelGroupLayout>
                      </f:facet>
....Edited by: nesta on 21 juil. 2010 07:07