2008 June | Flex & AIR

Populating a DataGrid In Flex from a ColdFusion Database

Thu, Jun 26, 2008

Comments2008-06-26+23%3A18%3A15Sherif

Here is a very simple example in how you can populate a DataGrid using the cfartgallery database that comes standard with ColdFusion 8.

My Workspace Folder is under wwwroot subfolder in the ColdFusion8 Directory

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="myDatabase.databaseInformation()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
[Bindable]
private var myCollection:ArrayCollection;
private function onResultEvent(event:ResultEvent):void
{
myCollection = event.result as ArrayCollection;
}
]]>
</mx:Script>
 
<mx:RemoteObject destination="ColdFusion"
source="AdobeFlex.src.cfc.DatabaseCFC" id="myDatabase">
<mx:method name="databaseInformation" result="onResultEvent(event)"
fault="trace(event.fault)"/>
</mx:RemoteObject>
 
<mx:DataGrid dataProvider="{myCollection}"/>
</mx:Application>

Name of the CFC is DatabaseCFC

 
<cfcomponent output="false">
<cffunction access="remote" name="databaseInformation" returntype="query">
<cfquery datasource="cfartgallery" name="artGalleryDatabase">
SELECT *
FROM ART
</cfquery>
<cfreturn artGalleryDatabase>
 
</cffunction>
</cfcomponent>

Interactive Submit button with Symbols for Flex

Mon, Jun 23, 2008

Comments2008-06-23+17%3A43%3A56Sherif

I saw these in sign up forums and i thought to replicate it. Basically when you type over 4 words the submit button gets enabled and a check mark icon appears and vice-versa if it is less than 4 words.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0xFFFFFF"
    xmlns:ns1="*" width="500" height="500" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            private function onTextChange():void
            {
                if(myInput.text.length >=4)
                {
                    myButton.isValid(true);
                    myButton.enabled=true;
                }
                else
                {
                    myButton.isValid(false);
                    myButton.enabled=false;
                }
 
            }
        ]]>
    </mx:Script>
 
 
 
    <mx:Panel x="25" y="110" backgroundColor="0xFFFFFF" height="85" width="465" layout="absolute">
 
        <mx:Label text="Enter at least 4 Characters:" y="12" x="4" width="166"/>
        <mx:TextInput id="myInput" y="11" x="182" change="onTextChange()" width="109"/>
        <ns1:ExtendedButton x="316" y="10" width="89" label="Submit" id="myButton" enabled="false"/>
 
    </mx:Panel>
</mx:Application>
</code>

package
{
    import mx.controls.Button;
 
    public class ExtendedButton extends Button
    {
        [Embed(source="green.jpg")]
        private var check:Class;
 
        [Embed(source="red.jpg")]
        private var wrong:Class;
 
 
 
        public function ExtendedButton()
        {
            super();
            //set the style of the icon
            setStyle("icon",wrong);
        }
        public function isValid(value:Boolean):void
        {
            if(value)
            {
                setStyle("icon",check);
            }
            else
            {
                setStyle("icon",wrong);
            }
        }
 
 
    }
}

Carousel3D(Sort of) and Spiral3D using Flash player 10 for Flex

Tue, Jun 10, 2008

Comments2008-06-11+02%3A43%3A18Sherif

Now the Carousel3D is not the best, i tried to replicate it like the one in Papervision, either there is a bug or my math is wrong since the images appear transparent if they overlap each other, i spent around 3 hours reading the Flash API trying to find a way to have them as solid but no luck, so if you know let me know so I can update it and make it into a full pledge component, the Spiral3D is something that I did when I was bored.
(more…)

Very Simple Instant Message Client using ColdFusion, Flex, and LiveCycle

Mon, Jun 9, 2008

Comments2008-06-10+01%3A26%3A43Sherif

Here is a simple Instant message client that uses Coldfusion, Flex and Livecycle. To set it Up you need first to go in your coldfusion admin panel and go to Event Gateway then Gateway Instances and create a Gateway ID of InstantMessage. Also make sure to hit run after you create it.

