Archive for the ‘ColdFusion’ Category

In Flex 1,2,3 we used mx:DataGrid, which had a dg.selectedItems Object.
In Flex 4,4.5,4.6+ we now use a Spark s:DataGrid, which made dealing with selectedItems more complicated with Vectors. Jury is still out for me if going to Vectors is a good thing.

In mx, if I wanted to save selectedItems to the server, I just send dg.selectedItems to ColdFusion and looped through it. Simple.

In spark, I now have to covert the Vector back to an Object or ArrayCollection (since AMF rejects the Vector). Below is an example of how to loop through the Vector and convert it to a temp ArrayCollection to send to ColdFusion via RemoteObject/AMF.

var temp:ArrayCollection = new ArrayCollection();
var selIndices:Vector.<int> = dg.selectedIndices;
var selItems:Vector.<Object> = dg.selectedItems;
var numItems:Number = selIndices.length;
for (var i:Number = 0; i<numItems; i++){
temp.addItem(selItems[i]);
}
Advertisements

I was really surprised about the lack of good examples for adding a DropDownList or ComboBox inside a cell in a Flex 4.5+ spark DataGrid.  It took me awhile to figure it out.  So, I thought I’d pass it along to you.

In my scenario.  I have a ColdFusion database RemoteObject that populates and ArrayCollection that is bound to the DropDownList.  I needed to update the dataProvider of the DataGrid with two values (officeID, office) based on the DropDownList selection.  And I wanted to update the color of the cell in another column that indicates to the user that the row has been updated.  For this reason, it wasn’t as simple as using the standard ComboBoxGridItemEditor.

Below is the result.  A custom GridItemEditor that saves the new value , updates data.action to ‘Updated’, and refreshes the DataGrid’s dataProvider, which updates the background color of the action column.

Trick was overriding the save() function so I can do more when the editing is done.

Hope it helps.  Let me know if you have any questions.

<s:itemEditor>
	<fx:Component>
		<s:GridItemEditor>
			<fx:Script>
				<![CDATA[
					import mx.core.FlexGlobals;
					import mx.events.FlexEvent;
					
					import spark.events.IndexChangeEvent;
					
					
					
					override public function set value(newValue:Object):void {
						
						cb.selectedItem= newValue;
					}
					
					override public function get value():Object {
						return cb.selectedItem.name;
					}
					
					override public function setFocus():void {
						cb.setFocus();
					}
					
					override public function save():Boolean
					{
						data[column.dataField] = value;
						data.officeID = cb.selectedItem.ID;
						if(data.action !== 'New'){
							data.action = 'Update';
							outerDocument.flatDP.refresh();
						}
						return true;
					}
					
					
				]]>
			</fx:Script>
			
			<local:BindableDropDownList xmlns:local="*"
										id="cb" width="100%"
										height="100%"
										dataProvider="{FlexGlobals.topLevelApplication.officesDP}"
										horizontalCenter="0"
										labelFields="[name]"
										prompt="Office"
										requireSelection="false"
										valueField="name"
										verticalCenter="0"/>
			
		</s:GridItemEditor>
	</fx:Component>
</s:itemEditor>

//action column
<s:GridColumn   width="70" editable="false" headerText="Action" dataField="action">
									<s:itemRenderer>
										<fx:Component>
											<s:DefaultGridItemRenderer background="true"  backgroundColor="{data.action == 'Keep' ? 0x00ff00: data.action == 'Update' ? 0xFFCC00: data.action == 'New' ? 0xffff00: data.action == 'Delete' ? 0xff0000:0x000000}"  >								</s:DefaultGridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>

Need: I’ve had a long time need for an HTML WYSIWYG Editor embedded in my Adobe Flex Applications for content management.  Adobe does not provide a WYSIWYG Editor with Flex/Air and the Flex Text Layout Framework, frankly, was too confusing for me!  Some people offered components that attempted to do this in the past, like CKeditor, but they did not maintain it so that it works with Flex 4.5.1.  I decided to call on my long time friend, Adobe ColdFusion to do, as it always has, … make things easy!

GitRDone:  Leverage ColdFusion’s existing built in FCKeditor in CFTEXTAREA and Flex iFrame .  Build a simple ColdFusion page, load it into Flex via iFrame, and use Javascript to grab the HTML.  ColdFusion server required.

Source: http://www.fusionpage.com/flex/flexrta/bin/flexrta.html (view source enabled)

My solution of course was genius 🙂 … but code is very simple thanks to ColdFusion and the guys at Flex iFrame.  Appreciate it!

Here is the Flex code  and the ColdFusion code (rte.cfm).  The key was iFrame’s callIFrameFunction to bridge between actionscript and javascript to get the HTML from CF into Flex for saving to the database later when my Flex user submits the form.

Hope it helps!


<script type="text/javascript">
	
	function getText() {
		
		return ColdFusion.getElementValue('rta');
	}
	
</script>
<body>

	<cfform width="100%" height="100%" >
	<cftextarea name="rta" richtext="true"  width="600" height="600"   >
		
	</cftextarea>
</cfform>

</body>		

 

<fx:Script>
		<![CDATA[
			private function getTextFromFrame():void
			{
				myRtaFrame.callIFrameFunction('getText',null,getTextResult);
			}
			
			
			private function getTextResult(result : String):void
			{
				r.text = result;
			}
		]]>
	</fx:Script>
		<s:layout>
			<s:HorizontalLayout/>
		</s:layout>
		<flexiframe:IFrame  id="myRtaFrame" width="600" height="600" scrollPolicy="no" overlayDetection="true"   source="rte.cfm"/>
		<s:VGroup>
			<s:Button  label="Get HTML" click="getTextFromFrame()"/>
			<s:TextArea id="r" width="300" height="650"/>
		</s:VGroup>