5 Replies Latest reply on Aug 24, 2010 1:17 AM by Vackar

    Dynamically changing font weight of a row in a data grid

    IamShravan Level 1

      Hello Flexibles,

       

      I am trying to build an email application where I've an inbox , compose, sent messages and so on which is the regular stuff in any email application.

       

      This is what I'm trying to do:

       

      As soon as the user logs into the application, a datagrid that contains the emails of the user will be displayed.

      I've used custom item renderers to display attachment icons if there are attachments to emails and also a select-all function to select all the emails etc.,

       

      The datagrid is bound to a j2ee based web service which returns the list of emails for the logged in user.

       

      Further the webservice also returns data that need not be displayed in the datagrid. But this data is needed to customize the look and feel of the emails displayed in the datagrid. For ex: the webservice, returns a field called isNew to indicate whether an email is already read or is still unread. If the isNew flag is received as true from the back end web service, the corresponding row in the datagrid should be displayed in bold font.

       

      As the column isNew is not to be displayed, the corresponding "overrride set data" method is not getting fired.

      
      

      What am I doing wrong?  Is there a way to do this in flex? I've started learning flex only a couple of day ago. Any help is muchappreciated .

       

      I've attached the code for your reference.

       

      Thanks

      Shravan

       

       

      ****************************************************************************************** ******

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application

       

      xmlns:mx="http://www.adobe.com/2006/mxml"

      layout="

      absolute" minWidth="955" minHeight="600"

      xmlns:flexapp="

      com.spar.securemessaging.flexapp.*"

      xmlns:inboxservice="

      com.spar.securemessaging.services.inboxservice.*"

      backgroundColor="

      #CEC6C6">

       

       

       

      <mx:Script>

      <![CDATA[

       

      import com.spar.securemessaging.valueObjects.InboxEmailsRequest;

       

      import com.spar.securemessaging.valueObjects.UserCredentials;

       

       

      import flash.display.Stage;

       

       

      import mx.containers.HBox;

       

      import mx.controls.Alert;

       

      import mx.events.FlexEvent;

       

       

      //import valueObjects.UserCredentials;

       

      public function initEditor():void {

       

      /* toolbar is in ControlBar, ControlBar is not a direct content

      child of the Panel in RichTextEditor. */

      mailContent.toolbar.parent.removeChild(mailContent.toolbar);

       

      mailContent.toolbar.maxHeight = 2;

       

      var hbox:HBox = new HBox();

      hbox.addChild(mailContent.toolbar);

      mailContent.addChildAt(hbox, 0);

      mailContent.linkTextInput.setVisible(

      false);

       

      //mailContent.toolbar.removeChild(mailContent.alignButtons);

      }

       

       

      protected function inboxDataGrid_creationCompleteHandler(event:FlexEvent):void

      {

       

       

      var _InboxEmailsRequest:InboxEmailsRequest = new InboxEmailsRequest();

       

       

      var _UserCredentials:UserCredentials = new UserCredentials();

      _UserCredentials.userName =

      "Partha";

      _UserCredentials.password =

      "Password1";

      _InboxEmailsRequest.UserDetails =_UserCredentials;

       

       

      //inboxService.getInboxEmails.send(_InboxEmailsRequest);

      getInboxEmailsResult.token = inboxService.getInboxEmails(_InboxEmailsRequest);

      }

       

       

      protected function disableScrolls():void {

      topPanel.horizontalScrollBar.setVisible(

      false);

      topPanel.verticalScrollBar.setVisible(

      false);

       

      }

       

      ]]>

       

      </mx:Script>

       

      <mx:Style source="com/spar/securemessaging/styles/smstyles.css"/>

       

      <mx:Panel id="topPanel" title="Messaging Center"

      height="

      594.24243" width="1082.8788" horizontalAlign="left"

      paddingTop="

      10" paddingBottom="10"

      paddingLeft="

      10" paddingRight="10" x="28.8" y="23.5"

      creationComplete="disableScrolls()" styleName="

      TitleWindow">

       

       

      <mx:HBox borderStyle="solid" width="1080"

      height="

      594.24243" horizontalAlign="center"

      paddingLeft="

      10" paddingRight="10"

      paddingTop="

      10" paddingBottom="10">

       

       

      <mx:VBox>

       

      <!--<mx:LinkBar color="#0000FF" fontWeight="bold" direction="vertical" dataProvider="{myViewStack}"

      horizontalAlign="left" /> -->

       

      <mx:LinkButton label="Inbox" click="myViewStack.selectedChild=inbox" styleName="LinkButton"/>

       

      <mx:LinkButton label="Compose" click="myViewStack.selectedChild=compose" styleName="LinkButton"/>

       

      <mx:LinkButton label="Drafts" click="myViewStack.selectedChild=drafts" styleName="LinkButton"/>

       

      <mx:LinkButton label="Sent" click="myViewStack.selectedChild=sent" styleName="LinkButton"/>

       

      <mx:LinkButton label="Trash" click="myViewStack.selectedChild=trash" styleName="LinkButton"/>

       

       

      </mx:VBox>

       

       

      <mx:ViewStack id="myViewStack" borderStyle="none" width="100%" height="500" backgroundColor="#FFFFFF">

       

       

      <mx:Canvas id="inbox" backgroundColor="#FFFFFF" label="Inbox" width="100%" height="100%">

       

       

      <mx:DataGrid id="inboxDataGrid" width="837.9545" height="361.0606"

      name="

      inboxGrid"

      headerColors="

      [#EEEEEE, #EEEEEE]"

      alternatingItemColors="

      [#E2E2E2, #FFFFFF]"

      creationComplete="inboxDataGrid_creationCompleteHandler(event)"

      creationCompleteEffect=""

      dataProvider="

      {getInboxEmailsResult.lastResult}"

      styleName="

      DataGrid">

       

      <mx:columns>

       

      <flexapp:CheckBoxHeaderColumn

      width="

      2" headerRenderer="com.spar.securemessaging.flexapp.CheckBoxHeaderRenderer"

      itemRenderer="

      com.spar.securemessaging.flexapp.CheckBoxItemRenderer"

      dataField="

      isSelected" resizable="false" sortable="false"/>

       

      <mx:DataGridColumn resizable="false" dataField="hasAttachment"

      width="

      2" sortable="false" >

       

      <mx:headerRenderer>

       

      <mx:Component>

       

      <mx:Image toolTip="Email Attachments"

      source="

      @Embed(source='attachment-icon.png')"

      verticalAlign="

      middle" horizontalAlign="center"/>

       

      </mx:Component>

       

      </mx:headerRenderer>

       

      <mx:itemRenderer>

       

      <mx:Component>

       

      <mx:HBox paddingLeft="1" >

       

      <mx:Image id="attImage" />

       

      <mx:Script>

      <![CDATA[

       

      import mx.controls.Alert;

       

      override public function set data( value:Object ) : void {

       

      super.data = value;

       

      if (data.hasAttachment) {

      attImage.load(

      "com/spar/securemessaging/flexapp/attachment-icon.png");

      }

      else if (!data.hasAttachment) {

      attImage.unloadAndStop(

      true);

      }

       

      }

      ]]>

       

      </mx:Script>

       

      </mx:HBox>

       

      </mx:Component>

       

      </mx:itemRenderer>

       

       

       

      </mx:DataGridColumn>

       

      <mx:DataGridColumn id="from" dataField="from" headerText="From"

      width="

      22" fontFamily="Verdana"

      fontSize="

      10" resizable="false"/>

       

      <mx:DataGridColumn id="subj" dataField="subject" headerText="Subject"

      width="

      45" fontFamily="Verdana"

      fontSize="

      10" resizable="false"/>

       

      <mx:DataGridColumn id="received" dataField="_date" headerText="Received"

      width="

      30" fontFamily="Verdana"

      fontSize="

      10" resizable="false"/>

       

      <mx:DataGridColumn id="unread" headerText="isNew"

      dataField="

      isNew" fontFamily="Verdana"

      fontSize="

      10" resizable="false" width="12"

      visible="

      false">

       

      <mx:itemRenderer>

       

      <mx:Component>

       

      <mx:HBox paddingLeft="1" >

       

      <mx:Script>

      <![CDATA[

       

      import mx.controls.Alert;

       

      override public function set data (value:Object):void {

       

      super.data = value;

       

      //Alert.show("Change font weight = " + data.isNew);

       

      if(data.isNew) {

      Alert.show(

      "Willthis work?");

      setStyle(

      "fontWeight", "bold");

      }

      }

      ]]>

       

      </mx:Script>

       

      </mx:HBox>

       

      </mx:Component>

       

       

      </mx:itemRenderer>

       

      </mx:DataGridColumn>

       

       

      <!--<mx:DataGridColumn headerText="hasAttachment" dataField="hasAttachment"/>

      <mx:DataGridColumn headerText="isNew" dataField="isNew"/> -->

       

       

      </mx:columns>

       

      </mx:DataGrid>

       

       

      </mx:Canvas>

       

       

      <mx:Canvas id="compose" label="Compose" width="100%" height="100%">

       

      <mx:ButtonBar horizontalGap="5" x="94" y="9" styleName="Button">

       

      <mx:dataProvider>

       

      <mx:String> Send </mx:String>

       

      <mx:String> Save As Draft </mx:String>

       

      <mx:String> Attach </mx:String>

       

      <mx:String> Discard </mx:String>

       

       

      </mx:dataProvider>

       

      </mx:ButtonBar>

       

      <!--<mx:Label text="To:" x="60" y="39" fontWeight="bold"/>-->

       

       

      <mx:Label x="38" y="45" text="Subject:" fontWeight="bold"/>

       

      <!--<mx:TextInput x="93" y="37" width="479"/>-->

       

       

      <mx:TextInput id="subject" name="subject" x="93" y="45" width="479"/>

       

      <mx:RichTextEditor id="mailContent" name="mailContent" x="93" y="87" title="" width="479" height="373"

      creationComplete="initEditor();"

      >

       

      </mx:RichTextEditor>

       

       

      </mx:Canvas>

       

       

      <mx:Canvas id="drafts" backgroundColor="#FFFFFF" label="Draft" width="100%" height="100%">

       

      <mx:Label text="Customer Info" color="#000000"/>

       

      </mx:Canvas>

       

       

      <mx:Canvas id="sent" backgroundColor="#FFFFFF" label="Sent" width="100%" height="100%">

       

      <mx:Label text="Account Info" color="#000000"/>

       

      </mx:Canvas>

       

       

      <mx:Canvas id="trash" backgroundColor="#FFFFFF" label="Trash" width="100%" height="100%">

       

      <mx:Label text="Trash" color="#000000"/>

       

      </mx:Canvas>

       

      </mx:ViewStack>

       

       

      </mx:HBox>

       

      <!-- Define the ViewStack and the three child containers. -->

       

       

      </mx:Panel>

       

      <mx:CallResponder id="getInboxEmailsResult"/>

       

      <inboxservice:InboxService id="inboxService" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>

       

       

       

      </mx:Application>