Now it takes about 8 seconds for the message to go from one box to another but that can be brought down if you change the services-config file which is under wwwroot/WEB-INF/flex. Look for

<polling-interval-seconds>8</polling-interval-seconds>

change 8 to 1.

Here is what it looks like

message Very Simple Instant Message Client using ColdFusion, Flex, and LiveCycle

Here is the Zip File, you can just import it in eclipse. Also You need to Run this and not do it in Debug( no idea how to fix it). My workspace under wwwroot

Download

Eclipse CDT( C &CPP) on Windows Vista

Mon, Jun 9, 2008

Comments2008-06-09+17%3A25%3A20Sherif

There seems to be sparse information on how to install Eclipse CDT (C++/C) on Windows Vista or any windows so here are the steps to have it work with a Debugger and a Compiler.
First Thing

1)Install Eclipse CDT
2) Download MinGW

3) Install it as the Current Setting and make sure that you pick g++ Compiler, also leave the folder as it is do not change it
4)Next Download MSYS

5)Install MSYS

6) A window will pop up, It will ask you if you want to proceed, type y and then Enter
7)It will ask if MingGW is Installed, type y then Enter
8 ) give it the path which should be c:/MinGW
9). Download the Debugger
10)Install the Debugger

11) Go to Control Panel–>System–>Advanced System Settings–>System Properties Panel Should pop up

12). Click on Environment Variables

13). Go where it says System Variables, then scroll down to Path then click Edit

14) Now go to the very end, make sure you do not overwrite or deleted what is in there otherwise your computer will stop working. Windows Vista Has the Whole Line Selected so make sure that you click once to remove that and go to the end of the path. Now Append or just copy and paste these ;C:\msys\1.0\bin;C:\mingw\bin

15) Restart Vista
16) Go to the Command Prompt, or Click start–>in the search box type CMD. The CMD window will open
17) Type g++ –version Hit Enter. Should print out the Version and copy right notice

18). Repeat step 17 but substitute g++ with gcc, gdb
19) if everything works up untill now then Start Eclipse then make a C++ project Executable then compile and it should work.

Printing a DataGrid using FlexPrintJob Class

Fri, Jun 6, 2008

Comments2008-06-07+02%3A20%3A26Sherif

Here is how you can print a DataGrid in Flex using the FlexPrintJob Class

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	 creationComplete="initApp()">
	<mx:Script>
		<![CDATA[
			import mx.printing.FlexPrintJob;
			import mx.collections.ArrayCollection;
 
 
			[Bindable]
			private var myCollection:ArrayCollection = new ArrayCollection();
			private function initApp():void
			{
				for(var i:int=0;i<200;i++)
				{
					myCollection.addItem({row: i, data:"Item "+ i});
 
				}
			}
			private function print():void
			{
				var printJob:FlexPrintJob = new FlexPrintJob();
				//start the print job
				if(printJob.start())
				{
 
					printJob.addObject(printDataGrid);
					while(true)
					{
						printDataGrid.nextPage();
						if(!printDataGrid.validNextPage)
						{
							printJob.addObject(printDataGrid);
							break;
						}
					}
					printJob.send();
				}
			}
 
		]]>
	</mx:Script>
 
 
	<mx:DataGrid id="dataGrid" dataProvider="{myCollection}" height="300" width="200">
		<mx:columns>
			<mx:DataGridColumn dataField="row" headerText="Row Number"/>
			<mx:DataGridColumn dataField="data" headerText=" Item #"/>
		</mx:columns>
	</mx:DataGrid>
 
	<mx:PrintDataGrid id="printDataGrid" dataProvider="{myCollection}"  x="294"
		 visible="false" includeInLayout="false">
		<mx:columns>
			<mx:DataGridColumn dataField="row" headerText="Row Number"/>
			<mx:DataGridColumn dataField="data" headerText=" Item #"/>
		</mx:columns>
	</mx:PrintDataGrid>
	<mx:Button x="68" y="308" label="Print" click="print()"/>
 
 
 
</mx:Application>

