Blogg

Alfresco och ECM

Media Viewers – exempel på hur det ser ut

12GMT030000000012

Kategorier :

Jag har jobbat tillsammans med Will Abson på Share Extras och Media Viewers projektet. Will har tidigare presenterat det här tillägget i detta inlägg. Så nu kommer jag ge er chansen till prova direkt själva med hjälp av den nya Quick Share-funktionen från Alfresco 4.2. (det här kör 4.2.c från HEAD.) Det är det jag kommer fokusera på i detta inlägg, och jag kommer inte gå in i detalj om hur man konfigurerar, du kan hitta information om det på Media Viewers-webben, och på Wills blogg. Alla viewers jag går igenom nedan är inkluderade i Media Viewers-paketet.

Jag vill börja med att prata om en av de Viewer, Embed, som är en av de enklare men samtidigt kraftfulla. Den gör just det, tar dokumentinnehållet och laddar in det i en iframe. Detta betyder att webbläsaren startar en plugin och renderar. Vi börjar med ett exempel för html. Vanligtvis skulle html-filen konverteras till flash, med med denna konfiguration visas den som den är.

<condition mimeType="text/html">
    <plugin testPluginAvailability="false">Embed</plugin>
</condition>

→ Testa HTML Embed exempel.
Egenskapen (property) testPluginAvailability=”false” betyder att Embed-visaren skippar testen ifall en plugin är tillgänglig, vi behöver inte detta eftersom html alltid kan visas av webbläsaren. Och bara ändra konfigurationen till
mimetype=”text/plain” och du har samma för vanliga textfiler (visade direkt i webbläsaren instället för konverterade till flash). Notera att Alfresco tvättar bort vissa html-taggar av säkerhetsanledningar.

Men om du har ett dokumentformat och har installerat en speciell visare? I detta exempel använder jag Visio, och har installerat en gratis viewer från Microsofts hemsida.
→ Testa Visio exempel.

<condition mimeType="application/vnd.visio">
    <plugin testPluginAvailability="true" ieActiveX="VisioViewer.Viewer.1">Embed</plugin> 
</condition>

Att skriva testPluginAvailability=”true” betyder att Embed-visaren kommer testa om den speciella visaren faktiskt är tillgänglig. Inställningen ieActiveX=”VisioViewer.Viewer.1″ är vad som testas efter i Internet Explorer.

Det är ActiveX strängen som hittas i Windows-registret, du kan lägga till flera ActiveX strängar separerade med komma, Embed Viewer kommer testa var och en av dem om de är tillgängliga. För andra webbläsare testar den om en passande plugin är tillgänglig genom mimetypen

Om du inte använder Windows, använd IE och ha inte Visio Viewer installerad, visaren har troligtvis använt funktioner att ”falla tillbaks”, test efter tillgängliga Viewers i tur och ordning, och du kommer se den använde PdfJs-visaren (och så vidare, se nedan).

Nu för lite av PdfJs magi. I Media Viewern så har vi inkluderad pdf.js biblioteket och skapat vad vi kallar The PdfJs Viewer som visar pdf-dokument och andra dokument som kan bli konverterade till pdf direkt i webbläsaren.

<condition thumbnail="pdf">
    <plugin src="pdf">PdfJs</plugin>
    <plugin src="pdf" testPluginAvailability="true">Embed</plugin>
    <plugin src="webpreview" paging="true">WebPreviewer</plugin>
</condition>   
<!-- PdfJS viewer for PDF --> 
<condition mimeType="application/pdf">
    <plugin>PdfJs</plugin>
    <plugin testPluginAvailability="true">Embed</plugin>
    <plugin src="webpreview" paging="true">WebPreviewer</plugin> 
</condition>

Det denna konfiguration gör är att den först testar om PdfJs-Viewerne kan användas (Det kräver minst en html5-anpassad webbläsare). Om inte, använder den Embed-viewern jag skrev om ovan. Den har inbyggda IE-test för PDF Reader och Foxit Reader, om du har andra behöver du specificera dem. För andra webbläsare görs Embed-test med mimetype, så ingen konfiguration behövs.

Om de två första testen misslyckas använder den Alfrescos standard flash-baserade viewer.
Jag föreslår att du försöker visa dessa exempel med olika webbläsare, och om möjligt båda med och utan en pdf-reader installerad, och du borde se en del av fallback-mekanismen.

→ Testa Stor dokument 151 sido.
→ Testa Dokument med mycket grafik.

Den här tar lite tid att rendra en förhandsgranskning av med hjälp av PdfJs. Jag fick den att funka på iPad också, men det tar ett par minuter innan förhandsgranskningen är komplett.

→ Testa Presentation.

Med denna, testa att zooma ut, och du kommer se hur snyggt sidorna bläddrar (tack till Will Absons css-magi). Notera att du bara kan se detta om din webbläsare stödjer PdfJs.

Det är många fler sorters visare inkluderade i Media Viewers-projektet. För tillfället behöver du (ladda ner/skaffa) källkoden och kompliera den själv för att använda funktionerna som visas här.
Och om du glömde testa the sökfunktionen med syntax-highlighting i PdfJs-visaren, så är det dags att återbesöka en av länkarna ovan med en html5-kapabel webbläsare.


Kategorier

Arkiv