Manipulating Portlet Preferences using Adobe Flex application

I built this PortletPreferencesFlex sample portlet to demonstrate how you can manipulate the Portlet Preferences from the Flex application.

You can download the sample application from here

  1. PortletPreferencesFlex portlet

  2. Portlet Preferences Flex code

The sample portlet has two things first, when you click on the Print Preferences button it will get all the preferences for the user and list them in the Grid. You can add new preference by entering value of preference Name and value and then clicking on the Add preference button.

In this sample application i am using the Client Side API for Preference Management and the JavaScript to Flex communication for getting as well as setting preferences.

I followed these steps to create the sample application

  • First i did develop a FlexPortletPreferences portlet like this

    public class FlexPortletPreferences extends GenericPortlet{
    protected void doView(RenderRequest request, RenderResponse response)
    throws PortletException, IOException {
    System.out.println("Entering FlexPortletPreferences.doView()");
    getPortletContext().getRequestDispatcher("/preference.jsp").include(request, response);
    System.out.println("Exiting FlexPortletPreferences.doView()");

    This portlet is very simple only thing that it does is pass control to the preference.jsp in the doView() method

  • Then i did develop preference.jsp file like this

    <%@page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1" session="false"%>
    <%@taglib uri="" prefix="portlet"%>
    <%@taglib uri="" prefix="portletx"%>
    <portlet-client-model:require module="ibm.portal.xml.*" />
    <portlet-client-model:require module="ibm.portal.portlet.*" />
    <script language="javascript">
    function printPreferences(){
    var _portletWindow = new ibm.portal.portlet.PortletWindow("<%=portletWindowID%>");
    function printPreferencesCallback(portletWindow, status, portletPrefs){
    if (status==ibm.portal.portlet.PortletWindow.STATUS_OK) {
    var prefs = portletPrefs.getMap();
    var prefList = new Array();
    for (var i=0; i<prefs.length; i++) {
    prefList[i] = {"name":prefs[i].name,"values":prefs[i].values[0]};
    console.error("Error in getting preferences");
    function getFlexApp(appName){
    if (navigator.appName.indexOf ("Microsoft") !=-1){
    return window[appName];
    return document[appName];
    function loadPreferences(portletWindow, status, portletPrefs){
    console.log("Entering loadPreferences()");
    if (status==ibm.portal.portlet.PortletWindow.STATUS_OK) {
    var preferenceName = portletWindow.getAttribute("preferenceName");
    var preferenceValue = portletWindow.getAttribute("preferenceValue");
    alert("Error in loading preference");
    console.log("Entering loadPreferences()");
    function addPreferences(prefName, prefValue){
    console.log("Entering changePreference()");
    console.log("Preference Name " + prefName);
    console.log("Preference Value " + prefValue);
    var _portletWindow = new ibm.portal.portlet.PortletWindow("<%=portletWindowID%>");
    _portletWindow.setAttribute("preferenceName",prefName );
    _portletWindow.setAttribute("preferenceValue",prefValue );
    console.log("Exiting changePreference()");
    return false;
    <portlet:defineObjects />
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    id="PortletPreferenceFlex" width="750" height="500"
    <param name="movie" value='<%=renderResponse.encodeURL(renderRequest.getContextPath()+ "/PortletPreferenceFlex.swf")%>' />
    <embed src="<%=renderResponse.encodeURL(renderRequest.getContextPath() + "/PortletPreferenceFlex.swf")%>"
    width="750" height="500"
    name="PortletPreferenceFlex" align="middle" play="true" loop="false" quality="high"
    type="application/x-shockwave-flash" pluginspage="">

    Most of the JavaScript code in this file is same as Client Side User Preferences Manipulation with the difference that it has getFlexApp method which gives me the object of flex application. Inside the printPreferencesCallback method, first i am getting object of Flex application and then calling its displayPreferences() method with Array of the preferences. The displayPreferences() method is implemented in the flex application

  • Last and most important piece of the demo application is the PortletPreferenceFlex.mxml

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx=""
    width="100%" height="100%" initialize="initApp()">
    import flash.external.*;
    import mx.controls.Alert;
    public function initApp():void
    if (ExternalInterface.available){
    ExternalInterface.addCallback("displayPreferences", displayPreferences);
    //Event handler for handling button click
    public function getPortletPreference():void
    if (ExternalInterface.available) {
    // Make call to the printPreference method"printPreferences");
    } else"Error sending data!");
    public function displayPreferences(obj:Object):void
    dgPreferences.dataProvider = obj;
    protected function prefValue_clickHandler():void
    if (ExternalInterface.available) {
    // Make call to the printPreference method"addPreferences",prefName.text,prefValue.text);
    <mx:Panel id="pnlMain" width="600" height="324" layout="absolute" title="Portlet Preferences Example">
    <mx:Button label="Print Preference" y= "37" id="resourceUrl" click="getPortletPreference()" x="482"/>
    <mx:DataGrid id="dgPreferences" x="10" y="10" width="464" height="100">
    <mx:DataGridColumn headerText="Name" dataField="name"/>
    <mx:DataGridColumn headerText="Values" dataField="values"/>
    <mx:Button x="321" y="123" label="Add Preference" click="prefValue_clickHandler()"/>
    <mx:Label x="13" y="150" text="Preference Value"/>
    <mx:TextInput x="121" y="121" id="prefName"/>
    <mx:Label text="Preference Name" x="10" y="121"/>
    <mx:TextInput x="120" y="148" id="prefValue"/>

    When user clicks on the Print Preferences button the control get passed to getPortletPreference method inside this method i am using ExternalInterface to call displayPreferences method which is JavaScript method inside preference.jsp.

    The displayPreferences makes call to _portletWindow.getPortletPreferences attaching printPreferencesCallback as callback. Inside that method first i am getting the preferences then converting them into Array and then passing that Array to the displayPreferences method which is part of PortletPreferenceFlex.mxml, which is using that array as data source for the Grid.

    Same thing happens when you click on Add Preference button control gets passed to prefValue_clickHandler method which in turn is passing control to the addPreferences method for actual adding of the preferences


srjwebsolutions said...

We are leading responsive website designing and development company in Noida.
We are offering mobile friendly responsive website designing, website development, e-commerce website, seo service and sem services in Noida.

Responsive Website Designing Company in Noida
Website Designing Company in Noida
SEO Services in Noida
SMO Services in Noida

Vikas Chaudhary said...

Battery Mantra is Authorized exide car battery dealer in Noida and Greater Noida. We are providing our service in Indirapuram, Delhi, Ashok Nagar.

Exide Battery Dealer in Noida
Battery Dealer in Noida
Authorized Battery Dealer in Noida
Car Battery Dealer in Noida
Car Battery Dealer
Exide Battery Dealer

EG MEDI said... is online medical store pharmacy in laxmi nagar Delhi. You can Order prescription/OTC medicines online.
Cash on Delivery available. Free Home Delivery

Online Pharmacy in Delhi
Buy Online medicine in Delhi
Online Pharmacy in laxmi nagar
Buy Online medicine in laxmi nagar
Onine Medical Store in Delhi
Online Medical store in laxmi nagar
Online medicine store in delhi
online medicine store in laxmi nagar
Purchase Medicine Online
Online Pharmacy India
Online Medical Store