Hyland Connect

jlabuelo · ‎02-11-2009

Good Morning all

Lets see if someone of you can help me here. We are trying to use alfresco to open a JPG file, with a Wizard, select an area of the JPG file and save the area cut as a new content in the system.

To do this image selection, we have designed a set of JavaScripts libraries and we are able to build a HTML/JSP file that shows an JPG file and we can select the area we want with the mouse, and save the area selected as a new JPG file.

Now we want to integrate this as a Wizard for the contents in Alfresco,however we are able to open the jpg image as a first step for the wizard, but we are not able to use the JavaScripts to select the area the same way we were able before in our HTML/JSP page.

Could any of you explain us how we must "call" this Javascript libraries so we are able withing the content shown in the Alfresco JSP page of the Wizard to select the area with the mouse?

This is the code of the JSP file for the Wizard where we show the image, but where the JavaScripts are not working




<import resource="classpath:scripts/extension/jquery-1.2.6.pack.js">

<import resource="classpath:scripts/extension/jquery.imgareaselect-0.6.2.min.js">

<%–

<script type="text/javascript" src="scripts/extension/jquery-1.2.6.pack.js"></script>

<script type="text/javascript" src="scripts/extension/jquery.imgareaselect-0.6.2.min.js"></script>

–%>

<script type="text/javascript">

 var $x1, $y1, $x2, $y2, $w, $h;

 

 function selectChange(img, selection)

 {

   $x1.text(selection.x1);

   $y1.text(selection.y1);

   $x2.text(selection.x2);

   $y2.text(selection.y2);

   $w.text(selection.width);

   $h.text(selection.height);

 }

 $(document).ready(function () {

   $x1 = $('#x1');

   $y1 = $('#y1');

   $x2 = $('#x2');

   $y2 = $('#y2');

   $w = $('#w');

   $h = $('#h');

 });

 

  $(window).load(function () {

   $('img#:recorte').imgAreaSelect({ selectionOpacity: 0, onSelectChange: selectChange });

 });

</script>



<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@ taglib uri="/WEB-INF/alfresco.tld" prefix="a" %>

<%@ taglib uri="/WEB-INF/repo.tld" prefix="r" %>



<%@ page import="org.alfresco.web.ui.common.PanelGenerator" %>



<f:verbatim>   

<table cellpadding="2" cellspacing="2" border="0" width="100%">

 <tr>

    <td class="mainSubTitle">

       </f:verbatim><h:outputText value="#{msg.edit_file_title}" /><f:verbatim>

    </td>

 </tr>

 <tr>

    <td style="padding:10px" valign="middle">



       </f:verbatim>

       

          <h:graphicImage id="recorte" url="#{WizardManager.bean.browserUrl}"/>



          <f:verbatim>

    </td>

 </tr>

 <tr>

    <td>

       </f:verbatim><h:outputText value="#{msg.edit_download_complete}" /><f:verbatim>

    </td>

 </tr>



</table>

</f:verbatim>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

mikeh · ‎02-11-2009

You'll probably find it's a conflict with the MooTools JavaScript library that the Explorer client uses.

Please see http://docs.jquery.com/Using_jQuery_with_Other_Libraries for a workaround.

Thanks,
Mike

jlabuelo · ‎02-11-2009

Hi Mike

Thanks a lot for the quick reply. Will give it a look right now, however if the errors are with IE clients, we are using Mozilla Firefox Should it be the same??… dont worry will let you know in 5 mins

Cheers

mikeh · ‎02-11-2009

By "Explorer" I meant "Alfresco Explorer" - the new name for the JSF web client.

Thanks,
Mike

jlabuelo · ‎02-11-2009

Hi Mike

Thanks a lot again for your reply. We have checked the workaround and tried to apply it however it still does not work. The errors we get make us think that we are not referencing correctly the javascript files in the JSP page, as it seems the code produced by the "js" files are not being called.

Our code for this JSP page is now:

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/WEB-INF/alfresco.tld" prefix="a" %>
<%@ taglib uri="/WEB-INF/repo.tld" prefix="r" %>

<f:verbatim>

<script type="text/javascript" src="/scripts/extension/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="/scripts/extension/jquery.imgareaselect-0.6.2.js"></script>
<script type="text/javascript" src="/scripts/extension/jquery.imgareaselect-0.6.2.min.js"></script>

<script type="text/javascript">

var $j = jQuery.noConflict();

var $x1, $y1, $x2, $y2, $w, $h;

function selectChange(img, selection)
{
   $x1.text(selection.x1);
   $y1.text(selection.y1);
   $x2.text(selection.x2);
   $y2.text(selection.y2);
   $w.text(selection.width);
   $h.text(selection.height);
}

