1. Down­load and Install Visual Studio

2. Down­load and Install FluorineFX

3. Cre­at­ing a Flu­or­ineFX Ser­viceL­ib­rary Pro­ject in Visual Stu­dion 2008 Express

• Open up Visual Studio
• File -> New Project…
• Select Visual C# under Pro­ject Types.
  Under Tem­plates select Flu­or­ineFx Ser­viceL­ib­rary
  You can give your “Lib­rary Part” of the pro­ject an arbit­rary name but I am going to leave it as it is: ServiceLibrary1
  Select a loc­a­tion for your pro­ject. For sim­pli­city reas­ons I am sav­ing my pro­ject in a folder called “MyFlu­or­inePro­ject” on my Desktop.  To do that just click on the Browse but­ton and cre­ate a new folder on your desktop.
  Make sure you uncheck the check­box “Cre­ate dir­ect­ory for solu­tion”.
  Click OK.
  Here’s a screen­shot of my settings. 
  

  Cre­at­ing a new Flu­or­ineFx Lib­rary Project

• Once you click of the fol­low­ing error mes­sage (might) pop up:
  

  Error Mes­sage: Search path for assem­blies not found!

  Don’t mind that error for now. It will appear a few more times but we will take care of it in a bit.
• In your Solu­tion Explorer in Visual Stu­dio expand the Ref­er­ences tab.
  

  Warn­ing at the Flu­or­ineFx entry

This is why the warn­ing appeared earlier. Visual Stu­dion simply doesn’t know where to find the Flu­or­ineFx related files. Let’s tell it where it is then!
• Got to Pro­ject -> Add Ref­er­ence -> Browse Tab
  And browse to the “FluorineFx.dll” which — in case of a default install­a­tion — can be found here: C:\Program Files (x86)\FluorineFx\Bin\net\3.5\
  So simply browse to that dir­ect­ory, select the file, click OK and notice how the warn­ing disappears.

4. Cre­at­ing a Flu­or­ineFx ASP.NET Web Site

• In Visual Stu­dion go to File -> New Web Site…
• In the Tem­plates dia­log select “Flu­or­ineFx enabled ASP.NET WebSite”
• Make sure C# is selec­ted as the pro­gram­ming language
• Click browse and nav­ig­ate to the folder that you cre­ated under Step 3 of this tutorial.
  I’ve cre­ated my dir­ect­ory called “MyFlu­or­inePro­ject” on my desktop. So I am simply nav­ig­at­ing to that dir­ect­ory, select it and click Open.
  Once you’ve done that your path should look some­what sim­ilar to this:  C:\Users\Dan\Desktop\MyFluorineProject
• Click OK

Cre­at­ing a new Flu­or­ineFx ASP.NET Web Site After click­ing OK the error mes­sage from above pops up again say­ing that the Search path for assem­blies could not be found. And again we are going to fix it straight away. Go to Web­site -> Add Ref­er­ence… -> Browse Tab and browse to the same dir­ect­ory as you did before. C:Program Files (x86)FluorineFxBin
et.5 Loc­ate the file called “FluorineFx.ServiceBrowser.dll”, select it and click OK. Now set the Web Site you have just cre­ated as a Star­tUp Pro­ject by right-clicking on your Web Site Pro­ject in the Solu­tion Explorer and select­ing “Set as Star­tUp Pro­ject” Set up your Web Site as a Star­tUp Pro­ject Finally right-click on the Console.aspx file and select “Set As Start Page” to make the Console.aspx page your start page. Set­ting the Console.aspx Page as your Start Page

• Run the pro­ject by going to Debug -> Start Without Debug­ging or simply press­ing CTRL + F5 on your keyboard.
• Your default web browser should open up show­ing you some­thing very sim­ilar to this:

The Flu­or­ineFX Con­sole Page

• Drill down the Ser­vices tree until you hit the “Echo” func­tion.
  Note that this func­tion was auto­mat­ic­ally cre­ated by Visual Stu­dio in your Sample.cs file in the Ser­vice Lib­rary “Part” on pro­ject cre­ation. The func­tion is fairly simple but it’s still worth to have a look at the code:

public string Echo(string text)
{
return "Gateway echo: " + text;
}

• As I said, it is fairly simple and the only thing it does is to return the text you pass to the func­tion as a parameter.
• Now comes the amaz­ing part!
• Drilled down in the Ser­vice tree of your Flu­or­ineFx Con­sole in the Echo func­tion, type in a sample text in the text input con­trol and press the “Call” But­ton.
  If everything goes well you well see an appro­pri­ate out­put in the text area below.
  Notice that I am talk­ing in Flex terms now. (Text input con­trol, text area) That’s right! The whole Flu­or­ineFx Con­sole Page is a Flash Applic­a­tion. Just press the right mouse but­ton any­where on the page and see for your­self.
  So from this point we know that we have suc­cess­fully setup our ASP.NET backend with Flu­or­ineFx. Hur­ray! On to the next step in this tutorial.
