view counter

Coverflow of UCM Images

Thanks to Reiner Ernst for this story

In my last blog we saw how easy it is to call a web service of the Oracle Content Server (OCS) from within a Flex application. Can we use the same concept for a nice pictureflow Flex application, that uses an OCS query to show selected images ? Of course we could, but the disadvantage of calling a web service would be, that the user would need to be logged in and authenticated – he would get an authorization popup otherwise. May be we want to show this pictureflow component also to anonymous visitors of SiteStudio websites, so we need to find an alternative solution.

view counter

A nice and easy alternative is to use the OCS RSS capabilities to generate RSS feeds for any query with a sample component you can find on the samples page for Oracle Universal Content Management. There are enough Flex examples how to read and parse RSS feeds. You can also find an interesting Flex component and library for coverflows from Doug McCune here. It sounds easy to combine these three concepts and in fact it is.

The OCS RssFeeds component supports a new service called GET_SCS_FEED. You can actually generate a URL to call this service just by doing a query in OCS and use the link of the XML button on the search results screen. You will get something like http://your_ocs_server/idc/idcplg?IdcService=GET_SCS_FEED&feedName=search_results&QueryText=some_query. Now you can call this URL also from an unauthenticated browser and get only search results for public content – that is what we need for our SiteStudio website.

So let´s have a look at the Flex code calling this OCS service and parsing the result:

		    public function parseRSS():void {
		    	var url:String = ocsUrl + "?IdcService=GET_SCS_FEED&feedName=search_results&QueryText=" + queryText + "&SortField=dInDate&SortOrder=Desc&ResultCount=30&SearchQueryFormat=UNIVERSAL";
		    	var rssXMLURL:URLRequest = new URLRequest (url);
		    	rssLoader = new URLLoader(rssXMLURL);
		    	rssLoader.addEventListener("complete", createPanels);
		    }

		    public function createPanels(evtObj:Event):void {
		    	rssXML = XML(rssLoader.data);

				// .... some more code, download full example

				for each (var item:XML in rssXML..item) {
					var newPanel:Panel;
					var newImage:Image;
					var newLabel:Label;
					var itemLink:String = item.link.toString();
					// here is a little bit of parsing magic to get ID and DocName ...
					var indexOfID:int = itemLink.indexOf("dID=",0) +4;
					var endIndexOfID:int = itemLink.indexOf("&",indexOfID);
					var itemID:String = itemLink.substring(indexOfID,endIndexOfID);
					var indexOfDocName:int = itemLink.indexOf("dDocName=",0) +9;
					var endIndexOfDocName:int = itemLink.indexOf("&",indexOfDocName);
					var itemDocName:String = itemLink.substring(indexOfDocName,endIndexOfDocName);

					// create visible components
					newPanel = new Panel();
					newPanel.width = 300;
					newPanel.height = 300;
					newPanel.title = item.title.toString();
					newImage = new Image();
					newImage.width =200;
					newImage.height = 200;
					newImage.autoLoad = true;
					newImage.scaleContent = true;
					newImage.buttonMode = true;
					newImage.addEventListener(MouseEvent.CLICK, imageClicked);
					newImage.data = itemID;
					newImage.source = ocsUrl + "?IdcService=GET_FILE&dDocName=" + itemDocName + "&dID=" +  itemID + "&RevisionSelectionMethod=specific&Rendition=Preview";
					newPanel.addChild(newImage);
					newLabel = new Label();
					newLabel.text = "Autor: " + item.author.toString();
					newPanel.addChild(newLabel);
					newLabel = new Label();
					newLabel.text = "Date: " + item.pubDate.toString();
					newPanel.addChild(newLabel);
					coverflow.addChild(newPanel);
					coverflow.segments = coverflow.segments + 1;
				}

				// .... some more code, download full example

			}

So in roughly 60 lines of Flex code we´re reading in an RSS feed from OCS, parse it and generate visible Flex components for the items in the result list. Please note that I´ve used the “Preview” rendition of digital images for this example component, so the Digital Asset Management application module for OCS must be installed and the query should search for digital images. You could also simply use the “Thumbnail” rendition for any document type and it would work similarly, even for office documents, for which OCS generates thumbnails of the first page

To make the example more complete I´ve used variable Flex arguments to pass in the base URL to OCS, the query and even the flowtype “CoverFlow”, “VCoverFlow” or “Carousel”. SortField is not yet implemented. You can find the Flex builder project here. The main source code for this example is RssPictureFlow.mxml, but you can also find a file PictureFlow.mxml using web services and the original CoverFlow_FlexControls.mxml from Doug McCune.

An example SiteStudio fragment, including the compiled RssPictureFlow.swf file, can be found here. The fragment uses the script variables $flowType and $QueryText, which could be defined in the SiteStudio template or provided by SiteStudio authors using custom and query elements.

Read the entire article at its source

view counter