IE, Local Playback, FLVs and Querystrings

I had a problem today with a Flash site converted to playback on CD-ROM where it would work fine in Firefox but FLV content would not playback in IE.

It turns out that for the web version if bandwidth had not been detected and tracked that I was appending a ?nocache=[random number] to the filename in order to make sure that the file would load even if cached. On the CD-ROM (or running directly from the hard drive) this would cause a “stream not found” error. Disabling this so that a querystring was not used solved my problem.

Receiving Object Data With .NET/Fluorine/Flex

UPDATE: Please note that this post is from January of 2007. While it may help you in some respects, I have not been working with Fluorine so I will not be able to answer any questions. Also, any SWF embeds or links to working code are no longer valid. I have moved from a personally managed WordPress install to WordPress hosting so the formatting has been affected as well. MXML is not displaying at all and I’ll try to fix this in the near future.

So I went through the very basics last time, and while I’m gonna keep it simple, I’m not gonna do a newbie style step-by-step like I did before. For this tutorial I’m going to create a little media library sample for you to work with to show how typed object data can be received via Fluorine.

To start out, download and install the latest version of the Fluorine Gateway. Zoli made some upates since my last posting that will allow your program to run on a shared hosting website. Worked for my last sample anyway. This also goes to show that the folks at The Silent Group are extremely helpful when issues arise with Fluorine. I don’t think the guy sleeps.

Setting up the project folder structure
Start out by setting up a project folder structure by creating a master project folder with a Dot Net and a Flex folder in it. Mine is D:\Projects\Flex\Fluorine Flex 2.

Setting up the Visual Studio project
This time we’ll use the new Fluorine ASP.NET Web Application template. Fire up Visual Studio and create a new web site project. Select the Fluorine template and set up a virtual web directory that points to the project folder’s Dot Net folder. For me it’s http://localhost/fluorineflex2/. If you tried the last tutorial, you’ll quickly figure out that this template saves you a LOT of steps. Once you’ve created the project, you only have to do one thing to configure Fluorine.

Configuring the Fluorine Gateway in Visual Studio
Open the WEB-INF/flex/services-config.xml file and modify the endpoint node to point to the virtual web directory location of Gateway.aspx. In my case it was http://localhost/fluorineflex2/Gateway.aspx. You should be able to copy and paste this url into a browser and a blank page should load without any error messages.

UPDATE
I was not aware of this, but I recieved an email from Zoli at The Silent Group and he notified me that the uri attribute does not have to change as long as the context root remains the same on the server you are deploying to. In this case if I’m developing on http://localhost/fluorineflex2/Gateway.aspx, and deploying to http://www.darbymedia.com/fluorineflex2/Gateway.aspx, then I can leave the uri attribute as it’s default: http://{server.name}:{server.port}/{context.root}/Gateway.aspx. You should still however be able to copy and past the actual URL of the Gateway.aspx file and the blank page should load without any errors. It’s a quick way to check for issues if you are not getting the results you want.

