Saturday Feb 14, 2009

Play FLV files using Web Content Display Portlet

Wanna add your favorite video onto the WebSpace Portal or display a flash video ad... follow these steps to add a simple flash player to play your flv files. For better understanding on using Content Management System, Web Content Display Portlet just skim through KLV's blog

Download and install latest webspace install here.

In this post I am going to use jw flash player for demo. Download the free player and do the following:

1. Upload player.swf(from downloaded jwplayer) to document library and note the url from the file details.

2. Upload your flv file to document library and note the url from the file details.

Create a Structure:

1. Login as admin@example.com

2. Go to Control Panel.

3. Select Web Content from left navigation under Content category.

4. Select Structures tab to create a new structure for FLV player user inputs.

5. Click on Add Structure.

6. Check Autogenerate ID, provide Name("FLV Player Structure") and Description.

7. Click on Add Row. Provide Name as "file". Select type from dropdown as "Text".

8. Click on Add Row again. Provide Name as "player". Select type from dropdown as "Text".

9. Click on Save.

Create a Template:

1. Select Templates tab -> Click on Add Template button.

2. In the Template form, check Autogenerate ID, Name("FLV Player"), Description.

3. Click on Select button and select the Structure created above.

4. Click on Launch Editor. Here you can create the vm template.

5. Clear the commented text and copy the following in it.

<embed width="100%" height="300" align="center" flashvars="file=$file.data" allowscriptaccess="sameDomain" allowfullscreen="true" wmode="opaque" scalemode="showall"
movie="$player.data" swliveconnect="false" salign="" menu="false" play="false" loop="true"
devicefont="true" bgcolor="#FFFFFF" base="." quality="best" name="player" id="player" style=""
src="
$player.data" type="application/x-shockwave-flash"/>

6. Click on Update button which closes the editor and Click Save button in the Template form.

We are ready to Add Content to the template which we have created just now.

Add Web Content:

1. In the same Templates tab Click on Actions button next to the template created above.

2. In the context menu populated select "Add Web Content".

3. In the Web Content form provide Name("My Video"), in File text field enter your flv file context path location, the document library url of flv video uploaded.

4. Provide the player URL with the document library url of player.swf file.

5. Click on Save and Approve button.

We are done with Control Panel part and now we are ready to display the video content onto the portal.

1. Go to your page or create a new page by clicking on Add Page.

2. Go to Menu -> Add Application -> Content Management and add Web Content Display portlet.

3. Click on Configuration on the portlet -> Select the WebContent("My Video") you created above.

4. We just added content to the Web Content Display portlet. Click on Return to full Page.



Monday May 19, 2008

Pentaho Flex Widget on Project WebSynergy

Project WebSynergy I've surely witnessed the goodness of flex charting and its so easy. Continued from my previous entry let's see now how flex charting helps us in achieving the RIA dashboard on Project WebSynergy. This blog is just a layer on top from my colleagues Sandeep's, Murali's blogs ;).

Flexification of a Pentaho Dashboard :)

  • Creating graphs with Adobe‚Äôs Flex Builder 3 is a pretty simple. A basic knowledge of mxml and actionscript combination will help us creating the dashboard.
  • Using the Flex Builder design the layout using drag and drop components. Drag and drop the type of charts onto the panel. This will generate the default code for charts with placeholders for the x-axis and y-axis.
  • //init() - event to handle any postprocessing tasks that must be performed after the component is completely created and initialized.

    private function init():void
      {

            //call the http service on pentaho xaction.
            trService.send();
      }

//<mx:itemClick> will get the clicked data item which can be used to drill down further.

// setter method will be called taking the input hitdata when an item is clicked 

<mx:PieChart id="territory" width="100%" height="100%" showDataTips="true" >
                   <mx:itemClick>
                    selectedTerritory = event.hitData.item.TERRITORY;
                    var explodeData:Array = [];
                    explodeData[territoryRevenue.getItemIndex(event.hitData.item)] = 0.15;
                    territory.series[0].perWedgeExplodeRadius = explodeData;
                    </mx:itemClick>