function preview(img, selection) {
   var scaleX = 100 / selection.width;
   var scaleY = 100 / selection.height;

   $('#thumbnail + div > img').css({
      width: Math.round(scaleX * 500) + 'px',
      height: Math.round(scaleY * 375) + 'px',
      marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
      marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
   });
   $j('#x1').val(selection.x1);
   $j('#y1').val(selection.y1);
   $j('#x2').val(selection.x2);
   $j('#y2').val(selection.y2);
   $j('#w').val(selection.width);
   $j('#h').val(selection.height);
}

$j(document).ready(function () {
   $x1 = $('#x1');
   $y1 = $('#y1');
   $x2 = $('#x2');
   $y2 = $('#y2');
   $w = $('#w');
   $h = $('#h');
});

$j(window).load(function () {
   $j('img#wizard:wizard-body:recorte').imgAreaSelect({ selectionOpacity: 0, onSelectChange: selectChange });
});

</script>

</f:verbatim>

<%@ page import="org.alfresco.web.ui.common.PanelGenerator" %>

<f:verbatim>
<table cellpadding="2" cellspacing="2" border="0" width="100%">
<tr>
    <td class="mainSubTitle">
       </f:verbatim><hutputText value="#{msg.edit_file_title}" /><f:verbatim>
    </td>
</tr>
<tr>
    <td style="padding:10px" valign="middle">

       </f:verbatim>

          <h:graphicImage id="recorte" url="#{WizardManager.bean.browserUrl}"/>

          <f:verbatim>
    </td>
</tr>
<tr>
    <td>
       </f:verbatim><hutputText value="#{msg.edit_download_complete}" /><f:verbatim>
    </td>
</tr>

</table>
</f:verbatim>

Our JSP file is in "alfresco/jsp/extension/incis/ShowFile.jsp"
and the js scripts are in "alfresco/scripts/extension"

is correct the way we call them in our code?

<script type="text/javascript" src="/scripts/extension/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="/scripts/extension/jquery.imgareaselect-0.6.2.js"></script>
<script type="text/javascript" src="/scripts/extension/jquery.imgareaselect-0.6.2.min.js"></script>
‍‍‍‍

Also another question is the way we have to reference the object (image we want an area to be selected), is it correct this way?


$j(window).load(function () {
   $j('img#wizard:wizard-body:recorte').imgAreaSelect({ selectionOpacity: 0, onSelectChange: selectChange });
 });
‍‍‍‍‍

When in the JSP we have declared it as


<h:graphicImage id="recorte" url="#{WizardManager.bean.browserUrl}"/>‍‍

Thanks a lot, I am sure it is something we are missing, and also we are not sure how to reference the object id="recorte" so it is called by the $(window).load (funcion())

Let us know your thoughts please

Cheers

mikeh · ‎02-11-2009

Hi

A few things jump out immediately assuming the code you posted is a direct copy/paste…

Why are you including both jquery.imgareaselect-0.6.2.js and jquery.imgareaselect-0.6.2.min.js? Presumably the latter is a JSMin'ed version of the former, so this could be causing issues.

You've told jQuery to use $j but you've still got references to $() in the code.

I'm not sure exactly what selector you'll need to get the img DOM reference, but this is something the Firebug add-on for Firefox is very good at telling you through live inspection.

Hope that helps,
Mike

jlabuelo · ‎02-12-2009

Hi Mike

Yes you are right, even the "duplicate" scripts were not giving us errors in the html tests we did with the code, we have removed them, and also cleared the $() calls.

The code we have now is quite clean




<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/WEB-INF/alfresco.tld" prefix="a" %>
<%@ taglib uri="/WEB-INF/repo.tld" prefix="r" %>

<f:verbatim>

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery.imgareaselect-0.6.2.min.js"></script>

<script type="text/javascript">

var $j = jQuery.noConflict();
var x1, y1, x2, y2, w, h;
 
 function selectChange(img, selection)
 {
   x1.text(selection.x1);
   y1.text(selection.y1);
   x2.text(selection.x2);
   y2.text(selection.y2);
   w.text(selection.width);
   h.text(selection.height);
 }
 


 $j(document).ready(function () {
   x1 = $j('#x1');
   y1 = $j('#y1');
   x2 = $j('#x2');
   y2 = $j('#y2');
   w = $j('#w');
   h = $j('#h');
 });
 
 $j(window).load(function () {

   $j('img#wizard:wizard-body:recorte').imgAreaSelect({ selectionOpacity: 0, onSelectChange: selectChange });
 });
</script>


</f:verbatim>

<%@ page import="org.alfresco.web.ui.common.PanelGenerator" %>

<f:verbatim>   
<table cellpadding="2" cellspacing="2" border="0" width="100%">
 <tr>
    <td class="mainSubTitle">
       </f:verbatim><h:outputText value="#{msg.edit_file_title}" /><f:verbatim>
    </td>
 </tr>
 <tr>
    <td style="padding:10px" valign="middle">

       </f:verbatim>
       
          <h:graphicImage id="recorte" url="#{WizardManager.bean.browserUrl}"/>

          <f:verbatim>
    </td>
 </tr>
 <tr>
    <td>
       </f:verbatim><h:outputText value="#{msg.edit_download_complete}" /><f:verbatim>
    </td>
 </tr>

