Använda Alfresco som portal för webbapplikationer
10GMT260000000010
Kategorier : Tips och Tricks
Många av mina kunder har frågat efter ett enkelt sätt att integrera existerande webbaserade applikationer med Alfresco, så att Alfresco är den främsta vägen till alla applikationer. Jag har gjort det genom att anpassa verktygsraden Share Header för att lägga till länkar i en meny, och sedan visa dem i en iframe. Genom att använda en iframe så har du fortsatt tillgång till alla Alfresco menyerna för enkel navigering. Inte alla ppalikationer är iframe vänliga, så för dem så kan du lägga till länkar som öppnar den i separata fönster. Och ja, att lägga applikationer i en iframe är inte integration på riktigt, eller gör en äkta portalapplikation av Alfresco, men till nästan ingen kostnad alls så skapar det mervärde.
Det här inlägget visar hur du kan göra det, och också hur du kan använda de inbyggda mallarna (tillgängliga från 4.0.b), och den nya Surf extension mekanismen.
Alla sökvägar som anges nedan är class path relativa, om du redigerar direkt kan du använda tomcat/shared/classes/alfresco.
Starta genom att skapa en nu sida i site-data/pages kallad appintegrator.xml med innehåll
<?xml version='1.0' encoding='UTF-8'?>
<page>
<title>Application</title>
<description>Application</description>
<template-instance>1-column</template-instance>
<authentication>user</authentication>
<components>
<!-- Top -->
<component>
<region-id>title</region-id>
<sub-components>
<sub-component id="appintegratortitle">
<url>/components/title/simple-title</url>
<properties>
<title>Application</title>
</properties>
</sub-component>
</sub-components>
</component>
<!-- Column -->
<component>
<region-id>column</region-id>
<sub-components>
<sub-component id="appintegratoriframe">
<url>/components/appintegrator/iframe</url>
</sub-component>
</sub-components>
</component>
</components>
</page>
Som du kan se använder den sig av en template instance som heter 1-column, en av de out of the box mallarna som finns från 4.0.b så att vi inte behöver skapa egna mallar för vår nya sida. Erik Winlöf har skrivit mer hur du använder out-of-the-box mallar om du vill lära dig mer.
Den första komponenten i våran nya sida är en out of the box komponent i Alfresco som vi använder för att skapa en titelrad. Nästa komponent är ny och som vi skapar för att rendera vår iframe. Börja med att skapa filer i site-webscripts/org/alfresco/components/appintegrator
iframe.get.desc.xml
<webscript>
<shortname>appintegratoriframe</shortname>
<description>Application Integrator iFrame</description>
<url>/components/appintegrator/iframe</url>
</webscript>
iframe.get.html.ftl
<iframe id="${args.htmlid}-appintegrator" src="${protocol}${iurl}" scrolling="no"
marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0"
style="overflow:visible; width:100%; height:5000px"></iframe>
iframe.get.js
//The url argument is called iurl because there is a built in url object in Surf
var iurl = page.url.args.iurl !== null ? decodeURIComponent(page.url.args.iurl)
: "loftux.se";
var ssl = page.url.args.ssl !== null ? decodeURIComponent(page.url.args.ssl)
: "false";
if (ssl==="true") {
model.protocol="https://";
}else{
model.protocol="http://";
}
model.iurl=iurl;
Starta om Share, och nu skall du kunna navigera till http://localhost:8080/share/page/appintegrator?iurl=loftux.se&ssl=false. Som du kan se är det två argument, iurl är den url som du vill iframe skall ladda, och ssl true/false sätter protokollet till respektive https/http (du skall alltså inte ha med det i iurl).
Bara att sätta igång att lägga till länkar i Share Header, och du har alla dina webbapplikationer bekvämt samlade på ett ställe.
Men titelraden kunde gott ge lite mer information än bara ‘Application’, till exempel namnet och en beskrivning av den applikationen som för närvarande är laddad i iframe. Eftersom vi vill länka från Share Header, så vill vi skicka den informationen som argument i url:en. För det skapar vi en ny title component, skapa den i site-webscripts/org/alfresco/components/appintegrator. Den är väldigt lik originalet, bara ändrad så att den kan ladda argument från url:en.
appintegrator-title.get.desc.xml
<webscript>
<shortname>Simple Title</shortname>
<description>Simple generic title component that displays the title using the message keys passed in as url arguments</description>
<url>/components/appintegrator/appintegrator-title</url>
</webscript>
appintegrator-title.get.html.ftl
<div class="page-title theme-bg-color-1 theme-border-1">
<h1 class="theme-color-3"><span><#if page.url.args.title??>${page.url.args.title}</#if></span>
<#if page.url.args.subtitle??>${page.url.args.subtitle}</#if></h1>
</div>
För att ladda denna komponent, det ”gamla” sättet att göra detta vore att redigera mallen. Men eftersom vi använder out of the box mallar, så kan vi inte ändra dem. Men för 4.0 så finns en ny extension mekanism, som vi kan använda för att enkelt ersätta den existerande komponentet med vår egen utan att ändra mallen. För detaljer kring detta läs, read David Drapers blogg (första inlägget i en serie).
Så i site-data/extension lägger vi till filen
appintegrator.xml
<extension>
<modules>
<module>
<id>Loftux AppIntegrator</id>
<components>
<component>
<region-id>title</region-id>
<source-id>appintegrator</source-id>
<scope>page</scope>
<sub-components>
<!-- Remove default title -->
<sub-component id="appintegratortitle">
<evaluations>
<evaluation id="hidedefaulttitle">
<render>false</render>
</evaluation>
</evaluations>
</sub-component>
<!-- Add our new title -->
<sub-component id="appintegratortitlenew">
<url>/components/appintegrator/appintegrator-title</url>
</sub-component>
</sub-components>
</component>
</components>
</module>
</modules>
</extension>
Jag kommer inte gå in på detaljer för hur du hittar region-id, source-id och component id, för det rekommenderar jag Davids inlägg. Vad vi gör är att säga till Share att inte rendera ‘simple-title’ komponententen, här med namnet appintegratortitle, och iställer rendera vår egen title component. För att detta skall ta effekt, gå till http://localhost:8080/share/page/modules/deploy och gör aktivera (deploy) på Loftux Appintegrator modulen.
När vår tilläggsmodul är aktiverad, så kan vi lägga till två nya argument till url:en, title och subtitle som kommer visas i titelraden. Ingen av dem är obligatoriska, bara att använda dem du har behov av.
Din slutliga konfiguration för Share Header kan se ut ungefär så här (utdrag)
<item type="container" id="application" icon="appintegrator.png">
<container-group id="my" label="Internal Applications">
<item type="link" id="loftuxse" icon="appintegratorwindow.png" label="Loftux.se" description="Dokument och informationshantering"><![CDATA[/appintegrator?title=Loftux.se&subtitle=Dokumenthantering&iurl=loftux.se]]></item>
<item type="link" id="loftuxcom" icon="appintegratorwindow.png" label="Loftux.com" description="Document and Information management"><![CDATA[/appintegrator?title=Loftux.com&subtitle=Document%20management&iurl=loftux.com]]></item>
<item type="external-link" id="devcona" icon="appintegratorsplash.png" label="DevCon Americas" description="Alfresco DevCon Americas"><![CDATA[/appintegrator?title=Alfresco DevCon&subtitle=Americas&iurl=www.amiando.com/alfresco-devcon-san-diego-2011.html]]></item>
<item type="external-link" id="devcone" icon="appintegratorstar.png" label="DevCon EMEA APAC" description="Alfresco DevCon EMEA APAC"><![CDATA[/appintegrator?title=Alfresco DevCon&subtitle=EMEA%20APAC&iurl=www.amiando.com/alfresco-devcon-london-2011.html]]></item>
</container-group>
</item>
Detta renderar meny som visas i första bilden. Notera att du kan skapa länkar som visas i aktuellt fönster eller i nytt fönster/flik. Eftersom applikationerna ligger i en iframe så måste användare kunna surfa direkt till dem, så det lämpar sig inte när Share klienten ligger utanför brandväggen.
För det här Share tillägget kanske det hade varit enklare att skapa en egen template till vår iframe page. Då hade vi inte behövt använda Surf Extensions, men jag tror det kan vara ett bra exempel på hur du kan använda de nya funktionerna för tillägg i Share
Du kan ladda ner färdig kompilerad jar, konfiguration och all källkod här AppIntegrator.