topic Re: adding JavaScript to JSP Alfresco Pages in Alfresco Archive

adding JavaScript to JSP Alfresco Pages

jlabuelo — Wed, 11 Feb 2009 13:18:20 GMT

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

Re: adding JavaScript to JSP Alfresco Pages

mikeh — Wed, 11 Feb 2009 14:12:49 GMT

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

Re: adding JavaScript to JSP Alfresco Pages

jlabuelo — Wed, 11 Feb 2009 15:22:50 GMT

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

Re: adding JavaScript to JSP Alfresco Pages

mikeh — Wed, 11 Feb 2009 15:42:45 GMT

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

Thanks,
Mike

Re: adding JavaScript to JSP Alfresco Pages

jlabuelo — Wed, 11 Feb 2009 18:00:40 GMT

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

Re: adding JavaScript to JSP Alfresco Pages

mikeh — Wed, 11 Feb 2009 20:30:00 GMT

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

Re: adding JavaScript to JSP Alfresco Pages

jlabuelo — Thu, 12 Feb 2009 16:56:15 GMT

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!

Re: adding JavaScript to JSP Alfresco Pages

mikeh — Thu, 12 Feb 2009 19:37:38 GMT

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

Re: adding JavaScript to JSP Alfresco Pages

marcus — Fri, 13 Feb 2009 00:53:14 GMT

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!

Re: adding JavaScript to JSP Alfresco Pages

jlabuelo — Fri, 13 Feb 2009 09:32:44 GMT

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!!

Re: adding JavaScript to JSP Alfresco Pages

mikeh — Fri, 13 Feb 2009 09:47:52 GMT

Add a "unique" class attribute to the image, e.g. class="jlabuelo". Then select it with $j(".jlabuelo").

Thanks,
Mike

Re: adding JavaScript to JSP Alfresco Pages

jlabuelo — Fri, 13 Feb 2009 10:29:45 GMT

Hi Marcus and Mike

Thanks a lot, it works now!!! we are able to open an image and select an area!!!

Thanks mates, it has been a great help from you!!

Re: adding JavaScript to JSP Alfresco Pages

mikeh — Fri, 13 Feb 2009 12:17:44 GMT

Excellent news!

Please consider contributing your new wizard if you think it appropriate to do so - I'm sure others will find this useful.

Thanks,
Mike

Re: adding JavaScript to JSP Alfresco Pages

jlabuelo — Fri, 13 Feb 2009 12:21:14 GMT

Hi Mike

Sure, if I got this to work it is thanks to the community, How can I share my jsp configuration? Could you please point me to the documentation, place where I can upload this?

Cheers

Re: adding JavaScript to JSP Alfresco Pages

mikeh — Fri, 13 Feb 2009 12:33:16 GMT

Please see: http://wiki.alfresco.com/wiki/Source_Code

Generally you'd raise a JIRA ticket under Alfresco Labs / Contribution and attach everything to that. You then get notified when we add it to SVN.

Thanks again,
Mike

Re: adding JavaScript to JSP Alfresco Pages

jlabuelo — Fri, 20 Feb 2009 11:30:19 GMT

Hi again guys

Thanks for sending me the information about how to upload the wizard we are creating. I will do it as soon as we finish it… we are pretty close !!!

Basically we are getting a problem as what we try to get is showing the image file in Alfresco and let the user select an area as we got thanks to your help.

However now that we are able to get the coordenates of the area using JQuery, we are stucked trying to produce a new jpg file with the area created.

Could you please take a look to this post we have opened about how to get the file of a NodeRef so we can use the Image java class to create a new Image object passing the file?
http://forums.alfresco.com/en/viewtopic.php?f=12&t=17105

Bassically what we need now that we got the area selected is Java to produce a new file with only that area from the original image file.

Thanks a lot again in advance