NET 3.5 — Getting Started Tutorial">Flex 4 + FluorineFX + .NET 3.5 — Getting Started Tutorial

Today we will look into get­ting a proper setup for con­nect­ing a Flex 4 applic­a­tion to a .NET backend.
I have found sev­eral tutori­als on that topic on the inter­net but none of them covered the whole pro­cess in one go. So I had to gain my know­ledge by com­bin­ing what I’ve learned from sev­eral dif­fer­ent tutori­als and mak­ing some guesses in the end to make it work.
To spare you this — some­times tedi­ous — pro­cess I will guide you through the install­a­tion and con­fig­ur­a­tion of Flex 4 with Flu­or­ineFX to con­nect to a .NET backend.
Let’s get started.
I assume you have Flash Builder installed (or a sim­ilar Flex­IDE of some sort such as Flash Develop which is com­pletely free)

1. Down­load and Install Visual Studio

To develop the backend of our pro­ject we need Visual Stu­dio. Microsoft provides a free Ver­sion called Microsoft Visual Stu­dio 2008 Express and is avail­able for down­load here.
If you haven’t done so already go ahead and down­load it.

2. Down­load and Install FluorineFX

The Flour­ineFX lib­rary can be found here. At the time of writ­ing ver­sion 1.0.0.15 is the latest. Just down­load the file (first link on the provided page) and install the pack­age by double click­ing the file and fol­low­ing the prompts.

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. 

    Tutorial1 - Create a project

    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:
    Tutorial1 - Seach path not found

    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.
    Tutorial1 - References Warning

    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

Wit the help of this web­site we will be able to test our Flu­or­ineFx server calls right out of Visual Stu­dio. That way we don’t have to touch Flex 4 yet to see if the pro­ject is set up prop­erly. To make this hap­pen fol­low these steps:
  • 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
Tutorial1 - Create a new web site

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:
FluorineFX Console

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:
Fluorine Console - First Test

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:
    Creating a new Flex Project

    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.