// Understand the SOAP response/xaction before filling in the placeholders and fields which will represent the data on the graph
                <mx:series>
                        <mx:PieSeries nameField="TERRITORY" field="SOLD_PRICE" labelPosition="callout"         showDataEffect="{plEffect}" labelField="TERRITORY"/>
                    </mx:series>
                </mx:PieChart>

  • Use <mx:HTTPService> to make a pentaho xaction call. This will return a SOAP response which can be easily handled by ResultEvent. 
    • <mx:HTTPService id="trService" url="http://localhost:8080/pentaho/ServiceAction?solution=samples&amp;path=steel-wheels/dashboards&amp;
      action=Sales_by_Territory.xaction&amp;userid=joe&amp;password=password" result="
      handleTRResult(event)"/>

         //   Action script method handles the result event after executing the httpservice call.

    • private function handleTRResult(event:ResultEvent):void
            {
              territoryRevenue = new ArrayCollection();
              territory.dataProvider = territoryRevenue;
              // Creates an array collection parsing the node tree of the SOAP response headers
              var hdrTR:ArrayCollection =     event.result.Envelope.Body.ExecuteActivityResponse.swresult['COLUMN-HDR-ROW']['COLUMN-HDR-ITEM'];
             
              for each (var plDat:Object in event.result.Envelope.Body.ExecuteActivityResponse.swresult['DATA-ROW'])
              {
                var pl:Object = new Object();
                pl[hdrTR[0]] = plDat['DATA-ITEM'][0];
                pl[hdrTR[1]] = plDat['DATA-ITEM'][1];
                territoryRevenue.addItem(pl);
              }
            }
  • Now once all the charts on the dashboard are well coordinated and connected save the mxml file and follow the Murali's process.



Tuesday May 13, 2008

Enterprise Dashboarding on Project WebSynergy

Project WebSynergy In order to achieve Enterprise Dashboarding in Project WebSynergy, we used Pentaho, MySQLGlassfish and JFreeCharting
Let's see how we did that.

Pentaho Open BI Suite:

The Pentaho Open BI Suite provides a full spectrum of business intelligence (BI) capabilities including reporting, analysis, dashboards, data mining, data integration, and a BI platform that have made it the world's most popular open source BI suite. For more information, please refer here

Pentaho Dashboards include navigation and viewer components for reporting and analysis that can be integrated into portals or web pages includes JSR-168 compatible portlets and example Java Server Pages (JSPs) that use these components.

Setup a pentaho installation. Check Glassfish-Pentaho installation here. I have installed pentaho on a Glassfish v2 with backend database as MySQL.

  1. Creating a Pentaho Solution:

  • I have chosen an exisiting solution for a demo. Alternatively, one can create a Pentaho solution using pentaho design studio. This demo uses ServiceAction provided by Pentaho as a webservice to expose a particular xaction in a solution. Now take an existing pentaho dashboard e.g. Revenue Analysis sample. If you want to look at the dashboard functionality, have a look at http://<PentahoHost>:<Port>/pentaho/SWDashboard

  2. Drawing Charts:

  • To handle charting you can chose many ways. I have chosen JFreeChart for my example. This Pentaho dashboard portlet is an extended version of Sandeep's SDN article.


  3. Creating the dashboard:

  • For creating JFree Charts the data can be consumed from various sources viz. database result set, xml data. In our case, the data will be supplied by the Pentaho ServiceAction service. Process the SOAP message xml returned after executing the Pentaho xactions and transform it using a custom xsl into the JFreeChart xml data format. The transformed xml will be consumed by JFreeChart api.
  • Similarly by using JFreeChart's other apis, we can achieve drill down functionality.


Pentaho charting portlet on Sun's Project WebSynergy:

The new PortalPack NetBeans plugin helps you to develop and deploy portlets on Project WebSynergy in minutes.

Please view this screencast to get a brief preview of the above integration.

About

Chetan Chadalavada

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today