HOW TO: FlexSpaces in Liferay IFrame portlet
screencam video demo
I just tried a quick test of running FlexSpaces+Browser in a Liferay IFrame portlet. It worked! All features of flexspaces worked:
- Doc library, search, tasks, wcm views
- Drag/drop of files between dual panes, internal cut/copy/paste between spaces
- File upload, file download, file viewing, preview, play video
- Checkin, checkout, edit, cancel checkout, update, make versionable, version history panel
- Icon, thumbnail, grid list, cover flow view modes
- Search, advanced search, tag cloud, category navigation
- Create space, properties edit, tags/categories edit
- Make pdf, make flash, start workflow
- Coming flexspaces 0.8 features with Calais integraion (auto-tag, manual semantic tag properties edit, multiple semantic tag clouds)
Issues noticed: works best when portlet maximized, when not, doesn’t use full portlet area, when switching portlet between regular and max size looses login, liferay dialog not always on top of iframe/flash. Things might work better with the Liferay Flash portlet.
(Update 8/16/09: Added short term state save/restore in SharedObject of ticket/doclibPath/tabIndex in FlexSpaces. Now works much better (don’t loose login, view state when resize portlet. Used Liferay Flash portlet instead of IFrame portlet. Also Liferay dialogs z order was fine. Also would work with flexspaces webapp installed in either Liferay tomcat or in Alfresco tomcat (just different Flash portlet swf url config) )
Didn’t try more integrated approaches yet:
Webscripts as Liferay portlets on ecmarchitect.com
Full Integration of Liferay 5.1.2, Alfresco 3.0 E, SSO, LDAP
Use Liferay Flash portlet instead of iframe portlet
Config used: Alfresco enterprise 3.0 in one tomcat, Liferay 5.1.2 in another tomcat, windows vista
0. Install Alfresco enterprise or labs
1. Normal install of flexspaces+browser flexspaces dir in alfresco tomcat webapps area, flexspaces+browser 0.7
2. Flexspaces webscripts installed in alfresco, flexspaces 0.7 webscripts
3. Install separate liferay + tomcat bundle from liferay.com
4. I changed all the ports in liferay tomcat conf/server.xml to start with 9 instead of 8 (9080, etc.) to not conflict with tomcat running alfresco
4. Start alfresco tomcat
5. Start liferay tomcat and login email@example.com (password: test)
6. With liferay “Add application” add a IFrame portlet from the Sample category
7. Configure the portlet to have the source url: http://localhost:8080/flexspaces/FlexSpaces.html
8. Title of portlet can be changed to “FlexSpaces” by clicking on “IFrame” text in the title and editing
9. If portlets of the FlexSpaces individual views instead of all 4 views in one portlet, (or 2 views only in one portal, etc.) the srcUrl args doclib=true&search=true&tasks=false&wcm=false to FlexSpaces.swf can be used like in the flexspaces 0.7 page site components for share (See FlexSpaces Share integration blog post with screenshots)
Here is a sneak peak video of semantic auto-tagging and multiple semantic tag clouds coming in the next release of FlexSpaces+AIR / FlexSpaces+Browser. This uses the Calais Integration Alexander and I have been working on, the Open Calais service, and Alfresco. The Calais integration auto-tag action can also be used from the “run action” UI in the Alfresco web client (now called Explorer).
Things in the works: Flex UI for tag suggestions, storing URIs in the integration for future linked data use, storing geo-location info from Calais 3.1, and map UI to display geo-location points to filter search results.
The Calais integration amps including web scripts are in the Calais Integration forge project. Note we may use the Semantics for Alfresco merged project for certain pieces in the future. A google code project, semantics4alfresco has also been reserved. Current FlexSpaces downloads are in the FlexSpaces forge project. Its svn is in the flexspaces google code project.
Adobe is going to give more details about Genesis, their enterprise / collaborative / mashup AIR client next week at Adobe MAX. This client is supposed to be a free download with for pay SAAS collaborative services, and have an app catalog.
Although I assume it won’t be open source, I am curious how open and flexible it will be. Can it be used as a general flex based portal container? Can you customize the container or only just plug in Tiles? What apis will it have? Could you use it without their services and tie in your own SSO ?
I could do the portlets for the FlexibleShare project I have started on as Genesis Tiles (for Alfresco ECM, Alfresco Share collaboration, open source BI/reporting, etc). Maybe also have an open source Flex portal container supporting the Adobe Genesis Tile api (and support both Flex+AIR and Flex+Browser containers. Note: html embedded in Flex works best in AIR).
I have been prototyping using the Esria dashboard sample as a Flex based container with FlexSpaces components in pods (Alfresco DocLib, Search, Tasks, WCM). It works in AIR including drag/drop of desktop files into FlexSpaces pods. The DocLib and Search pods also support Adobe LiveCycle Content Services ES. The Alfresco Share UI works in this prototype currently in an HTML pod. I will be starting Flex versions of the Alfresco Share collaboration components (wiki, blog, calendar, discussions). Also have a JasperReports viewer pod based on a modified version of the flex based JasperReports flash viewer. There is also a Flex based Pentaho dashboard sample available. BIRT reports could be viewed as html or pdf, or with the Actuate interactive viewer.
The open source Anvil project (Flex MDI portal / Java backend framework) could be leveraged. Also found an interesting article about Flex based portals: “A new way to look at Portals“.
Some Genesis links
Blog: Code Name Genesis – The Future of the Enterprise Desktop
Demo of an early Genesis prototype
The Future of the Enterprise Desktop: The Elevator Pitch
Office 2.0 Conference: Adobe Genesis Unveiling
Teblog: Adobe Genesis addresses real needs
Adobe readying new mashup tool for business users | ITworld
Update: Newer Genesis Links
Genesis page on Adobe Labs
Genesis Overview Slides on SlideShare from Adobe MAX 2008
update 1/12/09: Genesis presentation at Adobe MAX 2008 on Adobe TV
HOW TO: Add support for Thumbnails and CoverFlow in FlexSpaces on Alfresco 2.x and Adobe LiveCycle Content Services ES using the Thumbnails project from the Alfresco Forge
DocLib Icon view with Show Thumbnails checked (modified FlexSpacesAir 0.7 running on LC CS with Thumbnails 0.5)
(these would look better with larger image files rather than just icon files)
DocLib CoverFlow view (modified FlexSpacesAir 0.7 running on LC CS with Thumbnails 0.5)
Currently FlexSpaces+AIR 0.7 and FlexSpaces+Browser 0.7 uses the thumbnail service added to Alfresco in 3.0 for thumbnails in its main icon view and in its coverflow view. The “View / Show Thumbnails” menu turns showing them on. These views are support int the DocLib view, search results, tasks attachments, and in the WCM view. If the version is less than 3.0 these features are disabled (LiveCycle Content Services is seen by the code as 2.1). (Note currently creating is thumbnails on upload is disabled FlexSpaces in UploadFilesDelegate.as until I can get this to work better). FlexSpaces will show thumbnails created on upload in Share (did not see any action in the newly named Explorer JSF web client 3.0 for thumb-nailing).
I added 2.x thumbnails sample code to flexspaces google code that make use of the Thumbnails 0.5 project in the Alfresco Forge. Swap in the 4 modified flex files into the 0.7 FlexSpaces source or FlexSpaces part of the FlexSpacesAir source and rebuild the flex builder project(s). (See the readme there). There is also a modification to the folderlist web script that you need to update the version of in /Company Home/ Data Dictionary / Web Scripts Extensions / integratedsemantics / folderlist.
Then install the Thumbnails 0.5. Its readme has instructions for installing on Alfresco 2.x. My readme has some additional install notes for the Thumbnails 0.5 project when installing it on LiveCycle Content Services (LC CS). Also if you want the modifications the thumbnails project did to the Alfresco jsp files you would have to manually merge in the changes to the LC CS contentspace versions of the files (don’t over-write the contentspace jsp files) Since I was just trying to get FlexSpaces work, I skipped this step. You will still have the “Create thumbnails of the item” action available in the contentspace app even if you skip merging the jsps.
On LC CS, you will get some extra authentication dialogs initially when viewing thumbnails. There is a Catch-22 of LC CS only having a saml “ticket” http header and not “alf_ticket” url arg that regular Alfresco has, coupled with the restrictions on the use of http headers with various Flex/Flash apis (HTTPService api, FileReference upload/download, and viewing with URLRequest navigateToURL). (For HTTPService used flex proxy as a workaround, FileReference upload/download and navigateToURL still looking for answers )
Note: FlexSpaces with LiveCycle CS on non localhost: for now, with the built 0.7 FlexSpaces / FlexSpacesAir will only work when setup on run with LC CS on a localhost test system. For instructions on how to rebuild it and configure for non local host config see this forum topic.
Something new is on the way: FlexibleShare
Flex based version of Alfresco Share / Flex based Portal Container (Open Source)
1. Dashboard dashlet/portlet drag /drop in Flex
2. Portlets in Flex and HTML/Ajax
3. Leverages FlexSpaces components
4. Leverages Alfresco Share (site model, rest apis, surf, dashlets),
5. Additonal Flex components for wikis, blogs, discussions, calendar
6. Leverage Liferay, (supports jsr-168, wsrp) in a later stage
7. Reporting/BI (JasperReports, Pentaho, BIRT)
8. BPM (JBoss jBPM in Alfresco)
9. Desktop drag/drop of files with AIR
Registered a google code project http://code.google.com/p/flexibleshare/ and an Alfresco forge project http://forge.alfresco.com/projects/flexibleshare/
Note on the name: Alfresco Share and Surf are already “flexible” (in the able to adapt to new situations sense). Also you can implement Share/Surf components/dashlets with Flex (as I did with the FlexSpaces page site components). The difference with FlexibleShare is that the container itself is in Flex and the primary way for implementing dashlet/portlet UI is Flex (and Flex+AIR). Surf dashlets and Liferay portlets in HTML/Ajax are still supported.
Other things: the use of a web-tier Flex compiler (like the Flex plugin for Grails does) could be used to allow Flex forms/UI to be added (and compiled automatically) without having to use a development tool. BlazeDS support like in this plugin would also be nice too for higher performance data transfer.
Update: See description of FlexibleShare prototyping mentioned in my Genesis / Flex Portals / Open Source blog post.