</table>
</f:verbatim>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Which is an translation for Alfresco of the hml code we have generated and wich works fine:


<HTML>
<HEAD>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery.imgareaselect-0.6.2.min.js"></script>
<script type="text/javascript">

 var $j = jQuery.noConflict();
 var x1, y1, x2, y2, w, h;
 
 function selectChange(img, selection)
 {
   x1.text(selection.x1);
   y1.text(selection.y1);
   x2.text(selection.x2);
   y2.text(selection.y2);
   w.text(selection.width);
   h.text(selection.height);
 }
 


 $j(document).ready(function () {
   x1 = $j('#x1');
   y1 = $j('#y1');
   x2 = $j('#x2');
   y2 = $j('#y2');
   w = $j('#w');
   h = $j('#h');
 });
 
 $j(window).load(function () {

   $j('img#recorte').imgAreaSelect({ selectionOpacity: 0, onSelectChange: selectChange });
 });
</script>

</HEAD>
<BODY>
   
<table cellpadding="2" cellspacing="2" border="0" width="100%">
  <tr>
    <td style="padding:10px" valign="middle">
          <img id="recorte" src="noticia.jpg"/>
   </td>
 </tr>
 </table>
</BODY>
</HTML>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

However we are not still getting it to work in the Alfresco JSP file, when we try to select the area of the image, we still drag the image with us, it is like if the image is not correctly passed as a parameter to the scripts in the


$j(window).load(function () {

   $j('img#wizard:wizard-body:recorte').imgAreaSelect({ selectionOpacity: 0, onSelectChange: selectChange });
 });
‍‍‍‍‍‍

we also tried to use

$j('img#recorte').imgAreaSelect({ selectionOpacity: 0, onSelectChange: selectChange });

as I have explained before, we are not sure which "id" we should use.

We are using Firebug as you suggested, thanks a lot btw!!

And what we can see is that the $J variable is "undefined" when the JSP page gets loaded

We are quite stucked now, is there any documentation you would suggest us to read to get this moving??? Are you aware of any implementation made before of Jquery with Alfresco?

Thanks a lot again!

mikeh · ‎02-12-2009

To be honest, I haven't got enough experience with jQuery to know what it's doing without debugging it myself.

Firebug does include a JavaScript debugger too, which it might be worth your while investigating. You can also check the jQuery js files are being loaded correctly, etc.

Thanks,
Mike

marcus · ‎02-12-2009

1). I think the way you're including jQuery is incorrect; you can't use a relative path to it because the URL that JSF uses is totally different from that of the JSP that's actually being viewed. You'll need to use an absolute path, similar to the following (where the jquery library is in the top level scripts folder of the alfresco driectory)

<script type="text/javascript" src="<%=request.getContextPath() %>/scripts/jquery-1.2.1.pack.js"></script>

2) It's hard to refer to JSF controls by id values, because JSF can munge the output ID value. Double check the actual ID on the image as output by the h:graphicImage is the same that you're specifying. I found that it was easier to use the JSF styleClass attribute and do selection by class instead of id, as the class always comes out as specified.

Hope that helps somewhat!

jlabuelo · ‎02-13-2009

Hi Marcus

Thanks a lot, we got the first issue to work, and now the Scripts are being recognized by the JSP page in Alfresco. We are debugging the application with Firebug and we can see that the Jquery functions and the variables are now working…

The only detail we have left is passing the image we show as a parameter to the $j function.

Yes we are using the id in

<h:graphicImage id="recorte"  url="#{WizardManager.bean.browserUrl}"/>‍

so we can call the Jquery function in our code:

$j(window).load(function () {

   $j('img#wizard:wizard-body:recorte').imgAreaSelect({ selectionOpacity: 0, onSelectChange: selectChange });
           
 });‍‍‍‍‍

So when we execute Alfresco, and we open the code produced with Firebug we can see that the gaphicimage gets translated to:

<img id="wizard:wizard-body:recorte" src="/alfresco/d/d/workspace/SpacesStore/769aa7a0-7e50-4c21-a41e-42694b4c0edd/noticia.jpg" />
‍‍

and the Jquery function references the img id as

$j(window).load(function () {

   $j('img#wizard:wizard-body:recorte').imgAreaSelect({ selectionOpacity: 0, onSelectChange: selectChange });
           
 });
‍‍‍‍‍‍

So for us the img should be passed correctly to the JQuery function, but is not.

Could you please pass us an example of how you would reference this image to the JQuery function, in the h:graphicimage using the JSF styleClass? or any place where we can see an example or documentation?

Thanks a lot once more, it has been great help!!

Hyland Connect

adding JavaScript to JSP Alfresco Pages