Two Sided 3D Image Plane in Flex

Thu, Jun 5, 2008

CommentsTwo+Sided+3D+Image+Plane+in+Flex2008-06-06+02%3A25%3A59Sherif

Here is yet another example of creating a free rotating plane and having two different images one in the back and one in the front. Need Flash Player 10 to view it.
(more…)

Using the new FileReference Class in Flex to save and load without a server

Thu, Jun 5, 2008

Comments2008-06-05+19%3A51%3A06Sherif

In the new Flash Player 10, you will be able to write/read files without the need to send anything back to the server. Here are two examples using Flex, the first one is a Text-Pad where you are allowed to load a text file and save it without a need to communicate back to the server. The Second Example is similar but uses images instead. You are only allowed to upload PNG files in this example only. Also, there is a bug which supposedly got fixed but your are not allowed to overwrite the file you uploaded and when you are saving add “.txt” extension or “.png” extension, otherwise you can refresh the page and start again. In short, First time you hit save do not include the extension, second time you need to include the extension and remember to not overwrite anything otherwise it will crash.
EDIT: Ok it should work Now

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	  <mx:Script>
	  	<![CDATA[
 
 
 
	  		/**
	  		 * @private
	  		 * The FileReference that does the saving and the loading
	  		 */
	  		 private var fileReference:FileReference = new FileReference();
	  		private function onSaveText():void
	  		{
	  			fileReference.save(myText.text,"myText.txt");
	  		}
	  		private function onLoadText():void
	  		{
	  			var f:FileFilter = new FileFilter("Text","*.txt");
	  			fileReference.browse([f]);
	  			fileReference.addEventListener(Event.SELECT,onFileSelect);
	  			fileReference.addEventListener(Event.COMPLETE,onFileComplete);
	  		}
	  		private function onFileSelect(event:Event):void
	  		{
	  			fileReference.load();
	  		}
	  		private function onFileComplete(event:Event):void
	  		{
	  			myText.text = fileReference.data.readUTFBytes(fileReference.data.length);
	  		}
 
	  	]]>
	  </mx:Script>
 
	  <mx:Panel id="myPanel" width="400" height="450" verticalScrollPolicy="off"
	  	 horizontalScrollPolicy="off" title="Text Pad">
	  	<mx:TextArea width="380" height="420" id="myText"
	  		text="Hello You Can Save This to test this APP"/>
	  	<mx:ControlBar>
	  		<mx:Button label="Save Text" click="onSaveText()"/>
	  		<mx:Button label="Load Text" click="onLoadText()"/>
	  	</mx:ControlBar>
	  </mx:Panel>
 
 
 
 
</mx:Application>

Here is a PNG image you can save and try to upload.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	  <mx:Script>
	  	<![CDATA[
	  		import mx.controls.Image;
	  		import mx.utils.Base64Decoder;
	  		import mx.core.UIComponent;
	  		import mx.binding.utils.BindingUtils;
	  		import mx.graphics.codec.PNGEncoder;
 
 
	  		[Embed(@source="Adobe Flex 3.png",mimeType="image/png")]
	  		private var myFlex:Class;
 
	  		private var myBitmap:Bitmap = new myFlex();
 
 
	  		private var pngDecoder:Base64Decoder = new Base64Decoder();
 
	  		/**
	  		 * @private
	  		 * The FileReference that does the saving and the loading
	  		 */
	  		 private var fileReferenceLoad:FileReference = new FileReference();
	  		 /**
	  		 * @private
	  		 * For the Save
	  		 */
	  		 private var fileReferenceSave:FileReference= new FileReference();
	  		private function onSaveImage():void
	  		{
	  			var pngEncoder:PNGEncoder = new PNGEncoder();
	  			var myByteArray:ByteArray = pngEncoder.encode(myBitmap.bitmapData);
	  			fileReferenceSave.save(myByteArray,"flex.png");
	  		}
	  		private function onLoadImage():void
	  		{
	  			var f:FileFilter = new FileFilter("PNG","*.png");
	  			fileReferenceLoad.browse([f]);
	  			fileReferenceLoad.addEventListener(Event.SELECT,onFileSelect);
	  			fileReferenceLoad.addEventListener(Event.COMPLETE,onFileComplete);
	  		}
	  		private function onFileSelect(event:Event):void
	  		{
	  			fileReferenceLoad.load();
	  		}
 
	  		private function onFileComplete(event:Event):void
	  		{
	  			var a:ByteArray = fileReferenceLoad.data;
	  			var image:Image = new Image();
	  			image.load(a);
	  			myPanel.addChild(image);
 
	  		}
	  		protected override function createChildren():void
	  		{
	  			super.createChildren();
	  			var t:UIComponent = new UIComponent();
	  			myPanel.addChild(t);
	  			t.addChild(myBitmap);
	  		}
 
	  	]]>
	  </mx:Script>
 
	  <mx:Panel id="myPanel" width="400" height="450" verticalScrollPolicy="off"
	  	 horizontalScrollPolicy="off" title="Image Pad">
 
	  	<mx:ControlBar>
	  		<mx:Button label="Save Image" click="onSaveImage()"/>
	  		<mx:Button label="Load Image" click="onLoadImage()"/>
	  	</mx:ControlBar>
	  </mx:Panel>
 
 
 
 