I hope this was help­ful to any­one. Leave me a com­ment if you think I for­got to men­tion something!
  1. Jah­Jah­binks
    May 18th, 2011 at 03:01 | #1

    Hi, thanks, really good tutorial.

    I just got a prob­lem when I finally run my Flex app, it says :

    Flu­or­ine Fault[RPC Fault faultString=“Failed to loc­ate the reques­ted type ServiceLibrary1.Sample” faultCode=“Server.Processing” faultDetail=“null”]

    Do you know why ?

    Thx

    • May 20th, 2011 at 14:37 | #2

      Hi Jah,

      Thanks! Hmm sounds like your Flex app is not able to find the Ser­vice Lib­rary. Did you make sure the port num­ber in your Flex App matches your Loc­al­host port num­ber?
      If that doesn’t help can you please paste a code snip­pet so I can see how you con­figured your remote object?
      Cheers,
      Dan

  2. rosh
    June 10th, 2011 at 03:33 | #3

    Hi,

    I am try­ing to set up Flu­or­ineFX with .NET 4.0 using Visual Stu­dio. Can you provide me some guid­ance on that. I have checked out the code from SVN but not sure what to do after that.

    Thanks!

    • June 11th, 2011 at 14:11 | #4

      Hi there!
      It should be the same pro­ced­ure as described in my tutorial. Which part is caus­ing you problems?

  3. rosh
    June 10th, 2011 at 03:34 | #5

    @rosh
    I meant Visual Stu­dio 2010.

  4. July 5th, 2011 at 23:02 | #6

    @Jah Jah
    Sounds like you may need to register flu­or­inefx as a man­aged mod­ule in IIS. Just stick this some­where in your web.config

  5. Fredi
    September 30th, 2011 at 08:51 | #7

    Hel­low, i have some prob­lems too with vs2010… The Flour­ine Tem­plate Pro­jects are not vis­ibles in New Pro­ject Wizard.

    NOTE: I Have vs2010 with span­ish languaje.

  6. dada
    December 28th, 2011 at 01:14 | #8

    everything is fine but Ser­vice lib­rary meth­ods are not shown.
    what could be the reason.

  7. Fran­cisco
    February 13th, 2012 at 09:11 | #9

    Hola buenas tardes tengo visual stu­dio 2010, las plaltil­las de flu­or­ine no se muestran, me podrias ase­sorar que debo hacer

    Fran­cisco

    • February 13th, 2012 at 18:42 | #10

      Sorry mate, no ablo espanol. I’d be happy to help you out in Eng­lish. If only I knew what you were try­ing to say, mate :)

  8. Fran­cisco
    February 14th, 2012 at 10:41 | #11

    Hi, I need to con­nect with Visual Stu­dio 2010 Flex4 by flu­or­ine, could you advise me please

    Francisco

  9. February 14th, 2012 at 17:05 | #12

    Hey Fran­cisco,
    I’ve only done it with MS Visual Stu­dio 2008 Express.
    But I would assume it’s pretty much the same. So which step of the tutorial seems to be different?

  10. Johan
    February 14th, 2012 at 21:30 | #13

    Hi Dan!
    Thanks for a good tutorial.
    Just like Fran­cisco I need to do this with VS 2010. How­ever, no Flourine-templates are provided for VS 2010.

    I have checked out and com­piled the .NET 4.0 source, but there is very litle doc­u­ment­a­tion on how to pro­ceed from there.

    Any chance that you can provide the code for your sample app?

    Johan

    • February 16th, 2012 at 19:21 | #14

      Hi guys,
      sorry that I can’t help you out much but I’ve never done it with VS2010. I always had the Express ver­sion and never bey­ond 2008.
      I’m sure Microsoft has changed more than just a few things. May I ask what’s wrong with using the 2008 ver­sion? It’s for free and it does the job. But if you really need to do it with VS2010 I’m not the guy to ask. Sorry but I’m just too busy with my job at the moment. Cheers, Dan

  11. Fran­cisco
    February 15th, 2012 at 03:42 | #15

    Hi, note that tem­plates do not appear in visual stu­dio 2010 fluorine

  12. zeke
    April 13th, 2012 at 18:07 | #16

    thanks,i make it~~

  13. zeke
    April 13th, 2012 at 18:08 | #17

    by the way , flu­or­ine does not sup­port vs2010 by default ~

  14. zeke
    April 13th, 2012 at 18:23 | #18

    hi,dan
    I found there is an easy way,add the end­point property

    instead of the chan­nel­Set property

  15. Aan­chal
    June 21st, 2012 at 17:41 | #19

    Hi
    could you sug­gest some­thing on Load test­ing of flex applic­a­tion using VSTS 2010.

    Please let me know if you have any know­ledge related to it.

    Thanks

  16. August 3rd, 2012 at 21:38 | #20

    Hey Dan,
    In our app we use Flex, .Net and SQL. We want to cre­ate a per­son­al­ized test envir­on­ment for every .Net developer where we have installed IIS 7 on his machine so that we will place all Flex related execut­ables from bin-release folder there. This way when Flex UI opens up (.html file from Flex being used as a web­site through IIS) then the debug­ging goes inside .Net code on that machine and .Net developer is able to debug his code effectively.

    Is that really pos­sible? We are try­ing to fig­ure this out since last 1 week but the prob­lem we are get­ting is that Flex is unable to cre­ate a con­nec­tion with .Net right from the first call.

    In our app we use services-config.xml and remoting-config.xml for con­nectiv­ity and We have placed them in WEB-INF/flex folder. The path in former cor­rectly points to http://localhost:80/Gateway.aspx. In Flex we are using AMFChan­nel class the end­point points to http://localhost:80/Gateway.aspx only. Then why cant we connect?

    Please sug­gest.

  17. Syed Sal­man Akbar
    October 5th, 2012 at 23:33 | #21

    @Shubhra Bhushan

    We faced a sim­ilar issue.

    http://stackoverflow.com/questions/12734141/website-using-fluorine-fx-borken-during-migration/12745038#12745038

    Turns out all i had to do was to make the run the app pool in clas­sic mode instead of integ­rated mode. the issue was fixed.

  18. Mohammad Samaha
    December 18th, 2012 at 22:39 | #22

    Dan, thank you so much for the tutorial.

    For all people ask­ing about VS2010, here is the solution.

    I have found a post talk­ing about Flu­or­ineFX for visual stu­dio 2010 tem­plates in Chinese :) link http://www.riafan.com/fluorinefx-template-for-visual-studio-2010/
    you can down­load the tem­plates from here:

    https://skydrive.live.com/?cid=85de418bbe50ed49&id=85DE418BBE50ED49!170 (you might have to try mul­tiple times to open the link).

    then copy the tem­plates to:
    C:\Documents and Settings\User\My Documents\Visual Stu­dio 2010\Templates\
    and cre­ate a new pro­ject (Flu­or­ine lib­rary and web­site)
    ——————————————————————————
    Another way (without the above tem­plates) is to open a blank solu­tion in VS2010, to to Tools > Lib­rary Pack­age Man­ager:
    then type (Install-Package flu­or­inefx) to down­load the Flu­or­ine Library.

    to down­load an example (source: http://nuget.org/packages/fluorinefx.sample):
    Type (Install-Package fluorinefx.sample).

    source: http://nuget.org/packages/fluorinefx

    Regards,
    MS

  19. kola
    December 25th, 2012 at 14:43 | #23

    Set the Value of “amfChannel.source ”

  1. No trackbacks yet.