• Just make sure it really works. After click­ing the “Call” But­ton you should see some­thing like this:

First test with the Flu­or­ine Console5. Cre­at­ing the Flex Pro­ject and con­nect­ing it to the ASP.NET backendIn Flash Builder cre­ate a new Pro­ject with the fol­low­ing set­tings. I am call­ing my pro­ject “FluorineFlexApp“Creating a new Flex Project

5. Cre­at­ing the Flex Project

• In Flash Builder cre­ate a pro­ject with the fol­low­ing settings:
  

  Cre­at­ing a new Flex Project

• For sim­pli­city just select “Use ASP.NET Devel­op­ment Server” in the next screen and click on Finish.
• I am going to pop in the applic­a­tion code and we will go through it afterwards.

</div>
<div><?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="<a href="http://ns.adobe.com/mxml/2009">http://ns.adobe.com/mxml/2009</a>"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600"
initialize="application1_initializeHandler(event)"></div>
<div><fx:Declarations></div>
<div><s:RemoteObject id="ro"
destination="fluorine"
source="ServiceLibrary1.Sample"
fault="onFluorineFault(event)"></div>
<div><s:method name="Echo" result="onFluorineResult(event)" /></div>
<div></s:RemoteObject></div>
<div></fx:Declarations></div>
<div><fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.messaging.ChannelSet;
import mx.messaging.channels.AMFChannel;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;</div>
<div>public var startTime:Number;</div>
<div>//set up the AMF channel:
//this eliminates the need to reference any config files--yay!
protected function application1_initializeHandler(event:FlexEvent):void
{
var amfChannel:AMFChannel = new AMFChannel("myAMF", "<a href="http://localhost:4444/dantest/Gateway.aspx">http://localhost:4444/MyFluorineProject/Gateway.aspx</a>");
amfChannel.pollingEnabled = false;
var myChannelSet:ChannelSet = new ChannelSet();
myChannelSet.addChannel(amfChannel);
ro.channelSet = myChannelSet;
}
//SEND FUNCTION (when button is pressed):
public function fluorineSend():void{
lblTimer.text="";
startTime = new Date().time;
ro.Echo(txtInput.text);
}</div>
<div>//RESULT FUNCTION
public function onFluorineResult(event:ResultEvent):void
{
lblTimer.text = "The Process took " + (new Date().time - startTime) + " ms";
lblEcho.text=event.result.toString();
}</div>
<div>//FAULT FUNCTION
public function onFluorineFault(event:FaultEvent):void
{
Alert.show("Fluorine Fault" + event.fault.toString());
}</div>
<div>]]>
</fx:Script></div>
<div><s:BorderContainer width="400" height="300" x="100" y="100"></div>
<div><s:VGroup width="400" height="300" verticalCenter="0" horizontalCenter="0"></div>
<div><s:TextArea text="Enter Text to Echo with Fluorine:" width="198" /></div>
<div><s:TextInput id="txtInput" width="198" /></div>
<div><s:Button label="Call Fluorine Service" click="fluorineSend()" /></div>
<div><s:Label id="lblEcho" text="Echo Text Here" width="379" height="35" fontWeight="bold" fontSize="17" textAlign="left"/></div>
<div><s:Label id="lblTimer" /></div>
<div></s:VGroup></div>
<div></s:BorderContainer></div>
<div></s:Application></div>
<div>

• If you are a Flex Developer the code should be pretty self explanatory.
• The most import­ant line to notice is this one:

</div>
<div>var amfChannel:AMFChannel = new AMFChannel("myAMF", "<a href="http://localhost:4444/dantest/Gateway.aspx">http://localhost:4444/MyFluorineProject/Gateway.aspx</a>");</div>
<div>

• You need to define the right path to the Gateway.aspx of your Flu­or­ine Pro­ject that we have cre­ated in the first steps of this tutorial.
• You might won­der where I got the 4444 after local host from.
• Go to your taskbar and you will see two Devel­op­ment Server run­ning. One for your Flex Pro­ject (remem­ber you selec­ted ASP.NET as a backend tech­no­logy) and one for your actual ASP.NET — Flu­or­ine Project.
• Just get the num­ber from the Flu­or­ine Project.
• You can even try to type that link into your browser. If you get an empty page it works!
• Finally Run your Flex Applic­a­tion and if everything went well you have sucess­fully estab­lished a con­nec­tion from a Flex App to your ASP.NET backend.