Setting up the Flex project
Start Flex Builder 2 and create a new Flash Data Service Project with the Root folder pointing to the Dot Net folder of your project directory (D:\Projects\Flex\Fluorine Flex 2\Dot Net) and the Root URL pointing to the virtual web directory for the Visual Studio project (http://localhost/fluorineflex2/). The Context root should be the final bit of the virtual web path (/fluorineflex2). Enter the project name (fluorineflex2) and use the Flex directory of your project folder as the location of your Flex project files (D:\Projects\Flex\Fluorine Flex 2).

If you need help with any of the stuff above please check out the previous tutorial.

Creating a C# compact disc value object class
To start out we’ll need a value object on the server side to pass back to Flex when requested. Let’s create a class called CompactDiscVO that has the properties, artist, title, and year.
[csharp]
using System;

namespace com.darbymedia.medialibrary.vo
{
public class CompactDiscVO
{
public string artist;
public string title;
public string year;

public CompactDiscVO(){}
}
}
[/csharp]

Creating a Fluorine Gateway service class
To start out, create a basic service that you can point to with your Flex RemoteObject. We’ll also include a method called getCDVO that will instantiate and return a CompactDiscVO object.
[csharp]
using System;
using System.Web;
using com.darbymedia.medialibrary.vo;

namespace com.darbymedia.medialibrary.service
{
public class MediaLibraryService
{
public MediaLibraryService() { }

public CompactDiscVO getCDVO()
{
CompactDiscVO cd = new CompactDiscVO();

cd.artist = “Redd Kross”;
cd.title = “Third Eye”;
cd.year = “1990″;

return cd;
}
}
}
[/csharp]

Now we can move on to Flex Builder.

Creating a corresponding Actionscript compact disc value object
In Flex Builder 2 create a CompactDiscVO class. I’ve added a toString() method for demonstration purposes (good for debugging too!). Note that the namespace/package path and class name are the same. This is not absolutely necessary but makes sense here.
[actionscript]
package com.darbymedia.medialibrary.vo
{
public class CompactDiscVO extends Object
{
public var artist:String;
public var title:String;
public var year:String;

public function CompactDiscVO(){}

public function toString():String
{
var s:String = “[CompactDiscVO]“

s += “\nArtist: ” + artist;
s += “\nTitle: ” + title;
s += “\nYear: ” + year;

return s;
}
}
}
[/actionscript]

Building the main MXML application file
This time I’ve decided to use Actionscript only for my RemoteObject file. This way you can compare with the previous tutorial which used an MXML RemoteObject if you want. On creationComplete, the initApp() method instantiates the remote object with the destination, which is the destination name used in the services-config.xml file, the source, which is the namespace and class path of the C# service class we created, and listeners for result and fault events. Here is the MXML:

[xml]

[/xml]

At this point we’re calling the getCDVO method on the service immediately. roResult will trace out information to the console when run in debug mode. Go ahead and do that and you’ll get the following:

[SWF] /fluorineflex2/fluorineflex2/FluorineFlex2-debug.swf – 628,788 bytes after decompression
[object Object]
Redd Kross
null

Interesting. In roResult, our first trace of event.result gives us [object Object] so obviously we’re getting an Object type, but our CompactDiscVO.toString() method is not kicking in. Our second trace of the event.result.artist property, Redd Kross, shows that our data came through but when we try to put it into a typed variable as CompactDiscVO for our third trace we get null. So we are getting data back but it’s not typed correctly. It’s just a generic Object with properties.

To force the correct mapping you have use the flash.net.registerClassAlias() method. You pass it the full namespace and class name of the server side class as a string and the Actionscript class you want it to map to, like so:

flash.net.registerClassAlias(”com.darbymedia.medialibrary.vo.CompactDiscVO”, CompactDiscVO);

I put this in the initApp() method.

Now our MXML looks like this:
[xml]

[/xml]

Run this in debug mode and you can see that our first trace of event.result gives us the toString() output of the CompactDiscVO class, our second trace of event.result.artist gives us Redd Kross, and our third trace of the typed variable, cd, prints out not null, but the toString() output as well! Pretty cool!

Doing something with the content
Now let’s put this data into display items. I’ve added some labels and input fields to hold the data, a button to trigger the return, and an alert for any faults. I’ve put the call to the remote object’s getCDVO in the button’s click handler this time. Check it out:
[xml]

[/xml]

Check it out here.

Sending is easy…next time we’ll do that.

How to Set Up .NET Remoting with Flex 2 and Fluorine

UPDATE: Please note that this post is from January of 2007. While it may help you in some respects, I have not been working with Fluorine so I will not be able to answer any questions. Also, any SWF embeds or links to working code are no longer valid. I have moved from a personally managed WordPress install to WordPress hosting so the formatting has been affected as well. MXML is not displaying at all and I’ll try to fix this in the near future.

• • Create a project folder. I called mine Fluorine Flex.
  • Inside this folder create a folder called Dot Net for the .NET code and a folder called Flex for the Flex code
  • Start Visual Studio. I’m using Visual Studio 2005 Standard Edition
  • Select File -> New -> Web Site
  • In the dialog box, select Empty Website
  • In the language dropdown select C#
  • In the location dropdown section select http
  • On the right select Browse
  • In the new dialog on the left select Local IIS
  • On the top right select Create new virtual directory
  • Enter an alias name. I entered fluorineflex.
  • Browse and select the Dot Net folder in your project folder and select OK
  • Now select the virtual directory you just created and select OK
  • In the Solution Explorer, right-click the project icon and select Add Reference
  • Under the .NET tab locate and select Fluorine and select OK
  • Right-click the project icon and select Add New Item
  • Select Web Configuration File. Leave the name as is and select Add
  • In the system.web node of the new Web.config file add the following:[xml][/xml]
    and save.
  • Right-click the project icon and select Add Item
  • Select Web Form and name the file Gateway.aspx
  • Right-click the project icon and select New Folder. Name it WEB-INF.
  • Right-click the new WEB-INF folder and select New Folder. Name it flex.
  • Right-click the new flex folder and select Add New Item.
  • Select XML File and name it services-config.xml.
  • Open the new services-config.xml and paste the following content below the initial xml tag:
    [xml]

    *

    [/xml]

  • In the endpoint node change the uri property to point to Gateway.aspx in the virtual directory that you created. In my case it’s uri="http://localhost/fluorineflex/Gateway.aspx".
  • Download and install Flex Data Services 2 Express from the Flex download page. No serial number is neccessary for development work. (Not necessary – Thanks Richard!)
  • Start Flex Builder 2.
  • Select File -> New -> Flex Project.
  • Select Flex Data Services.
  • Select Compile application locally in Flex Builder.
  • Select Next.
  • Uncheck Use default local Flex Data Services Location.
  • In Root folder select Browse and select the Dot Net folder in your project folder. For me it was D:\Projects\Flex\Fluorine Flex\Dot Net.
  • In Root URL enter the path to the virtual directory created earlier. In my case it was http://localhost/fluorineflex/.
  • As far as I can tell Context root should be the last folder name of your virtual web directory. Mine was /fluorineflex.
  • Select Next
  • Uncheck the Use default location box and select the Flex folder in you project folder. In my case it’s D:\Projects\Flex\Fluorine Flex\Flex.
  • Select Finish
  • In Visual Studio, right-click the project icon and select Add New Item.
  • Select Class and name it FlexService.cs. (You can name the class anything you want at this point. I’ll use FlexService.)
  • When prompted to put the file in an App_Code folder, click Yes.
  • At this point you’ll only need to “use” System and System.Web, but it won’t hurt to leave the other classes.
  • I’ve cleaned up mine and given it a fancy namespace (com.darbymedia.com.flex) to look like this:
    [csharp]
    using System;
    using System.Web;

    namespace com.darbymedia.flex
    {
    public class FlexService
    {
    public FlexService() { }
    }
    }
    [/csharp]

  • Add a function called echo and have it return a message that is sent and our class looks like this:
    [csharp]
    using System;
    using System.Web;

    namespace com.darbymedia.flex
    {
    public class FlexService
    {
    public FlexService() { }

    public string echo(string msg)
    {
    return “echo(msg) msg: ” + msg;
    }
    }
    }
    [/csharp]

  • Return to Flex Builder 2
  • Create a RemoteObject with the following properties:
    • destination: fluorine. This is the destination set up in the services-config.xml file.
    • source: com.darbymedia.flex.FlexService. This is the namespace and class name for our service.
    • result: roResult. This is method to receive the return value. We’ll do this in a minute.
    • fault: roFault. This is the method to receive any errors. We’ll make this in sec too.

    Adding an input field, submit button, output text area and a bad call button your mxml will look like this:
    [xml]

    [/xml]

  • Now to create the roResult and roFault methods as well as button handlers. They look like this:
    [xml]

    [/xml]

  • Now that we have our RemoteObject set up we can call any method within our service class directly.

I’ve finally gotten the bug to get this Flex thing going and my only stumbling block for really useful applications was that for server-side stuff I’m way more adept with Visual Studio .NET and C# than I am with PHP. I had been looking for a solution and found WebOrb, which requires a server install and isn’t free for AMF3. Since I use shared hosting this is really not an option. Then I found Fluorine created by Zoltan Csibi at The Silent Group which is open source after a bit of teeth gnashing easy to set up. After finding Sam Shrefler’s excellent examples I decided to put something together something that was a bit more basic than his Cairngorm examples (Not that those weren’t basic and very helpful!).

I’m going to start out with something extremely simple just to demonstrate the setup. The service will basically echo back any string you send to it. I saw this morning as I got the latest update that it installs a Visual Studio project template that is probably the best way to go when setting things up, but I’ve decided to go ahead and go through the steps of setting things up manually so that hopefully the purpose of the elements is more clear.

Download and Install the Fluorine Gateway
Go to the Fluorine download page and download and install the Fluorine Windows Installer.

Setting Up Project Folders

Creating the Project in Visual Studio .NET

Configuring the Project in Visual Studio .NET
I gleaned this mostly from Setting up a Flash Remoting-enabled ASP.NET application at the Fluorine site.

The next part is from the Flex2 basic setup section within Using Flex2 and AMF3 on the Fluorine site.

UPDATE
I was not aware of this, but I recieved an email from Zoli at The Silent Group and he notified me that the uri attribute does not have to change as long as the context root remains the same on the server you are deploying to. In this case if I’m developing on http://localhost/fluorineflex/Gateway.aspx, and deploying to http://www.darbymedia.com/fluorineflex/Gateway.aspx, then I can leave the uri attribute as it’s default: http://{server.name}:{server.port}/{context.root}/Gateway.aspx.

Configuring the Flex Project

Now we’re ready to ROCK!

Creating a Fluorine Service in .NET

Accessing the Service via Flourine in Flex

Now the entire mxml file looks like this:
[xml]

[/xml]

Give it a whirl! Type a message and submit it. Then click the bad call button to see what happens when an error occurs. Here’s what it’s supposed to look like.

This is super basic but it should get you up and running. Next I’ll be sending and receiving objects, but something tells me you’ll figure that out on your own!

The Elusive drawFocus Property

Yesterday I was dealing with problem where a TextField with no border on a white background was showing a faint green or blue border, not when clicked, but when tabbed to.

I searched and searched for the issue and came up empty, but of course my colleague Mathew “RayRay” Ray found a solution in seconds.

Best as I can tell, between Halo styling and FocusManager this problem is occurring. It can be solved by using:

_myTextField.drawFocus = false

Once I had drawFocus, a search on it led to _myTextField.drawFocus = “” as well.

I can’t find any official documentation on drawFocus anywhere and searches like: actionscript focusmanager blue rectangle were not turning anything up. Hopefully once this page is indexed it will help someone!

SWFObject: Use It DAMMIT!

Or at least use something! I’m continually seeing professional level sites that directly embed swfs and to my dismay, display “click to enable” messages in IE. At this point it really drives me up a wall.

Get a clue. News Alert: Due to some silly lawsuit, in IE when you embed a swf in a website the tag must be written by an externally linked javascript file. This is well known. You’re a professional. FIX IT. JEBUS.

I’m not gonna embarrass anyone by including examples but, don’t show your fancy blinking, flickering flash or worst yet, provide a link to your client’s flawed embeds and try to impress anyone. You’re doing your clients and your potential clients a disservice since they probably don’t understand.

Be a pro. Do it right. Visit everyone’s friend Geoff Stearns at Deconcept, get SWFObject and USE IT.

Good Riddance 2006

In what started out as an exciting, hopeful, successful year ended with a flop – just barely dragging over the finish line. Other than the great music I saw and the new friends I made, career-wise things have just not panned out over the last eight months.

What 2007 holds is yet to be seen. I’m looking for a new ActionScript coder job in the Atlanta area which hopefully will put the excitement, hope, and success back into my future. If anyone has any leads please let me know! (brentpub [at] darbymedia [dot] com)