</mx:Application>

Example of using the ClassFactory Class

Thu, Jun 5, 2008

CommentsExample+of+using+the+ClassFactory+Class2008-06-05+19%3A46%3A35Sherif

Here is a small example using the ClassFactory class, basically the whole idea is you
can dynamically set the properties in the ClassFactory. If you created a Square class that was hard coded to only display white then you would have to extend it and override methods.

package
{
	import flash.display.Graphics;
 
	import mx.core.UIComponent;
 
	public class Square extends UIComponent
	{
		public var color:uint=0xFFFFFF;
		public function Square()
		{
			super();
		}
		protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth,unscaledHeight);
			var g:Graphics = graphics;
			g.clear();
			g.beginFill(color);
			g.drawRect(0,0,100,100);
			g.endFill();
		}
 
 
 
	}
}

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()"
	 layout="horizontal">
	<mx:Script>
		<![CDATA[
 
			private var myClassFactory:ClassFactory = new ClassFactory(Square);
			private function initApp():void
			{
				var whiteSquare:Square = myClassFactory.newInstance();
				myClassFactory.properties={color:0x000000};
				var blackSquare:Square = myClassFactory.newInstance();
				myClassFactory.properties={color:0xFF0000};
				var redSquare:Square = myClassFactory.newInstance();
				addChild(whiteSquare);
				addChild(blackSquare);
				addChild(redSquare);
			}
		]]>
	</mx:Script>
 
 
 
</mx:Application>

Hardcoding The endpoint for AIR and ColdFusion Remoting.

Thu, Jun 5, 2008

Comments2008-06-05+17%3A58%3A22Sherif

If you are using Adobe AIR with ColdFusion Remoting and you notice that your file dropped the first letter from its name and you get and error sort of like this

RPC Fault faultString= “Send failed”
faultCode=”Client.Error.MessageSend”
faultDetail= “Channel.Connect.Failed error NetConnection.Call.Failed:

then include

<mx:RemoteObject
	  		 endpoint="http://localhost:8500/flex2gateway"/>

Archive | June, 2008

Populating a DataGrid In Flex from a ColdFusion Database

Interactive Submit button with Symbols for Flex

Carousel3D(Sort of) and Spiral3D using Flash player 10 for Flex

Very Simple Instant Message Client using ColdFusion, Flex, and LiveCycle

Eclipse CDT( C &CPP) on Windows Vista

Printing a DataGrid using FlexPrintJob Class

Two Sided 3D Image Plane in Flex

Using the new FileReference Class in Flex to save and load without a server

Example of using the ClassFactory Class

Hardcoding The endpoint for AIR and ColdFusion Remoting.

Categories

Sections

Freshest Articles

The 4-1-1

Archives

Hosting Partner

Our Friend's