Alguna vez se nos ha ocurrido introducir algo de comportamiento din\u00e1mico en nuestro repositorio DSpace, ya sea para cambiar el comportamiento de la p\u00e1gina sin necesidad de cargar una nueva, o por el hecho de introducir efectos que solo javascript nos puede proporcionar.<\/p>\n
Si cumples las anteriores condiciones, entonces contin\u00faa leyendo esta mini gu\u00eda en la cual explico de una forma muy simple como introducir un fichero javascript para modificar el comportamiento en XMLUI.<\/p>\n
Antes de nada, es recomendable tener un conocimiento b\u00e1sico en lo referente a la creaci\u00f3n de temas en XMLUI, puesto que, para insertar un comportamiento javascript a DSpace vamos a tener que usar los temas ya definidos por DSpace (el m\u00e9todo recomendado es crear un tema nuevo copiando el existente y a partir de ah\u00ed, aplicar los cambios)<\/p>\n
Los ficheros que vamos a tener presentes son varios:<\/p>\n
[dspace-instalaci\u00f3n]\/webapss\/xmlui\/themes\/[nombre_del_tema]\/[nombre_del_tema].xsl<\/p>\n
[dspace-instalaci\u00f3n]\/webapss\/xmlui\/themes\/[nombre_del_tema]\/sitemap.xmap<\/p>\n
[dspace-instalaci\u00f3n]\/webapss\/xmlui\/themes\/[nombre_del_tema]\/lib\/fichero.js<\/p>\n
Para que no suene tan abstractas las rutas, vamos a tomar de ejemplo el tema Classic y hacer las modificaciones sobre \u00e9l, por lo que el primer fichero descrito antes ser\u00eda… (suponiendo que el dspace-instalaci\u00f3n est\u00e9 ubicado en el directorio ra\u00edz con nombre dspace)<\/p>\n
Classic.xsl<\/strong><\/p>\n Ruta: \/dspace\/webapps\/themes\/Classic\/Classic.xsl<\/em><\/p>\n En este fichero hemos de coger la informaci\u00f3n pertinente para luego poderle a\u00f1adir el comportamiento javascript. Por ejemplo si queremos que en el men\u00fa aparezca un icono * que al hacer click sobre \u00e9l nos despligue nueva informaci\u00f3n, hemos de coger el template correspondiente de la carpeta DRI que controla la zona del men\u00fa, pegarlo en nuestro fichero Classic.xsl y ah\u00ed lo editamos a\u00f1adiendo el icono *.(Insisto, esta parte requiere un conocimiento base sobre c\u00f3mo editar un tema en XMLUI)<\/p>\n Una vez introducido el componente por el cual nos comunicaremos con el javascript, solo nos falta a\u00f1adir el fichero javascript que controlar\u00e1 la funcionalidad. Este fichero se ha de colocar dentro de la carpeta del tema en cualquier ubicaci\u00f3n, aunque lo recomendable es usar la carpeta lib de cada tema.<\/p>\n Este fichero javascript una vez creado por el desarrollador, y ubicado en la posici\u00f3n del tema que queramos, lo \u00fanico que necesitamos para que funcione es relacionarlo con la informaci\u00f3n a\u00f1adida en el fichero XSL. Para hacer esto debemos de hacer la llamada a nuestro javascript desde el fichero XMAP, de tal forma que al pinchar sobre el icono *, este llame al javascript ubicado en la carpeta de nuestro tema a trav\u00e9s del fichero XMAP.<\/p>\n Esta llamada va a tener un aspecto tal que as\u00ed<\/p>\n <map:parameter name=\u00bbjavascript#2″ value=\u00bblib\/fichero.js\u00bb\/><\/em><\/p>\n En el ejemplo se llama a un fichero llamado fichero.js que est\u00e1 ubicado dentro de\u00a0 la carpeta lib de nuestro tema. He de decir que el name que se da en la llamada tiene que ser \u00fanico, si no, DSpace nos generar\u00e1 un error.<\/p>\n NOTA: En el ejemplo hemos puesto javascript#2 puesto que ya hay una declaraci\u00f3n posterior que es javascript (Esta hace referencia a jquery). El nombre que se le d\u00e9 siempre es conveniente que siga el patr\u00f3n siguiente: javascript#numero. El porqu\u00e9 hacerlo as\u00ed es muy simple: DSpace a la hora de montar la p\u00e1gina Web va a incluir esas llamadas a los javascript en el meta\u00a0 y est\u00e1s han de tener un orden l\u00f3gico (este orden coincide con el orden alfab\u00e9tico de las peticiones) puesto que si no, DSpace va a tener problemas a la hora de hacer llamadas a Javascript.<\/p>\n Vamos a ver un ejemplo del fichero Classic.xmap<\/p>\n <map:parameter name=\u00bbjavascript\u00bb value=\u00bblib\/jquery.js\u00bb\/><\/em><\/em><\/p>\n <map:parameter name=\u00bbjavascript#2″ value=\u00bblib\/fichero.js\u00bb\/><\/em><\/p>\n Este fragmento de c\u00f3digo se ha de introducir dentro de de una etiqueta del XMAP llamada<\/p>\n <map:transform type=\u00bbIncludePageMeta\u00bb><\/em><\/p>\n Ojo, que esta etiqueta viene definida dos veces dentro del fichero, ya que este fichero antes de aplicar nada, tiene que verificar en qu\u00e9 navegador se est\u00e1 trabajando, (diferencia entre IE6 y el resto de navegadores, por lo que se ha de incluir el fragmento de c\u00f3digo antedicho en ambas etiquetas)<\/p>\n Con todo esto ya podemos insertar de forma elegante c\u00f3digo DSpace dentro de un tema dado en XMLUI.<\/p>\n Ya para acabar, simplemente decir que si quer\u00e9is ver un ejemplo de c\u00f3digo javascript incluido dentro de un tema, pod\u00e9is consultar el c\u00f3digo fuente incluido en el tema Mirage, en el cual hay algo del comportamiento javascript montado tal y como acabo de relatar.<\/p>\n","protected":false},"excerpt":{"rendered":" Alguna vez se nos ha ocurrido introducir algo de comportamiento din\u00e1mico en nuestro repositorio DSpace, ya sea para cambiar el comportamiento de la p\u00e1gina sin necesidad de cargar una nueva, o por el hecho de introducir efectos que solo javascript …<\/p>\n