Flexify Your Portlets

Yeah i finally got a chance to try out flex and i should say  that it was simply superb.The inspiration for this was my Guru's blog .Resources which were very handy while doing this were Flex starter's Guide and All Packages.

 My requirement was to use an xml and then display it in a table using flex.My xml is dynamic so i wrote a servlet which prints out an xml file.

The doPost method in Servlet:-

         response.setContentType("application/xml");
         PrintWriter out = response.getWriter();
         String xml = Your logic for returing an xml string.
          out.println(xml);

Then in the flex builder i created a new project and in the MXML file i used HTTPService provided by flex to read the xml .

   <mx:HTTPService  id="bs" url="http://localhost:8080/myservlet"
        invoke="bsInvokeHandler(event);"
        result="bsResultHandler(event);"
        fault="bsFaultHandler(event);"

    />

My xml file had the structure

<Rows>

<Row>

<Attachments>asdf</Attachments>

<Title>title</Title> 

</Row>

</Rows>

So in the Result handler script i get hold of the all Row items and assigned them to a variable using

flexRows = event.result.Rows.Row;

 And then to display these in a table i used DataGrid in flex

<mx:DataGrid dataProvider="{flexRows}" id="flexGrid">
            <mx:columns>
                <mx:DataGridColumn headerText="Attachments" dataField="Attachments"/>
                <mx:DataGridColumn headerText="Title" dataField="Title"/>
              
            </mx:columns>
        </mx:DataGrid>
 

 so now when i run the webapp it started displaying all the rows fantastically.But what i wanted was to get this UI in a portlet.So now let us convert this to a portlet.

In the flex project of flex builder there is a "bin" directory where all the output files are generated by flex.Take that whole directory and place it in your portlet and if the mxml file name was "MyFlexExample.mxml" you will find a file  named MyFlexExample.html.

So rename that .html file as .jsp and make it the view page of your portlet and place the needed portlet taglibs at the top of that page.

<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet" %>
<portlet:defineObjects/>
<portlet:renderURL var="portletUrl"/>

And now you will find references to files(AC_OETags.js,history.js,MyFlexExample)  in this jsp .In my case i copied all the files in the bin directory to "flex" directory under "web-src" of my portlet so finally when deployed i will have all these files under flex directory from root.So i encoded all the path's of these files and assigned them to some variables.

<%
    String aoetags = renderResponse.encodeURL(renderRequest.getContextPath()+"/flex/AC_OETags.js");
    String history = renderResponse.encodeURL(renderRequest.getContextPath()+"/flex/history.js");
    String swffile = renderResponse.encodeURL(renderRequest.getContextPath()+"/flex/MyFlexExample");
%>

 

So now modify the jsp page where it refers to these files using the variables defined.You can download my modified jsp page from here.And cool now your portlet is flexified.Njoy. 

Have a look at how my portlet looked after flexifying it.

 

 


  

  
 

Comments:

Nice one murali. I previously tried to convert a flex application into a portlet but encountered some problems and now after going through the steps it became much more clearer.

Posted by Uday on August 01, 2007 at 10:11 PM PDT #

Hi,
Thanks for your notes. I used it to put some portlet on JBoss Portal 2.6.1 GA. It works on FireFox, but not on IE7. Maybe I am hitting a JBoss Portal bug. http://jira.jboss.com/jira/browse/JBPORTAL-1458

It seems you are using Sun Portal Server. Are you having the same problem?

Posted by Hai Wu on September 20, 2007 at 08:26 PM PDT #

Hi HaiWu,

No i din't face this problem in SunPortal Server but i have a small question if you are converting this into a portlet i suppose that you are using

renderRequest.encodeUrl("/portal/content/default/images/test.swf"). instead of directly using this as mentioned in that bug.

<embed src="/portal/content/default/images/test.swf"

Posted by murali529 on September 20, 2007 at 10:34 PM PDT #

I just put the swf file on top of WEB-INF per some advice from JBoss, so that I don't have to upload it via JBOSS CMS. Then I used almost same thing mentioned in here to refer to test.swf. Eventually it would end up as <embed src="/flexportlet/test.swf" ... because the javascript function in AC_OETags.js file will convert it.

Posted by Hai Wu on September 20, 2007 at 11:58 PM PDT #

Hi Murali,

I am using flex programmer and a complete non java guy. I am unable to get the app running after doing all that is mentioned in your tutorial. Can you please put in some detailed example of where to put the java files and the flex bin files.

Thanks for the help in advance
stranger

Posted by stranger on December 10, 2007 at 12:01 PM PST #

Hi,

Nice post. You can try using LCDS. LCDS has the classes required by the portal engine already created. All you need to do is to create a Flex application and add an entry in the portal deployment descriptor file. LCDS will handle all the view, edit and help modes for you. It will also send the current window state (minimized, maximized or normal) of your Flex portlet into your Flex application. Using the window state you can change the view of your Flex application.

Posted by Sujit Reddy G on March 18, 2008 at 08:34 PM PDT #

Hi Sujit,

What is this LCDS ? Can you point me to some location where i can have at that.

Thanks
Murali

Posted by murali on March 18, 2008 at 08:41 PM PDT #

Hi Murali,

LiveCycyle Data Services(LCDS) is a product from Adobe. It is a J2EE application, which will help you do lots and lots of stuff. Believe me you will love this product. Please find out more details on LCDS at this URL: http://www.adobe.com/products/livecycle/dataservices/

Of course LCDS is a proprietary software. You can try using BlazeDS, which is a cut down version of LCDS. Please find out more details on BlazeDS at this URL: http://opensource.adobe.com/wiki/display/blazeds/BlazeDS

BlazeDS is open source :). You can invoke Java methods directlr from your Flex applications using BlazeDS. :) BlazeDS handles all the serializing and deserializing between the Java objects and AS objects :)

Please find more information on how to use BlazeDS and how to connect to back end servers from Flex applications on my blog: http://sujitreddyg.wordpress.com

Hope this information helps.

Posted by Sujit Reddy G on March 19, 2008 at 04:03 PM PDT #

Hi Murali - I am Raghu, a part of the Flex Team here in Bangalore. Lets get together sometime and do some coding on Flex & the portal stack that you mentioned. I'll just leave this idea on sandeep's blog too...

Posted by Raghu on April 16, 2008 at 05:37 PM PDT #

Sure Raghu.It will be a great synergy to leverage both these technologies.Actually sandeep is out of station so i will ping him as soon as he comes may be next week and let you know.Till then we can be in touch through mails.

Posted by murali on April 16, 2008 at 06:50 PM PDT #

Hi Murali,
In my lately project, i used flex3,but when i deployed the flex application in websphere portal, the client side couldn't communicate the
server side via the RPC service. The error indicated AMF can't find.
Maybe you can send a email to me(vinson_wang@163.com),i can recountal it.Thanks!

Posted by daniel.wang on July 27, 2008 at 01:17 AM PDT #

Hi Daniel,

What is the error you are getting? Please let us know the error message you are receiving. Are you using BlazeDS/LCDS ? Few things from top of my mind are to

1. check out if you have deployed BlazeDS/LCDS properly
2. Check out if the end point URLs for the channels used are properly configured

Hope this helps.

Posted by Sujit Reddy G on August 01, 2008 at 04:42 PM PDT #

You could also take a look at this post to see how to use BlazeDS LCD services via WSRP as well.
http://my.lyfam.com/drupal/node/19

Posted by Doug on July 17, 2009 at 04:34 AM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed
About

murali529

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