adding JavaScript to JSP Alfresco Pages

[jlabuelo]

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]

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

Thanks,
Mike

[jlabuelo]

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

[mikeh]

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

[jlabuelo]

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

[mikeh]

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

[jlabuelo]

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