Wednesday Aug 01, 2007

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.

 

 


  

  
 

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