AnsweredAssumed Answered

adding JavaScript to JSP Alfresco Pages

Question asked by jlabuelo on Feb 11, 2009
Latest reply on Feb 20, 2009 by 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>

Outcomes